Detect Flash Dimensions (Width & Height) via Javascript

One of my contributers to my Lightbox++ post (meujovem), had asked me if it was possible to detect Flash movie dimensions automatically. So I thought to myself this would be a good feature to add to Lightbox++ so you don’t have to specify the width and heights in your URLs when using Flash movies with the script. I did some research and messed around with a few test scripts, and I found out it is in fact possible.

So what did you find?

Digging around I found some Flash documentation on using built in Flash methods to obtain such details–and many more. For this example, we’re only going to be using the TGetProperty Flash method. This method accepts two parameters, target and property. We’re going to be using the 8th and 9th properties which return your width and height. I will more than likely implement this into Lightbox++ if I find out, that this is a pretty fail safe method for detecting the width and height. If any of you readers know of any drawbacks to using these Flash methods, I would like to hear them.

Example

Click Here For Dimension Information

Ok, So Tell Me More

If you take a quick gander at the object & embed tags in the source of this page for the example movie above, you will see that I have the width set at 300 pixels and the height set at 150 pixels. You’re probably wondering if I have my embed tag set to 300 by 150, then why did the script return 350 by 172? The example movie that I created above is actually 350 by 172, despite what my embed tags read–I did this for the sake of this example. The TGetProperty Flash method is behaving exactly the way it is supposed to–returning the true size of the main timeline.

Usage

With a myriad of different browsers these days, they each have different ways of being able to find the specified Flash object programmatically to be able to send and receive information. I’ve whipped up a quick script below, which goes either in the header of your document, or in a linked javascript file.

1
2
3
4
5
6
7
8
9
10
11
12
function getFlashObj(movie){
   if (window.document[movie]) {
      return window.document[movie];
   }
   if (navigator.appName.indexOf("Microsoft Internet")==-1) {
      if (document.embeds && document.embeds[movie]) {
         return document.embeds[movie]; 
      }
   } else {
      return document.getElementById(movie);
   }
}

Next, you’re going to need to use the following script to talk with your Flash object to retrieve dimensional information via the TGetProperty Flash method. Below find a quick example, which should give you enough information to use in your own scripts. This also belongs in the head tags of your document, or in the same linked javascript file as the above script.

1
2
3
4
5
6
function getDimensions(movie) {
   var movieObj = getFlashObj(movie);
   var width = movieObj.TGetProperty("/", 8);
   var height= movieObj.TGetProperty("/", 9);
   alert("The current dimensions for the Flash Object ("+movie+") are "+width+" in width and "+height+" in height.");
}

Now we’re ready to roll with embedding your Flash movie into your document, and using the above functions to obtain dimensional information from your Flash object. Here is what my object and embed tags look like:

1
2
3
4
5
6
7
8
<object id="detectme" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0">
<param name="movie" value="flash/detect.swf">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed src="flash/detect.swf" name="detectme" swliveconnect="true" 
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
</embed>
</object>

Here you’re going to notice a few things. First, you need to give your object tag an id attribute, in this case “detectme.” Next, you will need to define the param “allowscriptaccess” and I will advise you to use the value “samedomain” as I’ve done here to offer atleast a little bit of security. In your embed tag, you will need to give it a name attribute, and this has to be the same as the id attribute in your object tag. Finally, you need to give your embed tag the swliveconnect attribute and set it’s value to true. You will also notice that I’ve left out width and height attributes, you can choose to do this as well, or fill in values if you wish–the script will still return the actual size of your Flash object.

Lastly, we’re going to create a link with a javascript function to tie this all together, which can be seen below.

1
<a href="javascript:getDimensions('detectme');">Click Here For Dimension Information</a>

Use the javascript call to fire the getDimensions function that we defined earlier, and you’ll notice we’ve also fed it the argument of ‘detectme’ which is the object we want dimensional information for. Once you click that link you should get an alert displaying the dimensional information.

So there it is, using the TGetProperty to obtain dimensional information for your Flash objects. If this works out well enough, I will implement it into Lightbox++ so one does not have the specify the width and height attributes in your links. Again, if anyone knows any drawbacks to this method I’m all ears.

Download Example



If you wish to download an example for this post, you can do so here - Download Example

*NOTE: For the above example to work you will need to upload your files to your hosting service, as they will not work correctly testing from your PC.

Share This

Leave a comment

Please be polite and on topic. Your e-mail will never be published.