M5 - Graphical Animation - Lesson 1

445 views

Published on

M5 - Graphical Animation - Introduction

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
445
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

M5 - Graphical Animation - Lesson 1

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

×