Category: Flex

I’m writing this post out of guilt. I’m working with a contractor today, Charles Schulze, helping him get a working version of one of our API’s. He’s been really patient with us while we get a working build to him that he can build around. We’re all in this walled off area of desks and tables called “The Pit”. It makes it easier to collaborate compared to f’ing cubes. A discussion was going on about AS2 and AS3 differences. Charlie again mentions he wants to get more projects doing AS3. He doesn’t get as many as AS2. I told him if he is doing pure ActionScript 3 all the time, he should be doing Flex work instead of Flash. He laughed.

“Dude, you’re using classes in ActionScript 2… you’re building a mini-app. If you know ActionScript 3, you’re practically an application developer.”

He then looked upset. He didn’t show it, but I could see it. He brought up various scenarios, so I did my pitch on what I think Flex is for and what Flash is for (typically). I threw in the caveat it’s not always that black and white, especially with hybrids like him who can design and code equally well. If you are in a particular industry, it makes it easier to focus on a skill set. For example, if you keep hanging around the agency world doing contract, you’re more app to get bling using your Flash skills. While I’m sure they’d ask for AS3, a lot of OOP and design patterns are useless when you have a week to get stuff done that would take me 2 months. Vice-versa in the software world in using Flex. A lot of the design appreciation just isn’t there, and you cannot use a lot of the skillsets that don’t apply to coding.

He brings up more postulate scenarios, such as doing interactive, design-driven websites. As if on cue, Nick throws in the “doing 3D interface work”. Yeah, I was owned… but I still didn’t think that was justification for putting AS3 in a product meant to encourage upgrades, which then encourages stock holders to see post-merger success, and thusly purchase more stock in Adobe. I look at Flash 8 and go, “Damn, they got that one soooo right. Phat design additions and re-implementation of Script Asisst. Macromedia for the win!”.

He then mentions quietly with a resolute sadness, head down working on his computer, that I made him not as motivated to learn more AS3 than he already knows. I immediately felt bad, like I had erred in communicating and then spent the next 5 minutes un-doing… or rather, re-directing my rallying towards learning AS3 in Flash CS3, not Flex Builder. Sapping passion from another is a major sin.

I explained the immediate benefit of runtime errors. Yes, that dialogue box in your face can belt your self-esteem at times, but nothings more frustrating than an error that just stealthily never appears. Now, you see them when your SWF is running, AND can see the path leading up to their cause of failure. Furthermore, you’ll never have that nagging feeling of “maybe I should optimize my code…”. AS3, when used even with an once of effort towards using strong typing gives you mad speed increases. This won’t necessarily improve your animation speed, but certainly won’t detract from it, especially in games, or complicated menu systems. The days of seeing “Why does ‘parseXML’ freeze my animation?” on mailing lists should be a thing of the past. E4X is slower than DOM (aka XML.childNodes ) … but typically uses less code. Finally, the increased cleanliness of the strong-typing implementation will ensure your code probably works right when you compile, better than AS2. This confidence makes you a better Flash Developer.

Let’s not forget the most important… file size. Flex 2 SWF with a Button component, 126k. Flash CS3 SWF with a Button component, 15k. That assumes your even using the new CS3 components; one you could could be smaller for example. Both Flash CS3 & Flex 2 produced Flash Player 9 AS3 SWF’s run the same speed: fast as nuts.

So, I hope I got Charlie psyched again about getting more AS3 projects. I felt like a dick stealing his joy on wanting to get more into it, and felt I made a valid, applicable case to him to get him back in the mood for it. Hopefully my frustrations at feature choices won’t detract you either. You can learn AS3, reap the rewards, and steer clear of all the OOP & design patterns if you so choose. AS3 alone is still pimptastic in Flash CS3. There is nothing wrong with learning AS3. Just remember AS1 and AS2 are still powerful and a valid part of your arsenal.

Preface

Preloaders in Flex are not like preloaders in Flash. Gone are the days of the 1 liner:

if ( _framesloaded < _totalframes ) gotoAndPlay ( 1 );

We now have base classes and setter properties. While you may have to write a class and then set that class on your Application’s preloader property, it’s really pretty easy once you do it more than once. This tutorial will show you how to build a preloader in Flex using a Flash built animation.

Introduction

Flex’ built in preloader is pretty sweet. It auto-adjusts for your application’s color to stand out, it handles all aspects of preloading. This includes remote shared libraries, fonts, and even deferred classes used in modules. Finally, it deals with the initialization of your Flex application which can possibly take longer than a few milliseconds.

If you are building branded applications, every little detail counts in enforcing your brand identity upon your user. You want to remind them the positive experience they are having was brought to them by you. Nothing is more important than a first impression, and the first thing people see in a Flex application is the preloader. It is important that you spend adequate time on making it look good and consistent.

To make a custom preloader for Flex, you have to do 2 steps:

1. Write a class that extends DownloadProgressBar
2. Set the preloader property on your Application class to your preloader class.

No witty 3 step process here.

The purpose of extending DownloadProgressBar is to handle the various things that happen in the life cycle of preloading (yes, we have life cycles now, not just downloading of bits). You do not have to handle anything save the FlexEvent.INIT_COMPLETE. You could for example put some dots who are ridin’ spinnaz and that’s your preloader.

…or, you could handle all events, and duplicate the Flex one with a different design showing the download & initialization progress.

The steps for making a custom Flash Preloader for your Flex app are as follows:

1. Make a 100 frame MovieClip. TextField optional (as is everything).
2. Give MovieClip linkage ID with no class name.
3. Compile your SWF (“Test Movie”)
4. Write your own Preloader class in Flex Builder which uses your Flash MovieClip.
5. Set the Appliction.mxml preloader property to your custom class.

Making Your Flash Symbol

In Flash, you make a MovieClip that is 100 frames long. This will be the preloading part of your preloader, the MovieClip that shows the progress of the SWF downloading. Notice I have both a 100 frame animation as well as a dynamic TextField. The TextField will have the percentage numbers (i.e. “73%”) put into it dynamically.

Notice, also that the TextField has an instance name. This is so I can target it with code. Keep in mind, even though we are giving the TextField an instance name, we’ll be targeting it with code in Flex. We won’t be writing any code in Flash.

Finally, I wrap my preloader in a MovieClip because I want the preloader to fade out when it’s done.

I make sure to give the preloader an instance name so I can “dot dot down” to the preloader through the animation. Dot dot down is Flash slang for using dot syntax to walk down the display tree to target a MovieClip you want to interact with via code. In our case, it could be:

_root.my_clip.preloader.amount_txt.text = "70%";

Omg, I used _root, lol, l@mz03, me fired.

Finally, you export your Symbol with a linkage ID. Exporting as Flash 8, AS2, you just fill in the linkage ID class. Don’t export as Flash 9, AS3. If we did that, we might as well write the class for the preloader , and that’s just too much work, and too much added file-size for a class that’s supposed to be simple and most of all lightweight. If you are using Flash CS3, just change your publish settings to Flash 8, AS2 or AS1.

Flex will look for this linkage ID name when you are embedding the MovieClip. Now compile your SWF and your done.

Custom Preloader Class

You then write your own Preloader class. Have it extend mx.preloaders.DownloadProgressBar. There are multiple ways to embed Flash content. For our purposes, we’ll embed to a class property.

If you look at the Preloader’s setter function, you’ll see we get a Sprite (1 frame MovieClip) that emits all the preloading events we’ll care about. In this case download progress, when the SWF has finished downloading, when the SWF starts to initialize classes, and when initialization is complete.

Our download progress & SWF download done functions will dig down into the Flash MovieClip, and show download progress in both the text field, as well as making the preload MovieClip symbol animate via gotoAndStop based on the download percentage. Since download percentages are 100%, it makes it pretty easy to figure out what frame to go to.

The initialization ones just show “Initializing…” in the TextField.

Unlike most Flex preloaders, we want ours to animate when done, and only THEN actually launch into our Flex application. You can accomplish this by not dispatching the complete event. Dispatching this let’s the Flex application know the preloader is done. In our case, we want to wait till the Flash animation is done before doing so. We add a framescript ( a function called when the Playhead reaches a frame) to frame 21. When the animation is done, it’ll hit this frame, call our preloader class’ function. This will stop the animation and dispatch the event, letting the Flex application know we’re ready.

Conclusion

That’s it! Keep in mind it’s hard to test these things locally on your box. In Flash, we have the bandwidth profiler, but there is no such thing in Flex. You can either use network throttlers, like Charles. Alternatively you can upload the files to your site, install the Firefox Web Developer Toolbar, and choose disable cache.

In the next part, we’ll be taking advantage of Flex as a statefull client, and getting all the data you need. This takes time, so we need a cool way to show this to user as well as making it fail gracefully.

Flash Preloader in Flex – Example | Source | ZIP