I’ve had a couple inquiries about how to do a simple preloader in Flash. The technique and also the actionscript which implements the technique. So here is a percentage preloader example with source code and a source file to play with.

Overview

So the idea of a preloader is to hold the swf until the file has sufficiently loaded. Once it’s is fully loaded, then the preloader advances to swf to the actual content.

There are different types of preloaders: status preloaders and percentage preloaders. Status preloaders only tell you the status of the loading file. So it will have a simple looping animation like a spinning wheel and you just wait until it is fully loaded. Percentage preloaders will actually tell you how much has been loaded or how much is left and usually will have a bar or something that fills as the file loads or at least tell you in numbers how much has been loaded.

These techniques require the same first few steps. As you can guess, the percentage preloader takes a couple extra steps, but it is much worth the extra few minutes in my opinion. It gives the users valuable information about the program or file they are waiting on. If they are waiting and have no idea how much longer their wait will be, who knows how long they will stick around and watch an hourglass.

In actionscript the only special methods we use for a preloader are getBytesLoaded and getBytesTotal. Once we know the bytes loaded and the total bytes to load, with a little math we calculate what percentage is loaded.

Steps

• Hold the viewers at frame 1
• Check if file is loaded yet (percentLoaded)
• If not loaded, update display (if applicable) and check again
• If loaded, continue

Example

This is a preview, note that it is not actually a preloader, just what one looks like. You can see this preloader working in my Interactive Image Viewer…

Actionscript

I’ve put this code on the preloader movieclip which sits alone on frame one with a simple stop(); actionscript command. Frame 2 contains the beginnings of the actual content. To break down the code, we first see that it is performed every frame: onClipEvent(enterFrame), so every frame we will see how much has loaded. In this case the frame rate is 20 frames per second, so we check the amount loaded every 20th of a second!
First we find the percentLoaded by dividing the total bytes to load by the number of bytes currently loaded. Then we display the percent loaded in a text box named feedback and adjust the xscale of the orange bar according to percentLoaded. Finally we’ll check to see if the percentLoaded has reached 100 yet, and if it has we play the parent clip (which in this case is the root, but it could be used to load numerous objects on the stage). When we play the parent clip, we then go to frame 2 or the actual content of the swf and this preloader is removed from the stage and the code will stop executing. But if percentLoaded is not 100% yet this frame is repeated and the code executes all over again, finding the (hopefully) new number of bytes loaded, and updating the display to inform the user. The code executes so fast that the preloader will actually animate the loading process and inform the user simultaneously.

Download

FlashDen is hosting this preloader file: Round Preloader Bar

Circlecube Files on FlashDen

I’ve re-purposed an old project of mine, the interactive pog portfolio viewer, to FlashDen. I call it the pog portfolio because each work is represented by a circle, or pog, and you play ith it in the “bay” with different interactive physics configurations. When you click a pog you can view a close up image of that item and more details. The whole file has been cleaned up (code and graphics) and documented for easy customizations.It is a small file size as well, under 36kb swf!

This is mainly an image viewer, stay tuned for any updates, like video support etc.

INTERACTIVE IMAGE VIEWER WITH PHYSICS AND ANIMATION EXAMPLE!

View Details here at FlashDen

Works and configuration loaded in through a single xml file. Select works from the bay to view title, description image and a link (if applicable). Organize works with the tags or select all and choose the physics of the bay for interactivity control (gravity, spring, grid and friction).

It is fully customizable and fully driven by xml. The xml file contains values for configuring the swf, and also all the information about each work to be included in the portfolio.

Each work is loaded into the “bay�? as a round thumbnail or “pog�?. These pogs are animated with the interaction options (gravity, friction, spring and grid). The pogs are sortable by tags (parsed in from the xml).

The whole color scheme of the image viewer is configurable, or can even be set to random! Have a different color scheme every time your image viewer loads!

Clicking a pog in the interactive bay sends that thumb to the holding area and loads the close up into the focus window for that work. It also loads the details about that work into the detail box (to the right of the focus box). Each works needs a 50×50 thumbnail and a close up (max 375px x 270px) image. Focus images are all loaded in with an informative preloader and fade is once loaded.

Site easily integrates with Google Analytics to track user interactions within this flash portfolio!

All works in the portfolio are passed in through an external xml file, here is a sample work node from xml:

Download source at FlashDen

Enjoy, and let me know what you think!

Circlecube Files on FlashDen

APB are the guys who organize public speakers, whoever you saw speaking at the last graduation or other ceremony was probably done through the American Program Bureau. They have connections! Many many people, from movie stars, to famous writers, to nobel peace prize winers! So for your next party, give them a try. They had a really old website from about 1999 or so. I was involved with rebuilding it! I did most of the html/css design and flash/actionscript. They just launched the site this week, so I’m just celebrating with this post!

See before and after images below:

Old:

The original site was hard to navigate and horrible to look at…

Vs

New:

These are the mock ups, all html/css and the we pushed it into drupal for content management.
APB had the final say on the finishing touches. It came together, although I was suprised that they opted to put so much movement on the page. We set it all up so all speakers have images and videos on their page all in the custom player we built for them… but then they go and embed a youtube video on their homepage… go figure. It came a long way though. Go Web 2.0! Visit American Program Bureau.

Ryan has announced a contest to investigate how Google is actually crawling swfs. He introduced the term “fleximagically searchable” to be included in external content, which is then loaded into the Flex swf. Hoping that google will read the external source file through the swf. Also testing how this shows up in the search results. Even though I think there a lot more to SEO than just letting Google crawl your site, there’s the pagerank and everything that Google uses in it’s top secret algorithm to determine search result position ranks.

Here’s the official rules:

• It has to be a Flex application
• ‘Fleximagically Searchable’ must be dynamically loaded. It can’t be static text inside of your application. – But I don’t care how you load it, in fact that might make a difference in how Google ranks you.
• The first link must be deep linked directly into where you load ‘Fleximagically Searchable’ into your application. Feel free to use any deep linking methods out there.
• Nothing in your code can dynamically load the phrase automatically. It has to be the result of a user interaction.
• You must provide source code and be willing to talk about exactly what you did.
• Multiple entries are allowed if you want to try different things.

They seem to be a bit vague in places, but we’ll see if Ryan decides to clarify anything.

More information: I’ve found that’s helpful at Peter Elst’s post. And Ryan explains Google and Flash’s relationship development here. Here and here is what Google has officially said. Here is the official press release from Adobe about their new

I’ll have a couple entries I’m sure… and I’ll be sure to post about those as well.

Overview:

Often I’ve had some dynamically created movieclip and then wanted to reference it in my code. This is hard to do if it is named dynamically as well, such as with an incrementing variable. If you use one (or more) variable to name an instance in run time, you can’t always know what it will be called.
There are two ways (that I know of) to reference these clips, one is the array operator [] and the other is using the eval() function is as2 (but I’ve noticed that as3 has removed the eval function, so I’d recommend getting used to array notation).

Steps:

1. Create the object dynamically (or with a variable) (_root.myClip.duplicateMovieClip (“myClip”+i, i);)
2. Reference it with either array notation or with eval. (thisOne = _root["myClip"+i];) or (eval(“myClip” + i))

Example:

I create some movie clips dynamically using a for loop and name them all incrementally with a variable (myClip+i). But then i want to refer to some of them later, specifically. I don’t know what they are named though. They are all myClip1 myClip2 myClip3 and so on. I can use array notation to reference these (or eval). I’ve found it’s easiest to create a reference to the name once and then use it to refer to the clip I want. I imagined a scenario that when you click a mc you would want a different one to be moved. So clicking myClip3 moves myClip4 and so on. I’ve made it wrap so that 5 moves 1… They change the _y property of the next to match the one that’s clicked. Clicking the refresh button will loop through all the clips and (this time using eval) randomize the y coordinate.

Actionscript:

Download:

Source fla file: download

Reference:

Nuno Mira shows a good example:

TheCanadian@Kirupa states it nicely:
The Problem
How can I reference objects using a variable? This is commonly a problem with dynamically created buttons:

for(i = 0; i < 3; i++) {
button+i.someProp = "Hello World!"; //error
}

The Answer
This is probably the question that gets asked the most. Referencing an object with a variable is done using something called associative array referencing or array notation. The fundamental concept behind this is that:

myObject.prop = "value";
//and
myObject["prop"] = "value";

Are the same thing. Associative array referencing follows the pattern of scope["prop"] where scope is the object which contains the property and prop is the name of the property you wish to reference. Save appearance, array notation works in exactly the same way as dot notation.

Going back to the original, problematic, example, the correct code would look like this:

for(i = 0; i < 3; i++) {
this["button"+i].someProp = "Hello World!";
}

The button string is concatenated (joined) with the i variable, forming a new reference with each iteration of the loop. First button0, then button1, et cetera.

That’s the quick, but some of you may think that that’s the same notation that is used with instances of the Array class. While that is true, the converse is actually more correct: Array instances use that notation.

Arrays are exactly the same as generic Objects, the only difference is that they have a collection of methods to deal with their properties. And because they require a need for organization, they typically only use numerical properties. Given the array myArray = ["a", "b", "c"], you could theoretically reference the indices using myArray.0, myArray.1 and myArray.2. The reason that we must use array notation is because the compiler doesn’t allow the reference of numerical properties with dot notation.