Chapter 2Drawing in Macromedia Flash

TABLE OF CONTENTSChapter Objectives........................................................................................1File Listing....................................................................................................2Projects to Assign.........................................................................................2Lecture Note: Chapter Overview...................................................................3

Teaching Tip: Know the Tools.............................................................4Lecture Note: Use the Macromedia Flash Drawing Tools.............................4

Teaching Tip: Gridlines.......................................................................4Lecture Note: Select Objects and Apply Colors.............................................5

Key Term: Gradient.............................................................................5Lecture Note: Work with Objects..................................................................5

Teaching Tip: How Flash Tools Differ from other Vector Drawing Programs.................................................................................................................. 6

Lecture Note: Work with Text and Text Objects............................................6Troubleshooting Tip: Font Issues........................................................7

Lecture Note: Work with Layers and Objects................................................7Teaching Tip: Creating a New Layer...................................................8

CHAPTER OBJECTIVES

Use the Macromedia Flash drawing tools. Select Objects and Apply Colors. Work with objects. Work with text and text objects. Work with layers and objects.

File Listing

LOCATION PROVIDEDFILENAME

SAVED FILENAME

Lesson 1 No file provided tools.flaLesson 2 No file provided No filename indicatedLesson 3 No file provided No filename indicatedLesson 4 No file provided No filename indicatedLesson 5 fl2_1.fla layers2.flaSkills Review No file provided skillsdemo2.flaProject Builder 1 No file provided ultimatetours2.flaProject Builder 2 No file provided thejazzclub2.flaDesign Project No file provided dpc2Group Project No file provided portfolio2.fla

Projects to Assign

The Skills Review covers all of the objectives covered in the chapter in a step-by-step progression. Assign this exercise for extra reinforcement. Solution files will be very similar.

Project Builder 1 gives students practice in creating and using text, a guide path, and different layers.

Project Builder 2 gives students additional practice setting up a Web site with text and drawing objects that will link to other pages.

Design Project involves online research to find and report on Web site design.

Portfolio Project allows students to shows off their work and skills by creating a personal portfolio Web site done completely in Flash.

Lecture Note: Chapter OverviewLecture Note: Chapter OverviewThis chapter begins by discussing the differences between pixels and vectors - the two main computer display formats. Since Flash is a vector-based application, it is important that students understand the benefits of vectors, and how to get the most out of the program’s drawing tools and the tool options.

Lesson One begins by introducing students to the numerous tools in the Tools palette, as well as how these tools interact with the stage and grid. Further introduction to individual tool options, such as the Pencil’s “Straighten”, “Smooth” and “Ink” modes are discussed, as well as how one can edit existing shapes, strokes and fills.

Once students begin to understand and utilize the tools in the provided exercises, the chapter explores ways in which these drawn “objects” can be manipulated in Flash. Flash’s vector-based objects can be transformed in innumerable ways, including being “scaled”, “skewed”, or “distorted”. Using either the Subselection Tool or the Arrow Tool, the student can twist, stretch and manipulate an object’s individual anchor points.

Flash’s vector-based text can be stylized with much of the same functionality as word processing software. In addition, words may be broken up into separate letter-shaped objects that can then be manipulated creatively with the tools introduced earlier in the Chapter.

The chapter concludes by discussing the value of layers, the number of different layer types that exist (Normal, Guide, Guided, Mask, Masked, & Folder), and the importance of managing different objects on their own respective layer. The exercises at the end of the chapter provide valuable examples as to how students can control their content via separately named layers. Special layers, such as “Guide Layers” offer students special benefits as does the newer function of “Distributing Text to Layers.”

Flash Tool Panel, Grid, Color Panel, Properties Panel, Layer Properties Dialog Box

KNOW THE TOOLSProfessional-level design and production in Flash often reflects an understanding of the nuances of its tools and their options and capabilities. It is important that students spend time familiarizing themselves with each tool as well as the creation and editing capabilities within Flash.

Lecture Note: Use the Macromedia Flash Lecture Note: Use the Macromedia Flash Drawing ToolsDrawing ToolsSee Figure on 2-3 to show the Macromedia Flash toolkit, grid, properties, and color panel

The Flash Toolbox contains over 16 powerful tools that can be used to create and edit in Flash. This chapter introduces students to all of these tools, and provides a brief description of their capabilities.

The exercises in the chapter give students a hands-on opportunity to utilize the tools and explore options such as line weight and color. They will also learn how to draw on the stage with the assistance of the grid.

At first glance, Flash’s toolkit may seem too thin to be able to create some of the beautiful interfaces with which your students have become familiar. In fact, most of what is seen in popular Flash sites can be designed and produced with the Flash tools alone. While other applications such as Adobe Photoshop and Illustrator are also valuable tools used to create content imported into Flash, getting to know Flash’s own tools can offer your student a powerful single-application design and development environment.

GRIDLINESTo show a gridline, click View on the menu bar, point to Grid, and then click Show Grid. To view tool names on the toolbar, click Window on the menu bar, point to Toolbars, then click Main if it does not have a check mark next to it.

Lecture Note: Select Objects and Apply Lecture Note: Select Objects and Apply ColorsColorsSee Figure 9 to discuss the different methods of selecting an object before editing.

In order to edit a drawing or object in Flash, you first need to select it. This lesson provides students with numerous specific ways to select an object, either in part, or whole, so that it can be effectively edited.

Flash’s vector-based objects have two main parts: the stroke and the fill. It is important to be aware of the appropriate selection tool and method to edit those parts.

The Selection tool is the primary tool for selecting objects, but can be used to select just the stroke, just the fill, both, or part of both. Similarly, the Subselection and Lasso tools can be used more flexibly to select portions of an object. You can use the Polygon Mode option to draw straight lines and connect them.

Once an object or portion of an object has been selected, it can be altered in stroke, fill, or orientation, as is explored in the end of lesson exercise. Macromedia Flash allows you to change the

color of the stroke and fill of an object.

Key Term GRADIENTA gradient is a color that makes a gradual transition from one color to another.

Figure 9: Objects or parts of objects are highlighted when selected

Lecture Note: Work with ObjectsLecture Note: Work with ObjectsSee Figures 20 and 21 to demonstrate the use of handles and the Selection Tool

As the previous lesson illustrated, once an object that has been selected, it can be edited. This chapter goes further in explaining how selected objects can be transformed, scaled, stretched, or flipped.

Copy and Paste - Selecting an object allows the user to copy it and make a duplicate, or cut and paste, moving the original to a new layer or scene.

Transforming Objects – Once an object has been selected, it can be modified with the Free Transform tool. This tool permits the user to scale, stretch, skew, distort, or rotate an object based on which “handle” the user moves.Reshaping a Segment of an Object – Both the Subselection Tool and the Arc pointer option of the Selection tool allow users to manipulate edges of an object. The Subselection Tool works on individual anchor points or “handles”, while the Arc pointer can drag out a portion of an object to make it more rounded, or more angular.

Flipping an Object – Once an object has been selected, it can be manipulated by the Transform Menu Command (Modify > Transform >…), which allows an object to be scaled, rotated, or even flipped along its vertical or horizontal axis.

Filling an Object— Double-click the fill of each object or drag a marquee around them to select the fill and the stroke

HOW FLASH TOOLS DIFFER FROM OTHER VECTOR DRAWING PROGRAMSSome of your students may have had experience editing vector-based objects in another application, such as Illustrator, which can be a benefit as well as a detriment to learning the drawing tools in Flash. While Flash’s Subselection tool manipulates “anchor points” in a similar fashion to the tools in Illustrator, Flash’s Arc pointer is unique in its ability to reshape sections of a line by dragging.

Lecture Note: Work with Text and Text ObjectsLecture Note: Work with Text and Text ObjectsSee Figure 31 when discussing the text block

This lesson presents most of the basics of working with text in Flash. It introduces your students to Flash’s text tool and text box, and the application’s ability to stylize text in much the same way as a word processor (Bold, Italics, Point Size, etc.).

Unlike word processors, students should be aware that Flash’s text tool creates a draggable Text Block Object, which can be moved anywhere on the stage or resized to force text to fit into a declared width.

Once text has been entered into Flash, it can be treated in much the same way as basic shapes or other objects, including the ability to be re-colored, stretched, skewed, and rotated, all while remaining editable.

The chapter also points out Flash’s unique capacity to “Break Apart” a text object, thus converting it into individual letters shapes, which can then be creatively altered.

TroubleshootingTip

FONT ISSUESThe lesson presumes that all students are working on the same platform (Mac or PC) and that each student has the same fonts

installed on their computer. While Flash files (.fla) are generally very portable between the major platforms, problems can arise when creating files with one platform’s font and then expecting the exact same layout, spacing, leading, and tracking when opening them on another platform.

Lecture Note: Work with Layers and ObjectsLecture Note: Work with Layers and ObjectsSee Figure 41 when discussing layers

Now that your students have learned to create and edit shapes, objects and text, they can organize their content within a timeline.

This section discusses the importance of organizing objects into different layers. There are six different types of layers available in Macromedia Flash 8:

Normal - The default layer type. All objects on these layers appear in the movie.

Guide (Standard and Motion) – Standard Guide layers serve as a reference point for positioning objects on the stage. Motion Guide layers are used to create a path for animated objects to follow.

Guided – A layer that contains an animated object linked to a Motion Guide layer.

Mask – A layer that hides and reveals portions of another layer.

Masked – A layer that contains the objects that are hidden and revealed by a Mask layer.Folder – A layer that contains other layers.

The chapter’s associated exercises demonstrate the value of moving objects to their own individual and uniquely named layers, as well as organizing layers within a Folder layer. Attention is also given to the “Distribute to Layers” command, new to Flash 8, which permits letters in a word to be distributed to their own distinct layers.

CREATING A NEW LAYERTo create a new layer, click the Insert Layer icon on the bottom of the timeline. To hide all layers, click the Show/Hide All Layers icon.