Custom Preloader

I made a website in Flash Catalyst, and imported it to Flash Builder to ad some
features, like key input, fullscren.
The main thing I also wanted to do was to create a custom preloader. I made a SWC file in Flash, but can't make it work.
Since I am a graphic designer and don't really know anything about Flash/Flex, but I desperatly need help finishing the project.
Do you guys have any advice /codes (I've read everything on the net...) that you can share.
Or better yet, would you like to do the job (payed via paypal).
Thanks in advance,
phil
SWEDEN

You might try watching this tutorial by Adobe's Lee Brimelow at http://gotoandlearn.com/play.php?id=108. Another tutorial can be found here: http://www.leavethatthingalone.com/blog/index.cfm/2009/11/11/Flex4CustomPreloader
Good luck!

Similar Messages

How to Create Custom Preloader

Hai,
I wnat to create custom Preloader with Progress bar and
Percentage
Can you help me
Thanks

on your application tab.. you can specify the preloader class..
<mx:Application preloader="Your preloader class" />
and make sure your preloader class extends DownloadProgressBar class.
public class PreLoader extends DownloadProgressBar and also
override public function set preloader(preloader:Sprite):void
override this function ..
BaBo,

Flex Custom Preloader

Hi,
I've read a lot of tutorial about custom Preloader. I made
one, by extending the Sprite Class and implementing the
IPreloaderDisplay interface.It works, I added a custom Image, a
small progress bar with a percentage label. What I'm not able to do
is CHANGING THE BACKGROUND. The goal is to have a repeated image as
a backgroundImage. But I don't even succeed in changing the
backgroundcolor.
Can anybody help me?
Thanks in advance.
Davide

Ok. I went and made a small example - cut'n paste stuff.
Perhaps not the best way but works for me.

Skinning my custom preloader

Here is my custom preloader:
/* Custom Preloader */
package com.preloader {
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.geom.Rectangle;
import mx.preloaders.DownloadProgressBar;
public class DBPSubclass extends DownloadProgressBar {
public function DBPSubclass() {
super();
// Minimum display time after download
MINIMUM_DISPLAY_TIME = 0;
// Set the default text during initialization
// Progress
initializingLabel = "Download Complete!\nInitializing...";
// Override label area to display custom text
override protected function get labelRect():Rectangle {
return new Rectangle(14, 5, 150, 30);
// Override download progress handler to display
// Custom Text
override protected function
progressHandler(event:ProgressEvent):void {
super.progressHandler(event);
label = Math.round(event.bytesLoaded / 1000).toString()
+ "k of " + Math.round(event.bytesTotal / 1000).toString()
+ "k";
// Override to ensure display of progress bar during init
and download
override protected function
showDisplayForDownloading(elapsedTime:int,
event:ProgressEvent):Boolean {
return true;
// EOF
How can I change that ugly rectangles 1. corners to be
straight edges, 2. color to black.?

Only 1000 lines?Well... It's just a small personal project... but then you can try loading your main movie into a container and monitor the load progressHm-m-m-m... There is actually NO main movie... There are several F4V files though, which are loaded on the start up and then playing (e.g. every button is a 'movie reel'...), and I already monitor their loading progress
I was simply trying to analise my website statistics and found out plenty rejects from Safari users in particular...
Although, there are many other reasons for leaving a website (not necessary my own Super Mega Flashy one) after less than 15 seconds, I did a timekeeping again - Safari does load the project twice slower...

Centering Custom Preloader

Does anyone know how to center a custom preloader I don't
know how to find the broswer width & height in my custom
preloader class file.
Thanks for your help

Thanks for your reply.
I tried couple of different ways to set both horizontalCenter
and verticalCenter = 0 but, I was not able to get this to work.
I'm using this example to create a preloader...
http://livedocs.adobe.com/flex/201/html/app_container_064_19.html
add in my main mxml file ....
preloader="CUSTOM.PreloaderClass"
Thanks for your help.

Problem about custom preloader in Flex 1.5

I read the article written by Eric Anderson and test his
sample.But i met some problems.
the codes is on
http://weblogs.macromedia.com/eanderson/archives/2004/12/preloader_in_fl.cfm
I can only see the "Loading Your Application View . . . ",
but can not see "LOADED:" or "TOTAL:" in the function
setProgress().It seems that the function is never called.
What's wrong?
thanks in advance.

The setProgress() method is only called when downloading the
SWF from a
remote location. Is your SWF on a server? You also need to
clear the cache
before each download.
Glenn

Custom text not appearing on stage if not preloaded.

Hi,
I've added text to the stage and if I test it out using ctrl+enter, it does not show up. If the swf "loads"/"simulate load" then the text shows up, but not in the correct font.
This is the error when the swf is not preloaded:
VerifyError: Error #1014: Class flashx.textLayout.container::ContainerController could not be found.
at flash.display::MovieClip/nextFrame()
at spot_fla::MainTimeline/l()
I've also recently added an AS3(CS5) preloader which is when this started. The library mc items have been set to export in frame 2 but the font doesn't show up. The font has been embedded as well but linking/unlinking it does nothing. The AS3 preloader is a simple script that a lot of tutorials online use. Let me know if you want it posted.
The "Advanced ActionScript 3.0 Settings" are default except:
Export classes in frame: 2
Preloader method: Custom preloader loop
The textfield is located in frame 2 of the timeline and is not referenced in AS. However it is inside of a mc that has a mouse listener on it(mc).
Any ideas what the problem is? Thanks.

Oh wow. It's running so much better now. I didn't realise how much memory it took up, should have looked it up.
Thanks
Some basic info for anyone else reading this.
http://forums.adobe.com/message/2913998
http://pixelpaton.com/?p=2396

My preloader doesn't want to work

I'm creating a website using Flash CS5 and AS3.
For this website I've put a preloader on the 1st frame and the site on the 2nd.
I've tested the site after having created a small animation which makes appear the main menu, a logo and an image.
Everything did work good, so I went on building the site.
Now that I have created some pages I've tested again the whole site and the preloader doesn't work anymore.
Testing the site on the "ctrl+enter" window and simulating the download I have a white background (both the preloader and website background are yellow) then I see the preloader for a fraction of second and suddenly the site appears.
Publishing the site on my web space the background is correctly yellow, but the preloader doesn't appear, the browser's loading bar stops at half then the preloader appears again for a fraction of seconds and suddenly the site appears (tested on Firefox, IE, Opera, Chrome and Safari, same behaviour with all of them).
It looks that the preloader is become part of the site and that there is an invisibile preloader.
The setting in: Publish settings -> Flash -> Script Settings -> Library Path -> Default Linkage
is set to "Merged into code"
the same happen if I set "Runtime Shared Library" and "Custom Preloader Loop".
Instead if I set the default preloader (ActionScript 3.0/rsls/loader_animation.swf) it appears correctly.
My preloader should be good since it did work and I haven't modified it.
What could cause this problem?

in your new fla that will load your main swf, you can start with:
var tf:TextField=new TextField();
addChild(tf):
tf.multiline=false;
tf.text="0% Loaded";
tf.autoSize="left";
tf.x=(stage.stageWidth-tf.width)/2;
tf.y=(stage.stageHeight-tf.height)/2;
var ldr:Loader=new Loader();
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,completeF);
ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progressF);
ldr.load(new URLRequest("main.swf")); // assuming main.swf is the correct file name
function complete(e:Event):void{
ldr.contentLoaderInfo.removeEventListener(Event.COMPLETE,completeF);
ldr.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS,progressF);
removeChild(tf);
addChild(ldr);
function progressF(e:ProgressEvent):void{
tf.text=Math.round(100*e.bytesLoaded/e.bytesTotal).toString()+"% Loaded";

How Do I Fix This Runtime Shared Library Preloading Error?

Hello,
I just finished up my site, and this is the only thing holding me back from publishing it. Whenever I "Test" my site, I get this error: " Your content will not stream. Runtime Shared Library (RSL) preloading will require all of your content to download before the first frame will play.
To prevent this you can change the Runtime Shared Library Library Settings, in the Advanced ActionScript 3.0 Settings dialog which can be raised from the Publish Settings dialog.
The Runtime Shared Libraries being preloaded are:
textlayout_1.0.0.595.swz for TLF Text"
Does anyone know how to correct this error? If you do, could you please walk me through it step-by-step. I am still very new to "Flash Professional (CS5)" & "ActionScript (3.0)"

Reference error is because the default linkage for textLayout.swc is Runtime Shared Library (RSL) with preload swf option so the reference will always be “RSLPreloader” if TLF is used.
There are 2 options that we can avoid the reference error:
1. Change default linkage to “Merged to code” which will add around 150KB to child swf file size.
2. Change preloader method to “Custom preloader loop”, move all contents and scripts to frame 2. And finally, in the Advance ActionScript 3.0 Settings, export classes in frame to 2.

Registering event handler with preloader

As you can see from the code below, I have an application
with a custom preloader designated in the Application tag.
I would like the preloader to be able to receive a message
from my main application but in order to that I need to register a
method in the preloader as an event handler for an event fired by
my application and in order to do that I have to have a reference
to both the preloader and the application.
Where can I get a reference to both? this.preloader seems to
be null when the initialize() event is fired in my application and
mx.core.Application.application is null in my preloader. Is there
any way at all to do this?
I would GREATLY appreciate any help with this! I've been
struggling with this for hours :(
Thanks!
Moshe

Thank you Nayan..
BR
Aliye

Today is the day the preloading will work! Help...

I've tried and tried to find different ways to make the preloading work correctly but there is always something that doesn't seem to work with each way. Could someone dumb it down for me and help me understand how to make this work. I've read everything on the safeloader and at this link:
http://www.stevensacks.net/2010/05/28/flash-cs5-tlf-engine-causes-errors-with-loaded-swfs/
I've also browsed all blogs and adobe tech notes and just had no luck getting a way that always worked. Here is what I'd like to do:
Create a preloader swf that contained a movie clip to display the percent.
Allow the preloader swf to call functions inside of the loaded swf. (this is for stage resizing, usually)
Be able to use the tlf textengine in my loaded swf's.
Keep my reference to the stage or pass it from the preloader swf to the loaded swf.
Every way I've tried seems to lose at least one of these items. Right now I have a file that uses the tlf textfield and a stage reference. It works fine as a standalone swf but it needs a preloader. In the as 3 settings the tlf is merged into the code. The extra size isn't that big of a deal, for now. However, I would love to not do that and point the preloader away from adobe's stock preloader to my own in the as 3 settings. However, I can never get it to work correctly.
Can anyone point me in the right direction? Thanks!

Kglad, I created a system
that works. I will post it here so others can use it if needed.
Outline: I'm using a custom preloader.swf to load another swf file. The loaded swf file contains a document class and the tlf textfield. I am able to load this correctly, track the percent loaded, pass the stage reference, use the tlf textfield and use the stage resize functions to dispatch listeners for sites that are 100% of the browser.
THE PRELOADER SWF
This file simply contains the preloader movieclip in the library and code in frame 1. I guess a doc class would work here but I have not tested. The AS 3.0 settting are the default settings for player 10.
Code:
//======================================================================================== =================================================
//     import classes
//======================================================================================== =================================================
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.filters.BevelFilter;
import flash.display.MovieClip;
import flash.display.Loader;
//======================================================================================== =================================================
//     set stage alignment
//======================================================================================== =================================================
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.ACTIVATE, activateHandler);
stage.addEventListener(Event.RESIZE, resizeHandler);
//======================================================================================== =================================================
//   variables
//======================================================================================== =================================================
var pre_loader:Preloader;
var this_page:String = "sbBackground.swf";
var load_bar_width:Number = 150; // make this the width of your image
//======================================================================================== =================================================
//    variables
//======================================================================================== =================================================
function activateHandler(event:Event):void {
trace("here");
//======================================================================================== =================================================
//    variables
//======================================================================================== =================================================
function resizeHandler(event:Event):void {
trace("resizeHandler: " + event);
trace("stageWidth: " + stage.stageWidth + " stageHeight: " + stage.stageHeight);
//======================================================================================== =================================================
//    variables
//======================================================================================== =================================================
var background_ldr:Loader;
var background_mc:MovieClip;
var background_holder:MovieClip = new MovieClip();
addChild(background_holder);
//======================================================================================== =================================================
//    init site
//======================================================================================== =================================================
function init():void{
// show preloader
pre_loader = new Preloader();
addChild(pre_loader);
pre_loader.x = Math.round(stage.stageWidth/2) - Math.round(pre_loader.width/2);
pre_loader.y = Math.round(stage.stageHeight/2) - Math.round(pre_loader.height/2);
pre_loader.load_bar.width = 1;
// load page
loadThisPage(this_page);
//======================================================================================== =================================================
//    load called page
//======================================================================================== =================================================
function loadThisPage(thisPage:String):void{
// load new page
background_ldr = new Loader();
var pageRequest:URLRequest = new URLRequest(thisPage);
background_ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, pageCompleteHandler);
background_ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, pageProgressHandler);
background_ldr.load(pageRequest);
function pageCompleteHandler(loadEvent:Event){
background_mc = MovieClip(background_ldr.content);
background_holder.addChild(background_mc);
removeChild(pre_loader);
function pageProgressHandler(e:ProgressEvent){
var loaded:Number = e.target.bytesLoaded;
var total:Number = e.target.bytesTotal;
var pct:Number = loaded / total;
trace(pct);
pre_loader.pct_txt.text = String(Math.round(pct * 100)) + "%";
pre_loader.load_bar.width = Math.round(pct * load_bar_width);
THE LOADED SWF
This file also used the default settings for Flash player 10. Therefore, I am not merging into the code my tlf library so no increase in file size.
The doc class:
package com {
// core
import flash.display.MovieClip;
import flash.display.Stage;
import fl.text.TLFTextField;
import flash.events.Event;
// import custom classes
import com.main.BuildStageClass;
// initialize class
public class DocClass extends MovieClip {
// custom classes
// variables
public static var build_stage_class:BuildStageClass;
// stage containers
public static var main_stage:MovieClip;
// private toggle var
private var init:Boolean = false;
// main constructor
public function DocClass() {
   addEventListener(Event.ADDED_TO_STAGE, stageAddedHandler);
private function stageAddedHandler(e:Event){
           // trace("Document Class Stage: " + this.stage);
   // initialize classes
   build_stage_class = new BuildStageClass();
   // wait until second added to stage call to initialize application
   if(init == false){
    init = true;
   else{
    removeEventListener(Event.ADDED_TO_STAGE, stageAddedHandler);
    // add containers to stage
    main_stage = new MovieClip();
    addChild(main_stage);
    // start app
    startApplication();
public function startApplication():void{
   //trace("here at start");
   // build stage
   build_stage_class.buildStage();
This works 100% for me without using the safeloader in the preloader.swf. I've experienced some issues with the safeloader before so not using it is a blessing.
I hope this helps someone! Enjoy.

The art of preloading.

I would like to ask the experts how can I make a preloader along with how to preload my webpage too. I've searched many websites but they have complicated demos with outdated files to use so it's impossible for me to make one.
I was thinking for something really simple like a one color full browser-screen with an animated GIF image in the center. When the page is loaded then the preloaded quickly fades-out (can this effect be also included?).
For your reference I've found this two websites but the files are not easy to use:
1. Preloading screen https://ihatetomatoes.net/create-custom-preloading-screen/ (looking for something way more simple than this - as mentioned above)
2. Preloading web-page So, You Want To Pre-Load, Huh?
Thank you all in advance.

Never had teh necessity to use a 'loading' screen myself but I think the below may work:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="charset=UTF-8">
<title>LOADING SCREEN</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#loadingWrapper').hide();
</script>
<style>
#loadingWrapper {
position: fixed;
height: 100%;
width: 100%;
background-color: #000;
color: #fff;
top: 0;
left: 0;
display: table;
text-align: center;
vertical-align: middle;
#loading {
display: table-cell;
vertical-align: middle;
</style>
</head>
<body>
<div id='loadingWrapper'>
<div id="loading">
Loading....
</div>
</div>


</body>
</html>

AS3 Preloader Help.

Can someone kindly show me/point me into the right direction on as to how to make a custom preloader. But the thing is i want it inside of a URL function.. Which is where im struggling. Can someone help? Many thanks.

I don't see anything in there that resembles an attempt to build a preloader and still cannot determine what you are referring to as a URL function. One thing I will suggest is that you break up your loader code a bit so that you assign the event listeners to it before you start loading as shown below. Cramming a series of operations into one line is not always the best way to go...
var urlReq:URLRequest = new URLRequest("https://api.twitter.com/1/statuses/user_timeline.json?screen_name=Scot tMitchell");
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, loadComplete);
loader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
loader.load(urlReq);
If you look in the Flash help documentation in the URLLoader class section, at the very end of that section it shows a variety of events being coded, including the PROGRESS event that I added above. That may help you get a better start on what you want to do.

Flex 4 default preloader not centered when in sub application

The preloader app loads the mainApp using SWFLoader with height and width set to 100%. In the mainApp we have 1 big image to increase the download time. Check now where the preloader shows up. Why it isn't in the middle of the screen? Testing separately both applications it is centered, but like this.. it is not. I've tried centering the SWFLoader, putting it into groups, setting 100% width and height of the mainApp, nothing worked.
View source is enabled, feel free to test.
http://filip.nedyalkov.net/preloader/
If the only way to fix that is with a custom preloader please if u have a link of a good example doing the trick share it

link don't work.
i have some problem with preloader when make
systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL; systemManager.stage.align = StageAlign.TOP;
on initialize or preinitialize )
fix it by moving my function to creationComplete event.
well i little bit late with words ))) year past, but bether leter then never )

How use a custom Pre-Loader

Hi, quick question
How can we modifies the default Pre-Loader of our APP ?
Regards,
Core

Hi Core,
the link below from ted is a good one for custom preloads
http://www.onflex.org/ted/2006/07/flex-2-custom-preloaders.php
check this out,
Arthur

Custom Preloader

Similar Messages

Maybe you are looking for