Actionscript Quick Preloader

Light Burst (Photoshop)

Ever wanted to create those space warp/ light bursts that you see in banners and wallpapers all over the web? If you haven't, the following image is an example of such a graphic:

Now, I am sure you are interested in creating this effect. It's simple - here's how:

1. Create a new document, any size, with a black background.
2. Using the freehand lasso tool, draw a random, roughly round shape in the approximate centre of the image.

3. Create a new layer, then fill this shape with white, using the Fill tool.

4. Press Ctrl+D to de-select, and then open the Filter menu. Choose Blur>Gaussian Blur. Set the amount to 9 pixels and click OK.
5. Now open the Filter menu again and choose Distort>Ripple. Set the amount to maximum and the size to medium. Click OK.
6. Now press Ctrl + F twice, to repeat the filter twice.

7. You should now have a nice ripply shape. This is the basis for your light burst.
8. Open the Filter menu yet again, and choose Blur>Radial Blur. Set the amount to 100, the Type to Zoom and the Quality to Best. Click OK.
9. Depending on the size of the image and the speed of your machine, the speed at which PS will process will vary. When it's finished, you should have a white light burst.
10. You may notice some odd rings of noise around the burst. To fix this, apply a gaussian blur, experimenting with the amount.
11. To make it a bit more interesting, try colorizing the burst (Ctrl+U, tick colorize, and play around), and maybe even adding a bit of lens flare.

Creating a Motion Tween

What exactly is a motion tween? First, let's imagine that you place a box on the table. Now, imagine, that after 10 seconds, the box suddenly disappears and magically appears again a few inches to the right of where it had been originally. Pretty strange isn't it?

Well, if you could rewind your past minute and watch it again, what will you see? You will see the box suddenly disappear and appear again in a different position with no cohesion or "animation" in the 10 seconds that elapsed. Here is where motion tweening comes in. With motion tweening, instead of the square disappearing and reappearing, you will instead see the square slowly moving itself to its new position - no disappearing acts at all! A motion tween, simply put, fills in the missing sequences between a starting position and the ending positions to create a full animation.

This tutorial will explain how to create a motion tween in Flash MX 2004, and hopefully you will understand more about motion tweens. Your animation, toward the end, will look a tad bit similar to the following animation:

[ create a simple animation ]

Learn How to Tween:

1. First, launch Flash MX 2004. Once the program loads, you should see a new, blank area called your workspace. If you do not see anything resembling a white box, create a new animation by going to File | Flash Document. There, you should be all set!
   
2. Now, click on the Rectangle tool from the set of icons on the left. The Rectangle tool icon looks like the following image:

[ click the rectangle tool icon ]

3. Once you have clicked the Rectangle tool icon, go to your drawing area, and draw a square by clicking your mouse and dragging - then releasing once you have a square. Try to ensure that your square is close to or hugging the left edge of your white drawing area:

[ draw a square - make sure it is aligned toward the left ]

4. After the square has been drawn, take a peek at your timeline. Your timeline is the large area toward the top with numbers and small, vertical boxes. Notice, that at Frame 1, there appears a solid dot:

[ notice the solid dot in your timeline ]

5. The solid dot signifies that something substantial exists on that frame - Frame 1. In our case, the "something substantial" is the square you created! Now, look a little to your right and find the number 20. Right click directly at the box under the number label 20 and select "Insert Keyframe":

[ select Insert Keyframe on Frame 20 ]

6. Once you select Insert Keyframe, you will see another black dot appear in Frame 20. Don't worry - that's a good thing! Now, make sure you select the keyframe on Frame 20 by clicking it with your mouse pointer.
   
7. With the keyframe selected, go down to your square again. Notice that your entire square is also selected. Now, press your Right arrow (on the keyboard) a few times to make it move a few centimeters from the right-most edge of your movie area:

[ square moved to the right of the movie ]

8. Now, with your mouse pointer, click on Frame 1 of your movie in the timeline. Notice where the square is! It is on the left. Without hesitation, now click on Frame 20. Notice that the square is to the right. Click anywhere else on Frame 10, and notice the square finds its way back to its original, left position.
   
9. Enough of me chattering, It's time to motion tween! Click on Frame 1 and highlight all the frames between Frame 1 and Frame 20. While all the frames are highlighted, right click and select "Create Motion Tween:"

[ highlight all the frames and select "Create Motion Tween" ]

10. If everything worked out well, your highlighted frames will take on a purplish color with a large arrow leading from Frame 1 to Frame 20. Click anywhere on the timeline, and notice that you can "track" the square's position through its 20 frame journey.
    
11. Go to File | Save to save the animation. From there, go to File | Publish Preview | HTML. You should see your square gradually moving from the left toward the right.