Telus Learning Connection Provincial Conference 2005

Calgary, Alberta

Macromedia Flash . : : An Introduction : : .

Reading for when you get back to your own classroom: • What is Flash? • Bitmap v. Vector - drawing tools • Symbols and Libraries – saving file space • Tweening – animation made easy • Publishing and Incorporating your Flash Project on the Web

The Hands-on Activities that we shall do today:

• Motion Tween: Draw a ball and make it bounce o Motion Guide: Control the ball’s movement

• Tint/AlphaTween • Shape Tween • Make a fish-tank – IF there is time… • Publish!

Pete MacKay

Jasper Place High School pete.mackay@epsb.ca

http://www.resco.ca

http://www.theteacherlist.ca

What is Flash? Flash Player and Flash According to Macromedia, its Flash Player “is the world's most pervasive software platform, used by over 1 million professionals and reaching more than 97% of Internet-enabled desktops worldwide as well as a wide range of devices.”1 In order to see and use Flash components, a viewer must first have the Flash Player installed on their computer. This free piece of software mentioned above is easily downloaded by visiting the following link:

http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash

Macromedia’s website will send a query to your computer and automatically choose the appropriate version of its software to install for you. This installation works for both PC and Mac users. That’s all fine but what is Flash? Well, Flash is the application that allows you to create content that can be viewed on a web page. Common examples of Flash content include animations, button rollovers and navigation bars. Flash can also be used to create forms and other ways in which to interact with your web audience. While the Macromedia MX 2004 suite of applications (Flash, Freehand, Dreamweaver and Fireworks) is expensive, the Macromedia Education Store allows qualified education end users in the United States and Canada to purchase Education versions of Macromedia products at a reduced price. Education end users are full-time students, faculty, staff and employees of government-certified educational institutions, consisting of Elementary, Middle, Junior High and High Schools, and Accredited public or private universities, colleges, and community colleges that grant degrees requiring at least two years of full-time matriculation. Education versions of Macromedia products are intended for instructional and administrative purposes only and may not be used for any commercial purpose. Macromedia will conduct periodic security audits to be certain of your education qualification.2 You can also download a thirty day demonstration of any of Macromedia’s software. from this link: http://www.macromedia.com/downloads/

1 http://www.macromedia.com/software/player_census/flashplayer/ 2 http://www.macromedia.com/cfusion/store/html/index.cfm?event=displayEduConditions&store=OLS-EDU Pete MacKay http://www.resco.ca

Permission to use in classrooms granted – preserve ownership and credit, please.

2

The Workspace

The Toolbar: All of the drawing and other graphic manipulation tools are

here. Some have additional items if you hold down the mouse button.

The Timeline: Layers and frames are managed here. The red box that runs along the timeline is called the playhead. The Stage: All of your work is placed on the stage. Items can enter or leave the stage and still be part of the movie. The Property Inspector: All the options for each element are found here. Click on the object, then look here for the changes you can make. Palettes: There are a number of palettes available here to help manipulate the components of your movie. Look in the Window menu for more.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

3

Bitmap and Vector Drawings Most computer graphics are bit map drawings. In other words, they are constructed of small blocks called pixels. It is sort of like drawing a photograph by filling in the squares on a sheet of graph paper. The further away you get, the better it looks! Here is a diagram that shows how bitmap drawings look to the computer:

The little blocks you see look terrible when the graphic is enlarged. We call these “jaggies” and they cause a lot of difficulties in graphic arts. For example, you may have tried to enlarge a low- resolution photograph only to be disappointed at the end-result; similar to what is shown here. Now let’s look at a vector drawing. Vector drawings are not made up like a brick-wall. Vector tools (like the pen tool in Fireworks or the bezigon tool in ClarisWorks) place points along a route and the path is mathematically calculated.

Since vector drawings are mathematically drawn, they can be

reduced or enlarged to almost any size and will always look as good as the

original work.

Macromedia Flash Uses Vector Drawings (although

the odd bitmap is needed…) Pete MacKay http://www.resco.ca

Permission to use in classrooms granted – preserve ownership and credit, please.

4

Symbols and Libraries One of the most important tasks of the web designer is to maintain a balance between the aesthetic value of a site and the smallest possible file sizes. Fortunately, Macromedia Flash makes use of an innovative idea called symbols and libraries. When you create a vector drawing, you can also convert it to a symbol. This means that the drawing will be stored in a library. You can use any number of instances of that symbol in your project without increasing the file size because the instance refers back to the library for its information. There are several reasons why symbols are good to use. Take for example, a school website where there may be 35 instances of the school logo used. In html, if a .gif is 10 kb in size and you use it 35 times, your file size just increased from 10 kb to 350 kb. With Flash, if you convert that logo to a symbol, you can use it as many times as you wish and the file size will remain at 10 kb.

Another reason to use symbols is that if you wish to make a change, you need only to change the original symbol – all instances of that symbol will reflect the change. For example, if you change the text of a Flash button from “Front Page” to “Dreamweaver”, the change only needs to be made once, not for each time the button appears on the site.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

5

Tweening – Animation, Flash-style The most important tool in Macromedia Flash is the Timeline:

Layers...........Think of layers as several transparency sheets laid on an

overhead projector. Each animated component in your movie must be on its own layer. Things to remember about Layers: 1) Name each layer you create by double-clicking “Layer 1” and type something of your own; 2) Top layers in the list appear in front of everything else under it in your movie.

te MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

6

Pe

Frames...........Each frame in the timeline represents an additional moment of time in your movie. Think of them as frames on a movie-reel at the cinema – the timeline plays each frame in order from beginning to end.

Keyframes...........Keyframes indicate a moment of change in your animation. New symbol instances might appear; something might begin to move (or stop); or something might change color. Things to remember about Keyframes: 1) Keyframes can be inserted easily by using the F6 key on your keyboard

Playhead...........The Playhead is a marker to show where you are in your movie. Things to remember about the Playhead: 1) You can “scrub the playhead” (a videographer’s term) to move from one point to another in the timeline, giving a rough preview of your work. 2) One better way to preview your work is to press ENTER. The Playhead will progress from where it is at on the timeline. 3) For a more accurate preview, press CTRL/COMMAND ENTER – a small web file will play.

Frame rate...........The Frame rate shows how many frames will play over the period of one second. Things to remember about the Frame rate: 1) Adjust the default Frame rate (12 fps) by double-clicking it in the Timeline. 2) You can also adjust the size of the stage, the background color and the units of measure by double-clicking the Frame rate in the Timeline.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

7

Animation in flash involves a concept called Tweening. In traditional animation, a Master Animator would create the key frames of an animation, and then hand the drawings off to an In-Between Animator with instructions on how to complete the animation. So, the terms keyframe and tween come to us from the traditional pen and ink methods of animation. There are three types of tween that you can create with Macromedia Flash. They are the tint or alpha tween, the motion tween and the shape tween. The first two requires the use of a symbol instance on two keyframes; the last must not use symbols. You can also use a motion guide to control where your symbol instances move from the start to the end of the tween.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

8

The Tint or Alpha Tween This type of tween can be used to change either the color of a symbol or the transparency (alpha value) of a symbol:

The Shape Tween This type of tween must not use symbols. It is handy for morphing one shape into another:

The Motion Tween This type of tween moves a symbol from one location to another. A simple motion tween will move directly from the first to the second point but you can add a motion guide to the layer to control the movement of that symbol:

Pete MacKay http://www.resco.ca

Permission to use in classrooms granted – preserve ownership and credit, please.

9

Publishing Your Work and using it on your Web Page It is helpful to understand the two types of files you will be creating when you use Macromedia Flash. If you create a movie and choose Save from the File menu, you will create a native Flash file, designated by the suffix: .fla. You can open an .fla file and edit it. Do not put these files up on your web server or others will be able to change your work! The second file you will create is called a Small Web File and is shown with the suffix: .swf. Many, many people will try to tell you that .swf stands for Shockwave file. That is not true. Remember one of the main advantages that Flash offers us is SMALL WEB FILES! Action Result? Use? How?

Save .fla file Can be edited File=> Save

Publish .swf file Embed in your html coding for use on your web site

File=> Publish

To use your Flash project in your website, simply place it directly into your document using Macromedia’s Dreamweaver or Adobe’s GoLive. (Other graphic-user-interface webpage editors allow this too.) If you write your web pages by hand-coding in html, then you need to publish an HTML version of your project by choosing HTML from File => Publish Settings. Open that html file in your editor and copy everything from the opening <OBJECT> tag to the closing </OBJECT> tag. Then, open the destination HTML document and paste in that code where you want the movie to appear.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

10

The Hands-on Activities! Activity One: Draw a ball and make it bounce…

1. Open Macromedia Flash. Choose Modify => Document (CTRL +J) set the stage size to 500 pixels by 500 pixels. Click OK

2. Select a fill and stroke color. Using the Oval Tool (O), draw a round ball in the top left corner of the stage. Holding shift while you draw will ensure a regular polygon – a circle in this case.

3. Save your work as ball.fla to the desktop. Save often after this point.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

11

4. Select the Black Arrow Tool

again. Double click the circle so that both the fill and stroke are selected and choose Convert to Symbol from the Modify Menu (F8). Name the symbol ball, choose Movie clip and ensure that the registration point is at the centre of the grid.

5. Right-click (control-click for Mac) on keyframe 20 and then choose Insert Keyframe.

Note of Interest:

Keyframe and Tween are important terms in animation. When animations were made traditionally, a Master Animator would draw key cells in the animation. These KEY FRAMES were then passed on to an In-Between Animator (along with instructions about what was to happen next). This In-Between Animator would then fill in the tedious details between the key frames. The computer does both jobs for us now and we use the term KEYFRAME to indicate an important frame that introduces a change in the movie. We also use the term TWEEN to describe the process of adding the steps of action between the keyframes.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

12

6. Right-click (ctrl-click for Mac) on the timeline between the two keyframes. Choose Create Motion Tween. If you did this correctly, an arrow on a purple background will appear in the timeline. If it did not work, a dashed line will appear. (You can then select the frames and right/crtl click, choosing Remove Frames to start over.)

7. Click on frame 20 and move the symbol to the bottom left of the stage.

8. Press Enter to see your ball move! Save your work.

Tween Challenge Make the ball bounce all around the screen!

Note of interest: You can use up to 16,000 frames in one .swf movie.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

13

Activity Two: Add a motion guide to your ball…

1. Open Macromedia Flash – set the stage size to 500 pixels by 500 pixels. Save the new file as motion.fla.

2. Draw a ball in the top left, convert it to a symbol as you did in activity one.

3. Double-click the layer name in the timeline and change it from Layer 1 to ball Press Enter to set the name.

4. Add a keyframe in the ball layer at frame number 40 and insert a Motion Tween by right-clicking between the two keyframes on the timeline.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

14

5. Click on the layer name (notice that each occupied frame is now highlighted – this is a good way to select all the frames in a layer)

6. The “Add Motion Guide” icon is shown below. Click it once to add a new layer attached to the ball layer. That’s where you draw in the motion guide with the pen or pencil tool.

7. Click on the Motion Guide for Ball layer. Using the pencil or pen tool, draw a not-too-complicated path around the screen.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

15

Click on Frame 1 of the Ball layer and click on the magnet in the toolbar (snap to object option); drag the ball so that it is touching the beginning portion of the line you drew.

8. Click on Frame 40 of the Ball layer and drag the ball so that it is touching the final portion of the line you drew. 9. Hit Enter to preview. The ball will follow the line if you did this correctly. When you use CTR/COMMAND + Enter to preview, the motion guide does not appear. 10. Save your work.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

16

Activity Three: Tint and Alpha Tweens… Alpha Tween:

1. Open Macromedia Flash – set the stage size to 500 pixels by 500 pixels. Save as alpha.fla

2. On frame #1, draw a ball that has one color for the fill and another color for the stroke. Convert to a symbol, giving it a distinct name.

3. Insert a keyframe in frame #10 and insert a motion tween between the two keyframes If this was successful, a complete arrow will appear on a purple background in the timeline.

4. Click on frame #10, then click on the circle symbol instance on the stage. 5. In the Property Inspector at the bottom of the screen, choose ALPHA from

the color pick list. Move the slider control from 100% to 0%. Press CTRL + F3 if you cannot see the Property Inspector.

6. Press Enter to preview.

7. Save your work. Pete MacKay http://www.resco.ca

Permission to use in classrooms granted – preserve ownership and credit, please.

17

Tint Tween:

1. Open Macromedia Flash – set the stage size to 500 pixels by 500 pixels. Save as tint.fla

2. On frame #1, draw a ball that has one color for the fill and another color for the stroke. Here’s the important thing about a Tint Tween – the object must NOT be a symbol!

3. Insert a keyframe in frame #10 and click on frame #5 (or any frame between the keyframes.)

4. In the Property Inspector at the bottom of the screen, choose SHAPE TWEEN from the Tween pick list shown. (You must click between the two key frames on the timeline to see this)

If this was successful, a complete green arrow will appear in the timeline.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

18

5. Click on frame #10

6. Ensuring that the fill and stroke are both selected in frame #10, click the Swap Colors icon in the toolbar.

7. Press Enter to preview.

8. Save your work.

Tween Challenge Two: Make text fade in and out and change colors! Hint: Convert the text to a symbol. Fonts become irrelevant at this point so anyone can view the animation regardless of what fonts are on their computer.

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

19

Activity Four: Build a Fishtank Using layers, keyframes, tweens and the drawing tools, draw and animate a fishtank.

Include at least these layers (More if you like): And include these tweens:

• Bubbles • Fish • Weeds • Sand • Background

• Weeds waving gently • Bubbles rising • Fish • Swimming

It might look something like this:

Pete MacKay http://www.resco.ca Permission to use in classrooms granted – preserve ownership and credit, please.

20