11Apr/11Off
Using a Custom Preloader in Catalyst
A common request for Catalyst is the ability to customize the preloader that displays while the main swf is loading. I've tweaked some FXP's and FXPL's to simplify the process of modifying the preloader in Catalyst.
For an example, click the image below.
FXP(L)s and instructions after the jump.
To start a new project with a custom png preloader
- Download the Preloader-Png FXP
- Open the FXP in Catalyst
- Import the png you would like to use, and rename it "preloader.png"
To start a new project with a custom swf preloader
- Download the Preloader-Swf FXP
- Open the FXP in Catalyst
- Import the swf you would like to use, and rename it "preloader.swf"
This swf must be a simple AS3 movie clip (you can't use a swf created in Catalyst).
For an existing project
Here's the longer way to customize the preloader on an existing project (you can use a png, gif, jpg, or swf)
- Download the Preloader FXPL
- Open your project in Catalyst
- Import the FXPL
- Import the png, gif, jpg or swf you are going to use as the preloader
- Save your project as an FXP, and import it into Builder
- Open Main.mxml (the application file under src > default package)
- At the end of the <Application> tag, add the attribute preloader="preloader.CustomPreloader"
- In PreloaderUrl.as (under the src > preloader package), replace "preloader.png" with the name of your preloader asset
- That's it, you can export your project as an FXP and open it up again in Catalyst
For some preloader inspiration, check out PrettyLoaded
The source for the preloader is a modified version of the code here.
If you want a progress-bar like preloader, check out this video over at gotoAndLearn or Jesse Warden's tutorial.
Happy preloading!
April 13th, 2011 - 17:00
Hey the links don’t seem to be taking me to the download. I get the following error when I click to download any of the preloaders:
The XML page cannot be displayed
Cannot view XML input using style sheet. Please correct the error and then click the Refresh button, or try again later.
——————————————————————————–
An invalid character was found in text content. Error processing resource ‘http://dl.dropbox.com/u/21428091/Preloader.fxpl’.
April 19th, 2011 - 09:55
Hi there,
That’s really odd. What browser are you using? I was just able to download them in Chrome, so perhaps it is a browser bug? The raw link, if it helps, is:
http://dl.dropbox.com/u/21428091/Preloader.fxpl
-Bear
April 19th, 2011 - 12:44
Hi! for those of us who still don´t know Flash Builder Source usage, could you be more specific about the code? I´ve tried with this before the Application tag as yoy mention at 7th point, but shows me an error :
So, how the estructure of the code goes? Thank You
April 20th, 2011 - 11:10
Hi there,
You’ll be looking for the file containing the tag (MXML looks similar to HTML, if you’ve worked with that before). Generally the file is named “Main.mxml”. What you will want eventually is to alter the tag to look like:
Where the “…” part is a bunch of stuff like ‘xmlns:fx=”http://ns.adobe.com/mxml/2009″‘ and ‘width=”100%”‘.
If you really aren’t digging the builder part, you could export your current project’s assets as a library (File > Export > Library Package) and then import them into one of the pre-baked uploader FXPs.
May 3rd, 2011 - 15:10
Hi, Bear
So, I to am having issues with the preloader that defaults in Flash Catalyst CS5
my website is up… http://krootstudio.com/
but the progress bar is horrid.
I have tried to download your files from above and I get the message that it cannot be opened because it was created by an incompatible version of FC………???
I am on a mac running 10.6.7, adobe CS5 Design Premium, sans FB. I did download a trial of Builder with 37 days to go……
I do not know code….. I have tried to follow what you posted above for an Existing Project got as far as #7: I placed…………=”preloader.CustomPreloader” at the end of what I think was the right tag,
it was the 2nd line of code in the Main.mxml,
I will post it:
Is this where it goes???
I then looked thru all the files for my site and could not find ………
PreloaderUrl.as (under the src > preloader package)
to then change it to mine.
I would really like to have it work, It’s a drag to have designed something and have the first impression be so unrelated and benign……….
I did make a preloader in flash……. I can get around in Flash a bit, but the ActionScript is where i get stuck.
Any further help would be great!
Stacy
also loved the link to PrettyLoaded…..
May 4th, 2011 - 14:04
Hi Stacy,
To use this, you need to be running Flash Catalyst CS 5.5 or later. I had to modify the project files in Builder, which makes them incompatible with the previous version of Catalyst (CS5).
You can check out the Flash Catalyst CS 5.5 site here:
http://www.adobe.com/products/flashcatalyst.html
-Bear
May 4th, 2011 - 14:58
Hi Bear,
First, thanks for responding!!……. I have been on with Adobe for 3hrs trying to get help and gotten nowhere but disconnected multiple times, transferred to the expert who is actually the original department who has no clue, top that with delayed phone connections to call centers located elsewhere ,then told you have to pay…. urggg.
Imagine if Monopoly came with everything but the Instructions….. lol,
Okay, so let me ask you this, will I be able to open up my existing project without problems or issues if I upgrade to 5.5? I had downloaded Panini, and it said it was unable to open my version of FC 5 and seemed to be causing problems so I uninstalled it.
Will the new version also allow me to scale the project as a whole for different monitor sizes and browsers when putting it into dreamweaver to upload to the server?
please excuse what may seem like basic questions, and my previous rant on Adobe help.
~Stacy
May 6th, 2011 - 14:03
Works fine!
Thanks!!
May 24th, 2011 - 07:48
Great tutorial!!!, BUT to me works fine in IE but not in Firefox and Chrome, do you know how this could be possible? my site is http://www.elcondornc.com.ar . Thanks!
May 27th, 2011 - 16:50
Well I got the FXPL downloaded but when I go File > Import > Library Package and then select the preloader FXPL it tells me “this package has been modified outside of Flash Catalyst and cannot be imported”
Help! My company really wants me to do away with that annoying stock preloader!
May 31st, 2011 - 11:34
Hi i’m french so sorry for my english but i’ve a question.
how do you do to make your site take 100% of the area of the web? ?
May 31st, 2011 - 13:34
My problem seems to be the hosting service (im using a free one for testing)
May 31st, 2011 - 14:15
Hi there!
I’d suggest using Catalyst CS5.5 or higher. That’ll give you the ability to create dynamic layouts, and your swf should take up 100% of your page.
Normally, you would tweak the width / height in the html embedding your swf. But, if your swf isn’t resizable, it will display as the same size, regardless of how big or small you make the embedded object.
-Bear
May 31st, 2011 - 15:12
I’ve upgraded I am now 5.5 and it’s awesome !!
June 1st, 2011 - 14:43
Hi bear! I tried to start a new project with a custom png preloader but doesnt work, but works for an existing proyect, do you know how this could be possible? my site is http://www.xirka.net and Im using catalyst cs5.5 and builder for php . Thanks!!!!
June 1st, 2011 - 14:57
Sorry brear, problem solved. Thanks!
June 10th, 2011 - 08:36
Nice tutorial. Is there a way to implement a smooth transition between the preloader and the first (default) state? thanks!!.
June 20th, 2011 - 10:26
Hi there Matt,
You can customize the preloader pretty much any which way you’d like. The challenge for this one was coming up with a general case. I’m sure there is a way to fade in the content, I just did not have the time to implement it in this case. You can take a peek at the code if you like, and see if there’s some additional functionality you’d like to add there.
June 25th, 2011 - 08:19
Hi Bear – thanks for posting this. I was one of the people begging for a better preloader for my catalyst website. I’ve gone through all the steps and hit a snag at re-opening the project in catalyst 5.5. I get a message that the version of Flex 3.5 is not compatible. I just spent more money upgrading to Catalyst CS 5.5 and now apparently my version of Flash Builder, which says it’s Flash Builder 4, is too old? Can I change the version if Flash Builder 4 as the message states, or is Flash Builder 4 not compatible with Catalyst CS 5.5? Thanks!
June 27th, 2011 - 10:25
Hey Bear – thanks again for this post. I finally made it all work after installing the latest catalyst, builder, and flash versions. The problem I have is that the preloader swf is very choppy. I need a way to make the preloader swf play one time all the way through smoothly until the main site loads. I have looked and looked for code to make that happen and everything I can find is made in earlier versions and so does not work in Builder 4.5. Can you please offer some advice?
Thanks!
July 13th, 2011 - 20:34
Does the loader display while ALL page elements are loaded or just the Flash elements?
I have my Catalyst loading but on some slow internet connections, sometimes the Flash stuff loads and begins playing while my HTML content/images aren’t loaded yet.
Is there a way to preload the entire HTML/IMAGES/SWF etc before it starts playing to the viewer?
July 15th, 2011 - 07:06
I tried making a custom skin in Builder but I Just can’t figure out how to do it and there are no tutorials on the web. IF you could help me I would really appreciate it!
July 26th, 2011 - 21:32
It’s only loading the flex framework and the application. Doing more would require some custom work in Builder.
July 26th, 2011 - 21:40
You’ll have to tweak the code in the preloader class inside of Builder. Take a peek and see how it works, then see if you can tweak it. You may want to start with the timer creating the fade.
July 26th, 2011 - 21:41
Hmmm, it works best with Flash Builder 4.5 or better. It may work if you install the Flex SDK 4.5 or higher, but I’m not sure.
August 4th, 2011 - 07:58
hi,
how i push the preloader a little bit more up… actually my preloader is not visible, because i think the preloader always has the middle position… can i change that?
Thanks!!!
September 13th, 2011 - 05:07
hello, i got my custom made preloader to run before when i run project in catalyst, but when i publish theproject and preview it in my dreamweaver website, the preloader is gone … any advice ?
September 13th, 2011 - 05:28
ps. i used cataltyst 5.5 and builder 4.5 it all works fine when i run the project from catalyst, i have a nice preloader before the main project starts up, but as soon as i publish en execute the main.swf of main.html , no preloader, just a white screen and then my project as it was before
September 13th, 2011 - 13:43
Is this once you post it to your web server, or on your local machine? You will need to make sure your preloader is in the same relative file location to your swf when you publish. To run properly on your local machine, you’d need to configure the flash player to allow the swf to load files from the local file system.
That’s at least where I would start.
September 13th, 2011 - 23:18
i think i got that right, will give it another go, thanks anyway, got some great information off u guys, is much appreciated !
September 14th, 2011 - 01:54
got it, i just had to copy and paste my preloader.swf from my data folder to the root folder of the site (www.) and all was well
September 22nd, 2011 - 00:40
still had some issues with it working in IE , i had to add and edit swfobject_modified.js to my rootfolder , pointing at main.html instead of main.swf and now it works in IE.
October 14th, 2011 - 07:19
Hi. Could you do it in Adobe CS5.5? Panini link doesn’t work.
October 18th, 2011 - 21:12
Hi there. CS5.5 should work, it’s the release version of Panini.
January 15th, 2012 - 14:12
hello
i have a so simple question
cna i use a gif animation to be my preloader or it must be a swf file ?
i mean i import a giff animation or f4v file into catlayst and i want this to be my preloader ok?
i save this in catalyst then i import this in builder and then i go to ” Main.mxml (the application file under src > default package)
# At the end of the tag, add the attribute preloader=”preloader.CustomPreloader” ” after this i re open this file in catalyst and it will work?
my mai nquestion is if i can use a giff or any file as preloaer or it must be swf
i hope u udnerstand my english,my mothertongue is spannish and i wrote fast in the middlle of a hurry ,
regards
January 16th, 2012 - 18:52
Hi there,
This one will only work with .png images because of the way it’s coded. If you wanted to look in the project though, I think you should be able to modify it to load .gifs.
-Bear
May 14th, 2012 - 15:20
Hy there,
Thanks SO MUCH for this tutorial. I have a problem tho: I have lots of f4v files in my assets/media folder and they seem to stream instead of being loaded by the preloader. Where and how can I fix that? Please help me, I’m so close =)
regards
May 21st, 2012 - 15:52
Hiya Mitch,
If I recall correctly, f4v files are streamed by default, and most likely you don’t want to embed them (as they are huge). If you did choose to go down that route, I would search for some tutorials on embedding f4v assets in Flex, which would have to be done in Flash Builder.
June 13th, 2012 - 02:17
Hi Bear Great site, shame catalyst has been dropped, it showed promise.
is there a way for me to set a minimum display time for this preloaded, I’m sure there is I just cant figure it out.
June 13th, 2012 - 03:00
Oh and another question, How do i change the fade time as I want my swf to fade in quickly play an animation and then gradually fade out. is this possible?
June 26th, 2012 - 22:31
Hi there Benny,
Thanks! Unfortunately, I didn’t code the preloader for a minimum delay, so you would have to customize the code by opening it up in Flash Builder. There’s a pretty long article about preloaders on Adobe Help. Some of the things they mention may not be entirely FC compatible, but hopefully it’ll give you a place to start.
June 26th, 2012 - 22:48
You would need to open it up in FB and adjust the number supplied to the fade timer. Unfortunately preloaders are pretty low level, so it was a little tricky to get them into Flash Catalyst in an accessible way.