CHAPTER 1

INTRODUCTION TO FLASH
In this chapter you will learn how: To start Adobe Flash To use workspace of Adobe Flash To create and edit a new Flash document To save, close and open a Flash document To exit Adobe Flash To use help

Introduction to Flash

Introduction
Flash is a multimedia graphics program especially for use on the Web. Flash enables you to create interactive "movies". Since its introduction in 1996, Flash technology has become a popular method for adding animation and interactivity to web pages; with Flash you can create web applications, advertisements, a variety of web-page components, presentations, games and movies, and content for mobile phones. The most common Flash file extensions are .fla and .swf. The .fla files contain

source material for the flash application. The .swf files are compiled and published files that can not be edited with Adobe Flash. The third one is a selfexecuting Flash movie with the .exe extension in Windows.

Starting Flash and Creating a New File

When you start Flash for the first time you'll see a welcome screen with links to standard file templates, tutorials and other resources. Step 1. Choose Start > All Programs > Adobe Flash CS3 Professional.

Flash CS 3

Step 2. In the welcome window click Flash File (Action Script 3.0) to create an empty Flash document.

Menu bar

Stage

Timeline

Tools panel

Properties panel

Introduction to Flash

Flash Toolbar
Flash has a simple toolbar at first glance but most tools have additional options. By default, the toolbar is on the left side of your screen.

Selection Tool (V) Subselection Tool (A) Free Transform Tool (Q, F) Lasso Tool (L) , Pen Tool (P,=,-,C) Text Tool (T) Line Tool (N) Rectangle Tool (R,O,R,O) Pencil Tool (Y) Brush Tool (B) Ink Bottle Tool (S) Paint Bucket Tool (K) Eyedropper Tool (I) Eraser Tool (E) Hand Tool (H) Zoom Tool (M,Z) Stroke color

Fill color Black and white (stroke and fill) - Swap Colors (stroke and fill) Snap to Objects Smooth - Straighten
Toolbox

No color (current color)

Flash CS 3

Timeline
Like cartoons, Flash documents measure time in frames. The Timeline contains the series of images that make an animation. The Timeline can also include many layers stacked on top of each other. Each layer has own content that appears on the stage, and you can edit objects on one layer without affecting the content on another layer. You can hide, show, lock, or unlock layers. There is only one layer by default but you can create as many as you want and it's a good idea to name them.

Stage
The Stage is the large white rectangle in the center of Flash's workspace. It contains the text, images, and video that appear on the screen. Any objects outside of the stage will not be visible when viewing the movie.

The default stage color is white but it can be changed by choosing Modify > Document (Ctrl+J) and selecting different color on the Document Properties dialog box.

Introduction to Flash

More about Workspace

While you work on Adobe Flash you can change the default workspace layout. To turn back to default view click the Select Workspace Layout drop-dawn arrow and then select Default.

The Zoom control is at the top right of the Stage above the Timeline. Click the Zoom Control drop-dawn arrow to change it.

Click the Hide Timeline button to hide the timeline to have bigger workspace. The Hide Timeline button is at the top left of the stage above the Timeline.

Different dimensions can be applied for the Stage. Click the Size button in the Properties panel to display the Document Properties dialog box.

Apply any dimensions you want on the Document Properties dialog box, in the height and width boxes.

Flash CS 3

Creating and Editing a New Flash Document

In this exercise you will create a simple animation. Step 1. Create a new Flash document. Choose File > New (Ctrl+N).

Step 2. Select Flash File (Action Script 3.0) and then click OK.

Step 3. Select the Oval tool and draw a red circle at the left top corner of stage.

Step 4. Right-click frame 10 and then select Insert Keyframe. Now you have the same circle in frame 10. Introduction to Flash 7

Step 5. Delete the red circle in frame 10 and then draw a blue rectangle.

Step 6. Right-click frame 20, select Insert Keyframe and then delete the blue rectangle in frame 20 and draw a red circle again. Now you have a red circle in frame 1, blue rectangle in frame 10 and a red circle in frame 20.

Step 7. Click anywhere between the frames 1 and 10. In the Properties panel click the Tween type drop-dawn arrow to select Shape.

Flash CS 3

Step 8. Click anywhere between the frames 10 and 20 and then apply the Shape tween again. Step 9. Choose Control > Test Movie to see your aniation.

Saving a Flash Document

Save the animation to your hard disk. FLA is the default file format of Adobe Flash, the .fla files contain source material for the flash application, for future use. Choose File > Save (Ctrl+S) to save your movie. In the File name box type Simple Animation.fla and then click Save.

Closing a Flash Document

Choose File > Close (Ctrl+W) to close Flash document, choose File > Close All (Ctrl+Alt+W) to close all the Flash documents.

Introduction to Flash

Opening a Flash Document

To open an existing Flash document Choose File > Open (Ctrl+O).

Select the file you want to open, and then click Open.

Exiting Flash Program

To exit Flash program choose File > Exit (Ctrl+Q).

10

Flash CS 3

Getting Help
The help feature allows you to learn to use the basic and advanced features of Adobe Flash, if you have an internet connection you can access the online help resources. To get help Choose Help > Flash Help (F1) from the menu bar.

The Help dialog box opens. In the Search box type the name of a topic you want to find about, and then click Search.

To open online help resources choose Help > Help Resources Online.

Adobe Flash Resources web page opens.

Introduction to Flash

11

12

Flash CS 3

Selection

13

Questions
1. What can you create with Adobe Flash program? a. Animations. b. Web applications. c. Games d. All of the above. 2. The most common Flash file extensions are _____________? a. .fla, .doc, .exe b. .fla, .swf, .exe c. .fla, .xls, .exe d. .fla, .swf, .xls 3. The ________ is the large white rectangle in the center of Flash's workspace? a. Stage b. Timeline c. Screen d. Properties 4. How to create a new Flash document? a. Choose Insert > New b. Press Ctrl+N c. Choose File > New d. Press Ctrl+D 8. Which of the followings is false for getting help? a. Press F1 b. Choose Help > Flash Help c. Press Ctrl+H d. Choose Help > Help Resources Online 5. What are the correct shortcut key combinations for opening and saving a Flash document? a. Press Ctrl+O and Ctrl+S b. Press Ctrl+P and Ctrl+S. c. Press Ctrl+O and Ctrl+N d. Press Alt+O and Alt+S 6. The default stage color is white but it can be changed by choosing ____________ and selecting different color on the Document Properties dialog box? a. Modify > Document Properties b. Modify > Document c. Edit > Document d. Edit > Document Properties 7. Different dimensions can be applied for the Stage. Click the ________ button in the Properties panel to display the Document Properties dialog box? a. properties b. filters c. parameters d. size

14

Photoshop CS 3

CHAPTER 2
Drawing and Painting
In this chapter you will learn how: To draw and paint in Flash To create geometrical shapes To use rulers To use guide lines To use toolbar To work with layers

Selection

15

First Step to Drawing

Vector and Bitmap Graphics Graphic images that have been processed by a computer can usually be divided into two categories. Such images are either bitmap files or vector graphics. Graphics created in Flash are considered vector-based graphics. Unlike a bitmap, for which the computer must store information about every single pixel, a vector graphics file contains just the math to redraw the shape. Therefore, vector graphics are described with the mathematical formulas, so that they are very compact, vector graphics are also fully editable after they are created so you can continue to adjust their properties, they are more flexible than bit maps because they can be resized and stretched. Bitmap graphics describe images using colored dots, called pixels, arranged in a grid. Every pixel has its own color (described using bits, the smallest possible units of information for a computer).

Vector image - original size.

Vector image - zoomed 800%

Bitmap image - original size.

Bitmap image - zoomed 800%

Masastn Gster.scf Using Flash, you can create and animate compact vector graphics. Flash also lets you import and manipulate vector and bitmap graphics that have been created in other applications.

Using Basic Drawing Tools

Step 1. Launch Macromedia Flash first and then open an empty document. Step 2. Display the Ruler bars, choose View > Rulers. They appear on the top and left sides of the Stage. Using the Ruler bars you can measure the width and height of Flash elements, they also let you place guides on the screen to control placement of objects on the Stage. Step 3. Create two guides (horizontal and vertical) by clicking on the rulers and dragging out your cursor. The guides will be used for center point of your graphic. You can drag out the horizontal rule from the top ruler and vertical rule from the left ruler. 16 Photoshop CS 3

Stroke & Fill:

Objects which are drawn by using Oval Tool or Rectangle Tool have two parts, stroke and fill. You can apply different colors and add or remove them on the Toolbar on the Colors area.

Step 4. Lock the Guides. Choose View > Guides > Lock Guides. When you lock the guides you can prevent yourself to move guides around accidentally. Step 5. Select the Oval (O) tool on the Toolbar. Make sure that the Object Drawing (J) button is not selected. Select red using the Fill color box and remove the Stroke using the Stroke color box on the Tool bar. Step 6. Point your cursor to the intersection of guide lines, and draw a circle by pressing Alt and Shift keys on the keyboard.

Step 7. Press and hold dawn the shift and alt keys, point your cursor to the guide To draw a perfect circle, line at the top of your screen. Click and draw the second circle. press and hold down the Step 8. Select the Subselection (A) tool and then click the red circle. Now you see Shift key and it constrains the vector points and you can edit them. Remove two vector points near the bottom the shape. one. To remove a vector point, just select it and then press the Delete key. You can To draw from the center press zoom in your document to get better view using the Zoom Tool on the toolbar. and hold dawn the Alt key.

Alt & Shift Keys

You can use

Ctrl + C to copy the selected object. Ctrl + V to paste in center. Ctrl + Shift + V to paste in the same place.

Selection

17

Step 9. Click the bottom vector point and drag it dawn. It must be near the first circle. The bottom of this shape is curved and you see the handles near the vector point. Step 10. Select the Pen (P) tool or the Convert Anchor Point (C) tool and then click the bottom vector point. Now it is not like curved line, it is an angle. Step 11. Select the Free Transform (Q) tool on the Toolbar. Click to select the red shape. When you select you see a white little circle at the center of the shape. This is the anchor point for rotation. Click and drag the anchor point to the intersection of guides. Step 12. Open the Transform panel. Choose Window > Transform. While the red shape is selected, on the Edit menu click Copy and then click Paste in Place. Now there is a copy of the red shape in the same place. Step 13. The red shape is still selected. On the Transform panel, in the Rotation box type 30, and then press Enter on the keyboard. Step 14. On the Edit menu click Paste in Place or press Ctrl + Shift + V to have one more copy. Type 60 in the Rotation box, and then press Enter on the keyboard. Repeat this step adding 30 degrees each time to reach 360. Step 15. Remove the ruler bars. Choose View > Rulers.

Using Layers:
Layers are very important in Flash. Layers are like sheets of transparent paper arranged in a stack. Each layer can be drawn on and edited without affecting the other layers. Use as many layers as you need to keep everything separate and organized. Drawings in the upper layers will cover drawings in lower layers, but the parts of a layer without any drawings will show through to the lower layers. You can name layers, hide their contents, and lock them so that they cannot be edited. Layers are also great for keeping shapes from segmenting each other. Show/Hide All Layers Lock/Unlock All Layers

Show All Layers as Outlines

Insert Layer Insert Layer Folder 18 Photoshop CS 3

Step 16. Insert a new layer to add a background to your graphic. Click the Insert Layer button to add a new layer or right-click Layer 1 and then click Insert Layer. Step 17. There is a new layer above the Layer 1. Move Layer 1 to the top. Step 18. Select Layer 2 and then select the Oval Tool on the toolbar. Change Fill color to Light Orange and Stroke color to red. Point your cursor to the intersection of guide lines, and draw a circle by pressing Alt and Shift keys on the keyboard. Step 19. Select the stroke of circle and then change the Stroke height to 6 on the Properties panel. Step 20. On the View menu point to Guides and then click Show Guides to remove them. Step 21. Save your file.

Project: Drawing a snowflake.

Draw the following snowflake.

Required Features:
1. Rulers 2. Guides 3. The line tool 4. The free transform tool 5. Transform panel

Selection

19

Project Hint:
Start creating this snowflake from adding ruler bars and guides. The first step of your work should be as following:

More Drawing Tools

Pen Tool Pen Tool can be used to draw smooth curves and you can also create straight lines. The Pen Tool lets you place anchor points and adjust the curve of the lines connecting them. Drawing straight lines To draw a straight line with the Pen tool, click the start point and then click the end point. You can continue to add line segments by clicking additional points. Doubleclick to complete the process. Step 1. Add rulers and create guides as following. Step 2. Select the Pen tool. Step 3. Click the point A first, and then click the point C, then I, G and then click the point A again to close the path. A small circle appears next to the pen tip when it is positioned correctly. Step 4. Now click the point M, and then click J, K, O, and then double-click the point L to complete an open path.

20

Photoshop CS 3

Drawing Curves
To draw a curved line with the Pen tool, click and drag to create points on curved line segments. Double-click to complete the process. Step 1. Select the Pen tool. Step 2. Click the point G, and then click the point B, do not release the mouse button and drag your cursor to the point C, release your mouse button.

Step 3. Click the point I to complete the half of the circle you are creating. Step 4. Click N and drag your cursor to M, release the mouse button, and then click G to close the path.

Step 5. Congratulations, you have created a perfect circle. Step 6. Create the following curved lines yourself using the Pen tool.

Selection

21

Add or Delete Anchor Points

Adding or deleting anchor points can give you more control over a path. You can edit lines, curves and shapes using these tools. Do not add more points than necessary; it is always easier to edit a path with fewer points. Convert Anchor Point Using the Convert Anchor Point tool, you can convert the points on a path between smooth to corner points.

Lasso Tool
In many cases, the area you need to select is not a simple rectangle or an existing shape on the stage. If the lines or shapes you want to select are located close to other lines, you may have difficulty selecting just the items you want with a rectangle. The Lasso Tool is a free selection tool that lets you draw your own selection outlines. With the Lasso Tool you can click and then drag to draw any shape selection that you want; if you release the mouse, the shape will automatically close itself by connecting the open ends with a line. In the default mode, you can draw a freeform lasso around the object you want to select. You can also choose the Polygon mode for defining the selected area with a series of straight-line segments.

Selecting with the Lasso Tool:

Click and drag your cursor to select an area. Release your mouse button to complete the selection.

Selecting with the Polygon Mode:

Click from point to point to create interconnected straight lines. Double-click to complete the selection. Using the Lasso tool with the Magic Wand modifier, you can select areas of a bitmap that has been broken apart.

Magic Wand

Magic Wand Settings

Polygon Mode 22 Photoshop CS 3

Text Tool
Using the Text Tool you can add text to Flash movies. If you have worked with a word processor before, most of the modifiers of this tool would be familiar to you. Flash's text tool creates text boxes filled with live type. The contents of a text box are fully editable. There are three types of text fields, Static Text, Input Text and Dynamic Text and they are each used for different purposes. Static text displays any kind of text on the Stage and does not change unless you manually edit the text field. You will learn about input and dynamic text fields later in the Action Scripting chapter.

Properties panel for text tool.

Single Text Line Step 1. Select the Text (T) tool. Step 2. Click on the stage where you want your text to start. Flash creates a resizable text box. Step 3. Start typing your text. The text box grows to accommodate whatever you type. Step 4. Click anywhere else on the stage to finish typing.

Text Box
Step 1. Select the Text tool. Step 2. Click on the stage where you want your text to start and drag your cursor until your text box is as wide as you want it. Step 3. Start typing your text. Flash wraps the text horizontally to fit inside the column that the text box defines.

Rectangle Tool
The Rectangle tool is used to make rectangular objects. To draw a perfect rectangle, press and hold down the Shift key and it constrains the shape. Step 1. Simply select the Rectangle (R) tool and drag on the Stage to draw a rectangle that spans between the start and end points.

Selection

23

Step 2. You can also use the Rectangle Primitive (R) tool to specify the corner radius of rectangles. Click and hold the mouse button on the Rectangle tool and select the Rectangle Primitive tool. Drag on the stage to draw a rectangle with editable corners.

Pencil Tool
Using The Pencil Tool, you can draw lines on your stage. It works the same way as a real pencil with options for smoothing and straightening. Depending upon which mode you choose, Flash makes corrections to the drawn line. The Pencil Tool has three options: Straighten, Smooth, or Ink. You can select one of them in the options area. Step 1. Select the Pencil (Y) tool. Step 2. Click on the stage and drag your mouse.

Brush Tool
The Brush Tool is used to add color to your movie. The Brush tool has options for Brush Size, Brush Shape and Modes. These options are located in the Options area of the Toolbox.

Paint Normal

Paint Fills

Paint Behind

Paint Selection

Paint Inside

Ink Bottle Tool

The Ink Bottle tool is very similar to the Paint Bucket tool, but it only affects the strokes of objects. The Ink Bottle tool lets you change the stroke color, line width, and style of lines or shape outlines. You can click any object on the Stage to add a stroke to an object that doesn't have one. You can change stroke color, stroke height, stroke style in the properties panel.
Stroke Style

24

Photoshop CS 3

Eyedropper Tool
You can use the Eye Dropper tool to copy fill and stroke attributes (fill and stroke color, and line weight and style) from objects and then transfer them to other shapes. This tool detects whether it is a stroke or a fill you are selecting, and then changes into the Ink Bottle (when selecting strokes) or the Paint Bucket (when selecting fills). Strokes: When you point your cursor to a stroke, a tiny pencil appears next to the tool. After you click on the stroke the Eyedropper becomes an Ink Bottle.

Fills: When you point your cursor to a fill, a tiny paint brush appears next to the tool. After you click on the fill the Eyedropper becomes a Paint Bucket.

Eraser Tool
The Eraser Tool is used to remove unwanted parts on an object. The eraser tool in Flash is a little different from standard eraser tools in other programs. Just like Brush Tool, you can control the size and shape of Flash's eraser tool. It is used by just clicking and holding down the mouse. Double-click the eraser tool to remove everything on the stage. The faucet erases an entire fill shape or an entire line with a single click. Eraser Tool Options Erase Normal - Erases everything (strokes and fills) on the same layer. Erase Fills - Erases only fill colors or filled areas. Erase Lines - Erases only the strokes. Erase Selected Fills - Erases only the selected fills and doesn't affect strokes. Erase Inside - Erases only the fill that you started on.

Selection

25

Hand Tool
Hand tool is used to move the stage. It is mostly used when the object is zoomed. Click and drag on your scene to move it around without using the scrollbars. To temporarily switch between another tool and the Hand tool, hold down the Spacebar and click the tool in the Tools panel. Double-click the hand tool for the stage to fit the screen.

Zoom Tool
Zoom tool is used to zoom in or zoom out the stage. To zoom a specific area, draw a rectangular selection with the zoom tool. To zoom in or out, use the enlarge and reduce modes of zoom tool. Double-click the zoom tool to display the stage at 100%.

Object Drawing
Flash provides two drawing models that give you a great deal of flexibility when drawing shapes: Merge Drawing Model: Automatically merges shapes that you draw when you overlap them. Step 1. Select the Oval tool. Step 2. Draw a circle. Select the Rectangle tool and overlay a rectangle on top of circle, and then select the rectangle and move it, the portion of the circle that overlaid the rectangle is removed.

Object Drawing Model: Lets you draw shapes as separate objects that do not automatically merge together when overlaid. Step 1. Select the Oval tool. Click the Object Drawing button in the options area. Step 2. Draw a circle. Select the Rectangle tool, click the Object Drawing button in the options area and overlay a rectangle on top of circle, and then select the rectangle and move it, the portion of the circle that overlaid the rectangle is not removed.

26

Photoshop CS 3

Softening Fill Edges

You can soften the fill edges in Flash for a softer, more faded look. This feature works best on a single filled shape that has no stroke. Step 1. Open a new document. Step 2. Create a red circle in the left side of stage. Step 3. Remove the stroke. Step 4. Copy the circle and paste in the middle of stage. Step 5. Paste one more copy in the right side of stage. Step 6. Select the middle circle. Soften fill edges. Choose Modify > Shape > Soften Fill Edges. Step 7. In the Distance box type 25 px. Step 8. In the Number of Steps box type 6. Step 9. Choose Expand as a Direction mode. Step 10. Click OK. Step 11. For the right circle do the same but choose Inset as a Direction mode. Step 12. Try to apply different settings yourself.

Selection

27

Practice
Project: Drawing a cup.
Draw the following cup image.

Required Features:
1. Rulers 2. Guides 3. Layers 4. The Pen Tool 5. The Oval Tool 6. The Paint Bucket Tool 7. Softening Fill Edges

Project Hint: Start creating this cup from adding ruler bars and guides, and then draw the lines using Pen tool. Fill your image using the Paint Bucket tool. Create circles and ovals using the Oval tool. Use Soften Fill Edges dialog box to soften your image. 28 Photoshop CS 3

Summary

Selection

29

Questions
1. Which of the followings is false for vector graphics? a. Vector graphics are very compact. b. Vector graphics are mathematical formulas. described with the 5. How many layers can be created maximum? a. As many as you wish. b. 15 c. 150 d. 5 6. How to switch between the hand tool and another tool temporarily? a. Press and hold dawn the Spacebar. b. Press and hold dawn the Shift key. c. Press and hold dawn the Ctrl key. d. Press and hold dawn the H key. 7. What is Object Drawing Model used for? 3. How to draw a perfect circle using the Oval tool? a. Press and hold dawn the Ctrl key. b. Press and hold dawn the Alt key. c. Press and hold dawn the P key. d. Press and hold dawn the Shift key. 4. What is the "Paste in Place" option used for? a. To paste the copied item in center. b. To paste the copied item in a different layer. c. To paste the copied item in the same place. d. To paste the copied item in a different place. a. To create different shapes. b. To create similar shapes. c. To create shapes which automatically merge. d. To create separate shapes which do not automatically merge. 8. How to soften the fill edges? a. Click the Soften Fill Edges button on the toolbar. b. Choose View > Object > Soften Fill Edges. c. Choose Modify > Object > Soften Fill Edges. d. Choose Modify > Shape > Soften Fill Edges. c. Computer stores information about every single pixel for vector graphics d. Vector graphics can be resized and stretched. 2. How to display rulers? a. Choose View > Ruler Bars b. Choose View > Rulers c. Choose View > Guides d. Choose Insert > Rulers

30

Photoshop CS 3

CHAPTER 3
Working with Symbols
In this chapter you will learn how: " " " " " " To create and use symbols To import external files To change properties of a symbol To work with layers To work with text To work with frames

Transforms

31

Using Symbols in Flash

Symbols are very important in Flash. When you convert an object into a symbol it is automatically stored as an item in library, from where you can drag-and-drop new A copy of a symbol used in instances of the symbol into your movie without having to re-create it. The file size the movie is called an does not depend on how many instances of one symbol are used in a movie. A instance. symbol can be used many times in a project, but Flash loads it only once.

Instance:

Creating a Symbol
Step 1. Select your drawing on the stage. Step 2. To convert this object to symbol choose Modify > Convert to Symbol (F8) or right-click the selected object, and then click Convert to Symbol. Flash opens the Convert to Symbol dialog box.

In the Convert to Symbol dialog box you can type a name for your symbol, select one of three symbol types (behaviors), and determine the registration point of your object. Step 3. Click OK. Ready, you have converted your object to symbol. Flash adds the symbol to the library. Step 4. To create a new symbol choose Insert > New Symbol. Type a name, select one of three symbol types, click OK. Step 5. Now you are in the new symbol to work. Click the Scene 1 button to turn back to Scene 1.

The Three Types of Symbols

Movie clip: Movie clips are reusable pieces of flash animation. They can have any number of layers and frames, and their timelines are independent of all other timelines. Movie clips are flash movies within your flash movie and they are scriptable with action script. Button: Buttons are used to add interactivity to the movie. They respond to mouse clicks, key press, rollovers, or other actions. Movie clips can be used with buttons to create animated buttons. They have four states: Over, Up, Down, and Hit.

Graphic: Graphic symbols are the simplest type of symbols. Graphic symbols are similar to movie clips but they are not dynamic and not scriptable. Graphic symbols are used for collections of static objects or for animation. 32 Photoshop CS 3

Seven Wonders of the World

Step 1. Launch Adobe Flash and select Flash File (ActionScript 3.0). Start your work by importing a Photoshop file. You can import Adobe Photoshop and Adobe Illustrator files, while preserving layers and structure, and then edit them in Flash CS3 Professional. Step 2. Now choose File > Import to Stage (Ctrl+R) to import the 7Wonders.psd file to Adobe Flash. Browse My Documents to select 7Wonders.psd in the Import dialog box and then click open. This opens the Import dialog box.

Step 3. Select all the text layers and then at the right side of import dialog box, in the Options for selected layers area select Editable text to be able to edit text later in Adobe Flash. Step 4. The Place layers at original position check box is selected. Select the Set stage size to same size as Photoshop canvas (750 x 477) to set automatically dimensions of work area (stage) to same size as Photoshop canvas. Step 5. Click OK. You have imported the Photoshop file with all the layers, images and editable text. Right-click Layer 1 and then click Delete Layer to remove it. Step 6. Convert background image to symbol. Select the Background layer, and then choose Modify > Convert to Symbol from the menu bar or press F8. This opens Convert to Symbol dialog box. In the name box, type Background and then, select Graphic as a type. Transforms 33

Step 7. Click Lock Layer to lock the background layer to prevent making changes accidentally on the background image. Step 8. Select the Giza layer, and then choose Modify > Convert to Symbol from the menu bar. In the Convert to Symbol dialog box, in the name box type giza and select Button as a type. Click OK. Step 9. While the giza button is selected type giza in the Instance name box in the properties bar. In the Properties bar, click the Color Styles drop-dawn arrow and select Alpha and then set the Alpha Amount to 50%.

Step 10. Convert all the images (seven wonders) to symbols (buttons), apply instance names and alpha amounts to 50%. The next step is adding animation to each part of text. Before adding animation, text must be converted to a symbol (movie clip). Step 11. Select the Halicarnassus layer, and then choose Modify > Convert to Symbol from the menu bar. It opens Convert to Symbol dialog box. In the Name box type, halicarnassusMovie, select Movie clip as a type. Click OK. Step 12. Double-click the halicarnassusMovie movie clip on the stage to edit it. Now you are in halicarnassusMovie movie clip. Right-click frame 2 and then click, Insert Keyframe.

Step 13. Select the text on the stage and move up several pixels. While the text is still selected, select Free Transform tool on the Tool bar and then rotate the text several pixels ccw.

34

Photoshop CS 3

Frame 1

Frame 2

Step 14. Continue inserting keyframes, and each time move the text up, dawn, right and left, and rotate it cw, ccw as you wish. Your animation should contain 10 frames. Step 15. Choose Control > Test Movie or press Ctrl+Enter to see the animation. When you test your movie, you see that the animation starts immediately. But animation should start when the cursor is over its button. Step 16. Right-click Layer 1 and then, click Insert Layer. Right-click the first frame of Layer 2 and click Actions and then type stop(); to stop the animation at the beginning.

Step 17. Click the Scene 1 button to turn back to Scene 1. Step 18. While the halicarnassusMovie is still selected, type halicarnassusMovie as an instance name in the Instance name box in the Properties panel.

Step 19. Repeat the steps 14 - 23 for the other text objects. Transforms 35

Now create invisible information windows. They will be placed on the stage but they will be invisible, when you move your cursor over a button the appropriate information window will be visible. Step 20. Choose Insert > New Symbol to create a new symbol. Type halicarnassusInfo in the name box, select Movie clip and then click OK. Now you are in the halicarnassusInfo movie clip. Step 21. Open the zeusinfo.txt file from the 7Wonders Info folder. Copy the text, and switch to Adobe Flash, right-click the scene and then click Paste. Step 22. While the text object is selected, type 350 in the Selection with box in the Properties panel. Width of the text object is set to 350 px. Apply 12 for font size, Verdana for font type and then click the Toggle the bold style and Align Center buttons.

Step 23. Double-click the text object and select the headings and change color to red. Step 24. The next step is creating a background for the text. Add a new layer and move it to the bottom. Click the Rectangle Primitive tool on the tool bar. Set Stroke color to red and fill color to yellow, Stroke height to 3, Rectangle corner radius to 10.

Step 25. Drag your cursor on the stage to draw a background.

36

Photoshop CS 3

Step 27. In the Instance name box type halicarnassusInfo, in the properties panel. Now the halicarnassusInfo movie clip has an instance name so that this movie clip is scriptable. Step 28. Repeat the steps 24 - 33 for the other information windows. When you choose Control > Test Movie or press Ctrl+Enter you see that all the information windows are displayed and nothing happens when you click the buttons. Information windows should be invisible at the beginning, they should be displayed and text animations should start playing when you move your cursor over the buttons. Action Script helps doing this. It's time to add code to project to give some interactivity. Try to understand the code but do not worry if you have difficulties in the code, because everything about adding code will be explained in following chapters. Step 29. Insert a new layer and name it as Actions. While the Actions layer is selected choose Window > Action or right-click Frame 1 and select Actions to open the Actions panel. Type the code to make all the information windows invisible:

Transforms

37

Press Ctrl+Enter to see the result, all the information windows are invisible now. Step 30. Create two functions for RollOver and RollOut mouse events.

RollOver function:
function halicarnassusRollOver(event:MouseEvent):void { halicarnassusMovie.play(); halicarnassus.alpha = 1; halicarnassusInfo.visible = true; } function halicarnassusRollOver(event:MouseEvent):void { } is written to create a function for RollOver mouse event for the halicarnassus button. Function is named as halicarnassusRollOver. halicarnassusMovie.play(); is written to start playing the halicarnassusMovie text animation when the cursor is over the button. halicarnassus.alpha = 1; is written to change the Alpha Amount from 50% to 100%. halicarnassusInfo.visible = true; is written to make the halicarnassusInfo window visible.

RollOver function:
function halicarnassusRollOut(event:MouseEvent):void { halicarnassus.alpha = .5; halicarnassusInfo.visible = false; } function halicarnassusRollOut(event:MouseEvent):void { } is written to create a function for RollOut mouse event for the halicarnassus button. Function is named as halicarnassusRollOut. halicarnassus.alpha = .5; is written to change the Alpha Amount from 100% to 50% again. halicarnassusInfo.visible = false; is written to make the halicarnassusInfo window invisible.

38

Photoshop CS 3

Create two event listeners for the halicarnassus button.

halicarnassus.addEventListener(MouseEvent.ROLL_OVER, halicarnassusRollOver); halicarnassus.addEventListener(MouseEvent.ROLL_OUT, halicarnassusRollOut); halicarnassus.addEventListener(MouseEvent.ROLL_OVER, halicarnassusRollOver); is written to execute the halicarnassusRollOver function when the cursor is over the halicarnassus button. halicarnassus.addEventListener(MouseEvent.ROLL_OUT, halicarnassusRollOut); is written to execute the halicarnassusRollOut function when the cursor is rolled out from the halicarnassus button.

Step 31. Add the same code for other buttons changing the symbol names. 7Wonders of the World project is now ready.

Transforms

39