1 / 63

Flash Basics by Dr SC Li

Flash Basics by Dr SC Li. Ordinary Movie vs. Flash Movie. MPEG Movie. Flash Movie. Animation. Vector Graphics. Interactivity. Metaphor of Flash Movie. Flash Movie. Stage. Timeline (Sequencing). Symbols (actors). Actionscripts.

annona
Télécharger la présentation

Flash Basics by Dr SC Li

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Flash Basicsby Dr SC Li

  2. Ordinary Movie vs. Flash Movie MPEG Movie Flash Movie Animation Vector Graphics Interactivity

  3. Metaphor of Flash Movie Flash Movie Stage Timeline (Sequencing) Symbols (actors) Actionscripts Defining frame action and interaction between objects or between object and user Frames Graphics, Movie Clip, buttons, Components Layers Instance objects

  4. Timeline Library: Store symbols Stage Tool Box: Create shapes and colours Flash Working Environment

  5. Stage • Showing movie scenes • Show symbols • Edit graphics The Stage

  6. The Stage Setting the Stage • Use the Movie Properties dialog box to specify settings that affect the entire movie, such as • the frames per second (fps), • playback rate, • the stage size, and • background color, etc.

  7. Modify the default movie properties • Place the cursor on the Stage • Right-click and choose “Property” • On the pop-up “Property” panel, choose “Size” as shown above. The Stage

  8. In the Movie Properties dialog box, verify that 12 is the number in the Frame Rate text box. The movie will play at 12 frames per second, an optimal frame rate for playing animations on the Web. The Stage

  9. The Stage

  10. Layer folder Motion guide The Timeline

  11. The Timeline • Animations are assembled or created with the Timeline. • The Timeline consists of Layers. • Each Layer contains of a number of frames, the amount of which is determined by the movie you create. • Picture each Layer as a strip of transparent film (like the acetate placed on overhead projectors).

  12. The Timeline • You animate individual Instances on each strip of film. • Multiple Layers are created, with each Layer containing only one Instance. • Because each Layer is effectively transparent, the content of each Layer, when viewed on the Stage create a composite image.

  13. The Toolbox • let you create and modify shapes for the artwork in your movies. • contains a collection of tools for creating, selecting, and manipulating content in the Timeline and on the Stage. • is divided into four parts: Tools, View, Colors, and Options.

  14. Free Transform Tool Fill Transform Tool The Toolbox

  15. Symbols and Instances • A symbol is a graphic, button, or movie clip that you create once and then can reuse throughout your movie or in other movies. Any symbol you create automatically becomes part of the library.

  16. Symbols and Instances • An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be very different from its symbol in color, size, and function. Editing the symbol updates all of its instances. But editing an instance of a symbol updates only that instance.

  17. Symbols and Instances • Using symbols in your movies dramatically reduces file size • saving several instances of a symbol requires less storage space than saving a complete description of the element for each occurrence • Using symbols can also speed movie playback, because a symbol needs to be downloaded to a browser only once

  18. Creating Instances • After creating an instance of a symbol, use the Instance panel: • Windows > Panels > Instance • to specify color effects, assign actions, set the graphic display mode, or change the behavior of the instance. The behavior of the instance is the same as the symbol behavior, unless you specify otherwise. • Any changes you make affect only the instance and not the symbol.

  19. Creating Instances

  20. Animations • There are three methods for creating an animation sequence in Flash: • tweened animation • frame-by-frame animation and • Motion guide

  21. Animations • In frame-by-frame animation: • you create the image in every frame. • In tweened animation: • you create starting and ending (key) frames and let Flash create the frames in between. Flash varies the object's size, rotation, color, or other attributes evenly between the starting and ending frames to create the appearance of movement.

  22. Copies of the previous key frames Key frame Key Frames Tweening and Keyframes

  23. Exercise 1 (Creating animated text)

  24. Exercise 1 (Creating animated text) • Open Flash MX working environment: Start > Program > Macromedia > Flash MX • Open the file “flashmx-basic1-template.fla” • Close all the ‘unnecessary’ windows except for that of the Toolbox, Stage and the Library. • To re-open the Toolbox: click Window > Tools • To re-open the Library: click Window > Library

  25. Modify the default movie properties • Place the cursor on the Stage • Right-click and choose “Property” • On the pop-up “Property” panel, choose “Size” as shown above. Exercise 1 (Creating animated text)

  26. In the Movie Properties dialog box, verify that 12 is the number in the Frame Rate text box. The movie will play at 12 frames per second, an optimal frame rate for playing animations on the Web. Exercise 1 (Creating animated text)

  27. Exercise 1 (Creating animated text) Creating a text symbol • Choose Insert > New Symbol • Name the symbol as“intro-text”and choose the behaviour as “Graphic”

  28. Exercise 1 (Creating animated text) • Click on “A” on the toolbox panel • On the Stage, drag a rectangle of appropriate for typing in the required text • You can change the font type, font size and font style by clicking text > font, text > size and text > style respectively.

  29. Exercise 1 (Creating animated text) • When you finish the text editing, you should click the “black arrow” on the toolbox panel. • The text symbol that you have just create will store in the library. To view it, click Window > Library.

  30. Exercise 1 (Creating animated text) Creating instances • Switch the stage back to Scene 1 by clicking “Scene 1” • Then drag the intro-text symbol onto the stage. • To insert more frames, click Insert > Timeline> Frame • Then drag the rectangle to Frame 80.

  31. Exercise 1 (Creating animated text) • You can change the properties of each instance by highlighting the instance and then choose Modify > Transform > Free Transform to change the corresponding properties.

  32. Exercise 1 (Creating animated text) • You can change the instance’s texture by right-click it and choose “property” • Select Color: “Alpha”and change the alpha value from 100% to 0%

  33. Exercise 1 (Creating animated text) Tweening between two key frames • Select the small rectangle at Frame 80 and insert a key frame there by clicking Insert > Timeline Keyframe • To create tweening motion, select the frame with a “rectangle” sign, click Insert > Timeline > Create Motion Tween • Highlight the end KeyFrame and drag the text to your desired position. • By varying the positions (properties) of the instance at the two key frames, Flash will then simulate the motion in between them.

  34. Exercise 1 (Creating animated text) • You can preview the flash movie by clicking File > Preview > HTML • You can save the flash movie by clicking File > Save As and save the file as flashmx-basics1-template.fla • You may publish you .fla file as a flash movie (.swf) and an executable file (.exe) by selecting the appropriate Publish Setting.

  35. Exercise 1 (Creating animated text) • To change the publish setting, click File > Publish Settings • To publish, click File > Publish

  36. Exercise 1 (Creating animated text) • In general, Flash generates 3 types of files: • ???.fla  Flash’s working file • ???.swf  Flash movie file ( usually linked with an HTML file); can be viewed by Flash supported browsers • ???.exe  Flash standalone executable file

  37. Exercise 1 (Creating animated text) Exploration: (Tweening with other properties) • To create an animated text by tweening not only the position of the instance but other properties such as alpha value, size, rotate, transform, etc • Save the file as flashmx-basics1-template.fla • Preview the flash movie by choosing File > Publish Preview

  38. Exercise 1 (Creating animated text) Exploration: (Animated by multiple key frames) • To create an animated text with a curved trajectory. • Save the file as flashmx-basics1-template.fla • Preview the flash movie by choosing File > Publish Preview

  39. Exercise 1 (Creating animated text) Adding background sound effect • Insert a new layer by clicking Insert > Timeline > layer • Name this layer as “intro-music” • From the Library, drag the audio clip “Sound-technoloop” onto the stage • Save the file as flashmx-basics1-template.fla • Preview the flash movie by choosing File > Publish Preview

  40. Exercise 2 (Fm-by-Fm animation) • Open the file flashmx-basics2-template.fla • Insert a new layer and name it as “flower” • Insert a blank key frame for this layer at Frame 97 by clicking Insert > Timeline > Blank Frame • Select all the images: flowerFr00 to flowerFr16 from the flower folder of the Library by pressing “shift” while clicking the images.

  41. Exercise 2 (Fm-by-Fm animation) • Select Frame 97 of the flower layer, drag all the images onto the stage. Select the images and resize them by clicking Modify > Transform > Free Transform if necessary • On “Frame 96”, Click Insert > Blank Frame • Copy “Frame 97” and paste it onto “Frame 96” • Select and delete the “topmost” image. • Repeat the above THREE steps for Frame 95 and so on till you reach Frame 81.

  42. Exercise 2 (Fm-by-Fm animation) • You can preview the flash movie by clicking File > Publish Preview >Flash • Save the flash movie by clicking File > Save As and save the file as flashmx-basics2-template.fla • You may publish you .fla file as a flash movie (.swf) and an executable file (.exe)

  43. Exercise 3 (Using Motion Guide) A Buzzing Honey Bee: • Open the file flashmx-basics3-template.fla • Insert a new layer and name it as “bee” • Insert a key frame for this layer at Frame 97 • Extend the timeline for the “bee” layer to Frame 109 • Insert a key frame for this layer at Frame 109 • Create tweening motion for the “bee” instance between Frame 97 to Frame 109

  44. Exercise 3 (Using Motion Guide) A Buzzing Honey Bee: • To create a motion guide for the “bee” instance, select the “bee” layer and click Insert > Timeline> Motion Guide • A motion Guide layer will automatically be created as shown below:

  45. Exercise 3 (Using Motion Guide) A Buzzing Honey Bee: • On Frame 97, insert a Keyframe on the timeline • Open the “Tool Palette” and select the pencil tool • Select the motion guide layer and use the pencil tool to draw the path you wish the “bee” to follow • At Frame 97, drag the “bee” to the starting point of the path drawn • Similarly, at Frame 109, drag the “bee” to the end point of the path

  46. Exercise 3 (Using Motion Guide) A Buzzing Honey Bee: • To create some sound effect, create a new layer form the sound track • Select the layer and right click to change the layer back to the “Normal” mode • Drag the “buzzing” sound clip from the “honey bee” folder of the library • You can preview the flash movie by clicking File > Publish Preview >Flash • Save the flash movie by clicking File > Save As and save the file as flashmx-basics3-template.fla

  47. Exercise 4 (Creating Layer Masks) • Open the file flashmx-basics4-template.fla • Create THREE new layers respectively for the images: Magnifying Glass, catseyes and catseye-blur stored in the “mask layer”folder of the Library • Between Frame 115 to Frame 150, drag the images on to the stage at their respective layers as shown below:

  48. Exercise 4 (Creating Layer Masks) • On top of the “catseyes” layer, insert a new layer which acts as the mask layer for “catseyes”. Then right click the layer and choose “Mask” • To create a special effect, open the tool palette and draw a small circle which exactly covers the magnifying glass. • This circle will serve as the hole of the mask layer. • Then follow previous procedure, create tweening motion for both the mask object and the magnifying glass

  49. Exercise 4 (Creating Layer Masks) • You can preview the flash movie by clicking File > Publish Preview >Flash • Save the flash movie by clicking File > Save As and save the file as flashmx-basics4-template.fla

  50. Exercise 5 (Creating Frame Actions) • To control the normal flow of the movie, one can insert actionscript into the desired frame to instruct the movie to take special action • To do this, we may insert a new layer (named as “actions”) to host all the actionscipt for the desirable frame.

More Related