M5 - Graphical Animation - Lesson 1


Published on

M5 - Graphical Animation - Introduction

Published in: Technology, Art & Photos
1 Comment
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

M5 - Graphical Animation - Lesson 1

  1. 1. Graphical Animation<br />M5<br />Satree Phuket<br />Aj. Jamie<br />
  2. 2. Graphical Animation<br />What are graphics?<br />Pictures displayed on a computer.<br />What is animation?<br />The creation of moving pictures or graphics.<br />
  3. 3. Graphical Animation<br />Aims of this course:<br />Find out what graphical animation is.<br />Discover what graphical animation can be used for.<br />Learn to create animations using Adobe Flash.<br />Be able to upload and display animations on the internet.<br />
  4. 4. Adobe Flash<br />Adobe Flash Player is a tool available in most web browsers that allows you to display animations.<br />Adobe Flash also has many web animation authoring tools available for users.<br />The authoring tool we will be using in class is Adobe Flash CS4.<br />Note: In 2005 the company Macromedia was taken over by the company Adobe, so Macromedia Flash is now known as Adobe Flash.<br />
  5. 5. Flash<br />Flash allows you to create web applications, games and movies, as well as application for mobile phones, such as screensavers.<br />Flash files are usually known as Flash movies, and have a .swf file extension.<br />
  6. 6. Flash Animations<br />Take a look at some Flash Movies and games on the internet.<br />www.brainpop.com (Educational games)<br />www.mousebreaker.com (Games)<br />www.weeble-stuff.com (Fun cartoons)<br />
  7. 7. Adobe Flash<br />Task today – Introduction to Adobe Flash.<br />Start – All programs – Adobe – Adobe Flash <br />Create New – Flash Document<br />You have now created a blank Flash Movie and are ready to begin editing.<br />
  8. 8. Macromedia Flash Professional 8<br />On the left of your screen you should see the tools panel. <br />This panel contains your basic selection, drawing and colour tools which you should already be familiar with.<br />
  9. 9. Drawing Tools<br />Selection Tool (v) - Selecting whole objects and moving them. <br />Subselection Tool - Selecting partial objects. <br />Line Tool - Drawing straight lines. <br />Lasso Tool - Selecting irregular shaped pieces of an object <br />Pen Tool - Drawing non-straight and curved lines. <br />Text Tool (t) - Inputting a textbox onto the stage. <br />Oval Tool - Drawing oval and circle shapes. (Drag + Holding Shift = Circles) <br />Shape Tool - By default draws rectangles. (Drag + Holding Shift = Squares) <br />Pencil Tool - Free drawing thin lines. <br />Brush Tool- Free drawing brush shapes. <br />Free Transform - Scale, rotate, and skew an object. <br />Fill Transform - Distort the gradient fill of an object. <br />Stroke Tool - Change the color and size of a stroke. <br />Fill Tool - Change the color of a fill. <br />Eyedropper - Sample a color from the stage. <br />Eraser - Use a brush to erase parts of an object. <br />Hand Tool - Move the stage around if it is not all visible.<br />Zoom - Zoom in or out. <br />
  10. 10. Layers<br />We used layers in Photoshop.<br />It is the same in Flash, layers can be used to create more complicated drawings or animations.<br />For example, use a layer for each part of the drawing you want to animate.<br />Use a separate layer for the background.<br />
  11. 11. Frames<br />At the top of your screen you will see a timeline.<br />Each of the frames in the timeline lasts for a small period of time.<br />fps is the frame rate per second. The default is 12 frames per second. Your can change this if necessary in properties.<br />
  12. 12. Frames<br />Time to create your first animation!<br />Draw a simple image.<br />Then, right click frame 5, and select Insert Key Frame<br />Make sure the red bar is over frame 5, and change the picture.<br />Use Control – Test Movie to view your animation.<br />This is a simple way to create an animation, it is called frame by frame animation.<br />
  13. 13. Frames<br />Something else to try…<br />Start again. Follow the same steps then but Insert – Blank Key Frame.<br />What happens this time?<br />A BLANK frame is inserted. Add something to this blank screen and test your movie again.<br />Remember, use Insert Key Frame to CHANGE your original image, or use Insert Blank Key Frame to create a new, different image.<br />Use Insert Frames to display a frame for a longer time, without changing it.<br />
  14. 14. Saving your work<br />We need to save our work as a .swf file because this is the format that Flash files are displayed on the web as.<br />To do this; File – Export – Export Movie<br />Give your work a filename (ONLY use letters and numbers, and no Thai script)<br />Hit OK at the next screen.<br />You have now created a Flash movie ready for uploading to the internet.<br />
  15. 15. Today<br />I want you to create a animation of anything you want. <br /> (your friend, a cartoon, a car, a sunset, a card, a dog…. up to you.)<br />You should include some text on the animation. <br />Try and make the animation 5-10 seconds long.<br />
  16. 16. Help<br />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)<br />http://www.adobe.com/devnet/flash/articles/beg_drawing.html<br />More help can also be found here, another excellent beginners guide:<br />http://www.webdevelopersnotes.com/tutorials/flash/flash_design_tutorial_drawing_tools_in_flash.php3<br />