Tuesday, 27 October 2009

Flash Custom Website Preloader: Rotating in Mask

Hey!

Recently I've been working on one project, related to flash and I found some stuff you might find interesting.
This time we will concentrate on the custom website preloaders. What is a PRELOADER ?
A preloader is a small program ( or even a function ) whick is executed while the page is loading ( if your page is loading slowly then you should definetly use a preloader), for example: "the page is loading.... please wait". If you work with flash, then I'm pretty sure you are going to use some looping animation insted of text for your preloader.
So this time I will show you some simple and interesting way how to create a website preloader in Flash.
Ok, let's assume we have a website with black background and before the page loads up, we want to show some simple animation. Lets start with opening Flash program. Follow the next steps:
  1. Go Modify>Document. Choose black as your background;
  2. Go Modify>Document. Choose width and height. In this tutorial I use 300x300.
  3. Now let's create a simple square with a square drawing tool;
  4. Press F8 and click "OK". The F8 button is a shortcut to converting a simple drawing to a symbol. We need that because we will need to write reffer to this drawing in our actionscript.
  5. Click on the new square symbol and open the properties menu ( the bottom of your screen);
  6. Click "Instance name" and name it "turner".
  7. Now open the filter menu. Press "+" and then press "blur". You can choose the amount of blur effect yourself.
Ok so now we are done with the animation. The only thing left to do is changin the center of our symbol. To do so:
  1. Double click this symbol. When you are inside the symbol, choose a simple pointer tool and drag your square a bit right untill you see the cross, pointing the center of a symbol beeing outside the symbol.

  2. Duoble click anywhere to go to the main Scene.
Ok, now see the layers panel. Add one layer more above the current one. Right Click it and choose "Mask". Now here's the trick: only objects drawn in this "mask" layer will be seen to a visitor, so you can get creative and draw any kind of object. I chose a half-circle.
When you are done, Add one more level above the Mask level. Then Click the first frame and open the Actions Panel (window>Actions or F9).

Now add the following code to this frame in the Actions panel:

turner.onEnterFrame = turn;
//this line tells flash what to do when the turner object is loaded: assigns a function "turn".


function turn(){
turner._rotation +=10;
}
//this is the function which tells "turner" to turn around by 10 degrees each //time the function is evaluated.

OK, now you can add one more layer above and put some text in your object. I chose "We are loading...."

Now press "CTRL + ENTER" and you should see something like this:









So this is it, you have just created you first preloader.In the next post I will disccuss how to make your preloader show up before the page loads and how to play it till the page is loaded.
I hope you enjoyed reading this, feel free to ask if you need some help. Good luck in creating preloaders.

No comments:

Post a Comment