Creating a Preloader in ActionScript 3.0 and Flash CS3

A lot of folks ask me how to create a simple preloader using ActionScript 3.0 in Flash CS3, so I thought I'd share the information with everyone all at once. Here's the idea behind creating the simple preloader shown here:

1. Create necessary variables. You'll need the path to the file you want to load, in the form of a string. You need a URL request to represent the URL of the file, and you'll need an instance of the Loader class to load the file.
   
2. Add event listeners to your Loader object's contentLoaderInfo property to listen for the Event.COMPLETE event (for when the file is done loading) and the ProgressEvent.PROGRESS event (to do stuff while the file is loading, or to show a preloader). You can learn more about the contentLoaderInfo property in Flash Help. Basically, it's the property that holds all of the information about the file that's loading, so you need to use it to register event listeners.
3. Create event listener functions to respond to the events. Don't forget to put the loader on the stage using addChild() once it's loaded.
4. In the ProgressEvent listener, you can access the loading info via the ProgressEvent's bytesLoaded and bytesTotal properties. Divide bytesLoaded by bytesTotal to calculate the percent that is loaded. The value will be between 0 and 1. Hold it in a variable for easy reference later on.
5. To get a number that represents the percent loaded that is between 1 and 100, multiply the percent loaded variable by 100 and round the number using Math.ceil (so you don't get zero as a result).
6. Use your rounded percent to refer to a movie clip frame to show when the file is at a particular percent. For example, once your file is 50% loaded, the preloader movie clip will display frame 50.

That's it! If you're not sure what these steps look like together in a completed file, you can download the source code here. Enjoy!

Note: I do not make any guarantee for these files regarding bugs or implementation in your applications. If you want to contact me to fix bugs or solve problems for your application, have your credit card number ready. =)

Object Oriented Programming vs. FLA Programming

Recently, I've been asked a lot about creating applications by writing code in an FLA file vs. creating them using classes and Object Oriented Programming. Making the decision can sometimes be tough, especially to those who are new to programming. Usually, it's hard for people new to programming to justify doing the work to create classes. Honestly, I use a lot of classes and FLA code. So, why choose either one when building an application?

OOP is a beautiful thing. Let me give an example of OOP in action. In order to create a music player using ActionScript 3.0, you need an instance of the Sound class to load and play the sound, an instance of the SoundChannel class to stop/pause/seek, and an instance of the SoundTransform class to control the sound's volume. Using OOP, I can make one class that connects all three. I could do that in an FLA file, but I'd have to rewrite or copy/paste the code every time, which takes time. Now, what if I wanted to add more functionality to every media player application I created? To do that, I'd have to add it to each FLA file. Using OOP, I simply update my EasySound class. Further, I can give my EasySound class methods that control all aspects of the sound (play,stop,pause,resume,seek,setVolume,etc.) and control the sound entirely from one instance. How cool is that!?

Pretty much the only thing that's not cool about OOP is that though OOP is better for reuse in the long run, it's initially more time consuming. For that reason, I'm not the biggest fan of document classes that I'm only going to use once.

At the same time, I'm a huge fan of making quick prototypes in FLA files. This enables me to rapidly create variables and functions for an app without having to create an entire class file. If I'm creating some sort of prototype, or teaching a programming idea, I prefer to go with an FLA and not create the class files.

The reason I stick to FLA files mostly for prototypes is because of the cons of using FLA files for major applications. One con is that FLA files don't contain searchable text, as ActionScript files do. Leveraging the power of my operating system (now Mac OS 10.5- whoot!), I can quickly search through thousands of class files to look for methods or comments that describe what the class does. Another con is reuse. Instead of redefining a function, or copying and pasting the function from one FLA to another, I simply import the class I created and run the method.

Moral of the story- I say to use FLA files for prototyping but to create classes for major applications, especially any applications where you would consider reusing code. If the time it takes to write code is an issue, you might want to consider writing code using Flex. Flex gives you case insensitive code hinting for everything, even your custom classes.

What methods do you use when creating applications? Do you prefer FLA or OOP?

My First AIR App!

So here's my first crack at an AIR app. It's a simple analog clock that you can drag around and stuff. The coolest thing about it is that is was so easy to make! I spent most of the time designing the art of the clock! Anyway, check it out and let me know what you think.

Also, in order to get it to work, you need to have AIR 1.0 installed.

Step 1: Download AIR 1.0 and open the file to install AIR.

Step 2: Download the clock app and open the file to install to your operating system.

Adobe AIR Rocks!

Wow! I installed the AIR update for Flash CS3 the other day, and started building some AIR apps, and it is SWEET! If you're not familiar with AIR, it's the Adobe Integrated Runtime. What that essentially means is it's a way for you to take rich internet applications and deploy them to the desktop- cross platform!!! No more designing separate software for PC and Mac, my friends!

So, what do you have to do to deploy your fantastic Flash or Flex application or awesome AJAX application to the desktop via Adobe AIR? Almost nothing! Check it out!

Anyway, the point is that you don't have to learn anything new to make an AIR application. Just follow the steps you see on Adobe's AIR developer site. It's really barely more complicated than making the Rich Internet Applications you already know how to make. That's the beauty of it! Also the beauty of it is that it's cross platform! Also the beauty of it is that you have a local SQLite database to store info. The list goes on my friends.

We'll be doing plenty of AIR podcasts soon, so don't worry at all about that. For now, the Adobe site has great training, and yesterday I saw that David Gassner did a great intro to AIR training for Lynda.com.

Let me know what cool stuff you make!

TweenLite

Have you ever been frustrated with using the built in ActionScript tweens? I know I have! Recently I was working on a freelance project, building an application heavily driven by the built in Adobe Tween class, and for some reason the animation would glitch occasionally. I looked over the code for hours, only to find that I had written nothing but flawless, optimized code. =) Really though, there weren't any problems that I could see, so I spent all kinds of time making ridiculous workarounds using Timers and whatnot, only to find that nothing fixed the problem. I covered it up OK, but even then it still didn't work right. Stupid random glitches here and there that only showed up if you messed with the app for some time. Anyway, it frustrated me a lot.

So this morning, I receive the revelation to look for other tween engines, and decided to look up TweenLite, because I heard about it before. If you're not familiar with TweenLite, it's a free, extremely fast and powerful engine for creating tweens using ActionScript. It's available in ActionScript 2.0 and 3.0, and it's amazingly easy to use. Anyway, I implemented it in my freelance project and it worked like a charm! I liked it so much I made a donation, which you don't have to do, because it's free for everything- even commercial work. Friends, I'm happy.

So yeah, go check out the TweenLite site to see demos of its awesomeness, especially if you're using the current versions of the built in Tween class.

Here's My Blog!

I've been wanting to start a blog for a long time, so here it is! I'm plan to post random crap about video games and whatnot sometimes, but for the most part I'm going to be talking about what I'm developing using Flash and AIR. Enjoy!