I am reviewing the mac version of this software, I haven’t looked at the PC version as I swore off PCs years ago. I assume both versions and their GUI are identical.

Upon launching the app you are presented with a non-traditional application. It has no OS chrome, sort of looks like something created in AIR, but dated - sort of like a classic mProjector app (for those who remember mProjector). The applications footprint is small but it is packed with options. Almost overwhelming at first. The app does have some nice features, but the GUI design just doesn’t do them justice.

For this review I decompiled three swfs, a compiled ActionScript 3 project with no timeline, a timeline based project that has some Actionscript code spread out on the timeline, and a Flex project (essentially a complex ActionScript 3 project with no timeline so I won’t write my review of this, I do make a few comments and suggestions about decompiling the Flex framework below).

ActionScript 3 project with no timeline

The ActionScript 3 project I chose to decompile is very complex. 110 classes, thousands of lines of code, and not a single timeline in site (just how I like it).

The first step is to select the source swf as the instructional text states, easy enough, I select the “…” button next to the SWF file name field. Not sure if “…” is the best labeling, I know what it means, not sure if everyone will. Next I select the path of where I want the decompiled FLA to be saved. Again, I select the “…” button next to the FLA file name field. By default it chooses the same directory as the SWF and appends _conv to the file name. The problem I have with the GUI is it doesn’t show you the full SWF or FLA path. If you don’t click on the “…” browse button you have no idea where the FLA will be saved.

Next I have to select my decompilation settings from a massive list of about 70 options. I wasn’t kidding when I stated the interface was a little overwhelming. Luckily they have a settings filter so you can drill down to the exact settings you are looking for. It still doesn’t hide the fact that there are 70 or so options. All of these options have a default selection which I assume are the most common selections.

Some of the options are fairly straight forward such as File Format and SWF Version. However, some of the options are very confusing. The one that confused me the most was the ActionScript 2.0 toggle? The website told me that this app can decompile ActionScript 3.0 swfs, but the toggle label says Actionscript 2.0 and is checked by default? If I uncheck this does it mean it will decompile to Actionscript 3.0 or will it think it is ActionScript 1? The contextual help for this toggle doesn’t mention anything about ActionScript 3. “Toggle ActionScript 2.0 decompilation on/off. If not enabled ActionScript 1.0 will be generated”. This option should use a combo box and the combo box should populate itself based on the SWF Version option selected above. Obviously if the user selects Flash Player 6 SWF Version the ActionScript toggle shouldn’t offer the opportunity to select ActionScript 3. After playing around with this toggle I came to the conclusion that it doesn’t really do anything, AS3 is retained no mater what.

Another confusing option is in the SWF version combo box. One of the options is “same as FLA”, I know what they are attempting to do here but not everyone is going to know that Flash MX 2004 is Flash Player 7.

Personally the Page options section I feel is not needed. It’s been a while since I have actually used the Flash IDE but I am pretty sure it remembers settings from the last time it was used. Do I really need to select if I want rulers visible when the file opens? There are way too many options in here for the average user, just trying to scale this massive list of 70 options down. Or maybe move these options to an optional options section that doesn’t show by default. KISS - Keep it Simple Stupid.

Lastly, the contextual help on a lot of the options are completely useless. For example, one option label is “Decode all classes as dynamic”. The contextual help for this option is “Decode all classes as dynamic”. I know what this means, does the average user?

I think a few very important options have been left out. One would be an option to not decompile Flex Framework classes, as you will see below in my Flex project decompilation there are a lot of excess classes decompiled for no reason. I guess there is a reason if you don’t have the Flex framework already on your machine. How about an option to create a swc of the Flex framework so the user doesn’ t have to wade through excess classes?

Another nice option would be export ActionScript only. Some of us don’t care about FLAs. Edit, I just figured out that you can extract only the AS, you have to select the Extract button and uncheck everything but scripts.

OK, enough of that, lets take a look at the decompilation results, after all that is what is important here.

First off, the decompilation was fast, less then a second which is very impressive. Once the compilation is complete it automatically opens the decopiled FLA in the Flash IDE (this is one of the 70 options you select). The decompiler created a project file and the project panel is opened automatically. I do not have a copy of Flash CS4 yet, I wonder if the gProject panel would still work. I would assume the gProject panel is backward compatable, if not there would be a lot of complaints by now I’m sure.

All 110 classes in my ActionScript project were decompiled and all of the class paths (directories) are correct. All the code is representative of what it was pre-compile with a few notable differences.

1. All local variables do not retain their names. For example, if I had

var foo:String = “bar”;

in my code, after it is decompiled the var looks like

var loc1:*;
loc1 = “bar”;

I understand the renaming, the compiler changes the name of  local vars to something representative to their position in memory allocation and Trillix is masking those unreadable names to something that is somewhat readable. What I do not agree with is the formatting, variable defined on the first line, value assigned to it on the second line. Pre-compilation it was all in one line.

Also vars which aretyped as String pre compilation are typed as a wildcard (*) when decompiled unless you implicitly cast the value to whatever you typed it as. For example:

var foo:String = String(bar);

will decompile to this:

var foo:String;
foo = String(bar);

Does anyone know if the compiler does this after it validates the type upon compilation, or is the decompiler being a little lazy? Interestingly if you type your var using as:

var foo:String = bar as String;

it will decompile to:

var foo:*;
foo = bar as String;

not cool.

Lastly, all of the local vars are moved to the top of the method. If your code look like this before compilation.

private function foo(bar:String):String {
     if (bar != ‘local’) {
          var thing:String = String(LoaderInfo(OS.instance.root.loaderInfo).parameters.thing);
          return thing;
     }
     return bar;
}

It will look like this after decompilation

private function foo(arg1:String):String {
     var thing:String;
     thing = null;
     if (arg1 != ‘local’) {
          thing = String(LoaderInfo(OS.instance.root.loaderInfo).parameters.thing);
          return thing;
     }
     return arg1;
}

2. Along the same lines as above, all method arguments names are changed to arg1, arg2, etc. The good thing is method arguments keep their proper typing and are not wildcarded like the local variables.

3. Oddly enough all class level variables are moved to the bottom of the class, again a personal opinion, I prefer them at the top. Good news is, class level variables retain their original name and typing.

4. All import statements are wildcarded, again, not sure if this is something the compiler does. In AS2 this would have been a larger issue as all classes in the wildcarded package would be compiled into the swf. In AS3 classes are only compiled into the swf if they are instantiated. So even if you import flash.display.* doesn’t mean that Loader is available at runtime anywhere in your compiled movie, you actively have to instantiate Loader by calling new Loader() somewhere in your code. From a personal standpoint I have seeing wildcarded imports, just seems lazy and sloppy. I’m sure others will disagree.

5. And of course, comments are not decompiled. This is because comments are stripped out during the compilation process.

6. Lastly, all for loops are converted to while loops (for each loops remain for each loops). This is the same as AS2, the compiler converts all for loops to while loops at compile time, not sure why, but I am sure there is good reason.

All and all I am very impressed with the decompilation of my Actionscript project. I was able to recompile my project again based on what was decompiled. The only issue I ran into was when a swc was compiled against, obviously the decompiled version would have no reference to the swc used at compile time. Most of my code issues mentioned above are minor and of a personal nature. The UI issues I mentioned are more severe and I hope are updated in a future release.

 Timeline Based Project with Actionscript 3 On Multiple Keyframes

Since I don’t spend a lot of time on the timeline this part of the review will be quick. Again, the decompilation of the swf was very quick. Less than a second. Once the decompilation was complete the Flash IDE opened and there was my FLA. The timeline, including my tween were completely restored, however my layer names were dropped (expected, the layer names are not compiled into the swf).

The big problem is all my timeline actionscript code was gone. Or was it?

The decompiler, actually the compiler does this behind the scenes, a class file is created for every display object and the class is linked to the display object in the library. This could be very confusing for a flash animator who doesn’t use a lot of code, and has never used external class files. I couldn’t find an option that dropped the actionscript back onto the timeline. That would be ideal.

Conclusion

I am very impressed with the output of the decompiled code. It is clean and readable. I have a few issues with how variables are declared (see above). With all the options in the GUI I wish there were more code preference options. I really have an issue with the GUI. It looks like they tried to jam too many features into a widget type design. Personally I think the design is a little dated and should have more of an applicationesque look to it.

All in all I am impressed. I will most likely use this application on a reglular basis.

Once in a while I find myself in the Flash IDE, mainly because I am working with an artists files, or I need to set up something on the timeline with document classes, or templated swfs that designers can base their work on. What I hate is the lack of compiler options in the IDE. Why can’t some of the command line compile options be available in the IDE?. Simple options like -load-externs, -link-report, externs, -external-library-path, -include-libraries, -includes, -library-path, -runtime-shared-libraries, and -source-path (to name a few).

With CS3 you can place a swc in the same directory as the FLA and use that for compile time checking and excluding classes in the compiled swf but this doesn’t work in most workflows. Why can’t I point at a shared swc outside of my project? A lot of our work runs in a global framework and for the most part designers don’t care about the framework or when it changes. If the designers could point at a swc on the server that can be updated at any time or in one common directory pulled out of source control they would recieve the updates and compile time checking without even knowing. You should be able to point to any swc or even a swc directory (again, like in Flex Builder).

Flash 8 had exclude.xml at least, even that would be a nice touch if that was offered again. I haven’t been able to find if any of this has been added to CS4, most of the discussion is around the visual tools. I’m ok with that, the designers deserve the love, the last release was all about the developer, AS3. Just curious if anyone knows if the compilation and workflow in the IDE is any better? I know about XFL, and I am excited to start playing with that. I already have a few ideas for workflow improvements.

 Also, Adobe if you’re reading this, can you please add an omit trace statements option in the command line compilers. I know it can be done with ANT and some RegEx trickery but it shouldn’t be that difficult. </endOfRant>

The other night I went online because my wife and I decided we wanted to order from Red Brick Pizza. Originally the plan was to just look up the phone number. Once I got to the site I remembered you can order online. Last time we ordered from Red Brick this is exactly what I did and it worked out fine so I figured I would try again.

The initial experience is standard, you hit the homepage and you are greeted with a massive shot of a mouth watering pizza that looks to be the size of the Millennium Falcon. From there I clicked on the “Menu” link in the top menu, again very standard for a restaurant site. Once I am in the menu I can use the left side navigation to browser their menu and below the menu is the “Order Online” button.

Little did I know the hell that awaited beyond that “Order Online” button.The first screen you are presented with inside “Order Online” is a Red Brick’s “Location Search Utility” (so official, geez). OK, I entered my ZIP code and clicked “Show Locations”. Ok, first problem, did anyone catch it? Earlier I mentioned that I have ordered online from Red Brick before. Why didn’t they remember my information. Hello, marketing opportunity, make me create an account, that way it is convenient for me next time I come, and it is convenient for you because you can mail me crap that I won’t read. Instead now I have to go through, enter my zip code, and select the restaurant that is closest to my house. That’s right, I have to select the restaurant closest to my house. Dear Red Brick, geo-location isn’t anything new. How about you suggest the restaurant that is closest to my house? Or pre-select it. I realize 2% of the time users may want to select a different restaurant because they are going to be on the other side of town or are picking it up en-route to a friends house, have you heard of a “Change Pickup Location” button?

Their “Location Search Utility” results page has a few issues too. When I entered my zip code, the results came back with two restaurants but only one restaurant is plotted on the Google map, the furthest one from my house (this may explain a few things…keep reading). Being extremely hungry I wasn’t in the mood for reading, and because the map was so zoomed out, I clicked the map plot, and clicked the “Go To Store Page” link in the map point call out.

Finally I made it to the online ordering page. Again, they show me the zoomed out, view from pluto, map with the map point again, not entirely necessary on this page. Below that is their entire menu listed with three columns to the right of each available item. In each column is a large, medium, and small number ticker and the corresponding price for each size. In Firefox, the layout of this page was horrible, none of the number tickers lined up with the corresponding items, sometimes the number tickers wrapped to the next line so you had no idea which item you were selecting. Luckily the two items I was ordering were at the absolute top of the list and the absolute bottom so it didn’t take much to figure out if I was using the correct number ticker.Well, there are so many things wrong with this page. Even in 1996 this page would have been horrible. The largest complaint, why isn’t this page merged with the menu they already have? I massive scrolling page with no categorization is just horrible user experience.

Ok, this may be because they are using an off the shelf e-Commerce solution and they were unable to incorporate it with their existing site. Nope, if you check the url, the same query string schema is used in the marketing type pages so we are still in the same system, we didn’t switch to https (you’ll see why shortly). I think it just comes down to laziness, someone, somewhere probably created an excel spread sheet with the prices and sizes available and gave it to a developer, that developer then cut and pasted that content into Dreamweaver (check the source, lots of MM_, not difficult to figure out they were using DW).Next issue, you can’t click on any of the items in the scrolling list? I see “NEW! Pizza Bianco”, however, I have no idea what a Pizza Bianco is. As a user, if I really want to know, I have to click on menu, then click on signature pizza, and find Pizzas Bianco. Then when I find it and navigate back to online ordering page my session was wiped and I have to start over, right back to the location selector…UGH! A simple solution would be to store the session and make each item clickable so the user can check out what each item is. The ideal solution would be to incorporate the ordering and menu sections but I already mentioned that. A middle of the road solution would be to have a mouse over div created that showed the image and description of the product. I assume all this data is stored somewhere since the site is running on Cold Fusion, there must be some sort of back-end?

Also, what is up with all the number tickers? Why aren’t they just using combo boxes, each combo box would contain the three sizes and the price. This would make the page look less daunting, would fix the layout issues, and personally I feel it is more standard and what users are used to. Not 16 thousand number tickers. Oh ya, if you click the number tickers too quickly the price in the top right doesn’t update, without looking at the code there must be some interval set up which isn’t catching the change event when you click fast.

Wow, this blog posting is getting a little long. I could go on and on and on about this horrible experience. Before I wrap it up I want to mention one more, and this one is the kicker. Once you have magically figured out what you want and possibly selected the correct size and quantity from the slew of number tickers and figured out that the “Proceed” button is way up in the top right of the browser you are redirected to the “Your Order” page. Once again I am asked to enter my location information. Didn’t I do this already? Note to developer <cfset session.zipcode = #FORM.zipcode#> does wonders for usability. Oh ya, I hope you don’t want to change anything, because if you click back at this point the number tickers don’t reset but the box in the top right that displays the current price of your order does so it appears that nothing is selected. Ok, now for the real fun. Fill in your contact information, click Submit (mmmm, I can already taste my pizza), and you are greeted with message “A pizza ambassador will contact you within 10 minutes to verify your order”. WHAT?!?!? call me? I just spent all this time online for nothing? I still have to deal with the phone.

Oh ya, so I lied, one more huge thing. After the pizza ambassador called me and confirmed my order, I went to pick it up and bingo, it wasn’t at the restaurant 1/2 mile from my house that I selected. It was at the restaurant on the other side of town. Interesting how the only restaurant that showed up on the map was the restaurant on the other side of town, however, the text results showed the restaurant 1/2 a mile from my house. So frustrating!

Red Brick, if you are going to offer online ordering, truely make it online ordering, don’t make users do a ton of unnecessary work and eventually end up on the phone with them anyway. Aixen Solutions, you may want to go back to the drawing board on this one.

Just my 2 cents, and in case anyone was wondering, the food was great, a little cold cause I had to drive so far to pick it up, but still tasty! They can’t make a website but they do make a decent pizza.

• Extremly small download, 7mb (which includes 40+ languages)
• Fast, fast, fast.
• Virtualized JS engine (courtesy of V8 - no not the veggie drink), which I have heard is much cleaner thank Tamarin or Spidermonkey (haven’t had a chance to look myself yet).
• Offloaded cache and processing using Gears.
• Task Manager specific to the browser processes THANK YOU Google!
• Geek mode THANK YOU again, however I do miss Firebug already.
• Supplied developer tools work great, just need more.
• Crashing doesn’t take down the whole browser, instead it only blows away the specific tab. This is due to multiple processes, one per tab to be exact.
• And of course, searching Google is just that much easier.

The first thing I did was test the Disney suite of sites, better we catch the bugs before the evil QA department does (just kidding Eric, don’t assign me more bugs because of that last comment). The only major bug I have noticed so far is some redraw issues when AVM1 content is running inside of AVM2. Play some of the games on the Disney site and you will notice that the redraw hangs unless you scroll to the bottom of the page and back up. It seems to happen once AVM2 content is layered over top of AVM1 content. If no AVM2 content is layered over the AVM1 content everything seems to work fine. Sounds like more of a Flash Player bug then a Chrome bug.

The second issue I just noticed (which actually may be a feature) is multiple alpha tween animations seem to not animate, instead the content all pops on once all the tweened instances are complete.

I am not a huge fan of the default text rendering, probably one of the many reasons why the pages draw so quickly. IMHO the text looks like ass.

The other major problem is penetration, what is it going to take to get the world to download this browser. Sure the developer world is a buzz right now, but I don’t think the average joe is pumped about a new browser. Hopefully Microsoft and Mozilla learn or thing or two about browser development.

Earlier this year I was lucky enough to go up to the Pixar offices (yes it is an amazing office) to discuss this project. June 24 seemed so far away when we were storyboarding out the concept and presenting our ideas. I must admit, the final rendered version looks much better then those sketches and block animations we toyed around with.

From a technical standpoint there isn’t much to write home about here, however, it was a pretty cool project to say I worked on…sorta. Check it out, it will only be up for a few days.

There is no need to update your bookmarks (unless you want to of course), I am not getting rid of the old scottgmorgan.com domain anytime soon.

Lets pretend we’re creating a button, now I know most of my readers are developers and for the most part we would never create a simple button like this using multiple frames on the timeline. But we all know that designers love to use the timeline and create button states using frames and frame labels. I actually think this posting will help designers as much as it will help the developers who are working with said designers.

Now lets pretend our button has 3 states, up, over, and down and each state is represented on the timeline, 5 frames apart and the frame is labeled the same as each state. So the first frames label is “up”, the 5th frames label is “over”, and the 10th frames label is “down”. On each frame there is a MovieClip named button and each key frame has the same graphic just tinted differently to differentiate the states. Then on our code layer we set up MouseEvents for each state MOUSE_OVER, MOUSE_OUT, and MOUSE_DOWN, in each of the event handlers we move the playhead to each frame using the gotoAndStop method while passing in the frame label that we want the playhead to move to. Ok, so this is all straight forward. Very flash 4. The interesting part of this is when you try to access sibling displayObjects on the same frame right after we call gotoAndStop.

To illustrate this bug lets add a layer below the layer that has our button on it. On this layer add a keyframe at frame 5 and add a MovieClip, whatever you want, import a picture draw a shape, it doesn’t matter. Just as long as you give it an instance name of overClip. Right after we call gotoAndStop(’over’) try and trace (overClip). If you are not completely following me right now here is a picture of what my timeline looks like:

And our code will look something like this (excuse the timeline code, but it is the easiest way to demonstrate this bug).

button.addEventListener(MouseEvent.MOUSE_OVER, rollover);
button.addEventListener(MouseEvent.MOUSE_OUT, rollout);

function rollover(e:MouseEvent):void {
     gotoAndStop('over');
     trace('the instance name of the overclip is: ' + this.overClip.name);
}

function rollout(e:MouseEvent):void {
     gotoAndStop('up');
}

In the rollover function you will notice I added a trace that traces out the name property of the overClip that appears on the out frame (or frame 5 for those of you who like numbers). If you were to run this code you will notice that the rollover works, the playhead moves to frame 5 and visually you see the change, however, the trace statement throws the following error “TypeError: Error #1009: Cannot access a property or method of a null object reference.” Null?? How can that be, the playhead is at frame 5, and the overClip is on frame 5, why is overClip null? Good question! The other odd thing is if you trace out numChildren right after the gotoAndStop(’over’) call it will return the correct number of child displayObjects. How can the player know how many children there is but still throw an error saying we’re trying to access a null object reference?

This was a very common practice in AS2, especially in highly creative sites with both Flash Designers and Flash Developers. And as more creative shops start embracing Flash 9 I think this issue will become more common.

Well, the first thing I thought to do was to call stage.invalidate() before I called gotoAndStop(’over’), in theory this should force a redraw and fire the render event. Well it did fire the render event but I still couldn’t trace out the clip on frame 5. Arghhh!

The one thing I did notice is the error is only thrown the first time rollover is called. Everytime after that the reference to overClip traces out fine. So this got me thinking. It looks like displayObjects do not register until the current frame cycle is complete. For those who do not know, a frame cycle is two parts, first the code executes, once the code on that particular frame executes any display updates are executed (adding overClip to the timeline is a display update).

The first approach to get around this bug I thought up was to kick off a EnterFrame event in the rollever function, after the EnterFrame event is fired, it still didn’t trace out overClip. Then I thought maybe I need a second frame cycle to register everything because technically the EnterFrame event fires at the exact moment the playhead hits the frame which is exactly the same problem we already have. Ok, so lets allow for two EnterFrame events to fire, kill the event, and trace out overClip. Guess what, that works. Here is the code for this approach.

var count = 0;

button.addEventListener(MouseEvent.MOUSE_OVER, rollover);
button.addEventListener(MouseEvent.MOUSE_OUT, rollout);

function rollover(e:MouseEvent):void {
     count = 0;
     gotoAndStop('over');
     addEventListener(Event.ENTER_FRAME, rolloverDelay);
}

function rolloverDelay(e:Event):void {
     count++
     if (count == 2) {
          removeEventListener(Event.ENTER_FRAME, rolloverDelay);
          trace('the instance name of the overclip is: ' + this.overClip.name);
     }
}

function rollout(e:MouseEvent):void {
     gotoAndStop('up');
}

Yes this works, but imagine how complex this mess of code would get if we had a complex 12 state button with animations on each state. Not very practical.

The only way I could come up with to get around this issue was to create an EnterFrame that fires right off the bat, moves the playhead to the last frame of the timeline, and then returns it to the first frame. This ensures that everything that exists on the last frame will be registered and you will be able to access it immediately following the gotoAndStop(’over’) call. The key to this approach is only items that are still in the display list on the last frame will register. If you have a blank keyframe after overClip it will not register if the last frame of the timeline is beyond that. Here is the code for this approach.

button.buttonMode = true;
button.addEventListener(MouseEvent.MOUSE_OVER, rollover);
this.addEventListener(Event.ENTER_FRAME, frameentered);
this.addEventListener(Event.RENDER, rendered);

function frameentered(e:Event) {
     this.removeEventListener(Event.ENTER_FRAME, frameentered);
     if (overClip == null) {
          stage.invalidate();
          this.gotoAndStop(totalFrames);
     }
}

function rendered(e:Event):void {
     if (this.currentFrame == this.totalFrames) {
          this.gotoAndStop(1);
     }
}

function rollover(e:MouseEvent):void {
     trace('the instance name of the overclip is: ' + this.overClip.
}

Excellent, we’re making progress. But we are working with a very simple example, a two state button (up and over). What if we had a more complex button, say 4 states (up, over, down, and disabled), and at each state different assets were added to the timeline like so.

I know, I said complex, and this timeline is far from complex, where are all the tweens, and hundreds of layers, guides, and masks. Well, lets just pretend all that fun stuff is there for now.

If we were to try the last approach with this more complex timeline we still wouldn’t have access to the clips on the over and down frames. This is because we moved the playhead from the first frame to the last frame and back to the first frame again. The playhead never touched anything in between so the clips on the over and down frames would not have been registered yet.

The first approach I came up with to register the clips on all the frames was quite innovative, so I thought. Basically I used the currentLabels array property of MovieClip. For those who don’t know, the MovieClip class now contains a currentLabel and a currentLabels property. The currentLabel returns a FrameLabel object if one exists for the current frame that the playhead is currently on. A FrameLabel Object contains two properties, name, and frame. The name property is the frame label name and the frame property is the frame number (int) of the current frame the playhead is on. The currentLabels property of MovieClip returns an array of FrameLabel Objects containing all the FrameLabels for the targeted MovieClip. Using the currentLabels array I thought I could loop through each FrameLabel in the array and move the playhead to each frame label and once it is complete return the playhead back to the first frame. However, you cannot use a traditional for loop because the frame cycle will not occur until the for loop is complete. Instead I set up a counter variable and use an EnterFrame to move through each FrameLabel Object for targeted MovieClip. This approach is very similar to our previous approach with more stops in between. Lets call this approach the milk run. Here is what my code looked like for this approach.

button.buttonMode = true;
var count:int;
if (count == 0) {
     this.visible = false;
     addEventListener(Event.ENTER_FRAME, proxyframes);
     addEventListener(Event.RENDER, rendered);
}

function proxyframes(e:Event) {
     stage.invalidate();
     gotoAndStop(this.currentLabels[count].name);
     trace(this.currentFrame);
}

function rendered(e:Event):void {
     count++
     trace('render called' + this.currentFrame)

     if (count == this.currentLabels.length) {
          init();
          gotoAndStop(1);
          removeEventListener(Event.ENTER_FRAME, proxyframes);
          removeEventListener(Event.RENDER, rendered);
     }
}

function init() {
     this.visible = true;
     button.addEventListener(MouseEvent.MOUSE_OVER, rollover);
     button.addEventListener(MouseEvent.MOUSE_OUT, rollout);
     button.addEventListener(MouseEvent.MOUSE_DOWN, press);
     button.addEventListener(MouseEvent.MOUSE_UP, release);
}

function rollover(e:MouseEvent):void {
     gotoAndStop('over');
     trace(overClip.name);
}

function rollout(e:MouseEvent):void {
     gotoAndStop('up');
}

function press(e:MouseEvent):void {
     gotoAndStop('down');
     trace(downClip.name);
}

function release(e:MouseEvent):void {
     gotoAndStop('disabled');
     trace(disabledClip.name);

     //disable buttons if there was a parent clip parent.mouseChildren = false would also work.
     button.buttonMode = false;
     button.removeEventListener(MouseEvent.MOUSE_OVER, rollover);
     button.removeEventListener(MouseEvent.MOUSE_OUT, rollout);
     button.removeEventListener(MouseEvent.MOUSE_DOWN, press);
     button.removeEventListener(MouseEvent.MOUSE_UP, release);
}

So why doesn’t this work. Well if you remember what I said earlier, moving the playhead only registers the last frame that it was on. If you run this code you will notice the rollover and rollout methods return null but the release method traces out the correct value, this is because that was the last stop on our playhead milk run.

In order for this approach to work I would have to layout my timeline appropriately. Each state clip should be on its own layer with nothing after it (including blank keyframes) on the timeline, like so:

Now you will notice that the above code works, we are now able to trace out the extra clips that appear on each frame with a label. However, now that everything exists on the last frame we really don’t need to loop through each FrameLabel to register the clips, we can just use our first trick and move the playhead to the last frame, once it renders move back to the first frame. Even though the looping through the FrameLabels code is overkill for this example I thought I would keep it in so people know that capability exists.

So we are able to access sibling displayObjects now but there still is one functional issue. Since the frames are cascading on the timeline when the playhead is on the down frame both downClip and overClip are visible. Likewise, when the playhead is on the disabled FrameLabel upClip, downClip, and disabledClip are visible. That little bug is not going to slip by the creative department. Normally we would get around this issue by adding blank keyframes on the frame following where the extra clip was displayed. If we were to do this in our example the clips wouldn’t register because they do not exist on the last frame and we would be right back where we started. There are two ways around this, one involves more code (the developer approach), the other involves more keyframes (the designer approach). Both are valid.

The timeline approach basically consists of adding keyframes (not blank keyframes) on the frame after the frame where the extra clip appears and setting the alpha of the clip on the second frame to 0. This ensures that the clip is still on the display list in the last frame and allows it to register. With this approach your timeline would now look like so:

Depending on what else is happening in your application this approach may not work. This is when you have to resort to code (yay). Basically with code we do the same thing, however, instead of simply setting the alpha to 0 we’ll set the visibility to false. This only requires three extra lines of code which are included below.

stop();

button.buttonMode = true;
var count:int;
if (count == 0) {
     this.visible = false;
     addEventListener(Event.ENTER_FRAME, proxyframes);
     addEventListener(Event.RENDER, rendered);
}

function proxyframes(e:Event) {
     stage.invalidate();
     gotoAndStop(this.currentLabels[count].name);
     //gotoAndStop(this.totalFrames);
     trace(this.currentFrame);
}

function rendered(e:Event):void {
     count++
     trace('render called' + this.currentFrame)

     if (count == this.currentLabels.length) {
          init();
          gotoAndStop(1);
          removeEventListener(Event.ENTER_FRAME, proxyframes);
          removeEventListener(Event.RENDER, rendered);
     }
}

function init() {
     this.visible = true;
     button.addEventListener(MouseEvent.MOUSE_OVER, rollover);
     button.addEventListener(MouseEvent.MOUSE_OUT, rollout);
     button.addEventListener(MouseEvent.MOUSE_DOWN, press);
     button.addEventListener(MouseEvent.MOUSE_UP, release);
}

function rollover(e:MouseEvent):void {
     gotoAndStop('over');
     trace(overClip.name);
}

function rollout(e:MouseEvent):void {
     gotoAndStop('up');
}

function press(e:MouseEvent):void {
     overClip.visible = false;
     gotoAndStop('down');
     trace(downClip.name);
}

function release(e:MouseEvent):void {
     gotoAndStop('disabled');
     trace(disabledClip.name);
     overClip.visible = false;
     downClip.visible = false;
     button.buttonMode = false;
     button.removeEventListener(MouseEvent.MOUSE_OVER, rollover);
     button.removeEventListener(MouseEvent.MOUSE_OUT, rollout);
     button.removeEventListener(MouseEvent.MOUSE_DOWN, press);
     button.removeEventListener(MouseEvent.MOUSE_UP, release);
}

That’s it. Adobe, if you are reading this, please, please, please fix this bug. It is very annoying. It is obvious that Flash Player 9 was built with Flex in mind (aka no timeline) since that is all that was available when Flash Player 9 was released. I remember reading someone from Adobe admitting that on their personal blog, if I can find the link again I will post it in the comments below. I covered a lot here, but this bug goes even further. Sometimes Event.RENDER doesn’t even fire. In another related bug stop events on the first frame of nested MovieClip do not always work. Supposidly Adobe fixed this in version 9.0.45 of the player but as you can see by the comments on Emmy’s blog posting about the 9.0.45 release it was never really fixed. In fact we ran into this issue at work recently in the latest 9.0.115 version of the player.

I actually met with the Adobe Flash Player team last week and we discussed a lot of these issues, hopefully they will take these into consideration for the next release. To a developer they may seem like minor issues but designers and animators are going to have a difficult time getting around a lot of these bugs. If anyone else has any workarounds please feel free to explain them in the comments below.

P.S. this is my longest post ever, yay me.