DIGG IT! I have been working on a custom preloader component for Flex. The idea here is to make the preloader into a splash screen just like desktop applications. It conditions the user to think that this is not a web page and is an application. Here is the first public build.
Flex 2 Custom Preloader Example
Flex 2 Custom Preloader View Source
Flex 2 Custom Preloader Source ZIP
Next Build:
- Add Download Progress
- Add RSL Download Progress
- Add Initialization Progress
Features:
- Preloader is available after application initializes.
- Preloader is faded in and out.
- Preloader supports GIF,JPG,PNG,SWF (Yes, Flash Preloaders are supported!)
I am adding in download/initialization progress into the preloader next week. Currently there is no feedback to the end user that the app is loading or initializing, this will change in the next build.
The important item here is that these preloaders can contain GIF, JPG, PNG (with transparency) and SWF files (Flash 2 or higher!). I made sure that it was easy to embed assets into the base movie for playback before the base Flex SWF has loaded. This makes building/customizing preloaders easy. Simply swap the file (welcome.gif) in the /preload directory and edit the Embed statement in the preload.WelcomeScreen.as Class and you are good to go. The goal here was to allow anyone to make a killer preloader for Flex 2.
I will continue to add features to the preloader as needed until it hits 1.0. Getting the base design ready was not easy but now that the hard part is done, it looks to be smooth sailing.
If you want a feature added please post a comment.
cheers,
Ted :)
Great work Ted.
I'd say if you want to make it more application-like display/output the preinitialize, initialize and creationComplete events.
Matt :-)
Very nice Ted. I hadn't thought much about the preloader (too busy with the guts of the apps I am working on) but I will probably use something like this.
Rich Tretola
EverythingFlex.com
the transparent pngs sound interesting. Great stuff, Ted!
I will post a demo of SWF support. It allows really rich pre-loaders in Flex. The cool thing is that if you use AVM SWF files( Flash 8- ) the SWF files esentially run in a separate VM thus they do not affect instanciation time for Flex SWF files. Flash 9 has 2 brains but in this case you can use them in parallel for a preloaded advantage.
Cheers,
Ted :)
Finally Ted. And thanks for the effort. I for one appreciate it, especially when it seemed I was on your neck for this flex preloader tutorial.
Great work.
that is frickin sweet. :)
i was expecting a flashy preloader and what i got was a feel that i was opening an application. it accomplished its goal. :)
Very nice. I am sure that the feature I am (constantly) asking for - automatic preloading in the application domain crossdomain framework libraries - is already on your list.
Thank you,
Anatole
William,
I am glad I could help here. It wasn't as simple as it seems as it took some time to fully understand the instanciation/preloading phase of Flex.
I plan to post on the logic flow of preloaders in Flex to make what I did a bit more obvious. These parts of a Flex application need to work perfectly so they are a big sensitive to change.
More to come!
Ted :)
That's flippin' sweet, nice work Ted.
This is some more great work Ted, thanks!
I'm very much looking forward to the download progress and initialization progress features.
I tried getting a .swf to load by changing the Embed line to point to the swf and the mimeType to shockwave but I couldn't get it to show me the swf. :(
Great work nonetheless!
Any updates on this? A lot of people are really looking forward to an advanced customized preloader!
Thanks for the great post Ted! I ran into some trouble embedding my own swf though. It just showed up as a white sq. Would you happen to know why that would be?
Joel
GREAT!
First of all, I would like to thank you about your helpful custom preloader.
I found that it did not rely on the
contents begin downloaded,. In other word, if you refresh the page the application would be ready and the custom preloader will still visible.
I am waiting for your modification in terms of adding the progress bar to the preloader.
Thanks again.
I will give you 7 bananas and many, many kudos on my application if you add a progressbar:)
Heck, I've no aversion to begging, either:)
Shawn
Ted,
Great work! I had a question regarding the loader. I noticed you used a button as your applications main element. What I've also noticed is that if more objects/components are used, they appear in the background as if the loader is just being displayed, and not actually loading. What would you recommend as a work around for this issue? Im thinking about using a button and having it removed when the FLEX.event.complete is initiated.
I have been playing with your examples and I am running into an IE7 issue.
The swf preloader is appearing when the parent app is loaded, not prior like the default.
What's up?
how would you add multiple files to a preloader. For example if you wanted the preloader to display both swf and a gif? The issue i run into is when i update the progress of the application load and trying to keep both files types displayed.
If for whatever reason you just want to show the default progress bar minus the "initializing" and downloading, and want to resize the border rectangle, this code works:
package preloader
{
import flash.geom.Rectangle;
import mx.graphics.RoundedRectangle;
import mx.preloaders.DownloadProgressBar;
public class MyPreloader extends DownloadProgressBar
{
public function MyPreloader()
{
super();
// Set the downloading and initializing label text
// to a blank string.
downloadingLabel = "";
initializingLabel = "";
}
// Override the function that gets the border rectangle so that
// the area dedicated to the text label is removed.
override protected function get borderRect():RoundedRectangle
{
//The flex default settings are: RoundedRectangle(0, 0, 182, 60, 4);
return new RoundedRectangle(0, 20, 182, 40, 4);
}
}
}
The problem is that, When the proloader starts it still gives the default greeny background no matter you have changed the application colors. Is there any way to change the screen colors when it is preloading?