Graphical Animation - Flash Introduction

15
GRAPHICAL ANIMATION M5 Satree Phuket Aj. Jamie

description

Intro Lesson 5/12

Transcript of Graphical Animation - Flash Introduction

Page 1: Graphical Animation - Flash Introduction

GRAPHICAL ANIMATION

M5Satree Phuket

Aj. Jamie

Page 2: Graphical Animation - Flash Introduction

Graphical Animation

What are graphics? Pictures displayed on a computer.

What is animation? The creation of moving pictures or graphics.

Page 3: Graphical Animation - Flash Introduction

Graphical Animation

Aims of this course: Find out what graphical animation is. Discover what graphical animation can be

used for. Learn to create animations using Adobe Flash. Be able to upload and display animations on

the internet.

Page 4: Graphical Animation - Flash Introduction

Adobe Flash

Adobe Flash Player is a tool available in most web browsers that allows you to display animations.

Adobe Flash also has many web animation authoring tools available for users.

The authoring tool we will be using in class is Adobe Flash CS4.

Note: In 2005 the company Macromedia was taken over by the company Adobe, so Macromedia Flash is now known as Adobe Flash.

Page 5: Graphical Animation - Flash Introduction

Flash

Flash allows you to create web applications, games and movies, as well as application for mobile phones, such as screensavers.

You can create complete websites just using Flash.

Flash files are usually known as Flash movies, and have a .swf file extension.

Page 6: Graphical Animation - Flash Introduction

Take a look at some impressive Flash websites on the internet:

http://ge.ecomagination.com/smartgrid/#/landing_pagehttp://www.mono-1.com/monoface/main.html

http://www.mikimottes.com/ http://waterlife.nfb.ca/

Page 7: Graphical Animation - Flash Introduction

Adobe Flash

Task today – Introduction to Adobe Flash. Start – All programs – Adobe – Adobe

Flash Create New – Flash Document You have now created a blank Flash

Movie and are ready to begin editing.

Page 8: Graphical Animation - Flash Introduction

Macromedia Flash Professional 8

On the left of your screen you should see the tools panel.

This panel contains your basic selection, drawing and colour tools which you should already be familiar with.

Page 9: Graphical Animation - Flash Introduction

Layers

We used layers in Photoshop. It is the same in Flash, layers can be used

to create more complicated drawings or animations.

For example, use a layer for each part of the drawing you want to animate.

Use a separate layer for the background.

Page 10: Graphical Animation - Flash Introduction

Frames

At the top of your screen you will see a timeline.

Each of the frames in the timeline lasts for a small period of time.

fps is the frame rate per second. The default is 12 frames per second. Your can change this if necessary in properties.

Page 11: Graphical Animation - Flash Introduction

Frames Time to create your first animation! Draw a simple image. Then, right click frame 5, and select Insert

Key Frame Make sure the red bar is over frame 5,

and change the picture. Use Control – Test Movie to view your

animation. This is a simple way to create an

animation, it is called frame by frame animation.

Page 12: Graphical Animation - Flash Introduction

Frames

Something else to try… Start again. Follow the same steps

then but Insert – Blank Key Frame. What happens this time?

A BLANK frame is inserted. Add something to this blank screen and test your movie again.

Remember, use Insert Key Frame to CHANGE your original image, or use Insert Blank Key Frame to create a new, different image.

Use Insert Frames to display a frame for a longer time, without changing it.

Page 13: Graphical Animation - Flash Introduction

Saving your work

We need to save our work as a .swf file because this is the format that Flash files are displayed on the web as.

To do this; File – Export – Export Movie Give your work a filename (ONLY use

letters and numbers, and no Thai script)

Hit OK at the next screen. You have now created a Flash movie

ready for uploading to the internet.

Page 14: Graphical Animation - Flash Introduction

Today

I want you to create a animation of anything you want.

(your friend, a cartoon, a car, a sunset, a card, a dog…. up to you.)

Include some text on the animation.

Try and make the animation 5-10 seconds long.

Page 15: Graphical Animation - Flash Introduction

Help

If you need any help to create pictures or you have never used graphic software before, there is an excellent beginners guide here: (pages 3 and 4 guide you completely through the drawing of a house)

http://www.adobe.com/devnet/flash/articles/beg_drawing.html

More help can also be found here, another excellent beginners guide:

http://www.webdevelopersnotes.com/tutorials/flash/flash_design_tutorial_drawing_tools_in_flash.php3