While most smaller Flash projects do not really need a preloader due to the today’s Internet speed, it is still good practice to always include a preloader in all your Flash projects. In this brief tutorial, I will demonstrate how to preload your Flash assets using AS3.

Preloading in AS3 is a more streamlined process due to the new & improved event handling structure that AS3 brings to the table. You have more control over what gets preloaded and when it gets preloaded.

How to Preload with AS3

Like most things in Flash, there are many ways to preload your content into your Flash projects. How you create your preloading animation will be totally up to you. In this example, I will be dynamically resizing a preloader’s fill based on the progress percentage of the content being loaded. It is a simple way to demonstrate a preloading action.

Code used in example

//Define a loader
var imageLoader:Loader;

function loadThisImage(url:String):void {
 //Show Preloader
 preloader.visible=true;
 imageLoader=new Loader();
 imageLoader.load(new URLRequest(url));
 //Add a listener to update the preloader on the image's progress
 imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,imageLoading);
 //Adding a listener that will update the preloader once the image has been loaded
 imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoaded);
}

function imageLoaded(evt:Event):void {
 // Load Image by adding it to the display list
 imageLoaderClip.addChild(imageLoader);
 // Hide Preloader
 preloader.visible=false;
}

function imageLoading(evt:ProgressEvent):void {
 // Get the current download progress
 var loaded:Number=evt.bytesLoaded/evt.bytesTotal;
 // Send progress info to "preloader" movie clip
 updateProgress(loaded);
}

function updateProgress(value:Number) {
 preloader.progress.width=value*preloader.bar.width;
}

//Loading the image defined in the parameter
loadThisImage("image-loaded-large.jpg");

As you noticed this example loads an image, but you can very well use it to load you main SWF content or even multiple images. By creating multiple loaders, you can then define the asset in which you choose to load.  This will allow you more control over your content being loaded.

As you can see,  preloading content using AS3 is actually pretty easy.  Have fun migrating over into AS3!

Download Source

I hope this helps in your migration over into  AS3.  If there is something in particular you want to add or see with the Moving From AS2 to AS3 series, feel free to contact me via the contact page.

The JavaScript Flash API or JSFL lets you write scripts to perform several actions within the Flash environment. The possibilities of using JSFL are endless allowing you to create custom commands, tools, timeline effects, behaviors, etc.

Over the years, many JSFL extensions have surfaced within the Flash community. Below are a collection of 20+ JSFL extensions ranging from audio/lip syncing to tween management to Git/Svn version control. Enjoy!

If you have either developed or know of an awesome JSFL extension that I missed from this list, feel leaving a comment below. Thanks and enjoy!

Automatically Enter at the Desired Frame with FrameAim

This adds a panel that enters the selected graphic at the currently displayed frame. By default, Flash just opens the Graphic to its first frame, regardless of what’s being shown on the main stage. No more!

Auto Flash Class Panel

Class and package names are generated form your library folder structure. With one simple click your library is ready for export.

Citrus Engine Panels

A flash extension to create easily CitrusEngine’s objects.

Ease Caddy

The EaseCaddy panel allows you to store your custom eases and re-apply them. You can save your eases to a file and send them to someone else.

Easy Palette

Easy Palette is a color management system that gives the user a friendlier and more useful way to manage custom palettes by allowing them to name colors to speed identification, save and load custom palettes.

Extend to Longest Layer

Very simple but annoyance-saving command which extends all layers in the timeline to the length of the longest layer. Great if you find yourself pasting audio into a bunch of nested symbols.

FrameSync

This is a handy-dandy animation plug-in similar to Animonger’s AnimSlider, except that it uses frame labels and requires no other setup.

Git Version Control Panel for Flash

Commit FLAs to your Git repo from within Flash.

Icon Publisher

Icon Publisher is a Flash extension panel for publish your icon in different sizes in one click.

LabelJumper

This adds the Next Label, Previous Label, and Goto Label commands which allow you to quickly jump to keyframes with specific labels.

MotionBlur

The MotionBlur Flash extension takes a (new) motion tween, analyzes the movement, and creates a motion blur.

MotionSketch

MotionSketch inserts a command to record a drawing in real-time and create a tween based on that drawing.

Multi Swap

Multi Swap allows you to swap multiple symbols at once, and allows swapping symbols across multiple frames.

NewerAnimClip

This is an extended version of Dave Wolfe’s NewAnimClip which takes care of all the legwork. Just select a section of frames in your timeline, run the command, and that animation will be symbolized in the exact correct place. Basically a fully automated “Pringle”.

Queasy Tools Panel

Queasy Tools is a new set of quick and easy tools for Flash designers and animators. This panel provides the fastest way to create tweened animation with easing in Flash.

Search and Replace

This will search for and replace text in the names of Library items. You can search all Library items or only the selected items.

SmartMouth

SmartMouth is a Flash extension that automatically analyzes vocal audio tracks and adds mouth shapes. Your Flash Timeline remains 100% editable, leaving you in full control of your animation.

StructureCreator

Flash extension panel for creating website project structure

Subversion Panel for Flash

Commit Flash documents and related files to your Subversion repo right from within Flash.

Swap Instance for Duplicate Symbol

This extension adds a command that will take a selected symbol instance, create a new duplicate in the library, and swap the selected symbol for the newly created duplicate.

Sync To Timeline

This adds a command which syncs a selected symbol to the timeline, regardless of if they’re isolated on their own layers. Really useful for re-timing nested animation.

3D Rotate EZ

3D Rotate EZ is a Flash Panel using which you can create 360 degree object or 3D product rotation, called also ObjectVR.

As you can see, there are a lot of plugins available to play around and those are only the main ones. Feel free to let us know in contact if I missed any !

“FluidHtml is a text-based markup language (like HTML) that lets you dynamically generate Flash  content. This is an extraordinarily powerful idea.  It means that anyone can build highly animated websites, ads, media players and 3D animations quickly and easily.”

FluidHTML looks to be an innovative concept and may address current issues related to Flash content on the web.  However, I believe web designers/developers who currently use HTML/CSS might find this much more attractive than Flash designers/developers.

I really like the concept of offering an extensible API and opening it up to developers, but is this going to be a viable markup language 5 years from now or is it just a phase.  As ActionScript libraries that support browser-like functionality improve and as Google and Yahoo’s search engine’s begin to recognize the text within Flash files, does FluidHTML really fix anything that isn’t already steadily improving.

I believe FluidHTML does have potential however, I am not sure if Flash designers/developers will buy into the concept.  Check out the introductory video below on FluidHTML.  I’d love to hear how you guys feel about FluidHTML after viewing the video.  Would you consider using it?