Building an animated preloader

A preloader is a way to provide visitors with feedback by let- ting them know that the content they requested is loading. This will be one place in this particular portfolio where you’ll show off some Timeline animation.

1. Create a new layer above all the existing layers and name it preloader.

2. Select the Oval Primitive tool and draw a circle on Stage (hold down the Shift key to constrain the

proportions).

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

3. Your oval should have a white ﬁll with no stroke. In the Properties panel, update the following values: X: 425, Y:

200, W: 150, and H: 150. In the Oval options, assign a value of 70 to the Inner Radius. Your circle should now have a hollow center like that of a ring (Figure 5.21).

4. Convert the oval to a new Movie Clip symbol named preloader. Name the symbol instance preloader_mc.

5. Switch to the Selection tool and double-click on the preloader instance on the Stage to edit it in place.

hollow center was created by adjust- 6. Use the Transform panel (Window > Transform) to ing the Inner Radius in the Properties

Figure 5.21 The circle primitive with a

rotate the oval shape –90 degrees. This will place the

panel.

two dots that appear in the oval selection at the top of the oval (Figure 5.22). This rotation will cause your

animation to begin at the top of the circle. There are several ways to animate this ring so it appears

to be actively drawn in a circle. Tweening is generally

a good way to save time (recall the mouth within the Wanderer example in Chapter 3). Unfortunately, in this case, tweening this effect would take at least four new keyframes, several shape hints, and a mask (because the resulting tween would remain slightly deformed). Alternatively, adjusting the End angle of the shape

would create the desired effect and would produce a clean animation; however, you would need an inordi- nate number of keyframes. In this case, 100 keyframes would be required. Each keyframe would correspond to

Figure 5.22 The rotated oval primitive.

1 percent of loaded content. This process would also be

a bit tedious, so let’s script it with JSFL.

7. Create a new Flash JavaScript ﬁle and save it as AnimateOvalPrimitive.jsfl.

8. Input the following code: var dom = fl.getDocumentDOM();

var tl = dom.getTimeline(); var sel = dom.selection[0]; var targEndAngle = 360; var frameDuration = 100;

if(sel.isOvalObject){

Chapter 5 Sharing Your Animation

var startFrame = tl.currentFrame; var endFrame = startFrame + frameDuration - 1; var startEndAngle = sel.endAngle; var angleChange = targEndAngle -

➥ startEndAngle; var frameChange = endFrame - startFrame;

var anglePerFrame = angleChange/frameChange; for(var i=0; i < frameDuration; i++){

tl.insertKeyframe(); tl.setSelectedFrames(tl.currentFrame,

➥ tl.currentFrame + 1); var newAngle = Math.min((i+1) *

➥ anglePerFrame, 360); dom.setOvalObjectProperty("endAngle",

The Math.min method is used ➥ newAngle); to ensure that the newAngle

} value does not exceed 360 degrees. }

The Math.min method accepts as many arguments as you care to

Let’s brieﬂy consider what you accomplish with the feed it (separated by commas) and code you’ve entered. You ﬁrst create variables to store

returns the lowest value. Addition- the current document and current Timeline. Then you

ally, 1 is added to i because the create a variable, loop starts at 0 and the frame sel , to store the ﬁrst item in the selec- sequence starts at 1. tion array. The next variable, targEndAngle , speciﬁes

the End angle that your oval will reach at the end of the frame sequence. Finally, frameDuration determines how many frames to create for the sequence.

To be on the safe side, the rest of the code has been wrapped in an if block that will only execute if the (ﬁrst) selected object is an oval primitive. Inside the if block, several additional variables are created. Most of these variables are included so that this script is easy to reuse (and repurpose) in the future. For example, you will be starting on frame 1, but your script won’t assume that you’re starting on frame 1, and instead will check for the current frame. Then the script will determine the endFrame based on the current frame and the frameDuration assigned above. You must subtract one frame from this total to include the current frame in the total duration (i.e., for a frame duration of 100, starting on frame 1: 1 + 100 = 101; therefore, subtract 1). The startEndAngle for the animation is then determined

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

using the endAngle property on the oval primitive that is selected on Stage. The total angleChange and frameChange values are then determined and are used to calculate the angle change per frame.

The for loop then iterates a certain number of times based on the frameDuration . For each iteration, a keyframe is added (which contains the content from the previous frame), the new frame is selected, the angle for that frame is determined by multiplying the anglePerFrame value with the iteration value (i.e., the number of times the loop has run), and ﬁnally the endAngle property is assigned on the oval within the current frame.

9. Save your script and return to your site document. Select the oval and enter a value of 0.50 for the End

angle. This will serve as the starting frame for the animation.

10. Now return to the JSFL script you just wrote and click the Run Script button.

11. When your script is ﬁnished executing, return to your document. You should now have a 100-frame animation

(Figure 5.23). Press Return/Enter to see a preview of the animation.

Figure 5.23 The 100-frame loader ring animation generated by the JSFL script.

12. Lock the current layer and create a new layer named character.

Chapter 5 Sharing Your Animation

13. Open the document containing the run cycle that you created in Chapter 2 (the driver from Sausage Kong)

or open the run_cycle.ﬂa in the Chapter 5/assets folder on the accompanying CD.

14. Copy an instance of the character and paste it into the character layer in the site.ﬂa document. Move the play-

head to frame 100. Position and scale the character so

he ﬁts inside the ring (Figure 5.24).

If your character is facing to the left, you can flip the symbol horizontally (Modify > Transform > Flip Horizontal).

Figure 5.24 The character positioned inside the loader ring.

15. Ensure that the Instance behavior in the Properties panel is set to Movie Clip (so that the run-cycle anima-

tion loops independently of the ring animation).

16. Add a new layer named text and use the Text tool to add a static textframe that reads loading content.

17. Adjust the size (20 pt) and position (X: 4, Y: 164) of the textﬁeld so it sits below the ring and lines up close to

the edges (Figure 5.25).

Figure 5.25 The preloader content with the textfield in position.

18. Save your document. Congratulations, you’ve completed the artwork for a

sophisticated preloader! Now it’s time to set up the content that will be loaded into your site.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

Building an animated preloader