Flash animation tutorial pdf


    FutureSplash(later to become Flash) was a simple vector-animation pro- the primary tool you use to construct and manipulate animations in Flash MX The extension supports most of the core animation and illustration . tutorial. Adobe Flash Professional CS5 components are building blocks for creating EPS, or PDF file, Flash preserves the same attributes as for pasted Illustrator artwork. Flash is Macromedia's powerful vector-based animation tool. Flash is the In this tutorial we take a two-pronged approach to learning Flash. First we look at.

    Language:English, Spanish, Indonesian
    Genre:Politics & Laws
    Published (Last):19.12.2015
    Distribution:Free* [*Register to download]
    Uploaded by: YVONE

    74084 downloads 93925 Views 14.33MB PDF Size Report

    Flash Animation Tutorial Pdf

    In this tutorial, you will be guided through a step-by-step process on how to create your very Adobe Flash CS5 and understand the basics of Flash animation. Adobe Flash Professional CS5 is an authoring tool that you can use to create simple animations, video content, complex user interfaces, applications, and .. This tutorial guides you through the process of creating a basic FLA document. Lesson 2: Animation Basics. Learn the basic concepts and techniques of animating in Flash. Start by organizing your elements using scenes, layers, and library.

    Adobe Flash Professional CS5 is an authoring tool that you can use to create presentations, applications, and other content that responds to user interaction. Flash projects can include simple animations, video content, complex user interfaces, applications, and everything in between. In general, individual projects created with Flash Professional are called applications or SWF applications , even though they might only contain basic animation. You can make media-rich applications by including pictures, sound, video, and special effects. The SWF format is extremely well suited for delivery over the web because SWF files are very small and take little time to download. Flash projects often include extensive use of vector graphics. Vector graphics require significantly less memory and storage space than bitmap graphics because they are represented by mathematical formulas instead of large data sets. Using bitmap graphics in Flash projects results in larger file sizes because each individual pixel in the image requires a separate piece of data to represent it. Additionally, Flash allows you to select graphic elements and convert them to symbols —making them easier to reuse and further improving performance when SWF files are viewed online. Creating a FLA file and adding graphic elements To build an application in Flash Professional CS5, you create vector graphics and design elements with the drawing tools and import additional media elements such as audio, video, and images into your document. Next, you use the Timeline and the Stage to position the elements and define how and when they appear. Using Adobe ActionScript a scripting language you create functions to specify how the objects in the application behave. FLA files use the file extension. The Timeline controls the timing that specifies when elements in the movie appear on the Stage.

    Note that the motion path is static. Adding a Guide layer Here are the steps for adding a Guide layer: Draw or import your guide art into a layer by itself. This can be anything from a hand-drawn sketch of your layout to a full-blown prototype of your design.

    Do you see the guide art in the movie? This composite screen shot shows how you can choose Guide from the contextual menu, or set the type to Guide in the Layer Properties dialog. Motion Guides You already know how to move an item from point A to point B.

    This is when tweening along a path comes in handy. Motion tweening along a path requires a Motion Guide layer, which defines the path. One or more guided layers that follow the path accompany this Motion Guide layer. An item and its motion path shows below. Moving items along a path is simple! Just use a Motion Guide. For multiple as shown guided items, use multiple Guide layers.

    Select the layer containing the tween, and then insert a Guide layer by doing one of the following: Click the Add Guide Layer icon. Draw a path in the Guide layer. Select a color of your choice from the Fill color picker, located directly below the Stroke color picker. Choose a fill color that contrasts well with the Stage color.

    In this example, an oval with a blue fill color is displayed on top of a red Stage color. Whenever you draw a vector shape, you have the option of selecting two drawing modes: Merge drawing mode and Object drawing mode. For the purposes of this tutorial, click the drawing mode button to select the Object drawing mode at the very bottom of the Tools panel. When the Object drawing mode is selected, the button will appear darker and selected, as shown in Figure 7.

    Figure 7. The Drawing mode button is a toggle that alternates between modes; choose Object drawing mode by clicking the button to make its background appear darker.

    To learn more about the two drawing mode options, see the Drawing modes section of the Flash Professional online documentation. While the Oval tool still selected, press and hold the Shift key. Draw a circle on the Stage by Shift-dragging on the Stage see Figure 8. The Shift key is a modifier key; when you press and hold the Shift key while drawing or transforming a shape with the Oval tool, Flash constrains the Oval tool shape to a circle that is perfectly symmetrical.

    Creating your first Flash Professional CS5 document

    Note: The Shift key works similarly with other auto shapes; when you press and hold Shift while drawing a shape with the Rectangle tool, you'll create a perfect square. Figure 8. Press and hold the Shift key while using the Oval tool to draw a circle on the Stage. Tip: If you're drawing your circle and you see only an outline of the shape instead of a fill color, first check to ensure that the stroke and fill options are set correctly in the Property inspector while the circle is selected.

    If the fill color swatch is set to a color and the stroke is set to No Color, the settings are correct. Next, make sure that the option to Show Outlines is not selected in the layers area of the Timeline. There are three icons to the right of the layer names: eyeball icon, lock icon, and outlines icon. Double-check that the outlines icon displays a solid fill and not just a square outline. If you are not sure if the Show Outlines option is enabled, click the icon repeatedly to toggle the visual state between normal view and outline view.

    Creating a symbol and adding animation After drawing some artwork, you can turn it into a reusable asset by converting it to a symbol. A symbol is a media asset that can be reused anywhere in your document without the need to re-create it. Symbols can contain bitmap and vector images and animations, along with other types of content. It is common to use symbols to create tweened animations.

    You can also use symbols to store graphic content as described in the next set of steps. As you become more familiar with Flash Professional, you'll use symbols to structure applications and interactivity using multiple timelines.

    Symbols are useful for compartmentalizing parts of a project to make it easier for you to edit specific sections later. Follow these steps to create a symbol: Click the Selection tool in the Tools panel see Figure 9. Figure 9.

    The Selection tool is the first item displayed in the Tools panel. Click the circle on the Stage to select it. A bounding box selection appears around the circle. Enter the name of the symbol in the Name field. Use the Type menu to select the Movie Clip option. Tip: You can also convert a graphic into a symbol by selecting it and dragging it into the Library panel. Figure Enter a descriptive name for the symbol in the Convert to Symbol dialog box.

    A square bounding box is displayed around the circle symbol. You've just created a reusable asset, called a symbol , in your document. For more information about symbols, read Working with symbols in the Flash Professional online documentation. The new symbol is now listed in the Library panel.

    When you drag a copy of the symbol from the Library panel to the Stage, the copy on the Stage is called an instance of the symbol. Animating the circle In this section, you'll use the symbol in your document to create a basic animation that moves across the Stage: Select the circle on the Stage and drag it off the Stage area to the left see Figure Right-click the circle instance on the Stage and choose the option to Create Motion Tween in the menu that appears.

    Notice that the Timeline is automatically extended to Frame 24 and the red marker the current frame indicator, also known as the playhead moves to Frame 24 see Figure This indicates that the Timeline is prepared for you to edit the ending location of the symbol and create a one-second animation—assuming that you haven't changed default frame rate for the project from 24 fps in the Property inspector.

    A span of 24 frames is the equivalent of one second at a rate of 24 fps. For more information about the Timeline, read Working with timelines in the Flash Professional online documentation.

    The Create Motion Tween operation automatically extends the frames in the Timeline and places the playhead on Frame While the playhead is still on Frame 24 of the Timeline, select the circle instance on the Stage and drag it to the right, just past the Stage area. This step of relocating the instance creates a tweened animation.

    Flash Tutorials

    On Frame 24, notice the diamond-shaped dot known as a property keyframe that appears. On the Stage, also notice the motion guide that indicates the circle's path of motion between Frame 1 and Frame 24 see Figure After creating a frame tween animation, the circle is located at the far right at the end of the animation when the playhead is located on Frame 24 of the Timeline. In the Timeline, drag the red playhead back and forth from Frame 1 to Frame 24 to preview the animation; this is known as scrubbing the Timeline.

    You can change the circle's direction in the middle of the animation. First, drag the playhead to Frame 10 in the Timeline. Then select the circle and move it to another location, further down on the Stage. Notice that the change is reflected in the motion guide and the new dot property keyframe appears on Frame 10 of the Timeline see Figure The property keyframes on the Timeline mark the timing of the animation, indicating the frames whenever objects change on the screen and storing the properties of the object that change.

    In this example, it is the circle's location on the Stage known as its X and Y or horizontal and vertical properties that are changing as the playhead moves across the Timeline. After placing the playhead on Frame 10 and dragging the circle instance down on the Stage, the motion guide of the tweened animation and the property keyframe in the Timeline reflect the location change of the animated circle.

    Experiment with editing the animation by changing the shape of the motion guide path. Click the Selection tool in the Tools panel and then click a section of the motion guide line.

    Drag it to bend the line shape see Figure When you bend the motion path , you cause the animation to follow along a smooth curved line instead of a rigid straight line. Use the Selection tool to adjust the tweened animation's motion path; rather than a straight line the edited motion guide line is now curved. The movie loops automatically, so you can watch the circle move across the window repeatedly. When you are finished, close the Test Movie window.

    Using a stop action to stop the Timeline from looping When you tested the movie, the animation loops by default as the movie plays in Flash Player. This occurs automatically because in Flash Professional, the Timeline is set up to loop back to Frame 1 after exiting the last frame—unless you instruct the movie to do otherwise.

    When you want to add a command that controls the Timeline, you'll add ActionScript code to a keyframe indicated by a dot symbol on the Timeline. This is known as adding a frame script. Tip: Keyframes are used to place ActionScript and assets on specific frames in the Timeline. When you review the Timeline of a FLA file, you can locate scripts and content by looking for the keyframe dots. Keyframes that have frame scripts display a lower case "a" symbol.

    You'll add one of the most common Timeline commands, which is called the stop action: It's always a good idea to name your layers if you have more than one.

    A large project can quickly become unmanageable if its layers are not descriptively named. Double-click the name to rename Layer 1. In the field that appears, enter the new name: animation. Click the New Layer button page icon in the lower left of the Timeline panel. It's considered best practice to create a layer named actions at the top of the layer stack, dedicated to holding the ActionScript code. Rename the new layer you just created to: actions.

    Make sure it is located above the animation layer. Now that you've created a layer to place your scripts, you can add keyframes to the actions layer to associate the ActionScript code with specific frames.

    Move the playhead to Frame Click the actions layer at Frame 24 to highlight the last frame on the actions layer. Notice that an empty, blank keyframe appears you can tell that the new keyframe doesn't contain any graphics because the dot icon for the keyframe is hollow, rather than displaying a solid color.

    Select the new keyframe with the Selection tool. The Actions panel contains the Script window, which is a large text field you'll use to type or paste ActionScript code directly into your FLA file. Place your cursor in the text area next to the number 1 line 1 and type in the following action: stop ; Note: This step assumes that you're using the default mode of the Actions panel. If the Actions panel is in Script Assist mode, it won't allow you to type directly into to the text area.

    To return to the default mode, uncheck the magic wand icon in the upper right corner of the Actions panel. After typing the line of ActionScript code in the Script window, you'll notice that a little "a" icon appears above the keyframe in the actions layer of the Timeline.

    This indicates that the keyframe contains a frame script also known as an action. At this point, your Timeline should look similar to Figure Close the Actions panel.

    If you need to edit the code, you can always select the keyframe in the Timeline and then open the Actions panel again. Notice that this time, the animation doesn't loop. You can return to Flash and test the movie again to watch the movie play again.

    Flash Tutorials

    Add the stop action frame script to Frame 24 of the actions layer. When you are finished previewing the animation, close the Test Movie window. Back in Flash, save the FLA file. The files that you output when publishing can be uploaded to a host server so that the project can be viewed in a browser. When you publish the file, Flash Professional compresses the data in the FLA file and generates a much smaller, more compact and non-editable SWF file. It's important to note that the FLA is your master, authoring file.

    Always keep the FLA file handy in case you need to make changes to the project. The SWF file that is generated by Flash when you publish a project is the file that you'll embed in a web page. In the Publish Settings dialog box, select the Formats tab. The web browser then calls Flash Player, an installed plug-in, to render the contents of the SWF file onscreen.

    Open your web browser. Navigate to the folder where you saved your FLA file. The SimpleFlash. By default, Flash always saves the published files in the same folder alongside the FLA master file.