During my internship I created a videolibrary in flash. This videolibrary is going to be included in a open-source project called Sakai.
Because of legal obstruction concerning the law in the UK it is nescessary for public websites to be accessible for screen readers.
So I was allowed to use flash but specific components must be done in HTML and javascript.
The extra advantage of this is that the maintance in the future becomes easier this way.
As you can see on this screenshot below, there are two components who need to be on top of the flash movie.
The first is the category selector which is a combobox, the other one is a control to search inside the video library.
How do I accomplished it?
First I created all the flash and when that was finished I added the HTML components. I arranged them on top of the SWF movie using a higher z-index then the flash movies z-index
What? z-index?
You can compare z-indexing with layers but then in HTML.
Below I illustrate how it works, as you can see the first layer is the 0 index, the next layer on top is the 1 st index etc…
When you gave the HTML components div a higher z-index then the SWF movie it will allready work. The development of this videolibrary was done on a Mac, when I tested it on a windows machine I noticed that my components were nog shown when I loaded the page. After some research I discovered how to fix this.
How?
add a param to the SWF movie with this value
<param name="wmode" value="transparent">
By adding this parameter you enable the flash to be transparant and to display the elements on top of it,
this fixed the problem that occured when I tested it on windows
Lode is a Creative-Geek with passion for Graphic design , he is also into the web programming "stuff" like Adobe Flash,air and Flex . Lode loves to learn and loves to share knowledge with others.Follow Lode on http://twitter.com/stealfish