1

COMP126-2006: Practical 1 – Getting to know Flash

What is Flash? Macromedia Flash is system that allows creation, communication and play of animated and interactive computer graphics. Its main application is the creation of web pages, however, it can also be used to create cartoons and computer games. In this document we will refer to anything created with Flash as a ‘Flash Movie’, whether it is really a movie or not; because, as we will see shortly, the basic way of doing things in Flash is to create a series of ‘frames’, to be played as though it were a movie. The program we will use to do this is ‘Macromedia Flash MX 2004’. This is an ‘editor’, and test environment, in which we can make and test Flash Movies. To start with, we will view our movies in Flash MX 2004 itself. However, once a movie is created it can be stored in a file and made available across the internet. Flash has been designed explicitly for this style of use. Its movie files are made as small as possible, with a goal of providing rich interactive web experiences even to people at the end of slow network connections.

The need to store movies in very small files has influenced the style of graphics used, and thus the kinds of projects that can be undertaken. The most noticeable feature is the use of ‘Vector’ graphics, rather than the use of film like images (or ‘Raster’ graphics). To describe a green rectangle, for example, Flash just records the coordinates of its corners, and the fact that it is coloured green – essentially 7 numbers (Question: Why 7?) In contrast, a raster image is like a photograph, recording again and again, for each tiny piece (pixel) of the rectangle that it is green (maybe thousands or tens of thousands of numbers). In a Flash web page, the numbers representing the rectangle can be efficiently transmitted over the internet. There is a small catch however; there must be software at the receiving end to interpret the numbers and display the rectangle on a screen.

Web browsers (like Internet Explorer or Mozilla Firefox), are not automatically capable of displaying Flash Movies by themselves. For that, a ‘Plugin’, supplied by Macromedia (the Flash Viewer) is needed. (A ‘plugin’ is a program that will attach to a browser and enhance it.) Macromedia makes the Flash Viewer freely available for anyone to download and install. This can be a difficulty for users, either because they may lack the knowledge, or confidence, or because they may work on corporate (or university) computers on which they are not allowed to install software.

So, the answer to ‘What is Flash’ is that it is a system consisting of: an Editor (Macromedia Flash MX 2004) which enables us to create ‘movies’; a way of compactly storing those movies; and a viewer that is freely available so that any internet user can watch them.

We should also note that Flash MX 2004 is copyrighted software, and a license fee must be paid in order to install and use it. Only the viewer is free. Macromedia do make available a trial version which you can download, and which will (at the time of writing) work for 30 days. After that time you have to pay for a license in order to keep using it. Unfortunately, under the terms of the University’s license agreement with Macromedia, this means that we cannot make the software available for you to use at home.

We can also say what Flash is not: It is not the only, or even the most common, way of making web pages. Most web pages are written in a notation called HTML (HyperText Markup Language), which can be displayed by all web browsers. Similarly, it is not the only way of making computer games or cartoons. However, it does provide a useful set of facilities which makes it the tool of choice for web pages with animated graphics or a high degree of interactive visual effects.

There are two different, but equally important, methods used for developing movies in Flash. The first is by using Flash’s ‘Graphic User Interface’ – in other words to use the mouse to draw, selection options, etc, and make up a movie by visual interaction with the system. The second is to program sequences of actions in the built-in programming language called ‘Flash Action Script’. Both methods have their place, and both will be introduced in this course. The first practical sessions will concentrate on the Graphic User Interface. Action script will be added as needed.

We can let the marketing wing of Macromedia have the last word. They say you should use Flash because:

1. Flash movies load faster and save on download time because Flash is vector based whereas HTML is raster. 2. Flash intelligently ‘caches’ it’s movies so they don’t have to be reloaded. 3. Flash gives the users (the person viewing/using the Flash movie) a more responsive ‘rich-client’ experience.

Here are some websites that take advantage of Flash’s capabilities. Have a look at them. www.happytreefriends.com http://www.mypetskeleton.com/ http://www.2advanced.com/flashindex.htm http://cmart.design.ru/ http://www.tokyoplastic.com/ www.flasharcade.com

2

This practical is partly designed to provide an overview of Flash MX 2004, so some ideas will be briefly introduced, in order to illustrate the different parts of the Flash environment, and then elaborated later, or in subsequent practicals. The goal is to get the ‘flavour’ of Flash.

1. Open Flash MX 2004.

Mac Users: If this is not already on your dock go to “Applications”, then “Macromedia Flash MX 2004”, and drag it onto your dock.

PC Users: Click ‘start’ and explore from there.

It may take a minute or two to load. After a while you should see the program start, with some like this in the middle:

Figure 1.1

Here you can open a movie you have worked on previously, or obtained from elsewhere; start a new movie of your own; or use a partly built movie (template) provided by Macromedia, and finish it yourself. We will start a new movie.

2. Create a new flash movie – click ‘Create New’. You will name it later when you save it.

You should now see the Flash Editor, ready to go. It will look roughly as follows, although the exact layout varies quite a lot. As you will see later, the Flash user interface is quite configurable. The important parts to identify are labelled and discussed below.

Figure 1.2

Toolbar

Timeline

Playhead Frames

Stage

Property inspector

3

The Stage

The main work area for creating Flash Pro documents is the Stage (white area). It represents the visible portion of a Flash movie. Objects can move on and off the Stage, but the viewer sees only what's in the Stage area.

You can adjust the size of the Stage (and thus the size of the Flash window onscreen when the animation is complete) by using the Property Inspector. Click somewhere on the Stage area that is not occupied by an object (at this point there shouldn’t be anything on the stage anyway) and then click the Size button which is located on the Property Inspector (on Mac: apple + J). The Document Properties dialog box opens and allows you to enter the width and height of the Stage in inches (''), decimal inches (''), points (pt), centimetres (cm), millimetres (mm), or pixels (px). Figure 1.2 shows the Stage size being set in pixels. Flash provides several units of measure so that designers can be comfortable with their favourite unit. In the Document Properties dialog box you are also able to change the background colour of your flash document and the frame rate at which it plays.

Figure 1.3 The Stage size is set in the Document Properties dialog box.

(Windows Users) A feature in Flash MX 2004 are the document tabs just above the timeline. Each document open, including movies (you can work on more than one movie at a time), and other kinds of document gets a document tab. The tabs make it very easy to switch quickly between the various documents and files. Figure 1.1 shows only one Tab, with the text Untitled-1 – the name that our movie will have until we save it and give it a proper name.

(Mac Users). Document tabs are not available on the Macintosh version of Flash MX 2004. However, you can have multiple documents open. Each has its own window.

The Toolbar

The toolbar is usually to the left side of your screen. The basic way of adding or altering content in your movie is to select a tool and use it. If you select the pen, you can draw; if you select the circle you can draw circle (or ovals), etc. The bottom part of the toolbar has settings and options applying to the selected tool. If you have selected the pen, there will be options to set pen colour and other attributes.

The Timeline and Frames

The Timeline in Flash represents a strip of "film" with frames. To understand how the Timeline works, imagine a film editor with a movable playhead that displays the contents of the current frame on the Stage when the playhead is moved over the frame. Figure 1.3 shows the Timeline. In this example, multiple Timelines (called layers) are visible simultaneously. (Layers will be described shortly.)

Figure 1.4 The Timeline with three layers and the play-head at frame eighteen

4

Frames

The frames in the Timeline represent the frames or cels in an animated movie. To understand frames in Flash, it helps to understand the process of traditional animation. Briefly, the traditional manual process of animating requires a master animator and one or more assistants. The master animator draws two different images representing changed characteristics of a scene. The frames in which the master animator draws the images are called keyframes. Between the pair of keyframes, the assistant animators (known as in-betweeners) draw the frames (or tweens) that change the image from one keyframe to the next. This process, called tweening, results in a smooth transition between keyframes. In Flash, you draw the keyframes, and Flash does the tweening.

Keyframes in Flash are the frames used to introduce content in a movie. When you move the playhead to a keyframe (or just click the keyframe), its content is shown on the Stage, and can be edited. Keyframes are created by clicking a frame and pressing the F6 key or selecting Insert, Timeline, and Keyframe from the menu. A blank keyframe is recognizable by a black circle on the frame. If content is placed in the keyframe, the black circle is filled. The initial frame in a layer is always a keyframe.

The Flash playhead can be dragged to any frame or keyframe. When you select a frame by clicking it, the playhead jumps to that frame. The content on the Stage changes as the playhead is dragged left or right along the Timeline.

You can label keyframes to make your movie clearer and easier to debug. To add a label, select the keyframe and enter the label in the Frame window in the Property Inspector, as shown in Figure 1.4.

Figure 1.5 Property Inspector and labelled keyframe

ActionScript in Keyframes

You can select a keyframe and add ActionScript 2.0 code that will be run when the playhead moves to the frame. A keyframe with associated ActionScript code has a lowercase letter a next to the frame. (ActionScript is discussed in later practicals.)

A regular frame (just called a frame) contains the same content as the keyframe to the left of it. If a frame is part of a tween, it will contain uneditable content generated by Flash's automated tweening process. Tweened frames contain the images equivalent to what the in-betweener artists do in a traditional animation process. However, because the tweened frames contain images with shapes, positions, or some other in-between changes between keyframes, they're "frozen" so that the animation process in the changes cannot be distorted. Tweened frames are not stored, they are calculated when a movie is played. This is one of the ways in which Flash keeps its file sizes small.

Keyframes with no content are blank. If a blank keyframe is inserted in a tween, all tweened frames are destroyed. The best use of blank keyframes is to insert spaces in a layer; in other words, blank keyframes can act as frame "spacers."

______________________________________________________________________________________

Drawing Shapes In this section you will draw a number of circles. In terms of movies, think of this as drawing the first frame of a movie – ie: you are just drawing a picture. Of course you can draw properly using the pen, but circles look tidy and will illustrate many aspects of Flash quickly and easily. You will also find that the mouse is a clumsy drawing tool. In flash we often work by starting with a simple shape, like a circle or rectangle, and then modifying it. The mouse is a good tool for making modifications to shapes. This section is very experimental. You are encouraged to find out how to do things. You should spend as much time as you need to become confident with the tools and actions involved.

3. You should have an empty Flash movie ready to edit from step 2. If not, start Flash and ‘create a new Flash document. (You can also do this by selecting ‘New’ from the ‘File’ menu.. We will be using the Toolbar

5

(on the left of your screen). If it is not visible select the ‘Tools’ option from the ‘Windows’ menu, or press Control + F2 / Command + F2 (PC/Mac).

Figure 1.6 Figure 1.7

4. To create a circle: click the Oval tool (press O). Now click and drag to draw a circle in your work area. The dimensions of your circle are not important, but make sure it is large enough so you can see what you are doing.

Figure 1.8

5. Experiment with the ‘Colors’ controls at the bottom of the toolbar. You will find that they alter the way that Ovals are drawn. Note: You set colours and then draw – the controls do not change the last oval drawn. The property inspector (below the stage) also shows settings for the Oval tool. What else can you change about an oval?

6. To alter an oval after it has been drawn you use the controls in the object inspector (below the stage). Immediately after clicking on the Oval tool, the object inspector gives access to the tool settings – which will effect the next Oval drawn. However, if you ‘select’ an oval that you have already drawn, then you can alter it. ‘Selection’ is done with the ‘Selection Tool’. (The left of the two arrows at the top of the toolbar.) You can select by clicking, or by dragging out a rectangle. If you hold down the shift key while selecting you can ‘add’ to an existing selection. Draw several ovals, if you haven’t already done so, and experiment with selecting and altering them. You should spend some time at this. At the end you should have worked out answers to.

6

How do you know what is selected? How do you know what the property inspector is currently referring to? Can you select more than one oval at a time? Do you have to completely enclose an oval when you are dragging out a selection area? What happens? If you select an oval by clicking in it, can you change the outline colour? What is going on here? Think

about this again after trying question 7.

7. When an object has been selected, still using the selection tool, you can move the object by click and drag. Try it. What happens if you draw one oval over another, then select and move one of the ovals?

As you carry out these experiments you will find it helpful to be able to immediately undo an action. This is often useful. For example, if you wonder what a small change would do to a picture, try it and decide you don’t like it. In Flash, Undo and Redo commands are available on the Edit menu.

8. Draw an oval and get rid of it by using the ‘Undo’ command. What is the keyboard shortcut for Undo? This is worth learning now, as undo is so useful.

9. Draw an oval with a thick outline (3 pixels thick). Try the following: Choose the ‘Select’ tool; click on the outline of your oval to select it; release the mouse; click again on the outline and drag. That is your first experiment. What happened? Now, undo the last action. Click outside the oval to unselect it; then click and drag somewhere on the outline in one operation. What happens this time? (If it isn’t different then try again carefully.)

Flash users have to choose tools from the toolbar very frequently. It can be inconvenient to move the mouse away from your work point to click on a tool. Flash provides keyboard shortcuts for most tools. If you press the letter ‘O’ on the keyboard the result is exactly the same as clicking on the Oval tool.

10. Move the mouse over the Oval tool icon. Pause for a moment, and notice that the name of the tool and the shortcut key are shown in a popup window. What is the tool to the right of the Oval tool called and what is its shortcut key? Try using it – what does it draw? Experiment with the shortcut keys and draw a number of shapes.

11. When using the Oval tool there is an icon that looks like a magnet in the ‘Options’ section at the bottom of the toolbar. This can be on, or off. Try turning it on and off. What does it do? Hint: Try drawing ovals with it on and with it off.. Drag out the oval shape slowly and watch what happens with different shapes.

12. To remove an item you have drawn select it choose ‘Clear’ from the ‘Edit’ menu. What shortcuts are available? Note: Delete and backspace should both work.

13. Using circles make the shape shown to the right.

14. Create a folder called 126Prac1, and save your picture (movie with on frame) as Flash as prac1a in it.

______________________________________________________________________________________

Tweening an Animation As noted earlier, tweening is the automated process of filling in the changes between keyframes. The following exercise will help you to see and understand the process. Follow these steps to create a basic shape tween:

15. Open a new Flash document and click Frame 30 to in the row labelled ‘Layer 1’.

16. Choose Timeline, and Keyframe from the Insert menu to insert a frame. Frames are added from Frame 1–29 and a keyframe is inserted in Frame 30.

17. Click in Frame 1 and then use the Oval tool to draw a circle in the upper-left corner of the Stage, as shown in Figure 1.10

7

Figure 1.10 Circle created with Oval tool

18. Click in Frame 30 and select the Rectangle tool in the Tools panel.

19. Draw a rectangle in the lower-right corner of the Stage, as shown in Figure 1.11.

20. Click in a frame, somewhere between Frame 1 and Frame 30; then in the Property Inspector, select Shape from the Tween drop-down menu, as shown in Figure 1.12 An arrow with a green background appears in the frames shown in Figure 1.13 to show in-betweening has been done.

Figure 1.11 Rectangle created with Rectangle tool

8

Figure 1.12 Setting a Shape tween Figure 1.13 Shape tween arrow

21. Select Control, Enable Live Preview. (If Enable Live Preview is already checked, just leave it alone.)

22. Click in the first frame and press the Enter key to view the live preview. The circle morphs into a rectangle and moves from the upper-left corner to the lower-right corner.

23. Save your movie as prac1b.

To understand the tweening process, drag the playhead from left to right to see the different stages of change that the shape goes through. Each of the frames between the keyframes has a slightly different position and shape. Figure 1.14 shows one of the shapes and positions between the keyframes. Animators call this way of viewing an animation ‘scrubbing’ – it is often more useful than playing the animation.

Figure 1.14 Shape tween between keyframes

If you select any of the frames between the keyframes in the tween, the image cannot be edited. However, if you select a tweened frame and insert a keyframe (F6), the image in the frame can be edited.

24. Try your own experiments to get a feel for what is happening. Hints and ideas: You will find it easiest to start a new movie for each experiment.

What happens if you start with two circles in the first frame and two rectangles in the 30th? What happens with two circles in the first frame and one rectangle in the 30th? What happens if you put the circle into frame 1 before setting the keyframe in frame 30?

______________________________________________________________________________________

9

Getting to Know Flash Pro - Text and Static Text Fields

Flash has three types of text fields: static, dynamic, and input. In the next section we will experiment with static text fields Static Text Fields

Static text fields are used primarily as text labels in the main Timeline or in movie clips. This type of text can be animated and changed dynamically, but only along certain dimensions. For example, a static text block can be motion tweened from one side of the Stage to the other, rotating as it goes. However, a static text block cannot have tweened colours. Text blocks can be made into hot spots and linked to URLs (a website). Static blocks of text can also be broken apart into graphics and reconstituted as virtually any kind of symbol and used exactly as a given symbol could be used in any style.

Dynamic Text Fields and Video

Dynamic text fields are the "data output" fields of Flash. Everything from database data to simple calculation output can be placed in dynamic text fields. Used with Flash Communication Server, for example, dynamic text fields can display chat room outputs.

Input Text Fields User-entered text is placed into input text fields. As part of rich Internet applications, the input text field is the most interactive element in Flash because it allows the developer and designer to create environments that change with the needs of the users who visit the site. Everything from usernames and passwords to large descriptive blocks of text can be entered here.

______________________________________________________________________________________

Introducing text To see an example of how you might use a static text field, this next exercise adds to the earlier exercise in this practical where a ball was tweened into a square. Use the following steps to add text:

25. Add a layer by clicking the Insert layer icon. Name the layer Text by double-clicking on the Layer 2 label, as shown in Figure 1.15.

Figure 1.15 Renaming layer

26. Click the Text layer in Frame 1 and select the Text tool (‘A’).

27. Click the Stage to the right of the circle, and in the Properties Inspector set the type to 24-point Arial (or Helvetica on a Mac). Click the Align Centre icon near the right side of the Properties Inspector. Type in the message “Amazing Magic Circle Transformed to Square”, as shown in Figure 1.16.

28. Save your Flash movie as prac1c in the folder called 126.

10

Figure 1.16 Adding text to the Stage

______________________________________________________________________________________

Two more ways of colouring 29. Start a new movie. Draw a large circle in the middle of the stage. Once the circle has been drawn, click the

Paint Bucket tool (press K)

Figure 1.17 Figure 1.18 Fill Colour icon

30. Select a fill colour for the paint bucket tool, just as you did for the Oval tool. You can use the paint bucket tool change the colour of any area. Try changing the colour in the circle

31. The Colour Mixer Panel provides another way of setting colours. Select the centre of you circle. Display the colour mixer panel by selecting if from ‘Design Panels’ in the ‘Windows’

[Figure 1.19 the fill colour icon in the colour mixer panel]

11

The Linear Gradient Fill 32. First, ensure that your Colour Mixer Panel is displayed, to ensure that it is, go to Window | Design Panels |

Colour Mixer. Make sure there is a checkmark next to the Colour Mixer option. Your Colour Mixer panel should look like this:

[Figure 1.20 The Colour Mixer panel]

33. Once you have found your Colour Mixer panel, click the drop-down menu in the panel and select Linear:

[Figure 1.21 Select Linear]

34. After you have selected Linear, pick a different colour from the colour chooser to the left of your linear drop-down menu.

35. Now that you have a new colour picked, click anywhere in the wide gradient colour bar directly below the Linear drop-down menu. Notice that the old colour and the new colour you picked gradually blend into each other as you move from left to right:

[Figure 1.22 Notice the changes in your colour]

36. I am sure you would rather see these colours on the circle you drew in the previous page. Click the Paint Bucket tool and click on your circle. You will find that your circle's colours now gradually shift with the colours you specified in your gradient mixer in the Colour Mixer panel.

37. To change the colour, select the appropriate slider and change the colour from the colour (Fill Colour) picker. You can also add a new colour to your existing two colours by clicking anywhere in your gradient rectangle.

[Figure 1.23 You can easily add more colours]

12

To remove colours you have added, click on the colour slider you want removed and drag the mouse pointer down. You are basically plucking out the colour you don’t want from the rest of the colours.

You do not have to click the Paint Bucket tool and then click on your object each time you make a modification. Similar to the Fill, you can simply select your object with your mouse cursor and make any changes you want in the Colour Mixer. You will find that any changes you make are immediately updated in your object.

The Radial Fill The radial fill is different from the linear gradient fill you used. Instead of horizontally changing the fill colour, the radial fill changes the colour radically - in a circular fashion.

38. First, ensure that your Colour Mixer Panel is displayed. Select the drop-down menu in the Colour Mixer panel and select Radial:

[Figure 1.24 The Colour Mixer panel]

39. Once you select Radial, you will find a gradient colour slider similar to that of the Linear Gradient Fill. After you have selected your colours, make sure you apply this Fill Style to your circle. Your circle should look similar to the following image.

[Figure 1.25 Notice the radial changes in the colour]

Changing and adding colours are very similar to the method used to change or add colours in the Linear Gradient method. After adding and rearranging colours on the slider, the following image displays a section of the circle along with a small portion of the Mixer Panel.

[Figure 1.26 colour mixer]

13

The Fill Transform Tool

Now would be a good time to introduce the important Fill Transform tool. While you learned how to add different fill effects, Flash includes a method where you can modify the fill's properties.

40. Click the Fill Transform button from the toolbox:

[Figure 1.27 the fill transform tool]

41. After the Fill Transform tool has been clicked, click on your object (circle). You should see something similar to what is displayed in the following image.

[Figure 1.28 the fill properties for the Radial Fill]

42 You can scale, resize, and move the fill property around. Notice that the fill colour shifts, rotates, scales, and moves according to what you modify in the Fill Property.

[Figure 1.29 Notice how the original fill style has changed]

43. The Fill Transform tool can be used on the Linear, Gradient, and Bitmap fill types. Of course, since Solid fill cannot be modified, the Fill Transform tool is of no use there. Experiment!

14

Tip: If you don't see the various Fill Transform features when you select your object after pressing the Fill Transform button, no need to worry. Simply set your zoom to something like 50% or 25% and scale the Fill Transform circle or rectangle to a relatively appropriate size. You can zoom back to 100% after you have scaled the Fill Transform handlers down!

The Bitmap Fill All of the previous fill methods you have encountered involved applying a colour to your object. The Bitmap fill is different, because, instead of filling your object with a colour, you will be filling your object with the contents of a bitmap image.

First, in order to use a graphic, we must first find one. You can use the image at

PantherLib/BCGD/COMP126/sample1.jpg

44. Import the image into your Flash document (file menu | import | import to stage). You should see the image on your stage somewhere. Select it. You can immediately delete it, to get rid of it from the work area. Don’t Don't worry - the image should automatically be kept in within Flash.

45. Select your circle, go to the Colour Mixer, click the fill type drop-down menu, and select Bitmap. You will see a miniature of your image in the box at the bottom of the Colour Mixer. Click on it to select as the filling bitmap. In this example we have used a turntable image.

[Figure 1.30 Select the turntable graphic that is displayed]

Your circle should now have the turntable image as its background. If not, click the Paint Bucket Tool and apply this Bitmap fill to your circle. Your circle should look similar to the following image.

[Figure 1.31 How your circle looks now]

If you want, you can adjust the fill's properties using the Fill Transform Tool. Yes - the Transform tool works for images also! Click the Fill Transform tool and select your circle again. The following is how my image looks after I adjusted the orientation of the turntable a little bit.

15

[Figure 1.32 The Free Transform Tool is Awesome]

6. Save your movie as prac1d in you 126 folder.

16

COMP126-2006: Practical 1 – Getting to know Flash

Review Page. Question 1: What do the 7 numbers required to specify a coloured rectangle hold?

_______________________________________________________________

_______________________________________________________________

_______________________________________________________________

_______________________________________________________________

Question 2: What are the three parts that comprise the Flash system

_______________________________________________________________

_______________________________________________________________

_______________________________________________________________

Question 3: Demonstrate drawing a circle and a rectangle without clicking on the toolbar. Question 4. Demonstrate drawing a circle. Your demonstrator will specify the thickness

and form of the outline (if any) and the colour of the interior. Question 5. Answer any question from step 6.

Question 6. What happened in step 9. Question 7. What is the ‘magnet’ icon under ‘options’ when using the Oval tool used for.

_______________________________________________________________

_______________________________________________________________

_______________________________________________________________ Question 8. Answer any question from step 24.

Question 9. What is meant by ‘scrubbing’ an animation?

VERIFICATION

Show the demonstrator your finished versions of the exercises in this practical. You may also be asked to demonstrate how you performed a specific task from this practical.

Name: ________________________ 0 1 2 3 4 ID: _________________

(demo sign & date)