Activity 4: Introduction to Flash

Intent:

Adobe Flash is a multimedia graphics program especially for creating moving images for use on the Web. Flash has opened up a whole new world for digital animators. You can rotoscope with it, but you can also animate directly in Flash. Learning this program can be very motivating for students because they don’t have to be the greatest artists to be successful. The drawing tools in Flash function as a virtual pencil making it easy to create original animated images.

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.

When you author content in Flash Professional (by choosing File > New), you work with the master document, which is called a FLA file. FLA files use the file extension .fla (FLA). While editing a FLA file in the Flash authoring environment, you’ll notice that the user interface is divided into five main parts:

  • The Stageis like the canvas that defines the visible area during playback; you arrange  graphics, videos, buttons, and other elements on the Stage while authoring projects.
  • The Timeline controls the timing that specifies when elements in the movie appear on the Stage. The playhead begins at Frame 1 and moves from left to right as the movie proceeds through the frames. Drag the layersin the Timeline to arrange the layering order of graphics on the Stage. Graphics in the higher layers appear to be placed on top of the graphics in the lower layers.
  • The Tools panel contains the tools used to select objects on the Stage, create text elements, and draw vector graphics.
  • The Property inspectordisplays contextual information about the attributes of any selected object; you can edit these options to adjust an object’s settings.
  • The Library panel contains media elements and symbols that are stored for a project. Use this panel to manage and organize the project’s elements. When you publish a SWF file, only the Library items you actually use are included in the published file; you don’t have to “clean out” unused elements that weren’t used because they won’t increase the published SWF file’s size (although they do increase the size of the master FLA file).

The five areas of the workspace are identified in Figure 1.

Figure 1. Flash Professional CS5 user interface is comprised of five main parts. (Click to enlarge.)

ActionScript code allows you to add interactivity to the elements in your document. For example, you can add code that causes a button to display a new image when it is clicked. You can also use ActionScript to add logic to your applications. Logic enables your application to behave in different ways depending on the user’s actions or other conditions. There are different versions of ActionScript. Flash Professional uses ActionScript 3 when an ActionScript 3 or Adobe AIR file is created, or ActionScript 1 and 2 when an ActionScript 2 file is created in the New Document dialog box.

Flash includes many features that make it powerful but easy to use, such as prebuilt drag-and-drop user interface components, built-in motion effects that you can use to animate elements on the Timeline, pre-written code snippets, and special effects that you can add to media objects.

When you have finished authoring your FLA file, you publish it by selecting File > Publish (or pressing Shift+F12). The publish operation generates a compressed version of your file with the extension .swf (known as a SWF file). Adobe Flash Player is used to play the SWF file in a web browser or as a stand-alone application. Although you don’t upload or distribute the FLA file itself, you’ll always want to keep a copy of the master document. If you need to make any changes, you can open the FLA file in Flash, edit it, and then publish an updated SWF file.

Get Adobe Flash player

Task:

Creating a simple FLA file

This tutorial guides you through the process of creating a basic FLA document. You’ll use this workflow when authoring projects in Flash Professional. The first step involves creating a new document:

  1. Choose File > New.
  2. In the New Document dialog box, the ActionScript 3.0 file type is selected by default (see Figure 2). If ActionScript 3.0 is not selected, select it now. Click OK.

The New   Document dialog box showing the Flash Professional file types

Figure 2. The New Document dialog box displays the file types you can create in Flash Professional.

  1. Use the workspace drop-down menu located on the upper right of the screen to select the Essentials workspace layout option (see Figure 3). This step ensures that the layout of the panels in Flash Professional match the arrangement of the panels displayed in the screen shots for this tutorial.

Note: Later, you can create a preset of your own custom workspace by positioning the panels in any way that you prefer. Choose the New Workspace option and enter a name to save your personal configuration. Once it’s saved, you can reset the workspace by choosing its name from the workspace menu.

Choosing the Essentials option to see the workspace layout used by the tutorial

Figure 3. Select the Essentials option to see the workspace layout used for this tutorial.

  1. Click the Properties tab in the upper right side of the user interface to view the Property inspector, which displays the Stage properties for the file when no other objects are selected.
  2. By default, the Property inspector is vertically aligned along the right side of the workspace. The Size section displays the current Stage size setting as 550 × 400 pixels (see Figure 4). The Stage background color swatch is set to white. You can change the color of the Stage by clicking the swatch and selecting a different color in the color picker that appears.

Property inspector showing the Stage size and background color

Figure 4. The Property inspector displays the Stage size and the background color.

Tip: You can set the background color of the Stage in the Flash movie by choosing Modify > Document or by selecting the Stage and then modifying the Stage color swatch in the Property inspector. There’s no need to draw a rectangle to define the background color. When you publish your movie, Flash sets the background color of the published HTML page to the same color as the Stage background color (if you choose to generate an HTML file).

  1. Choose File > Save.
  2. Select the location to save the FLA file on your hard disk. Name it SimpleFlash.fla and then click Save. Make a note of the location where you save the FLA file because you’ll need to find this directory at the end of this tutorial.

Drawing a circle on the Stage

After you’ve created your Flash document, you are ready to add some artwork to the project. Drawing shapes is a common task in Flash. When you use the drawing tools in the Tools panel, the vector graphics you create can be edited at any time. The following steps describe how to create a circle; later, you’ll use this circle to create some basic animation. Follow these steps:

  1. Select the Oval tool from the Tools panel (see Figure 5).

Oval tool in the Tools panel

Figure 5. Tools with a triangle in the bottom left corner contain more than one option; click and hold the shape tool icon to select the Oval tool from the list that appears in the Tools panel.

  1. Use the stroke color swatch in the Property inspector to select the No Color option (red diagonal stripe) from the Stroke Color Picker (see Figure 6).

Selecting the No Color option in the Stroke Color Picker

Figure 6. The universal “no” symbol (red diagonal stripe) indicates that the color swatch is set to the No Color option in the Stroke color picker.

  1. 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.
  2. 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.

Object drawing mode

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.

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

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.

Circle drawn on the Stage

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

Name the file firstlastname_activity6.fla in your Thawed Drive, AnhrMohr/Unit 1/Activity 6 subfolder (create one if you do not have a folder created), and then click Save.

Export as firstlastname_activity6.swf in your Thawed Drive, AnhrMohr/Unit 1/Activity 6 subfolder (create one if you do not have a folder created), and then click Save.

 

Hints:

Pixels versus Vectors

Two kinds of images are in the digital world: bitmaps and vectors. Bitmaps are images made up from thousands of tiny dots called pixels (picture elements.) Programs such as Photoshop work with bitmaps. Bitmap images are similar to photographs; if you enlarge them too much, the image becomes grainy or pixilated. Vector files are typically much smaller than bitmap files because these graphics are defined by their geometry, by the curves that make them up. Flash defines an object by a set of curves, allowing you to zoom in or enlarge as far as you like without changing the quality of the image. Vector graphics generated in Flash are great for the internet because they are small files.

Bitmap image Advantages:
• Flash animation, because of its small file size, downloads quickly and can be available worldwide the minute it’s finished.
• Flash is a multimedia platform that allows the embedding of images, sounds, movies, HTML files, and can run consistently on various computer systems.
• According to Flash Magazine, this program is “a great authoring tool for interactive content such as the capability to integrate most features needed for making a game.”
• Flash as a format has become widespread. According to adobe, 95% of Web users have Flash Player installed.

Disadvantages:
• Flash is not very search engine friendly and chooses not to include support for concepts such as the Back button.
• Not all computers have a recent version of the Flash Player installed, particularly older systems.

FILE TYPES
.fla (pronounced “flaw”) files contain source material for the flash application. Flash authoring software can edit .fla files and compile them into .swf files.
.swf (pronounced “swiff”) files are completed, published files that cannot be edited.

Flash Tips:
• Open Flash and make sure you can see the Stage and also the Tools, Timeline, and Properties panels. If the Stage area is empty and there’s no Timeline (nothing there but gray), open the File menu and select “New.”
• If the Stage area is filled with a menu that includes the option “Create New,” select “Flash Document” there.
• If you don’t recognize the names of the tools, roll your mouse cursor over the Tools panel (far left side of the Flash window) and pause on each tool: A label will pop up and show you the name of that tool.
• To undo, use Cmd-Z/Mac or Ctrl-Z/PC. Whenever you make a mistake, hold the Cmd or Ctrl key and press the letter Z. By default, Flash lets you repeat this 100 steps. You can undo and return objects to an earlier or original
state.

Flash Extensions
After students have mastered the fundamentals of Flash challenge them with independent projects.
One of the most efficient ways to use Flash is to use symbols whenever you need more than one occurrence of a graphic, animation or sound. A symbol can be
props, titles, characters, or parts of characters that you create once and then can use the same object over and over again in your movie or other movies.