Category: HTML

opacity vs rgba

This transparency thing is very useful, esoecially to desginers. There are two methods for setting the transparency of an element with your stylesheet.

First use the opacity property. For example imagine you have a paragraph. The following would make the paragraph transparent. This would include the entire element, text and background.

p {
opacity:0.5;
}

The other method is to assign an element an rgba color value. Any element that can be assigned a color value using a hex color like #FF0000, can also be assigned a color value with rgba. For example:

p{
color:rgba(255,0,0,0.5);
}

In this example the color of the text would red 50% transparent. The first three values, with ranges of 0 to 255, represent the amount of red, green and blue. The last value, with a range of 0 to 1, represents the amount of transparency.

Using rgba you can transparency any feature of an element.

The difference between the two is, using opacity will take the element with it’s current rendering and display it transparent at the opacity value. rgba on the other hand selts the color value of any feature of an element to include a transparency level.

SWFObject

SWFObject, if you haven’t heard of it already is a really great little javascript that simplifies the process of embedding your swf files in an html page. This is a huge improvement over the default systems provided Publishing from Flash or Dreamweaver.

The method provided by the Publish settings in Flash and Insert > Media > Flash in Dreamweaver work just fine, but they leave you with a huge Javascript mess in your HTML page. SWFObject provides a clean and organized system that works well and provides a few extra perks.

You can download SWFObject here: http://code.google.com/p/swfobject/

SWFObject is contained in a single small Javascript file. I have been using the latest version (at the time I wrote this it was 2.2) and it seems to work well.

You can write the code for yourself following the documentation on the site listed above. Or use the code generator here: http://www.bobbyvandersluis.com/swfobject/generator/index.html

I had some trouble getting Flash to display 100% width and height. But this was sorted after a short Google search. Turns out the following styles are required:

html, body {
 background-color: #616264;
 margin:0;
 height:100%;
 overflow: hidden;
}
#flashcontent {
 height:100%;
}

Note, without overflow:hidden you end up seeing the scroll bars and the page scrolls about 5px. This was very confusing, you would figure that 100% height would make everything the size of the browser rather than a little larger?

Testing navigateToURL locally

I noticed that navigateToURL (this replaces getURL in AS2) doesn’t seem to work locally, if you want to open a link in the same window (_self). I found this note on the Adobe site. It seems that you need to set “allowScriptAccess” to “always” in the HTML parameters. This needs to be set in both the param tags as below: <param name=”allowScriptAccess” value=”always” /> and in the embed tag: <embed allowScriptAccess=”always” />

SWFObject

This is a great tool for embedding swf’s into your HTML pages. This is an alternative to the markup provided by Adobe via Flash or Dreamweaver. It also circumvents the need to “Activate Flash” on Windows.

I prefer this over the default scripts which often cause problems with the HTML code on the page.

It provides a few extra features also. Like ability to get variables from the URL string for the current page. It can also check the Flash version and provide a link to get the current version of Flash.

http://blog.deconcept.com/swfobject/