1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.

  • Published on
    18-Jan-2016

  • View
    219

  • Download
    3

Transcript

  • Flash Basicsby Dr SC Li

  • Ordinary Movie vs. Flash MovieAnimationVector GraphicsInteractivityMPEG MovieFlash Movie

  • Metaphor of Flash MovieStageTimeline (Sequencing) Symbols (actors)Flash MovieActionscriptsFramesLayersInstance objectsDefining frame action and interaction between objects or between object and userGraphics, Movie Clip, buttons, Components

  • Flash Working Environment

  • The Stage

  • Setting the StageUse 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.The Stage

  • Modify the default movie propertiesPlace the cursor on the StageRight-click and choose Property

    On the pop-up Property panel, choose Size as shown above. The Stage

  • 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

  • The Stage

    Screen Size

    IE

    Netscape

    640X480

    620X318

    620X302

    800X600

    780X438

    780X422

    1024X768

    1004X606

    1004X590

    1280X1024

    1260X862

    1260X846

  • 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). 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.

    The Timeline

  • 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.The Toolbox

  • The Toolbox

  • Symbols and InstancesA 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.

  • Symbols and InstancesAn 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.

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

  • Creating InstancesAfter 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.

  • Creating Instances

  • AnimationsThere are three methods for creating an animation sequence in Flash: tweened animationframe-by-frame animation andMotion guide

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

  • Tweening and Keyframes

  • Exercise 1 (Creating animated text)

  • Exercise 1 (Creating animated text)Open Flash MX working environment: Start > Program > Macromedia > Flash MXOpen the file flashmx-basic1-template.flaClose all the unnecessary windows except for that of the Toolbox, Stage and the Library.To re-open the Toolbox: click Window > ToolsTo re-open the Library: click Window > Library

  • Exercise 1 (Creating animated text)Modify the default movie propertiesPlace the cursor on the StageRight-click and choose Property

    On the pop-up Property panel, choose Size as shown above.

  • Exercise 1 (Creating animated text)

    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.

  • Creating a text symbolChoose Insert > New SymbolName the symbol as intro-text and choose the behaviour as GraphicExercise 1 (Creating animated text)

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

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

  • Exercise 1 (Creating animated text)Creating instancesSwitch 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.

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

  • Exercise 1 (Creating animated text)You can change the instances texture by right-click it and choose propertySelect Color: Alpha and change the alpha value from 100% to 0%

  • Exercise 1 (Creating animated text)Tweening between two key framesSelect the small rectangle at Frame 80 and insert a key frame there by clicking Insert > Timeline KeyframeTo create tweening motion, select the frame with a rectangle sign, click Insert > Timeline > Create Motion TweenHighlight 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.

  • Exercise 1 (Creating animated text)You can preview the flash movie by clicking File > Preview > HTMLYou 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.

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

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

  • 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, etcSave the file as flashmx-basics1-template.fla Preview the flash movie by choosing File > Publish Preview

  • 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.flaPreview the flash movie by choosing File > Publish Preview

  • Exercise 1 (Creating animated text)Adding background sound effectInsert a new layer by clicking Insert > Timeline > layerName this layer as intro-musicFrom the Library, drag the audio clip Sound-technoloop onto the stageSave the file as flashmx-basics1-template.flaPreview the flash movie by choosing File > Publish Preview

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

  • 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 necessaryOn Frame 96, Click Insert > Blank FrameCopy Frame 97 and paste it onto Frame 96Select and delete the topmost image.Repeat the above THREE steps for Frame 95 and so on till you reach Frame 81.

  • Exercise 2 (Fm-by-Fm animation)You can preview the flash movie by clicking File > Publish Preview >FlashSave 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)

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

  • 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 GuideA motion Guide layer will automatically be created as shown below:

  • Exercise 3 (Using Motion Guide) A Buzzing Honey Bee: On Frame 97, insert a Keyframe on the timelineOpen the Tool Palette and select the pencil toolSelect the motion guide layer and use the pencil tool to draw the path you wish the bee to followAt Frame 97, drag the bee to the starting point of the path drawnSimilarly, at Frame 109, drag the bee to the end point of the path

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

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

  • 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 MaskTo 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

  • Exercise 4 (Creating Layer Masks)

    You can preview the flash movie by clicking File > Publish Preview >FlashSave the flash movie by clicking File > Save As and save the file as flashmx-basics4-template.fla

  • 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 actionTo do this, we may insert a new layer (named as actions) to host all the actionscipt for the desirable frame.

  • Exercise 5 (Creating Frame Actions)Looping Effect for the honey beeInsert a key frame at Frame 109 of the actions layerSelect and right-click this key frame, then choose Actions

  • Exercise 5 (Creating Frame Actions)From the Movie Control folder choose gotoAndPlay optionThen type 97 in the frame number field

  • Exercise 5 (Creating Frame Actions)Looping Effect for the layer maskSimilarly, insert a key frame at Frame 150 of the actions layerSelect and right-click this key frame, then choose ActionsChoose gotoAndPlay as the actionThen type in 115 as the Frame number.

  • Exercise 5 (Creating Frame Actions)

    You can preview the flash movie by clicking File > Publish Preview >FlashSave the flash movie by clicking File > Save As and save the file as flashmx-basics5-template.fla

  • Creating ButtonsButtons are actually four-frame interactive movie clips. When you select the button behavior for a symbol, Flash creates a Timeline with four frames. The first three frames display the button's three possible states; the fourth frame defines the active area of the button. The Timeline doesn't actually play; it simply reacts to pointer movement and actions by jumping to the appropriate frame. Exercise 6 (Creating a button for navigation)

  • Exercise 6 (Creating a button for navigation)To create a button: 6.1 Choose Insert > New Symbol, or press Control+F8. 6.2 To create the button, you convert the button frames to keyframes. 6.3 In the Symbol Properties dialog box, enter a name for the new button symbol, and for Behavior choose Button.

  • Exercise 6 (Creating a button for navigation)Flash switches to symbol-editing mode. The Timeline header changes to display four consecutive frames labeled Up, Over, Down, and Hit. The first frame, Up, is a blank keyframe.

  • Exercise 6 (Creating a button for navigation)6.4 To create the Up state button image, use the drawing tools, import a graphic, or place an instance of another symbol on the Stage.

  • Exercise 6 (Creating a button for navigation)6.5 You can change the texture of the button by selecting the button and choose Window > Color Mixer and select Linear Gradient and appropriate color pointer.

  • Exercise 6 (Creating a button for navigation)

    6.6 Copy the Up frame and paste it onto the Over frame, Down frame, and the Hit frame. 6.7 You may then vary the colour tone of the second TWO frames.

  • Exercise 6 (Creating a button for navigation)Defining an action to the button (WWW link)6.8 Insert TWO layers for two button instances.6.9 On the two layers, insert Keyframes at Frame 97On the TWO layers, create TWO labels: Mask Layer and Examples for the TWO button instances respectively6.10 On the stage, select the Mask Layer button and right click it. Choose the Action option.

  • Exercise 6 (Creating a button for navigation)Defining an action to the button (WWW link)6.11 On the script editor panel, select the commands for the two given buttons: on (release) {gotoAndPlay(115);}on (release) {getURL("http://www.macromedia.com/support/flash/drawing/creating_masks/creating_masks02.html");}

  • Exercise 6 (Creating a button for navigation)

    6.12 For the Example button instance, create an action to control the movie to go to Frame 109 when the button is being pressed.6.13 You can preview the flash movie by clicking File > Publish Preview >Flash6.14 Save the flash movie by clicking File > Save As and save the file as flashmx-basics6-template.fla

Recommended

View more >