Setting Up the Flash Document and Creating Artwork

You’ll begin by creating those aspects of your site that will remain more or less unchanged. In general, even these elements will be organized in a manner that will allow for reasonably easy updates.

Chapter 5 Sharing Your Animation

Start by setting up your site directory and Flash ﬁle.

1. Create a new folder named website to house all the ﬁles you create in this section.

2. Create a new ActionScript 3 document and save it as site.fla in your website folder.

3. In the Properties panel under the Properties heading, click the Edit button next to Size, change the size of the

document to 800 x 600 pixels, and click OK. Dimensions of 800 x 600 pixels will allow for plenty of

space for your work samples, buttons, and text description while still ﬁtting on nearly every (nonmobile) screen quite nicely.

Now that your document has been established, you can start creating artwork within the document.

1. Rename Layer 1 to background.

2. Select the Rectangle Primitive tool. In the Properties panel, set the ﬁll color to #6699FF and the stroke to

Figure 5.3 white (#FFFFFF), set the Stroke value to 6, set the Cap The Rectangle Primi-

tive settings for the background

to Square, and set Join to Miter (Figure 5.3).

shape.

3. Draw a rectangle on Stage and use the Properties panel to adjust the rectangle to have a position of X: 0, Y: 50

and have a size of W: 800, H: 550 (Figure 5.4).

You can use the Tab key to jump between the X, Y, Width, and Height values in the Properties panel, and you can use Shift+Tab to jump backwards.

Figure 5.4 The rectangle will serve as the background for the portfolio artwork.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

4. Convert your rectangle into a Movie Clip symbol (F8). Name the symbol background and make sure the Regis-

tration is set to the top left (Figure 5.5).

Figure 5.5 The Convert to Symbol dialog box settings for the background symbol.

5. Expand the Filters group in the Properties panel (if necessary) and add a new Drop Shadow ﬁlter (Figure

5.6) to the background instance. Update the following Don’t worry about the background

stroke and drop shadow extending properties on the Drop Shadow: Blur X: 10, Blur Y: 10, beyond the edge of the Stage. You’ll

Strength: 30%, Quality: Medium. account for this when you publish

your HTML file.

Figure 5.6 Use the New Filter button to add a Drop Shadow filter to the background instance.

Now you’ll create the shape that will house the externally loaded work samples. Later, using ActionScript, you’ll make your dynamically loaded content visible by nesting it inside the symbol instance you are about to create.

1. Lock the background layer. Create a new layer named content.

Locking layers as you progress will

2. Use the Rectangle Primitive tool to draw another prevent you from editing artwork

rectangle.

unintentionally.

3. In the Properties panel, update the new rectangle so it has no stroke and a ﬁll color of #3366FF, X: 225, Y: 100,

W: 550, and H: 400.

Chapter 5 Sharing Your Animation

4. Convert the current rectangle to a Movie Clip symbol (F8) named content with a top-left Registration.

5. Ctrl-click (right-click) on the ﬁrst frame in the content layer and choose Copy Frames.

Observe that the content rectangle matches the default size of a Flash

6. Create a new layer named content_mask. document (and the size of the documents you created in previous

7. Ctrl-click (right-click) on the ﬁrst frame in the content_ chapters). This allows you to load mask layer and choose Paste Frames.

that content without needing to scale it.

8. Ctrl-click (right-click) on the content_mask layer and choose Mask.

This mask ensures that any offstage artwork from the dynamically loaded content is hidden (Figure 5.7).

Figure 5.7 The content layer is indented under the content_mask layer to indicate that it is masked by the content_mask layer.

9. Unlock the content layer and use the Selection tool to select the symbol instance. In the Properties panel, give

the rectangle an instance name of content_mc. One convention to distinguish

10. Re-lock the content layer. instance names from symbol names is to add a suffix (e.g., “_mc” for Movie Clips).

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

Recall that you’ll need an area to display a text description for each work sample. You’ll now create the artwork that will display the description just below the content region.

1. Create a new layer named description and move it above the content_mask layer.

2. Use the Rectangle Primitive tool and the Properties panel to add a rectangle at X: 225, Y: 510 with the

dimensions W: 550 and H: 75.

3. Convert the new rectangle to a Movie Clip symbol named description.

4. Add an instance name of description_mc using the Properties panel, and lock the description layer

(Figure 5.8).

Figure 5.8 The instance name of description_mc has been added using the Properties panel.

In addition to the description area, you’ll create a symbol that will house the title of the work sample that is currently being displayed.

1. Create a new layer named title.

2. Use the Rectangle Primitive tool and the Properties panel to add a rectangle at X: 475, Y: 70 with dimen-

sions of W: 300 and H: 30.

3. In the Rectangle option of the Properties panel, click the chain icon to allow each corner radius to be set to

a different value. Then set the upper-left corner to a value of 20.

4. Convert the new rectangle to a Movie Clip symbol named title.

5. Name the instance title_mc and lock the title layer.

Chapter 5 Sharing Your Animation

6. Drag the title layer below the content layer and toward the left so it is not masked by the content_mask layer

(Figure 5.9). The title layer will sit below the

Figure 5.9 Flash indicates where

content layer so the title can

the layer will land so you can avoid

animate behind the content layer

accidentally masking the layer.

when you add ActionScript later in the chapter.

You’ve now created most of the static artwork that will appear onscreen. To create the menu button symbol that will be instantiated dynamically (based on the number of work samples you have), you will create a library symbol with no instances on Stage.

1. In the Library panel, Ctrl-click (right-click) on the title symbol and choose Duplicate. In the Duplicate Symbol

dialog box, name the new symbol menuItem and select the Export for ActionScript check box (Figure 5.10).

Figure 5.10 The Export for Action- Script check box automatically populates the Class field with the symbol name.

When you click OK in the Duplicate Symbol dialog box, you will be prompted with a message telling you that the menuItem class was not found and that Flash will automatically create one for you (Figure 5.11 on the next page). Click OK to allow Flash to generate a class automatically.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

Figure 5.11 Flash will prompt you if the name in the Class field does not correspond with an existing file that it can locate.

2. Double-click the menuItem icon in the Library to edit the symbol.

3. Select the rectangle primitive and update the bottom- left corner in the Rectangle options within the Proper-

ties panel to a value of 20. The rectangle should now be

Figure 5.12 The curved edge ren-

completely curved on the left side (Figure 5.12).

dered using the Rectangle options.

4. Update W to a value of 180 and lock Layer 1.

5. Ctrl-click (right-click) on the ﬁrst frame inside the menuItem symbol and choose Copy Frames.

6. Create a new layer named shine.

7. Ctrl-click (right-click) on the ﬁrst frame of the shine layer and choose Paste Frames.

8. Select the shape on the shine layer and open the Color panel (Window > Color).

9. Change the color type to Linear Gradient. By default, this will create a black-to-white gradient with a black

color pointer at the left (at the bottom of the Color panel) and a white pointer at the right. The selected color pointer will have a black tip (Figure 5.13).

Figure 5.13 The settings in the Color panel correspond to the selected pointer with the black tip.

Chapter 5 Sharing Your Animation

10. Update the pointer on the left to be white with an alpha value of 0% and move the pointer about 1/5th

of the way to the right. Update the pointer on the right to white with an alpha (the A under RGB) of 25%

(Figure 5.14).

11. Use the Gradient Transform tool (by default it’s grouped with the Free Transform tool) to rotate the

gradient counterclockwise 90 degrees (by dragging the circular handle), and collapse the gradient height (by dragging the square handle with the arrow) to match the height of the artwork (Figure 5.15).

Figure 5.14 The updated gradient settings for the shine shape.

Figure 5.15 The collapsed gradient now covers the shine shape exactly.

12. Adjust the position of the shine shape to X:2 and Y:2 with dimensions of W:176 and H:26 to indent the shine

within the shape (Figure 5.16).

Figure 5.16 The indent completes the shine effect and gives the button some depth.

Font Embedding

Now that you have the artwork laid down for the menu- When your published movie plays on a user’s Item symbol, you’ll add a dynamic textﬁeld. A dynamic

computer, there is no guarantee that the fonts textﬁeld, unlike a static textﬁeld, can be edited at runtime

you applied will be available on another user’s using ActionScript. Employing a dynamic textﬁeld allows machine. To ensure that your text maintains the appearance that you intended (regardless of the you to populate your movie with content that will be

machine on which your movie is viewed), you can added to an external ﬁle later in the chapter. Given that

embed entire fonts or specific subsets of characters the contents of your dynamic textﬁeld are uncertain (and

from a font. Once a font is embedded, you can use unﬁxed) when your movie is published, Flash won’t know that font anywhere in your published movie.

which characters to include in your ﬁle; thus, you’ll need to embed font characters so that your text can be properly

Flash CS5 has a spiffy new Font Embedding displayed.

dialog box. Also, beginning with Flash CS5, Flash automatically embeds all characters used by any text objects that contain text.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

1. Choose Text > Font Embedding, type siteFont into the Name ﬁeld, and type Myriad Pro into the Family ﬁeld.

Then select the check boxes for Uppercase, Lowercase, Embedded fonts are not necessary

Numerals, and Punctuation, and click the plus sign (+) for text objects that have the

to add the font. Click OK to save (Figure 5.17). Anti-alias property set to Use Device Fonts .

You’ll now be able to access siteFont* (the asterisk indicates an embedded font) from the Font Family menu.

Figure 5.17 The Font Embedding dialog box in Flash CS5.

2. Create a new layer named text inside the menuItem symbol.

3. Draw a new textﬁeld using the Text tool. In the Proper- ties panel, set the Text engine to Classic Text, the Text

type to Dynamic Text, and type in txt as the Instance Name.

4. Update the respective position and size of the textﬁeld to X:15, Y:5 and W: 160, H: 20. In the Character section

of the Properties panel, set the Family to siteFont* (the font you created), the Size to 14, and the Color to white. Make sure the anti-aliasing is set to “Anti-alias for readability,” and toggle the Selectable button off (Figure 5.18).

Figure 5.18 The Properties panel settings for the textfield instance inside the title symbol.

Chapter 5 Sharing Your Animation

Classic Text vs. TLF Text

Flash CS5 now has native support for the Text Layout Framework (TLF) that was intro- duced with Flash CS4. A TLF textfield can support several new formatting features, including ligatures, multicolumn layout, linked textfields, and more.

Classic text refers to the text engine that has been available in all of the previous versions of Flash.

When you publish a movie that contains a TLF textfield, an SWZ file is added to the directory with your SWF file. The SWZ file contains code necessary for the TLF textfield to function, and it weighs in at about 160 KB. Because you won’t be using any of the TLF features in your portfolio, you’ll stick with classic text for this project. But keep TLF in mind for future projects that require large amounts of text (or special formatting).

You’re now ﬁnished editing the menuItem. Because the menuItem will be instantiated using ActionScript, no instances need to be added to the Stage.

You’ll also use the shine and the textﬁeld that you just created (slightly adjusted) in your title and background symbols.

1. Select the frames on the text and shine layers, Ctrl-click (right-click), and choose Copy Frames.

2. In the Library, double-click the icon next to the title item to edit the symbol.

3. Lock Layer 1 and create a new layer. Ctrl-click (right- click) on the ﬁrst frame in the new layer and choose

Paste Frames. You should now have a shine layer and a text layer.

4. Update the textﬁeld properties to have a width of 275 and a Paragraph format of Align Right.

5. Update the shine shape to have a width of 296 and set the bottom-left corner radius back to 0 to match the

shape in Layer 1.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

6. In the Library, double-click the icon next to the description item to edit the description symbol.

7. Lock Layer 1 in the description symbol’s Timeline and create a new layer. Ctrl-click (right-click) on the ﬁrst

frame in the new layer and choose Paste Frames. You should now have a shine layer and a text layer. Delete the shine layer.

8. Update the textﬁeld with the following values in the Properties panel: Y: 15, W: 520, and H: 50. In the Para-

graph section, update the Line Spacing to 1 pt, and choose Multiline for the Behavior.

9. Return to the main Timeline by clicking Scene 1 at the top of your Stage. Deselect all (Command+A/Ctrl+A)

and use the Stage color selector within the Properties panel to change the background color of the Stage to the following hex value: #3366FF. Your Stage should now be blue.

10. In the Library, double-click the icon next to the background item to edit the symbol.

11. Again, lock Layer 1 and paste the stored frames into a new layer.

12. Use the Text tool to type ANIMATION with ADOBE FLASH into the textﬁeld on the text layer (or use your

own name if you’d like).

13. Convert the Text type to Static Text. Change the Family to Myriad Pro, the Style to Bold, and the Size to 40.

Static text does not need to be

14. Adjust the X to 37 and the Y to –34 so the text sits on embedded; Flash will automatically

and blends into the white border of the background convert static text to outlines when

you publish your movie. symbol. Adjust the width of the textﬁeld as well so that

the text sits on one line (Figure 5.19).

Figure 5.19 The textfield sits on a single line along the white border.

15. Select the shine shape and use the Properties panel to adjust the respective Position and Size values to the

Chapter 5 Sharing Your Animation

following: X: 4, Y: 4 and W: 792, H: 540. Also, click the Reset button in the Rectangle options to restore pointed corners to the rectangle shape.

16. Resize the shine gradient using the Gradient Transform tool so the gradient spans the entire shine shape. You

may need to move the center point of the gradient down to do so (Figure 5.20).

Figure 5.20 The shine gradient scaled and positioned within the background symbol.

17. Save your document. Congratulations! You’ve completed all the necessary art-

work for the web portfolio. Let’s just add one piece of ﬂair.

Setting Up the Flash Document and Creating Artwork