EXPOSICIÓN DE LOS RESULTADOS DEL PROYECTO

Often while I’m working with Flash, a creative director or account executive looks over my shoulder and says, “How can you tell where anything is? You have so many layers and objects, I don’t see how you do it!” There is no secret to my workflow. It really does come down to how I structure my timeline and layers. I just stay organ- ized and use my layers wisely. Now, you will, too.

All too often, layers are not something designers consider an actual tool. Some might believe that while designing in Flash, the timeline and its layers are really not that important and cannot add value to the finished art. You’ll soon discover there is nothing further from the truth.

Layers are truly multifaceted. They perform several completely different functions. As well being essential in the design of complicated objects, they are also needed when you’re using guides or masks. You can also use layers as a visual reference to find animations while you’re developing applications. Flash has the ability to create up to 16,000 layers (although I’ve never seen a project use anywhere near that many), and it provides a way to organize them in an efficient manner to increase workflow and more important, productivity.

In this chapter, you’ll explore all aspects of the often-overlooked subject of the time- line and its layers to see how you can get the most out of them.

UNDERSTANDING THE

TIMELINE AND LAYERS

96

CHAPTER 6 1 29 28 27 26 25 24 23 22 21 2 3 4 5 6 7 8 37 36 35 34 33 32 31 30 10 9 11 12 13 14 15 16 17 18 19 20 Figure 6-1. The timeline has a vast number of elements.

Anatomy of the timeline

First and foremost, you need to get familiar with all aspects of the timeline before you can fully real- ize its potential. The timeline consists of many elements, some of which you will use more often than others.

Figure 6-1 shows a timeline window with many different elements labeled with numbers. Here’s the key, along with a description of each item:

1.

Standard layer: It’s good practice to place all the ActionScript here in the topmost layer. I

name this standard layer Actions. This makes the debugging process manageable. If you are working on the project with other Flash developers, it makes it easy for them to follow and locate your code. To create a new standard layer, click the Insert Layerbutton (9).

2.

Mask layer: This type of layer makes is easy to create a quick mask to reveal only certain por-

tions of the layers below it. Any layers that need to be masked must be linked to the mask (3). To create a mask layer, first create a standard layer, and then right-click (Windows) or Ctrl-click (Mac) and choose Mask.

3.

Masked object layer: This is a layer linked to the mask layer above it, and it contains the con-

tent to be masked. It’s easy to tell which layers are linked to the mask above it because the

The absolute best way to manage ActionScript is to create an included .asfile. This is a file that includes only the ActionScript, much like a text document. In the .flayou are working with, you will need to link to this .as file with something like #include main.as. Main.aswould be the file name for the ActionScript file. This feature is avail- able only in the Pro version of Flash 8.

UNDERSTANDING THE TIMELINE AND LAYERS linked layer will be indented slightly to the right. The mask and linked layer also share a similar icon, indicating they are a set. You can add a new linked layer to the mask by either selecting any linked layer under the mask and then clicking the Insert Layericon (9) or by simply drag- ging a layer already created on the timeline under the mask layer.

4.

Motion guide layer: This type of layer allows you to draw a path for animation between

tweened instances. This is useful if you want to animate objects, groups, or text blocks along a custom path that you can create. For example, you can draw a circle and have an object ani- mate along the stroke, making the object move in a circle. The motion guide is created with the Pencil tool or the outside stroke of an object. To create a motion guide layer, either click the Motion Guideicon (10) or create a standard layer and then right-click (Windows) or Ctrl- click (Mac) on that layer and choose Add Motion Guide. In both cases, two layers will be cre- ated already linked together. To link a normal layer to a motion guide layer, create a new layer and link it to make a guided layer.

5.

Guided layer: The guided layer, labeled “Object” in Figure 6-1, is the layer that is linked with

the motion guide layer. This layer contains the animation.

6.

Guide/hidden layer: This layer type is essentially the same thing as a motion guide layer with-

out any guided layers linked to it. If you need to temporarily disable a layer or hide it, this is the best nondestructive way to do it. The nice thing about this layer type is that any of its con- tent will not get exported, which means that the hidden layer will not add any unnecessary file size in the exported SWF. To create a guide layer, insert a new standard layer, and then right- click (Windows) or Ctrl-click (Mac) and choose Guide.

7.

Layer folder: Layer folders make organizing a snap. A layer folder offers a way to organize lay-

ers into a single group that can be collapsed and expanded. Insert a new folder by clicking the

Insert Layer Foldericon (11). I’ve labeled my folder “Set” in Figure 6-1.

8.

Layers inside the layer folder: These are examples of layers inside the layer folder. You can

place any layer type inside the layer folder by dragging it underneath the newly created folder. I created three layers and labeled them “Object in Set” in Figure 6-1 as an example.

9.

Insert Layer: This icon creates a standard layer. You can also create a new layer by clicking the

Insertmenu at the top of screen, and then select Timelineto see the different layer types.

10.

Add Motion Guide: This icon inserts a motion guide into the timeline.

11.

Insert Layer Folder: This icon creates a layer folder.

12.

Delete Layer: This icon deletes the selected layer in the timeline. It’s important to know that

if you select a mask or motion guide layer and delete it, the linked layers will be deleted. If it’s your intention to delete the entire set, you must delete each individual linked layer, too.

13.

Center Frame: This button centers the timeline marker (the red vertical line on the timeline)

in the middle of the viewable space on the timeline. This works only when you have enough frames on the timeline to exceed the viewable space on your screen in the timeline window.

14.

Onion Skin: This button activates the onion skin feature, which is extremely valuable in frame-

by-frame animation techniques. Flash normally allows you to see only one frame of animation at a time. In some circumstances, you will find it helpful to see an animation sequence on the stage that shows the before and after frame or frames of the animation from the marker posi- tion all at one time. Onion skinning allows you to see how your animation looks during its movement from one frame to the next.

become slightly transparent, so you can see the animation progress from one frame to the next—showing before and after frames in the animation. Also, on the frame numbers near the top of the timeline, two brackets appear (32), and the numbers in the timeline turn white. The white numbered frames indicate the frames that will be included in the onion skin mode. So, if you have a total of 11 frames selected, then 11 instances will appear on the stage.

15.

Onion Skin Outlines: This button activates a feature that is the same as the onion skin feature,

except the full-object animation is replaced by an outlined-only version. This can help you see how your animation is happening in relation to other objects on the stage. This is also helpful if you have a slower computer, because it uses slightly fewer processes.

16.

Edit Multiple Frames: Clicking this button allows you to edit multiple frames at one time,

regardless of where the current marker is, which is sometimes helpful in frame-by-frame ani- mation. With this feature turned off, you can edit only the currently selected frame.

17.

Modify Onion Markers: Clicking this button reveals a drop-down list with the following

options related to onion skinning:

Always Show Markersdisplays the onion skin markers in the timeline header, whether or not onion skinning is enabled.

Anchor Onion locks the onion skin markers to their current position in the timeline. Normally, the onion skin range is relative to the current frame pointer and the onion skin markers. By anchoring the onion skin markers, you prevent them from moving with the cur- rent frame pointer.

Onion 2displays two frames on either side of the current frame.

Onion 5displays five frames on either side of the current frame.

Onion Alldisplays all frames on either side of the current frame.

18.

Current frame: This indicator displays the number of the frame where the marker currently

resides.

19.

Frame rate: This indicator displays the frame rate, or frames per second, of the Flash project.

Here’s a nice little shortcut: double-click this area, and the Document Property panel will appear, allowing you to change the frame rate and other document properties.

20.

Elapsed time: This indicator displays the real time of the animation or Flash movie.

21.

Keyframe: A keyframe is a blank or occupied frame in which you define a change in an ani-

mation or include frame actions to modify your Flash movie.

22.

Shape tween: A shape tween is created when a shape is animated. A shape tween has some

characteristics that a motion tween does not possess, such as the ability to distort from one keyframe to the next.

You can lock the other layers in the timeline so they will not be affected by the onion skin feature. This helps isolate the desired animation. Also, to see the onion skin feature work, you need to scrub the timeline with the marker or playhead. To scrub the timeline, click and hold the marker, and move the marker left and right. Note that a movie clip will not show the animations inside its timeline like a graphic will while scrubbing.

98

UNDERSTANDING THE TIMELINE AND LAYERS

23.

Motion tween: This type of tween can be applied only to a graphic or movie clip. It does not

support distortion of the object. However, it does allow you to use the new filter features in Flash 8, like Blur, Glow, and Drop Shadow, just to name a few.

24.

Blank frames: Frames that do not contain any data or ActionScripts.

25.

End keyframe in an animation: This indicates the end of the animation.

26.

Empty keyframe: This is a blank keyframe ready to receive content that is different from the

frame before it. This essentially is a blank slate for new animation or ActionScript.

27.

Empty keyframe with ActionScript applied to the layer: Best practice is to create an

ActionScript file for the sole purpose of holding ActionScript. This makes debugging much easier.

28.

Timeline options: This button allows you to modify the look of the timeline to meet your

needs. For example, you may have a really long animation sequence and prefer to see more frames than in Normal mode. If you select Tiny or Small, the actual frame size reduces, allow- ing you to see more frames in the same window space. (As a matter of fact, the Small mode is the one I prefer to use for my work.) Once you click the button, you will see several other options to modify the timeline look as well: Medium, Large, Preview, Preview in Context, Short, and Tinted Frames. Medium and Large simply make the timeline frame size larger. Preview

shows a preview of the objects on the stage. Preview in Contextshows a preview of the objects on the stage in relationship of the stage itself. Shortmakes the frame in the timeline shorter. This allows you to view more layers at one time. Finally, Tinted Framesadds color to the ani- mation tweens shown in the timeline making them easier to identify.

29.

Stage scale: This drop-down list allows you to adjust the scale of the stage from 8% to 2000%.

30.

Edit Symbols: This button is a shortcut that allows you to jump straight into editing the spec-

ified library asset.

31.

Edit Scene: Another shortcut that allows you to jump from scene to scene.

32.

Onion skin brackets: These are the start onion skin and end onion skin brackets that allow

you to manage which frames will be onion-skinned. These brackets are adjustable. You can grab them and manually move them left or right to increase or decrease the number of frames the animation shows on the stage at one time.

33.

Timeline marker: This shows where the playhead is currently located while you’re editing.

Sometimes, it’s helpful during editing to scrub the marker back and forth to see the animation sequence play back, and then make adjustments.

34.

Show All Layers As Outline: When you select this icon, everything in the timeline is drawn as

an outline during editing. Sometimes, it’s helpful to toggle this mode on and off to find ele- ments on the stage or to see what is happening behind the scenes. Underneath this icon are colored box icons for each layer, which you can toggle to make only individual layers show as outlines.

35.

Lock/Unlock All Layers: Clicking this icon allows you to lock or unlock all the layers at one

time. If you want to isolate only one layer, a timesaver is to lock all the layers, and then unlock that one layer.

It’s good practice to lock the layers you are not working with to prevent any accidental changes to those layers. This can prevent a loss of work and time.

Figure 6-2. You can create a gel pill like this using Flash alone.

36.

Scene/asset name: This indicator lets you know if you are editing on the root timeline or if

you are inside a movie clip or other asset.

37.

Timeline: This button hides or shows the timeline. This is convenient if you need to toggle the

timeline off to show more of the working stage.

Whew! OK, now that you know the timeline inside and out, let’s get to the goods. Let’s explore the most requested and sought-after design element, the gel pill.

A layering example: the gel pill

To explore Flash layering techniques, you’ll now create the gel pill shown in Figure 6-2. If you are not familiar with the unofficial design requirements of this button, then let me explain. This button resem- bles a pill. The pill is supposed to be translucent and shiny. Lastly, any text on the button should reflect to the bottom of the pill.

100

CHAPTER 6

The techniques you’ll use here (some of which take advantage of the new features in Flash 8) can be applied to many design elements because the gel pill features many typical important attributes, such as light, shadow, and depth. When used correctly, these attributes can really make your design come to life. Of course, everything you build will not look “gel-ish,” but the techniques you will use can be translated to all sorts of styles. However, the main purpose of this exercise is to clearly demonstrate how to effectively use layers to stay organized and how layers contribute to the design process. So with that, let’s get started.

Creating the layers

To begin, let’s create our layers and name them. You need to create five lay- ers and name them as shown here.

You want to name your layers according to what object is in them. For exam- ple, in our case, we first need to draw the main body of the pill button, so naming a layer Main Pill Bodyseems appropriate.

UNDERSTANDING THE TIMELINE AND LAYERS

Drawing the pill body

Follow these steps to start creating the gel pill:

1.

Click the Main Pill Bodylayer to select it.

2.

Select the Rectangle tool. Select the Set Corner Radiusbutton that now appears and give the rectangle a radius of 100. Make sure that the Stroke Color(line) is turned off.

3.

Drag out a rectangle (which will look like a rounded edge rectangle) to around 430 ✕65 pixels. It doesn’t have to be exact.

4.

With the main body of the pill drawn, let’s fill it with the proper fill gradient. Select the rectangle on the stage and adjust the Color Mixer panel for a Linear gradient with the following colors:

#5ABAF3, #66C0E6, #0A4E76. Refer to the following illustration for the layout of the gradient in the Color Mixerpanel.

5.

More than likely, the gradient will be from left to right. You need to reposition this gradient to be from top to bottom. Choose the

Gradient Transformtool from the toolbar and click the pill to select it. You will see the edit handles appear on the pill for the gradient. Click and hold down the rotation handle (which is small white cir-

cle), and rotate the gradient so the dark color is on top, as shown in the following image. Having Snap to Objectson (View ➤Snapping ➤Snap to Objects) may help you get the gradi- ent perfectly straight on the pill.

If you would rather use my shapes to follow the example, you can find them in the fin- ished version of this example in the code download files available from the friends of ED website (www.friendsofed.com).

Adding the bottom highlight

Next, let’s begin working on creating some depth in the pill. We ultimately want the pill to look translucent and to give the idea it has some mass. The goal here is to make a highlight, or glow, on the

In document Diseño de un programa de integración progresiva del decrecimiento en el currículo de la Educación Primaria (página 49-53)