Flash

CS101 Lecture 19 Introduction to Flash Animation

Aaron Stevens 9 March 2011 1

What You’ll Learn Today – What is Flash? – Flash software versions – Creating a simple animation – Publishing the animation to the web

2

What is Flash? Flash is an animation and multimedia delivery platform. – Developed/sold by Adobe Corporation – Content can be delivered via the web, played in a Flash player or in web browser. – Applications include animations, presentations, video player, interactive applications, games, … 3

Flash Software Versions CS Department has licenses for Flash CS3 in the labs. – new version available is Flash CS5 – 30-day free trial license available

CS3, CS4, CS5 are fundamentally similar. – We can set CS5’s workspace view to “Classic”

4

Frame-by-Frame Animation Frame-by-frame animation is like the classic “flip book:”

5

Creating a Flash Project Open Flash: (All Programs -> Adobe Web premium CS4 -> Adobe Flash Professional CS4), Select File / New…

6

The Timeline

Navigating Flash

The Stage

Tools

The Library

7

Setting Document Properties Set the frame rate to 4 frames per second:

8

Navigating Flash: The Timeline The timeline is a way to navigate the animation frame-by-frame:

9

Example: Text Animation We’ll use the text-drawing tool.

The Stage is a display of the visible region of the animation:

10

Inserting a Keyframe We insert a Keyframe for each distinct endpoint of a movement. Right-click on the timeline to insert a keyframe.

11

Working in Frame 2 Note that we can modify the text field we created in frame 1…

12

The Completed Timeline We now have 12 frames, each slightly different.

13

Testing the Movie… Bring up the movie in a Flash Viewer window.

14

Publishing a Movie A published movie is stored in a .SWF file. This is a executable animation, and can be embedded within an HTML page. 15

HTML to Embed Flash Movie

Note the familiar tag format. You can edit the paths, size, etc. if needed. 16

Review Generated Files: .fla is the Flash project file (which we can edit) .swf is the published movie .html is a basic webpage with the code to embed this movie

17

Motion Tween Animation A motion animation is done across several frames. Ingredients: – A movie clip to manipulate – Some keyframes on the timeline – Some motion tween(s)

A tween is what happens “in between” two discrete points. In flash, a tween is a motion or shape change. 18

Motion Tween Example On frame 30, insert a new Keyframe…

Then on any frame following the keyframe, create a motion tween:

19

Motion Tween Example On frame 30: use the Free Transform tool to resize and move the text:

20

Flash Keyboard Shortcuts – T : text tool – R : rectangle tool – O : oval tool – V : move tool – Q : free transform tool – F8 : create movie clip from selected item – Shift + Resize to constrain proportions

What You Learned Today – Timeline, Stage, Frames, Keyframes – Library, Symbols/MovieClips – Motion Tweens, Free Transform Tool

22

Announcements and To Do List – HW 7: Digital Audio due WED 3/9 – Readings: • General about Flash: http://www.mediacollege.com/adobe/flash/ • Flash tutorial: http://www.w3schools.com/Flash/default.asp

– You might want to download the 30-day trial version of Flash CS5: http://www.adobe.com/go/tryflash