FlashCS4_tutorials_2009 i Will Do It

Embed Size (px)

Citation preview

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    1/24

    1

    Flash BASICS - Creating Animations in Flash CS4

    Flash Tutorial Last Updated May 2009 by R. Berdan

    Before attempting this tutorial you should be familiar with the drawing tools and how touse them. These basic tutorials although simple are the foundation that can be used to

    create sophisticated animations. CS4 has also added a new type of animation calledobject based and preset animations which will be described at the end of these tutorials.

    Classic Tweening use Action script version 2.0 movies for these tutorials.

    1. Start Flash and select Select>File New>Flash File (Action script 2.0). In the Toolpanel,select circle oval tool and draw a circle in the upper left corner of the movie.

    2. Select the black pointer from the tool bar (selection tool), click and drag around the circleyou drew on the stage. When you finish, the circle will appear to have small tiny dots this indicates you have selected the object. (if you click off or outside of the object you willhave to reselect it look for the tiny dots to tell you the object is selected)

    Circle on the left is selected the one on the right is not.

    3. With the circle still selected select Modify>Convert to symbol>Graphic OK. It is optionalwhether or not you want to name the object. You just converted the object into a symbol.The sumbol should now have a blue bounding box around it associated with symbols.

    4. Select frame box 30 in the time lineto select it. Right click on the frame with your mouseand select insert>Keyframe. Keyframes are places where an object starts, stops orchanges direction in a movie.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    2/24

    2

    5. With the new still selected, click on the circular object and drag it across the stage to a

    new location where you want it to stop in the animated movie. Then select the firstkeyframe in layer 1. Right click and in the pop up menu select Create Class Tween.(Alternatively you could select Insert>Classic tween. You will see a solid blue backgroundand arrow running to the right as shown below.

    Note solid blue line in layer 1.

    6. To play your movie make sure your controller is displayed SelectWindow>Toolbars>controller select the play button to start your movie. Your objectshould move across the screen and stop. You can also just hit your ENTER key to playthe movie and your can rewind by dragging the pink playhead back to the first keyframeTo preview the finished movie select Control>Test movie note that movie loopsendlessly we need to add an action stop to the last keyframe to prevent it from looping.

    7. To save your movie select File>save as provide a name e.g. firstmovie.fla and direct it tofolder or your desktop. This movie can be edited and modified at any time by selectingFile>open. The .fla file is used for editing it does not go into your web site it is like aphotoshop .psd file it is for editing only.

    8. To create a movie that can be inserted into a web page you need to have your .fla fileopen in Flash Select>File>Publish settings>check Flash .swf checkbox and HTML .htmlcheck box>Then select Publish>OK - you just created an HTML page with Flash movieembedded. Embedded Flash movies have the extension .swf sometimes calledshockwave files these are compressed versions of the .fla files. To see your movieplay click on or load the html file you created into a web browser that has the Flash plugin

    installed. You should see your movie embedded inside the page and the movie will loopcontinuously. In spite of years of development, Macromedia has never fixed a small bug

    that is the movie you embedded will not be centered even though there are publishingoptions to do so they have never worked. To center your movie select >View sourcewhen previewing it in Internet explorer and add the tags manually asshown below. Alternatively you can open the page in Dreamweaver and use the centeralign commands, you can insert the movie into other pages using copy paste of the codeor you can use Dreamweaver to insert the .swf files the .swf files must be in the sameplace your web pages are!

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    3/24

    3

    9. To have the animation play only once you must add an action to the last keyframe.Actions are small scripts that provide instructions such as stop, jump to frame, play,rewind etc. adding actionscript is one way to add interanctivity to your flash movie. Youcan only add a stop action to a keyframe in movies that support Action script version 2.0.

    10. To add a stop action to the movie we created you will need to select the blackpointer>Select the last keyframe in the movie. Select and open the actions Frame(Window>Development Panels>actions or F9) see below. (You can also right click on

    the last keyframe select Actions to open this panel).

    11.

    10. To insert an action you can do it two way 1) In the main window type stop(); or 2) Click onthe movie control folder on the left side of the window it will open to reveal different actions. I.e.Global Functions>Timeline Control>Stop(). Double click or drag the stop action into the mainwindow - then close it. You will see a small a in the last keyframe this tells the movie to stopwhen it reaches this point. Save your movie then publish it again open the html web pagecreated to view the movie or embed your movie into a web page using Dreamweaver. (Note theflash movie will not be centered in the page after 10 versions of Flash they have still not fixedthis bug.

    12. One other option you might want to know about is that you can save .fla files as .exe files movies that will play by themselves without embedding inside an HTML page. These

    type of movies are used in multimedia presentations, games, business card CDs. Theyare standalone programs that you can e-mail or take with you. To publish a standaloneFlash movie make sure your previous movie is open select >File>Publish settings>formattab should be selected select>Windows projector or Macintosch projector if you wantyour movie to play standalone on a Mac computer. Select Publish>OK and you will see anew icon where you saved your files click on the icon to start your stand alone movieprogram. You can also save Flash movies as stand alone programs that do not require aplayer.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    4/24

    4

    The top icon is a .swf file and the bottom icon shows a stand alone .exe file.

    A. Exercise and practice. Make your circle go completely around the stage so it goes toeach corner. To do this you will need to add additional keyframes and motion tweenbetween each one. The distance between keyframes determines how fast your objectmoves keyframes close together will result in faster animation, further apart will result inslower animations. When finished add and animate another object on another layer.

    1. Modify the movie so that when it reaches the end it will jump to another web site or webpage. Hint: you need to use action getURL(http://www.site.com);

    2. Motion along a specified Path

    You can use the animation you created in the previous tutorial or you can start from scratchwith a new object either way you must have a moving object to start this tutorial. We aregoing to add a new layer called a motion layer, then we will draw a smooth line that does notoverlap to simulate a bouncing ball. We will attach the ball or object to the line at thebeginning and ending keygrame and play our movie it you do this correctly the ball willbounce. It can be a bit tricky attaching the object to the line so persevere.

    1. Right click your mouse pointer on Layer one> In the pop down menu select Add ClassicMotion Guide layer then click on this layer to select it. Only the motion guide layer shouldbe selected.

    2. Select the pencil tool and the bottom of the tool box select Option>smooth from the popout menu. Draw a line resembling the bounce path of a ball see picture below.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    5/24

    5

    3. The object (circle) may jump and attach itself to the line if it does great, if it does notdrag the object by its center over the beginning of the line until it snaps in place. If it does

    not snap in place make sure the magnet button on the tool bar (snap tool) isdepressed. Then select the last key frame of the movie with the black arrow you shouldsee something like the picture below.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    6/24

    6

    4. Move the circle with your mouse (black arrowhead selected in the toolbar) until it snaps tothe line near the end of your drawing. Go to the controller (below) and play your movie.

    The ball should follow the line and appear to bounce. Make sure the lines you draw do nottouch each other or cross over each other it will not work. Save and publish your movie.The lines you drew will not appear in the final movie, however the object will appear to followthem.

    Exercise: Import a small images e.g. .jpg and .gif files, convert it to a symbol just as you didwith the object you created then animate in your window. Try this with a small picture of a

    plane, clock or some other image you have. Try to spin the object, make it shrink or grow as itis animated e.g. rotate a clock and zoom in.

    3. Shape Tweening also called Morphing

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    7/24

    7

    Using flash it is possible to create objects then animate them by morphing one object intoanother. Generally this works well only with simple objects because Flash has to do all thecalculations on the fly, any attempt to use a complex graphic or a traced image will result invery slow animations that chug along and will not be acceptable. Text can also be morphedone word can dynamically change into another here is how you do it.

    1. With Flash open if you do not have a new blank movie select File>New Flash Document

    2. Select oval drawing tool and create create a solid colored circle in the upper left corner ofyour movie it can be filled with any color your like.

    3. Place your pointer on Frame 30, right click to activate the pop down menu andselect>Insert Keyframe then hit the delete key on your keyboard to delete the object fromframe 30.

    4. Select the square drawing tool and draw a cube in the lower right of your movie screen. Isuggest you fill the circle using the paint can a different color like red but it is notnecessary. You should now have a circle in our first keyframe and a cube in your lastkeyframe. Place your mouse pointer on the first keyframe to select it, right click andselect > Create shape tween from the menu.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    8/24

    8

    5. You should see a solid line in layer1 with a green background. Use the controller or pressENTER to play the movie and you should see the square morph into the circle Neat!

    The circle morphs into a square above diagram has onion skin button turned on so you can seelall frames. If you add additional object to the last keyframe the square will simultaneously morph

    into all of the objects Try it. When you create a shape tween you can not use symbols do notconvert them into symbols before tweening.

    If you want to save the movie and embed it into an HTML page run through the steps to save andpublish it then center the movie manually by adding tags.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    9/24

    9

    4. Shape Tweening Text

    Tweening text is similar but there are a couple of extra steps. By default adding text to a flashmovie converts the text automatically to a symbol therefore we have to break the symbol apartinto an object before we can shape tween the text. In this exercise we will tween your name intoother text.

    1. Open Flash and start a new movie File>New

    2. Select the Font tool in the menu T and select a font color from the colors options at thebottom of the tool palette.

    3. Click your pointer (mouse) on the movie stage. When you do this you will see a text entrybox or cursor. If you examine the properties box at the bottom of your movie you will seethe various text attributes including font size, color, format etc. You will want to set yourfont size fairly big for this tutorial e.g. 60 pts use the slider or type in 60 beside the fonttype box.

    4. Type your name onto the movie stage e.g. Fred Flinstone. You will see a blue boundingbox around the message which means it is a symbol. We cant shape tween symbols sowe have to break it apart into an object. Click on the text so the blue bounding box isvisible around it and then select Modify>breakapart twice.

    5. Select Frame 30 in layer 1, right click and from the pop down menu select>insertkeyframe then hit the delete key on your keyboard to erase the text from the lastkeyframe.

    6. Use your type tool and type a new name or message onto the screen about the samefont size, it can be a different color if you like. You may wish to move your text, select theblack pointer from the toolbar then click and drag over the text to move it.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    10/24

    10

    7. You then need to break the text apart again 2X - selectModify>breakapart>Modify>breakapart - you need to do it 2X. Then place your pointeron the first keyframe of layer one. Right click on the first keyframe and from the pop outmen select >Craeat Shape Tween. Press the ENTER key to view the animation.

    2. Making an object Fade in and out and resize movie into abanner.

    Flash is a popular tool used to make text or pictures fade in and out and is used for delivering textor pictures. We will create a banner 550 x 80 pixels in size with a black background color and wewill make a message fade in and out. Some folks may decide to use only part of the movie and

    just have the image or text fade in and then stop. You will need to add a stop action to the end ofthe movie otherwise your movie will loop continuously.

    1. File >New>Modify>Document this will bring up a new window from which you canresize your movies and modify the background color. Note you should always decide onour movie size first it can be difficult to change the size afterwards as some of yourcomponents may no longer be in the movie. Always leave the movie frame rate at 24 fpsfor animation used on the web it can be increased to 30 for CD based animations only.

    2. Set the background color to black and the movie dimensions to 550 px by 80 px to createa banner. Select>OK You should see a narrow banner in your window use the scrollbars if the movie is not readily visible.

    3. Select the Text tool and set the color or your text to white, choose a large font sizeapprox. 60 pts. And type the word WELCOME. Click on the text so it shows a bluebounding box. Select>Insert>Convert to symbol>Graphic

    4. In layer one Select Frame 20 >right click>insert keyframe, select frame 40 rightclick>insert keyframe and select frame 60 >right click insert keyframe. You need multiplekeyframes because you are going to make the text fade in from frame 1-20, hold between20 and 40, then fade out from 40 to 60. To do this you will need to create class motiontweens between frames 1-20, 20-40 and 40-60.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    11/24

    11

    5. Place your pointer on frame one in layer one. Select>Insert>Create Classic MotionTween, place your pointer on frame 20 and repeat, then frame 40 and repeat until allsections of your movie are tweened see picture below.

    6. If you play your movie now nothing happens you need to make the text transparent atthe beginning and end of the movie transparency is referred to alpha alpha 0 iscompletely transparent and alpha of 100 is completely visible. You will need to set alphaproperty to 0 in the first keyframe and the last keyframe. Select the first keyframe, clickon the text in the box then go to the properties box sand elect Style>Alpha from the dropdown menu and set the slider to 0% at both the first and last keyframes. Press ENTER toplay your movie.

    7. Save your movie, publish the movie then view your banner by loading the HTML page.Note that the movie loops continuously add a stop action to the last keyframe andresave. You will also have to center the banner using tags. Notice thatFlash will automatically set your web page to the same background color you chose inyour flash movie.

    8. Unless you want your movie to loop continuously, you will need to go back add a stopaction.

    These same steps can be use to make graphics and photos fade in an out. In order to fade in anout several pictures or text messages add additional layers and offset them so when one layer isfading out, the next layer symbol starts fading in.

    Exercise: Repeat this but import a small graphic file or photo, convert it to a symbol, then make itfade in and out. Then modify and makes a short slide show. Making graphics fade in an out isone of the most frequently used type of animation. You can also combine it with movement.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    12/24

    12

    Creating & Using Simple Buttons in CS3\CS4 Using Action Script 2.0

    You can add built in buttons to any movie to control the timeline such as PLAY, STOP andREWIND by adding buttons from the common library and attaching actions to them. When everyou add buttons you should always create a new layer first and put the buttons on this layer.Drag several buttons onto the stage then add actions to them in order to add play(), stop() etcyou will first need to add Global Functions>Movie clip control>On then an event handler likepress() or release() then add play() stop() actions. E.g.

    on (press) {play();}

    Flash also allows users to create any shape of button and can even create animated buttons.Buttons can be used to play, stop, start, goto a specific frame, scene in a movie or jump toanother web page. Buttons can also be used to submit forms, load images or activate actionscript programs for example to calculate numbers.

    In order to do this tutorial you will need to have a simple movie with some animation first. Forexample you could use a ball moving across the stage or some other animation you made. Wewill create and add a simple PLAY, STOP and REWIND BUTTONs with rollover effects.

    3. Start Flash and open an existing animation or make a simple movie (see previoustutorials). Make a ball move across the screen if you do not have a movie.

    4. Select the top most layer with the black arrow head from the tool box and right click select insert layer. Label this layer buttons. Buttons should be placed on their ownseparate layer.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    13/24

    13

    5. Select the Buttons layer, then select the rectangle drawing tool in the tool palette

    In the options at the bottom of the tool palette click on the curve button.

    Enter a value of 5 for the curve radius. This permits you to add corners to the button. You canexperiment with the values of the curve radius. Select a color you want your button to be(paint can color selector in the tool box).

    I am going to select gray with a black pencil stroke of 4 pixels.

    6. Select the Type tool and a text color then type the word PLAY on top of the button youmade. Use the black arrow head to position the text on the button .

    Here is my button black text on a gray background with a black stroke of 4.

    7. Next select the black arrow head and drag a selection around the entire button so thatthe button is selected so we can convert it to a symbol. Select >Insert>Convert to

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    14/24

    14

    Symbol>button in the top menu. Next we need to change the colors in the button in thedifferent rollover states.

    8. Place the black arrow head on the button and right click, from the pop up menu select>Edit - see screen shot below. You are now in button editing mode.

    9. First you need to add a keyframe in layer 1 to all 4 button states. Place your black arrowhead in layer on in the frame Over right click>add Keyframe, Repeat this in the Downand Hit frames. Up is the appearance of the button when the page loads, Over is thestate of the button when a user places their cursor over the button, down is the state ofthe button when the user presses their mouse down and hit defines the area of the button

    that responds to the users mouse click.

    10. Once you have added all the keyframes, select the OVER keyframe, then click on thebackground color of your button. Select a new color from in the tool palette (paint can)and you will see the background color of the button change. Be careful not to include thetext in your selection or it will also change color.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    15/24

    15

    11. Repeat this for the Down State add keyframe, change the background color. If youmove the red playhead the button should change color when move it from one frame tothe other.

    12. Return to the main movie stage to do this click on the left pointing blue arrow underthe layers. (or you can select Edit>Edit document from the menus). You should bereturned to the main movie. Now you are ready to test the rollover effect. Select>Control>Enable simple buttons - move your cursor over the button and it should displaythe rollover effect. Then select>Control>Enable buttons again to unselect the buttomtest mode. To make this button do something we need to add some action script.

    13. First we need to add a stop action to the first keyframe of the movie this is so the moviedoes not start playing byitself which is the default. Place your cursor (black arrow head)

    in the first keyframe of layer one of your movie. Right click, from the drop down menuselect>actions>Movie control and drag the stop action into the main window thencollapse the action script window. You should see an a in the first keyframe.

    14. Now we need to add an action to the Button we created. Right click on the button, selectactions from the pop up menu. Then select from the movie control folder> on (press) { },then select play() so you see the code

    on (press) {play();

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    16/24

    16

    }

    collapse the action script window.

    15. Select Control>Test Movie click on the button and if you did everything right the ball willmove across the screen and then return to its starting position.

    16. To add 2 more buttons one to STOP and another to rewind the movie repeat the stepsyou did to make the PLAY button but add the actions

    on (press) {stop();}

    and to the last button to rewind

    on (press) {gotoAndStop(1);}

    These are the basic steps to creating custom buttons. If you want to animate you buttons you canadd an animation to the OVER or DOWN states. The animation can be a separate movie clip.You can also add sound effects to the buttons, but to do this you must either import the sound oruse a built in sound from the library. The sounds are inserted into one of the keyframes of thebutton in edit mode.

    In conclusion these tutorials are aimed at getting anyone started in Flash and although they mayseem simple these basic actions can permit you to make some sophisticated animations.Creating animation can be time consuming so it is strongly advised that before you attempt to

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    17/24

    17

    make a complex animation that you create a series of sketches or a plan which we call astoryboard. This will help you plan your movie, save you time and if preparing movies for a clientit can save you both time and money.

    Movies within Movies

    In Flash the easiest way to create a movie within a movies is to create a new movie symbol andimport a gif animation. Gif animations already contain short frame by frame animations. Once theanimation is imported as a movie clip, you can then animate the movie clip on the stage.

    1. Start Flash and create a new movie (Action script 2.0 or 3.0). Save it movieinmovie.fla

    2. Go to google and search for an animated gif e.g. flying bat. Bird or butterfly save this toyour folder or wherever you plan to save you flash movie.

    3. Select Insert>New Symbol>Movie clip> call it flying animal your screen will take you

    into the movie clip editing mode.4. Select File>Import>import to stage browse to select the animated gif file you found on

    google. (You could create your own frame by frame animation here if you wanted).

    5. Press Enter to view your animated gif in the timeline you will see the frame by frameanimation.

    6. Under the tab where it says movieininmovie.fla you will see a left pointing blue arrow,click on this to return to the main movie stage. Select Window>Library this opens alarge Library panel on it click on the top right button (see red arrow below) which willopen a smaller new library panel with your animal movie clip. Click and drag the object inin the window onto your main movie stage.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    18/24

    18

    7. You can now treat the movie clip as a symbol and create a classic motion tween. Createa new keyframe in the time line e.g. at frame 25. Move your movie clip to a new position

    on the movie stage, select the first keyframe, right click and on the pop out menu selectClassic Motion Tween. Press ENTER to play your movie the movie clip will slide intothe new position, to see the movie clip animated at the same time you must select >Control>Test Movie you can add a motion guide to make the movement follow a path.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    19/24

    19

    INTRODUCTION TO OBJECT BASED ANIMATION FLASH CS4 ONLY

    Object based animation is new in CS4, it has some advantages over classic tweened animationsand also comes with a number of preset animations you can apply to make objects zoom in, fadein etc. All of these types of animation will loop by default. In order to stop your movie so it onlyplays once the easiest solution is add a new layer called actions add a keyframe at the end ofthe layer or where you want the movie to stop and insert an actionscript 2.0 command into thekeyframe stop().

    1. Start a new movie Flash Actionscript 2.0 or 3.0, Select the Oval tool and draw a solidfilled circle in the top left corner of your movie. You can either select the object bydragging a selection around it then select Modify>Convert to Symbol graphic or youcan simply right click in the first keyframe and from the pop down menu select CreateMotion Tween. If you have not first converted the circle into a graphic symbol, you willsee another pop up box:

    Click OK you will see Flash adds a solid blue fill to your timeline the length of the fill dependson the frame rate you have your movie set to if its 24 fps you will see the blue extend to frame 24.

    2. Select the circle on the stage and drag it over the upper right corner of the movie stage.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    20/24

    20

    3. You will see a green line with small dots. Each dot represents an individual frame. If youpress ENTER you will see the object fly across the screen. At the end of the movie timeline you will see a small diamond called a property click and drag it over it to shorten orlengthen your movie clip.

    4. You move or modify the animation path by using the Selection tool (black arrow in the

    main tool panel) this modifies the path or the Subselection tool white arrow in the maintool bar this moves the entire path. .Select the black arrow and click and drag the greendotted path from the middle down so it appears as show below.

    By dragging the path down your circle will now move and follow the path no guide layer is

    required. You can move each point to create more complex paths.

    Note you can only motion tween symbols and text fields and only one symbol per layer. If youwish to tween additional objects create a new layer for each. If you want the animation not to loopcontinuously, create a new layer, insert a keyframe at the end where you want the animation tosop, right click on the keyframe select actions and in the actions panel type in the command:stop() test the movie by selecting Control >Test movie.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    21/24

    21

    Make a symbol Rotate, fade in and Ease in and out while moving

    In this Example you will Motion Tween a cube, add multiple Property frames and make the objectrotate.

    1. Select File New>File Action script 2.0

    2. Select the rectangle tool and draw a solid filled square in the upper left corner of yourstage.

    3. Use the Selection tool and drag around your object to select it or double click on thesquare Select Modify>Convert to symbol name it square and select Graphic for symboltype.

    4. Right click in keyframe 1 and from the pop up menu select Motion Tween. You will see asolid fill extending to frame 24 if that is your current frame rate. Move the red playhead inthe time line over frame 10 them move your square to some location on the stage.When you let go, you will see a black diamond in the timeline at frame 10. Move theplayhead to frame 20 and then move your square again to another location on screen.Finally move the playhead to the end of the solid blue area in the time line and move yoursquare once again on the stage.

    If you drag the last frame to the right or left, all the properties frames will also moveproportionately to the end frame.

    5. To make the object rotate: Return the red playhead to the first keyframe in the time line. Toplay the movie only once you select the properties box, click on the down arrow next to LOOPINGand select play once (see below).

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    22/24

    22

    5. To make the square rotate along its path, select the Motion editor if it is not open select Window>motion editor. This panel allows you to control the symbols motion,rotation, acceleration, deceleration (ease in and out) and its color and transparency andeven apply filters like drop shadow or blurr. Select >Color Effect>Alpha and set it to 0%on the first keyframe. Then move the playhead to the end of the movie timeline and setalpha to 100%

    This will make the square invisible at first and fade in as it moves across the screen.

    6. To make the object rotate select the last frame and in the Motion Editor Select>Basicmotion>Rotation Z and drag over the value until you get something like 650 degrees.Rewind your moive and play it. You should see the cube fade it and rotate along its path.

    Using the Motion path editor you can vary a large number of the symbols properties while it isanimated.

    If you set your movie to play once, publish it or select Control>Test movie and it loopscontinuously (it shouldnt but does), Create a new layer right click on layer 1>Select>Insert layer

    you should see a new layer formed above. Label this layer Actions double click on the layerand type Actions. Select the last frame in the actions layer (where the blue ends in layer 1) rightclick >Insert keyframe. Then right click on the keyframe and select Actions. In the Actions paneltype: stop(). Test the movie by selecting Control>Test movie it should only play once. You cannow save and publish the movie clip. See screen shot below.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    23/24

    23

    When you add a stop() action you will see a small a for actionscript in the last keyframe of the

    Actions layer you created.

    Creating Animation Using Motion Presets CS4 Only

    Flash CS4 has added a number of animation presets like bouncing ball, wave, zoom in, fly outetc. The best way to learn about these new presets is to experiment with them and apply them tosimple motion tween. We will create a simple moving circle then apply a number of motionpresets. Note that many of the presets only work with Action script 3.0 movies.

    1. Start Flash>Select Create New>Flash File (ActionScript 3.0) movie.

    2. Select the Oval drawing tool and create a solid color filled circle in the uppler left of yourmovie stage.

    3. Open the Motion presets panel (Window>Motion presets) drag the window down to viewmany of the presets. Click on any preset to view an example animation in the top window.

    Motion preset panel click on the different motions in the drop down menu to see previews.

  • 8/14/2019 FlashCS4_tutorials_2009 i Will Do It

    24/24

    4. To apply a motion preset double click on the circle or drag a selection around it so youselect the entire object. Then from the drop down menu in the Motion presets panelselect>Large bounce. If you have not already converted the object to a symbol(Modify>Convert to symbol >grahic) it will show a pop up menu (see below) > Click OK.

    5. You should see a path and if you press ENTER you will see the animation.

    To apply a different motion preset simply click on the options in the drop down panel and clickon the apply button. You can only apply on motion preset to one symbol per layer. To make the

    animation only play once you will need to add another layer, add a keyframe and add the actionscript command in the actions panel stop(); To add additional objects create a new layer for eachobject you wish to animate.

    Exercise use these fundamental types of Animation to make a logo for your web site. Start bycreating a simple story board sketch out the steps in the animation and then set about to createthem.