Field Notes Inside an Integrated Communications Agency

If you've been into the development game for any time at all, chances are you've encountered the famed Suckerfish dropdown navigation system at some point. I have successfully employed this chunk-o-brilliance - and it's successor, Son of Suckerfish - more than a few times. I recently had cause to implement dropdown navigation over Flash content, and was dismayed to see Safari comPLETEly freak out and throw a tantrum, causing my dropdown menu items to flicker in and out of existence. After much poking about, I decided that Safari must just not handle z-index as well as other browsers. I set up a little javascript function to detect the user's browser, and point to a separate CSS file if Safari was encountered.

It was only after pausing for a moment of silent reflection for all those users who would never see my handy navigation that I thought to try to find a similar case online. I started at the top of my bookmarks. Four sites in, and right there, at the top of Adobe.com , was my answer.

In order to make all other browsers behave when rendering your dropdown nav over Flash content, all you have to do is a) make use of the wmode tag for your Flash div, setting it to either transparent or opaque, and b) assign a z-index value of 2 to the block-level element containing your dropdown menu. Safari balks. To make it behave, you have to burrow down into your nav CSS and add z-index tags to every nested element, including the links:

#navdiv {
    z-index:2;
} 

#navdiv ul {
    z-index:3;
}

#navdiv ul li {
    z-index:4;
}

#navdiv ul li ul {
    z-index:5;
}

#navdiv ul li ul li {
    z-index:6;
}

#navdiv a {
    z-index:7;
}

Presto! Change-o! Safari's nasty flicker is tamed. Lesson to be learned here: take advantage of Firebug , and don't worry about reinventing the wheel. I was able to find a working example of what I wanted, and Firebug gave me the behind-the-curtain insight needed to make it happen. If you are not currently in the know on the incredible development resource that is Firebug, I implore you - drop everything and go get it!

As Flash sheds the last vestiges of its prepubescence and roars into adolescence, I am seeing little evidence of the social anxiety and self-image crises that have come to define these awkward years. It seems my favorite little App. has benefitted from some good parenting, and is growing into a strapping young development platform. Like an anxious parent watching his daughter get ready for her first school dance, I have found myself stabbing the Web for answers on how better to communicate with Flash's new, deeper voice: Actionscript 3.0. There are some major code differences that can be daunting at first, but all you really have to do is break the ice and you will find that, while a little uncomfortable at first, you relate better than you might think.

With Flash Forward fresh in my mind, here are some of the major arterial differences you will encounter as you navigate the migration from AS 2.0 to AS 3.0:

• More code. Based on ECMAScript, ActionScript 3.0 is compliant with the ECMAScript Language Specification, Third Edition. This means that the syntax is more closely aligned with traditional programming languages. A little more verbose, the extra typy-typy actually serves to simplify the language. Are you down with OOP? Our Python jockeys are loving it.

• Stricter. While this may be initially more frustrating for those coming from the front-end world, to the seasoned programmer this is a welcome breath of fresh air. Train yourself. Declare data types and function return types.

• Some things are just...plain...gone. setProperty(). attachMovie()? createEmptyMovieClip()?? swapDepths()?!?! Oh crap. _global is gone. _level is gone. I'm sweating now. But we can get through this. We can. It's for the greater good.

• No more stage coding. Actionscript may no longer be applied directly to buttons and movieclips on the stage - on() events are, as they say, l'histoire. All AS3 events are handled via the EventDispatcher, using listeners (yes, just like AS2 event listeners - take comfort). Frame actions are still cool. 

• Display Objects. Movie Clips are now instantiated with new():
     var mc:MovieClip = new MovieClip();
Depth management of display objects is now accomplished with a very intuitive parent/child display list syntax.

There is much more, but if you take the time to read through the information sprinkled throughout the above list, you should find yourself well-equipped to jump in and get your feet muddy. Actionscript 3.0 is faster, more consistent and much more powerful. Wrap your mind around the nuts and bolts of Object-Oriented Programming - you will thank yourself. And be prepared: because AS3 does not play well with AS1/AS2, you will find yourself straddling the fence in your project work. This is almost certain to prove frustrating and tedious at times; take comfort in the fact that you are not alone, and know that, as a wise old man used to tell me, we are building character...

Additional Adobe love:

AS 3.0 Overview  

Tips for Learning Actionscript 3.0

OOP Primer