Intro Lesson 5/12

1. M5
Satree Phuket
Aj. Jamie

2.  What are graphics?
 Pictures displayed on a computer.
 What is animation?
 The creation of moving pictures or graphics.

3.  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.

4.  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.

5.  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.

6.  Take a look at some impressive Flash websites on the
internet:
http://ge.ecomagination.com/smartgrid/#/landing_page
http://www.mono-1.com/monoface/main.html
 http://www.mikimottes.com/
 http://waterlife.nfb.ca/

7.  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.

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.

9.  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.

10.  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.

11.  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.

12.  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.

13.  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.

14.  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.

15.  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_t
utorial_drawing_tools_in_flash.php3