Using Flash for background animation

April 29th, 2007 at 8:47 pm (CSS)

I was working on a website recently that needed to display Flash animation beneath normal HTML content as part of its visual treatment. In the course of developing this, I found out that embedded Flash objects inserted into a HTML document will be displayed above all other content.

The easiest way to get around this is to enclose the Flash object in a another element, for example a <div> . This enclosing element will then have a value for z-index that is lower than the content that should be displayed above the Flash object.

PLAIN TEXT
HTML:
  1. <p id="animation" style="z-index: -1">
  2.     Flash object markup
  3. </p>
  4. <p id="content" style="z-index: 1">
  5.     Actual Page Content
  6. </p>

The next step is to position the content and Flash object, there are 2 ways to "layer" the 2 elements on top of each other. The first method is to use absolute positioning, the second is to take advantage of negative margins. In my case, I went with the latter.I will pull div#content up towards the Flash object by declaring a negative top margin for #content.

PLAIN TEXT
HTML:
  1. <p id="animation" style="z-index: -1">
  2.     Flash object markup
  3. </p>
  4. <p id="content" style="z-index: 1; margin-top: -400px">
  5.     Actual Page Content
  6. </p>

In the course of testing, the page is rendered as intended in Internet Explorer 6/7 and Firefox. However, the Flash object will be displayed above content in Safari when any text is selected or the page is scrolled by the user. To get around this issue, enable transparency for the Flash object. Just take care to position content away from the non-transparent parts of the Flash animation or it will be hidden from view in Safari.

Comments

Internet Explorer 6 and 7 on OSX with Parallels

April 11th, 2007 at 9:47 am (Apple, Web)

I finally bit the bullet and got my own shiny new copy of Parallels for Mac. It helped that I got an email from the company containing a link to purchase the software at a discounted rate.

So I've been putting it through its paces for the past few weeks and its been great! No more having to do website compatibility checking for Internet Explorer 6 and 7 on different PCs. I just need to fire up Parallels and boot up the Windows XP images with the browser installed. You do need to have at least 2 GB ram in order to have both the VM and OSX running smoothly.

Comments

singapore.rb meeting in Central@NLB

April 5th, 2007 at 11:34 pm (Rails, Ruby)

The next singapore.rb meeting will be held on the 19th of April 2007 in the Central Lending Library. The National Library Board of Singapore has kindly provided the use of one of their meeting rooms (complete with WIFI). The (tentative) agenda for the meeting is as follows:

7:00pm Rails Plugins Showcase: Dead simple AJAX and Form testing in Rails - Choon Keat
7:30pm FxRuby and ScreenSvr - Sausheong
8:00pm Q&A, discussions
8:30pm End of meeting

My thanks goes out to the NLB's Ivan Chew for facilitating the use of NLB facilities for a trial session, as well as to Choon Keat and Sausheong for making the presentations.

Comments