Adobe flash professional cs5 classroom in a book lesson files free download.Adobe Flash Professional CS5 Classroom in a Book by

Creating and Editing Symbols 4. Editing gives you the power to transform hours of material into concise, cohesive, web-friendly stories. The next step is to add additional instances of the button to the artboard. For more information on preparing video for the web, visit the Adobe Developer Connection Video Technology Center online at www. These include the duration of the transition, delay when the transition beginsand easing. Components can have multiple states, such as the up, over, down, and disabled states of a button. Test and publish the project.❿
 
 

Adobe flash professional cs5 classroom in a book lesson files free download

 
Adobe Flash Catalyst CS5 Classroom in a Book WHERE ARE THE LESSON FILES? Thank you for purchasing this digital version of: Adobe Flash Catalyst CS5 Classroom. Adobe Flash Professional CS5 Classroom in a Book by · Download the ZIP file (or files) from the web site to your hard drive. · Unzip the files and follow the. The 10 project-based lessons in this book show readers step-by-step the key techniques for working in Flash CS5. Readers learn what they need to know to create. The Adobe Flash Professional CS5 Classroom in a Book disc includes the lesson files that you’ll need to complete the exercises in this book. The companion DVD includes lesson files so readers can work along with the book, as well as 2 hours of video tutorials from ‘Learn Adobe Flash Professional.

❿

Adobe flash professional cs5 classroom in a book lesson files free download.Media – Adobe Flash Professional CS5 Classroom in a Book [Book]

Review Answers 1 A symbol is a graphic, button, or movie clip that you create once in Flash and can then reuse throughout your document or in other documents.

All symbols are stored in your Library panel. When you import layers as keyframes, Flash adds each Illustrator layer to a separate frame in the Timeline and creates keyframes for them. To change the transparency, select Alpha from the Color Effect menu in the Properties inspector, and then change the alpha percentage. Editing a symbol in place lets you see the other objects around the instance.

If needed, remove the previous lesson folder from your hard drive and copy the Lesson04 folder onto it. Motion tweening is the basic technique of creating animation with symbol instances.

The project is an animated splash page for a soon-to-be-released fictional motion picture. This file is partially completed and already contains many of the graphic elements imported into the Library for you to use. Saving a working copy ensures that the original start file will be available if you want to start over. Animation can be as simple as moving a box across the Stage from one frame to the next.

It can also be much more complex. Move the red playhead to a different point in time and move the object to a new position. Flash takes care of the rest. Motion tweens create animation for changes in position on the Stage and for changes in size, color, or other attributes. Motion tweens require you to use a symbol instance. Flash also automatically separates motion tweens on their own layers, which are called Tween layers.

There can only be one motion tween per layer without any other element in the layer. Tween layers allow you to change various attributes of your instance at different key points over time. For example, a spaceship could be on the left side of the Stage at the beginning keyframe and at the far-right side of the Stage at an ending keyframe, and the resulting tween would make the spaceship fly across the Stage. Senior animators would be responsible for drawing the beginning and ending poses for their characters.

The beginning and ending poses were the keyframes of the animation. All the necessary graphic elements have been imported into the Library panel. The Stage is set at a generous pixels by pixels to fill up a high-resolution monitor, and the Stage color is black.

You might need to choose a different view option to see the entire Stage. It will begin slightly lower than the top edge of the Stage, and then rise slowly until its top is aligned with the top of the Stage. Create a new layer above the footer layer and rename it city. This positions the cityscape image just slightly below the top edge of the Stage. Motion tweens require symbols. Flash asks if you want to convert the selection to a symbol so it can proceed with the motion tween.

Flash also converts the current layer to a Tween layer so you can begin to animate the instance. Tween layers are distinguished by a special icon in front of the layer name, and the frames are tinted blue. Tween layers are reserved for motion tweens, and hence, no drawing is allowed on a Tween layer. Holding down the Shift key constrains the movement to right angles.

A small black triangle appears in frame at the end of the tween span. This indicates a keyframe at the end of the tween. Flash smoothly interpolates the change in position from frame 1 to frame and represents that motion with a motion path. Hide all the other layers to see the results of the motion tween on the cityscape. Animating changes in position is simple, because Flash automatically creates keyframes at the points where you move your instance to new positions.

If you want to have an object move to many different points, simply move the red playhead to the desired frame, and then move the object to its new position. Changing the Pacing and Timing You can change the duration of the entire tween span or change the timing of the animation by clicking and dragging keyframes on the Timeline. Changing the animation duration If you want the animation to proceed at a slower pace, taking up a much longer period of time, you need to lengthen the entire tween span between the beginning and end keyframes.

If you want to shorten the animation, you need to decrease the tween span. Lengthen or shorten a motion tween by dragging the ends on the Timeline. Your cursor changes to a double-headed arrow, indicating that you can lengthen or shorten the tween span.

Your motion tween shortens to 60 frames, so now the cityscape takes a much shorter time to move. The timing of your entire animation remains the same; just the length changes. Your motion tween begins at an earlier time, so it now only plays from frame 10 to frame Add frames by Shift-dragging the end of a tween span.

Moving keyframes When you click on a motion tween on the Timeline, the entire span is selected. This allows you to move the entire motion tween forward or backward in time as a single unit. However, if you want to move particular keyframes within a motion tween to change the pacing of the animation, you have to select individual frames. Just the keyframe at frame 60 is selected. A tiny box appears next to your mouse cursor indicating that you can move the keyframe. The last keyframe in the motion tween moves to frame 40, so the motion of the cityscape proceeds quicker.

You can change the color effect of an instance in one keyframe and change the value of the color effect in another keyframe, and Flash will automatically display a smooth change, just as it does with changes in position.

Flash will create a smooth fadein effect. Click the Motion Editor tab next to the Timeline. Click the plus sign next to Color Effect and select Alpha. The cityscape instance on the Stage becomes totally transparent. The cityscape instance on the Stage becomes totally opaque.

Flash interpolates the changes in both position and transparency between the two keyframes. Animating Filters Filters, which give instances special effects such as blurs and drop shadows, can also be animated.

Animating filters is no different than animating changes in position or changes in color effect. You simply set the values for a filter at one keyframe and set different values for the filter at another keyframe, and Flash creates a smooth transition. The Blur filter is applied to the instance.

Click the plus sign next to Filters and select Blur. Set the X and Y Blur values to 20 pixels. The pixel Blur filter is applied to the woman instance throughout the motion tween. A keyframe for filters is established at frame The Blur filter changes from the keyframe at frame to the keyframe at Flash creates a smooth transition from a blurry instance to an in-focus instance.

That is, you can have a keyframe for position, a different keyframe for the color effect, and yet another keyframe for a filter. Managing many different kinds of keyframes can become overwhelming, especially if you want different properties to change at different times during the motion tween.

Fortunately, Flash Professional CS5 provides a few helpful tools. When viewing the tween span, you can choose to view the keyframes of only certain properties.

For example, you can choose to view only the position keyframes to see when your object moves. Or, you can choose to view only the filter keyframes to see when there is a filter change. You can also choose All or None to see all the properties or none of the properties. When inserting a keyframe, you can also insert a keyframe specific to the property you want to change.

The Motion Editor is a special panel that displays all the properties of your motion tween visually as lines on a graph. The Motion Editor is helpful when multiple properties are changing at different times. For example, the Motion Editor for the woman is shown here and shows changes in the x-position and Alpha values in the first few frames, and changes in the Blur filter in the last few frames. These kinds of changes are made with the Free Transform tool or with the Transform panel.

The car will start small, and then become larger as it moves forward toward the viewer. The transformation handles appear around the instance on the Stage. The car becomes totally transparent. The current layer becomes a Tween layer.

A new keyframe is automatically inserted at frame to indicate the change in transparency. Flash tweens the change in position and the change in scale from frame 75 to frame Flash also tweens the change in transparency from frame 75 to frame Changing the Path of the Motion The motion tween of the left car that you just animated shows a colored line with dots indicating the path of the motion.

The path of the motion can be edited easily so that the car travels in a curve, or the path can be moved, scaled, or even rotated just like any other object on the Stage. To better demonstrate how you can edit the path of the motion, open the sample file 04MotionPath. The file contains a single Tween layer with a rocket ship moving from the top left of the Stage to the bottom right. For example, if you want to build a slide show where each image fades out in the same manner, you can save that transition to the Motion Presets panel.

Flash provides a number of motion presets that you can use to quickly build sophisticated animations without much effort. Moving the path of the motion You will move the path of the motion so the relative movement of the rocket ship remains the same but its starting and ending positions change. The path of the motion becomes highlighted when it is selected. The relative motion and timing of the animation remain the same, but the starting and ending positions are relocated.

Changing the scale or rotation of the path The path of the motion can also be manipulated with the Free Transform tool. Transformation handles appear around the path of the motion. You can make the path smaller or larger, or rotate the path so the rocket ship starts from the bottom left of the Stage and ends at the top right. Editing the path of the motion Making your objects travel on a curved path is a simple matter.

You can either edit the path with Bezier precision using anchor point handles, or you can edit the path in a more intuitive manner with the Selection tool. The handle on the anchor point controls the curvature of the path. Make the rocket ship travel in a wide curve. Choose the Selection tool and move it close to the path of the motion. A curved icon appears next to your cursor indicating that you can edit the path. Click and drag the path of the motion to change its curvature.

Orienting objects to the path Sometimes the orientation of the object traveling along the path is important. In the motion picture splash page project, the orientation of the car is constant as it rumbles forward. However, in the rocket ship example, the rocket ship should follow the path with its nose pointed in the direction in which it is heading.

The Orient to path option in the Properties inspector gives you this option. Flash inserts keyframes for rotation along the motion tween so that the nose of the rocket ship is oriented to the path of the motion. Use the Free Transform tool to rotate its initial position so that it is oriented correctly. This means that you can easily swap out the target of a motion tween.

Flash asks you if you want to replace the existing object with a new object. The motion remains the same, but the target of the motion tween has been swapped. Select the object that you want to swap on the Stage. In the Properties inspector, click the Swap button. In the dialog box that appears, choose a new symbol and click OK. Flash will swap the target of the motion tween. Creating Nested Animations Often, an object that is animated on the Stage will have its own animation. For example, a butterfly moving across the Stage will have an animation of its wings flapping as it moves.

Or the alien that you swapped with the rocket ship could be waving his arms. These kinds of animations are nested animations, because they are contained inside the movie clip symbols. Movie clip symbols have their own Timeline that is independent of the main Timeline. Creating animations inside movie clip symbols 1 In the Library panel, double-click the alien movie clip symbol icon. You are now in symbol-editing mode for the alien movie clip symbol. The alien is in the middle of the Stage.

In the Timeline, the parts of the alien are separated in layers. Flash converts the current layer to a Tween layer and inserts one second worth of frames so you can begin to animate the instance.

A keyframe is inserted at the end of the motion tween. The right arm rotates smoothly from the resting position to the outstretched position. The left arm rotates smoothly from the resting position to the outstretched position.

Your animation of the alien raising his arms is complete. Wherever you use the movie clip symbol, the alien will continue to play its nested animation.

To prevent the looping, you need to add ActionScript to tell the movie clip Timeline to stop on its last frame. Flash opens a window showing the exported animation. The alien moves along the motion path while the nested animation of his arms moving plays and loops.

Using the Motion Editor The Motion Editor panel provides in-depth information and editing capabilities for all the properties of a motion tween. On the left side of the Motion Editor, an expandable list of properties is displayed along with their values and easing options. On the right side, a timeline shows various lines and curves representing how those properties change.

Your cursor changes to a double-headed arrow indicating that you can increase or decrease the height of the Motion Editor panel. You can expand or collapse the categories to see only those categories you are interested in. Set the Viewable Frames value to the maximum to see the entire motion tween. To see how the Expanded Graph Size option affects the display, click the X property under Basic motion. The larger the Expanded Graph Size value, the more of the selected property you can view.

This line represents the opacity of the alien throughout the motion tween. You can also change the Alpha value by clicking and dragging the value next to the Alpha amount. The alien becomes transparent beginning at frame 1. A new keyframe for the Alpha property is inserted at frame The selected keyframe becomes highlighted.

Flash animates the smooth transition of transparency from frame 1 to frame Editing keyframes You can easily navigate keyframes and remove them, and you can move keyframes to control the precise timing of each of your transitions. Easing Easing refers to the way in which a motion tween proceeds. In the most basic sense, it can be thought of as acceleration or deceleration. An object that moves from one side of the Stage to the other side can start off slowly, then build up momentum, and then stop suddenly.

Or, the object can start off quickly, and then gradually come to a halt. Easing is best visualized in the Motion Editor. The graphs that connect one keyframe to another are usually straight lines, which indicate that the change from one value to the next value proceeds linearly.

However, if you want a more gradual change from the starting position known as an ease-in , the line would be curved near the beginning keyframe, indicating a slower start. A gradual slowdown known as an ease-out would be represented by a curve near the ending keyframe. Setting eases of a motion tween You can create an ease by customizing the curvature of the property graph in the Motion Editor. Control handles appear from the keyframe, which you can move to change the curvature of the line.

The total effect of the S-shaped curve is both an ease-in and an ease-out effect. In the Timeline not the Motion Editor , select the motion tween. In the Properties inspector, enter a value for the ease between — ease-in to ease-out.

With the Motion Editor, you have precise control over individual properties and eases between keyframes. Using preset eases Easing can be very powerful and can be used to create many specialized motions. For example, a bouncing motion can be created with just two positional keyframes and an ease that moves the object back and forth between the two positions. The motion tween will be created inside the movie clip symbol of the car.

Flash takes you to symbol-editing mode for the movie clip symbol. Two layers are inside this symbol: the top layer called lights and the bottom layer called smallRumble. Flash converts the current layer to a Tween layer so you can begin to animate the instance. Flash creates a smooth animation of the car moving down slightly.

The Random preset ease appears. The Random ease jumps from one value to the next in random intervals. This is shown graphically as a series of abrupt stair steps. The frequency of random jumps increases based on the Random value.

Flash applies the Random ease to the positional changes of the motion tween. Instead of a smooth change in the y-position, Flash makes the car jerk up and down randomly, simulating a rumbling, idling car. Classic Tween Model In previous versions of Flash Professional CS3 and earlier , motion tweens were created by first establishing keyframes in the Timeline, then changing one or more of the properties of the instance, and then applying a motion tween between the two keyframes.

If you are more comfortable working with this older way of animating, you can do so by relying on the Classic Tween option. Flash applies a classic motion tween to your Timeline. The Motion Editor, however, is not available for classic tweens. Animating in 3D presents the added complication of a third z axis. When you choose the 3D Rotation or 3D Translation tool, you need to be aware of the Global Transform option at the bottom of the Tools panel.

The Global Transform option toggles between a global option button depressed and a local option button raised. Moving an object with the global option on makes the transformations relative to the global coordinate system, whereas moving an object with the local option on makes the transformations relative to itself. The movie title instance appears in your new layer in the keyframe at frame Flash motion tweens the change in the 3D rotation, so the title appears to swing in three dimensions.

However, to preview your animation as your audience will see it and to preview any nested animations within movie clip symbols, you should test your movie. Flash displays the SWF file in a new window with the exact Stage dimensions and plays your animation. Adobe Device Central is a separate application that allows you to preview your movie as it would appear and function on a mobile device. To exit Test Movie mode, click the Close window button.

Review Answers 1 A motion tween requires a symbol instance on the Stage and its own layer, which is called a Tween layer.

No other tween or drawing object can exist on the Tween layer. Keyframes are specific to each property, so that a motion tween can have keyframes for position that are different from keyframes for transparency. You can also choose the Convert Anchor Point tool and Subselection tool to pull out handles at the anchor points. The handles control the curvature of the path.

If needed, remove the previous lesson folder from your hard drive and copy the Lesson05 folder onto it. You can also morph—create organic changes in shapes—with shape tweens. The first project is an animation depicting a crane working at the seaside dock and a buoy floating along the gentle undulations of the water.

The other project is an animation showing an octopus curling one of its tentacles. Inverse kinematics is a mathematical way to calculate the different angles of a jointed object to achieve a certain configuration.

You can pose your object in a beginning keyframe, and then set a different pose at a later keyframe. Flash will use inverse kinematics to figure out the different angles for all the joints to get from the first pose to the next pose. You just focus on the overall poses. Defining the bones The first step to create articulated motion is to define the bones of your object.

The Bone tool tells Flash how a series of movie clip instances are connected. The connected movie clips are called the armature, and each movie clip is called a node. Lock all the other layers. Place the instance right above the rectangular crane base. Place the instance next to the tip of the cranearm1 movie clip instance. Place this instance next to the free tip of the first cranearm2 instance.

Place the instance so it hangs down from the last cranearm2 instance. Your movie clip instances are now in place and ready to be connected with bones. Release the mouse button. Your first bone is defined. Flash shows the bone as a skinny triangle with a round joint at its base and a round joint at its tip. Each bone is defined from the base of the first node to the base of the next node. For example, to build an arm, you would click on the shoulder side of the upper arm and drag it to the elbow side of the lower arm.

Your second bone is defined. Your third bone is defined. Note that the four movie clip instances, which are now connected with bones, have been separated to a new layer with a new icon and name.

The new layer is a Pose layer, which keeps your armatures separate from other objects on the Timeline such as graphics or motion tweens. A bone can actually have more than one child attached to it as well. For example, an armature of a puppet would have a pelvis connected to two thighs, which in turn are attached to two lower legs of their own. The pelvis is the parent, each thigh is a child, and the thighs are siblings to each other. As your armature becomes more complicated, you can use the Properties inspector to navigate up and down the hierarchy using these relationships.

When you select a bone in an armature, the top of the Properties inspector displays a series of arrows. You can click the arrows to move through the hierarchy and quickly select and view the properties of each node. If the parent bone is selected, you can click the down arrow to select the child. If a child bone is selected, you can click the up arrow to select its parent, or click the down arrow to select its own child if it has one. The sideways arrows navigate between sibling nodes.

Inserting poses Think of poses as keyframes for your armature. You have an initial pose for your crane in frame 1. You will insert two additional poses for the crane. The next pose will position the crane down as if it were picking something up from the ocean. The last pose will position the crane back up to lift up the object. A new pose is automatically inserted at frame As you drag the cranerope instance, notice how the entire armature moves along with it.

The bones keep all the different nodes connected. The crane animates, moving all its crane segments from one pose to the next. Isolating the rotation of individual nodes As you pull and push on the armature to create your pose, you may find it difficult to control the rotation of individual nodes because of their linkages. Holding down the Shift key as you move individual nodes will isolate their rotation. Click and drag the pose to move it to a different position along the Timeline.

The second node of the crane rotates, but the first node does not. The third node of the crane rotates, but the first and second nodes do not. Holding down the Shift key helps you isolate the rotations of the individual nodes so that you can position your poses exactly as you want them.

The crane now retracts by collapsing its different arm segments. If one of the nodes of your armature is slightly off, for example, you can use the Free Transform tool to rotate it or move it into a new position.

This does not change the bones, however. If you want to remove bones, simply click on the bone that you want to delete and press the Delete key on the keyboard. The selected bone and all the bones connected to it down the chain will be removed. You can then add new bones if desired. Many armatures in real life are constrained to certain angles of rotation. When working with armatures in Flash Professional CS5, you can choose to constrain the rotation for various joints or even constrain the translation movement of the various joints.

Constraining the rotation of joints By default, the rotation of joints have no constraints, which means they can rotate in a full circle, or degrees. If you only want a certain joint to rotate in a quarter circle arc, you would constrain the joint to 90 degrees.

Your armature now has only a single pose at frame 1. The bone becomes highlighted, indicating that it is selected. The angle indicator changes on the joint, showing the allowable angles.

In this example, the second segment of the crane can only bend downward or rise up to be level with the horizon. An angle indicator appears on the joint, showing the minimum and maximum allowable angles and the current position of the node. In this example, the third segment of the crane can only bend from a level position to a vertical position. Each joint in an armature can have its own rotation constraints.

However, in Flash Professional CS5, you can allow joints to actually slide in either the x horizontal or the y vertical direction, and set the limits on how far those joints can travel.

This will give it the capability to pick up any sort of cargo from the ocean and place it on the dock. The circle around the joint disappears, indicating that it can no longer rotate.

Arrows appear from the joint, indicating that the joint can travel in that direction. The arrows turn into straight lines, indicating that the translation is limited. The bars indicate how much translation in the x direction the first bone can do. Changing Joint Speed Joint speed refers to the stickiness, or stiffness, of a joint. A joint with a low joint speed value will be sluggish. A joint with a high joint speed value will be more responsive.

You can set the joint speed value for any selected joint in the Properties inspector. The joint speed is apparent when you drag the very end of an armature. If there are slow joints higher up on the armature chain, those particular joints will be less responsive and will rotate to a lesser degree than the others.

To change the joint speed, click on a bone to select it. The constraints on joint rotation and joint translation impose limits on the poses that help you create more realistic animations. Inverse Kinematics with Shapes The crane is an armature made with various movie clip symbols. You can also create armatures with shapes, which are useful for animating objects without obvious joints and segments but can still have an articulated motion.

For example, the arms of an octopus have no actual joints, but you can add bones to a smooth tentacle to animate its undulating motion. The file contains an illustration of an octopus. One arm is separated on its own layer called arm1. The contents of the arm1 layer are separated to a new Pose layer.

The second bone is defined. Many of the same drawing and editing tools in the Tools panel, such as the Paint Bucket, the Ink Bottle, and the Subselection tools, are available to you to edit the fill, the stroke, or the contours. The fill color of the tentacle changes. The outline of the tentacle changes color. The anchor points and the control handles appear around the contour of the shape.

Delete points on the contour of the shape with the Delete Anchor Point tool. However, the location of the joints within the shape can only be edited when you have a single pose for your armature. After your armature has been repositioned in later frames of the Pose layer, changes to the bone structure cannot be made. Use the Selection tool if you want to move the entire armature to a different location but keep the bone structure unchanged.

Choose the Selection tool and click on the bone you want to delete. Press the Delete key to remove the selected bone; all the child bones will be removed as well. Add new bones by choosing the Bone tool and clicking on the armature. The points along the tip of the tentacle, for example, are mapped to the very last bone, whereas the points farther up the tentacle are mapped to the bones farther up the tentacle.

Hence, where the bones rotate, the shape follows. You can edit the connections between the bones and their control points with the Bind tool. The Bind tool is hidden under the Bone tool. The Bind tool displays which control points are connected to which bones and lets you break those connections and make new ones.

Choose the Bind tool and click on any bone in the shape. The selected bone is highlighted in red, and all the connected control points on the shape are highlighted in yellow.

Drag a connection line between the bone and the control point. In the following figure, a line is being dragged from the selected bone to a point on the left to make the association. The selected control point is highlighted in red, and all the connected bones are highlighted in yellow. In this figure, the red highlighted point is associated with the first bone.

Drag a connection line between the control point and the bone. In the following figure, another control point farther down the tentacle is being associated with the first bone. You can also choose different viewing options for your armature to suit your working style. Authortime and runtime armatures Authortime armatures are those that you pose along the Timeline and play as straightforward animations.

Runtime armatures refer to armatures that are interactive and allow the user to move your armature. You can make any of your armatures—whether they are made with a series of movie clips such as the crane or made with a shape such as the octopus tentacle—into an authortime or a runtime armature.

Runtime armatures, however, are restricted to armatures that only have a single pose. The armature becomes a runtime armature, allowing the user to directly manipulate the octopus tentacle. The first frame of the Pose layer displays the armature icon to indicate that the runtime option is selected and no additional poses can be added. The user can click and drag the tentacle and interactively move it on the Stage. Controlling easing The Motion Editor and its sophisticated controls for easing cannot be used with armatures.

However, there are a few standard eases available from the Properties inspector that you can apply to your armatures. Easing can make your armature move with a sense of gravity due to acceleration or deceleration of its motion. The armature becomes an authortime armature again. Frames are inserted in all the layers, giving you room on the Timeline to create additional poses for the tentacle.

A new pose is inserted in frame 40 for the tentacle armature. The variations of Simple eases from Slow to Fastest represent the severity of the ease. They represent the same curvatures provided in the Motion Editor for motion tweens. The Strength represents the direction of the ease. A negative value is an ease-in and a positive value is an ease-out.

The tentacle curls up, easing out of its motion gradually. Import a design document You can import a design document from the Flash Catalyst Welcome screen. You can break these objects into multiple layers in Flash Catalyst by ungrouping them. The Import dialog box appears.

Before importing, make sure that all artwork appears inside the artboard or canvas. You can reposition these items after importing them into Flash Catalyst. The Illustrator Import Options dialog box appears. Fidelity refers to how well the imported artwork matches the original. If your Illustrator file includes multiple instances of the same symbol, then your Flash Catalyst document will include multiple instances of the same optimized graphic.

In Flash Catalyst, it is a best practice to use one instance of an object and then share that object to other states. You can remove all but one instance of the optimized graphic, share the same instance to other states, and then apply different properties in each state.

Illustrator includes a built-in collection of graphics, called symbols. You can also create new symbols and add them to the collection. Some people think that Illustrator symbols import to Flash Catalyst as reusable components in the library. Illustrator symbols import as Optimized Graphics. Flash Catalyst informs you if the document includes a large number of bitmap images, large bitmaps, or a large number of vector paths.

To improve performance, you can optimize these items. The project is saved. In the next task, you will import an image that was missing in the design document. You will then place that image in the artboard. Preparing, Importing, and Placing Artwork Import fidelity options The Illustrator import fidelity options control how Flash Catalyst handles filters, gradients, text, and blends.

The Photoshop import fidelity options control how Flash Catalyst imports image, shape, and text layers. In the Fidelity Options section of the dialog box, you can open the pop-up menus and choose import fidelity options. The options in the menus are similar for Photoshop and Illustrator. Editable text may not look exactly the same in Flash Catalyst as it did in Photoshop or Illustrator.

Expand AI only : Converts an object with a filter into a set of vectors or bitmaps that approximate the original appearance in Illustrator. For example, expanding a drop shadow filter on a rectangle might create an image of the drop shadow behind the original rectangle.

However, instead of applying that mask to a bitmap that inherits the same dimensions as the original Photoshop file, this option crops the resulting bitmap to the boundary of the mask.

Automatic conversion AI only : Flash Catalyst chooses whether to keep a given item editable, rasterize it, or convert it to vectors. The result is based on various heuristics such as the complexity of the item. For example, a simple blend might be expanded to vectors, whereas a complex blend that would produce a lot of paths would be rasterized.

You can select and deselect layers to import, regardless of their visibility in Photoshop. You can also choose to import specific Photoshop Layer Comps, if they exist in the document. The selected layers import to the current page state in Flash Catalyst.

No problem. Just leave a placeholder and import those images separately. Your Flash Catalyst project should still be open from the previous task. Select man. When you import a single image, it appears in the artboard and a master copy is added to the project library.

A single imported image is added to the artboard and the project library. The image was added as a new object in the target layer. You can position objects by dragging, nudging using the Arrow keys , or by choosing alignment commands in the Modify menu. For more precise positioning, you can use the arrow keys on your keyboard to nudge the image up, down, left, or right.

This image is supposed to be aligned in the bottom-right corner of the artboard. To do this, you can use the Align commands in the Modify menu. The image is now perfectly aligned in the bottom-right corner of the artboard.

But even after importing graphics into your Flash Catalyst project, you can use the optimization options in the Heads-Up Display HUD or the Modify menu to apply settings to individual images. To edit the parts of a complex vector graphic that has been optimized, you must first break it apart. Optimize Vector Graphics compiles a selected graphic into a low-level Flash object that displays more quickly in Flash Catalyst and at runtime.

When you optimize a vector graphic, a new optimized graphic is added to the Library panel in the Optimized Graphics category. The new optimized graphic replaces your original graphic in the artboard.

Rasterize converts a static vector graphic or text into a bitmap image. Use this option to optimize static vector graphics or text. Compress adds compression to a bitmap image.

It places a smaller lower-quality copy of the bitmap image in the Library panel. When you compress an image with transparency, the transparency is lost. Convert To Linked Image converts an embedded image to a linked image. To reduce the size of your application, you can link images. The gray border at the top of the artboard is made up of a rectangle shape and several small paths used to create the horizontal stripes.

The Top Graphic layer includes two objects: Group and Rectangle. Every stripe in the graphic is a separate path. The parts of the Top Graphic are combined into a single optimized graphic named Graphic1. The project closes and you return to the Flash Catalyst Welcome screen.

Flash Catalyst supports both vector and bitmap graphics, making it a very powerful design tool. For example, the artwork you import may include both vector and bitmap graphics. Vector graphics are mathematical equations describing the distance and angle between two points. Additional information, such as the color and thickness of a line stroke and the contents of a path fill can also be set. Vectors can be sized up or down without losing image quality.

Bitmap raster images are made of a specific number of pixels mapped to a grid. Each pixel has a specific location and color value.

An image with more pixels has a higher resolution and a larger file size. Another example of the difference between vector and bitmap is that a photograph can accurately depict a physical scene in a single image layer. To produce similar realism in a vector illustration could require hundreds of vector shapes stacked upon each other. This is not to suggest that bitmaps are better than vectors, or vice versa; both of these main graphic types are integral to visual communication and designing in Flash Catalyst.

The illustrations at right are examples of vector and bitmap graphics. On the left is an image created with many paths. The image on the right is a bitmap photograph. There is no direct import option for layered Fireworks PNG documents. This content includes the bitmap images and other media video, sound, Adobe Flash movies, and more that you import. You can import assets individually, as a group, or as a library package.

The library also stores the components that you create—things like navigation buttons, scrolling panels, and lists of data. Quickly apply global changes across your entire application. Swap images with a single click. Share your entire collection of project assets with other designers and Flex developers by using Flash Catalyst Library Packages. Components are the building blocks of your project. Examples of components include buttons, scroll bars, sliders, check boxes, panels, and scrolling lists.

How do assets get into the Library panel? If the design document includes Illustrator symbols, the symbols are converted to optimized graphics and stored in the Optimized Graphics category. Library assets are divided into categories, such as Components, Images, Media, and Optimized Graphics.

These categories can be expanded or collapsed by clicking the small triangle to the left of the category name. The Images category includes bitmap images that were imported to the project. When you import a design document, its images are grouped together in a subfolder. Library panel only displays categories for the types of assets that exist in the project. For example, if your project has no media, the Media category does not exist. After adding media, such as a video file, the Media category appears.

Once added, the category remains in the Library panel, even after deleting all its contents. This project now includes three types of assets: Images, Media, and Optimized graphics. Click Open. The images are added to the Library panel, but not the artboard. This was the single bitmap image that you imported in Lesson 2. In the Common category of the Properties panel, notice that the source of this image is man. There is a direct link between instances in the artboard and the source assets in the library.

The Properties panel includes a link to the source asset in the Library panel. The source in the Properties panel below changes to Graphic2. In the Library panel shown at right , the new optimized version of this image appears in the Optimized Graphics category.

A preview of the image appears at the top of the Library panel. To view a SWF animation, you must add it to the application and run the project in a browser or publish the application.

Expand the src and assets folders. Expand the graphics, images, and media folders. Deleting assets from the project Every project entails a little trial and error. Removing unwanted assets is easy.

Just delete them in the Library panel. However, you can delete the optimized graphic or compressed copy of the image. This includes hidden pages and component states. A message informs you that removing this asset will remove the asset and all references to it.

Deleting an object in the Library panel is a fast way to remove every instance of an object from the application. The image vanishes from the Library panel, and from the artboard. However, pressing Delete removes objects that are selected in the artboard. If you have an object selected and you accidentally press the Delete key, you will remove the selected object from the current state only.

The Compress Image dialog box appears. A compressed copy of the image named man1. The compressed file has a smaller file size. Renaming project assets Just imagine if everyone you worked with were named Bob. I suppose you could start calling people Bob1, Bob2, and so on. An easy way to avoid this is to assign descriptive names to project assets in the Library panel. The image name is highlighted. Best practice is to give a descriptive name to each object in the Layers panel. Renaming an instance of an item in the Layers panel does not affect the original item definition name in the Library panel.

You simply drag the item from the Library panel and position it in the artboard. The source of this image is the man. The Select Asset dialog box opens with a list of assets in the Library panel. You can replace this image with another image in the library. You can also use the Import button to replace the object with a new image that you import now. If you copy and paste a vector graphic into the artboard, a new object is added to the Layers panel but not the Library panel.

You have just replaced the image with the smaller, compressed copy of the same picture, as indicated in the Properties panel. Export a library package 1 In the Welcome screen, choose Open Project. This opens a copy of the completed Banner project. The project includes over 90 assets. To recreate these in another project would be a huge task.

But exporting the entire library is easy. You can also tell Flash Catalyst to store images outside the published application and establish a link to these files. The images are loaded by the application at runtime. Linking to large images is one way to reduce the size of the published application. It can also make updating or replacing images easier without needing to republish the application.

To convert an image from embedded to linked, right-click the image in the Library panel and choose Convert to Linked Image. The Linked Image icon appears, to show which images are linked. Linked Image icon To embed a linked image, right-click the image in the Library panel and choose Embed Image. The New Project dialog box appears. Normally you would match the project dimensions to the artwork, but for now just accept the default project settings.

A new project opens. Notice the Library panel is empty. The entire library package is added to the project. The assets appear in the Library panel.

No files are deleted. To optimize the drawing, select it in the artboard. You can also create components and optimize artwork. You can use this link to swap the image for another image. Linking to images allows you to update the images later without republishing the application. It provides an organized structure for viewing and managing every object in the artboard. With the click of a button, you direct which of those objects are present and visible in the current page or component state.

Using the Layers panel, you have complete control over every object in every state, including visibility and stacking order. The Layers panel shows every object in the application using a collection of stacked rows. Rows can represent layers, sublayers, objects images, text, components, and so on , and groups grouped objects. The target layer is always shaded light blue. Any objects that you add to the artboard are placed in the target layer.

To select a target layer, just click in its row. A layer must be unlocked and visible to act as the target layer. Expand and collapse layers The Layers panel lets you organize your project using a hierarchy of related objects. Items are nested together into collapsible layers and groups for quick access and easy viewing.

The original layer structure is preserved in Flash Catalyst. The application has ten top-level layers layer folders , and each layer includes several objects. This project began with one new page state. Right now, all the artwork for this application is stacked together in one page state. This is a toggle button used to expand and collapse a layer.

The page1:Feature layer holds the artwork for Page1 of the interactive banner application. It includes several objects, including one group and one sublayer. You can change layer names to anything you want, as long as they clearly describe their contents.

Group Sublayer 4 Collapse the page1:Feature layer. When an object is present, it can be made visible or hidden using the Layers panel. When a parent layer or group is hidden, its children are hidden automatically.

The object is not present in the current state, but it does exist in one or more other states of the application. You can tell that its contents are hidden because there is no eyeball icon beside the layer name.

But notice that the eyeballs for each of its objects are dimmed. A dimmed eyeball means the object is turned on, but its parent layer is currently hidden. This layer is hidden. These layers are temporarily hidden because their parent layer is turned off.

The artwork for Page2 becomes visible in the artboard and the eyeball icon appears beside the layer name. Once again, the artwork for Page2 is hidden and you see the artwork for Page1.

A padlock icon indicates when an object is locked. The Top Graphic horizontal gray bar is selected in the artboard and in the Layers panel. Clicking an object, layer, or group in the Layers panel selects all of its contents in the artboard, as long as the objects are unlocked. Locked Unlocked 2 Click the Top Btns layer. Nothing happens because the Top Btns layer is locked, as indicated by its padlock icon.

This time the layer is selected, along with all of its content in the artboard. Clicking layers and groups is a quick way to select multiple related objects. The padlock icon returns and the objects in the artboard are deselected automatically. Locked objects cannot be selected or moved. The button you clicked is not selected, but the artwork directly below it the Top Graphic is. This is because the Top Btns layer is locked.

Flash Catalyst selects the top-most unlocked and visible object. This makes their parts more manageable in Flash Catalyst. You can also group related objects after importing them. This is helpful when your design includes a large collection of parts that make up a single graphic. For example a vector drawing may include hundreds of smaller paths. Grouping them makes them a lot easier to manage in the Layers panel. A range of eight objects is selected in the artboard and in the Layers panel. The selected objects are combined into a single Group.

This is also true when you add new images or components. Each new object in the Layers panel begins with a generic name, such as Image, Button, Scroll Panel, and so on. This can be a little confusing unless you take the time to assign more descriptive names. Managing Layers The name is highlighted in the Layers panel.

Changing names in the Layers panel does not affect the names of assets in the Library panel, and vice versa. The group is renamed. For example, an illustration may include hundreds of individual paths that are grouped to form a single image. In addition, any text that was turned into vector outlines will import with a separate path for each individual character. Optimizing complex groups of artwork also makes them easier to manage in the Layers panel.

In the artboard, it appears that you have a single object selected. If you look in the Layers panel, you see a small blue square in the page1:Feature layer. A small blue square means the row includes a selected object. You can tell by the dark blue shading that the Group row is selected. Each character is a separate path. The vector paths are turned into a single object in the Layers panel named Graphic1.

To add a new top-level layer folder, click the Create New Layer icon. To add a new sublayer folder, select an existing top-level layer and click the Create New Sublayer icon.

Deleting layers is just as easy. Select the layer folder and click the Delete icon. When you add or delete layer folders, the changes appear in every page state or component state when editing a component. A new top-level layer folder is added at the top of the Layers panel. New layers are named Layer1, Layer2, and so on.

You can rename this layer folder, just like any other object in the Layers panel. If this application had more than one page, the layer would be removed from all pages. If this layer contained any objects, those objects would also be removed from every page. Stacking artwork using layers To change the stacking order of objects in the application, you can drag rows up or down in the Layers panel. You can also change the stacking order of objects within a layer or group.

A gray line indicates the new location for the row when you release the mouse. Now look at the artboard again. The orange text appears below the semitransparent gray background and is barely visible. To change the stacking order of objects within the same layer or group, you can drag rows in the Layers panel or use the Arrange commands in the Modify menu.

The Transparency BG row moves to the top of the stack, but only within its parent group. You can tell by looking in the artboard that the stacking order of these objects is important to the integrity of the design. Each time you choose Send Forward or Send Backward the object moves up or down one row. The Transparent BG layer moves back to the bottom of the stack, where it belongs.

There is one last change that needs to be made to the arrangement of the objects in the page1:Feature layer. The Image row, at the top of the stack, belongs inside the Sample Images sublayer folder. This causes the Sample Images row to expand automatically. When it does, drag the Image row above the 2 wheels image row and release the mouse button. The Image row is now inside the Sample Images sublayer folder. What happens to the image in the Library panel if you rename this object in the Layers panel?

When you add a new object to the artboard, either by dragging from the Library panel, by importing, by drawing shapes, or by adding new text, the new object is placed in the target layer. Rows can represent layers, sublayers, objects images, vector drawings, text, media, and components , and groups grouped objects. When you add new objects in Flash Catalyst, these new objects begin with generic names, such as Group and Image.

Once you do this, it becomes a reusable optimized graphic in the Library panel. You can also change the stacking order of objects within a layer or group using the Arrange commands in the Modify menu. They pack lots of dynamic content into very limited screen space.

This is done by carefully organizing your application into just a few meaningful pages or views. In Flash Catalyst, this organization begins with pages and states. As a user moves between pages, they are viewing different page states. As someone interacts with a component, they see the different states of that component.

In one state a menu appears collapsed, and then in another state the same menu expands to reveal more options. These states cannot be duplicated, deleted, or renamed.

On the other hand, custom components are created and edited much like page states. Most rich Internet applications present information on more than one page or screen, and each page can include various interactive components. Examples of interactive components are navigation menus, scrollable panels, buttons, multimedia controls, and so on. In Flash Catalyst, there are two types of states. Page states usually represent the topmost level in the application hierarchy.

It shows layers for the main application and the components you are editing. In this lesson, you will begin to develop the page states for an interactive banner, but the same principles apply when creating and modifying the states of a custom component.

Less is more Flash Catalyst applications can have up to 20 page states or 20 unique states in a custom component. That may seem like a limitation, but adding too many pages to an application can slow performance, not to mention that it makes the application difficult for users to navigate. When it comes to interface design, keep it simple.

In an application, 20 pages are more than enough. Fewer is even better. Instead of creating a separate page for every unique view, you can encapsulate content into related subcategories using custom components that present the right information at just the right time. Use menus that collapse and expand, scrolling lists, or panels that flip to reveal more information.

You can even nest components inside other components to create more depth and structure in the application without adding more application pages. Duplicating page and component states ensures that common objects maintain their exact position as you move from one page or state to the next. This works to your advantage, because you can quickly duplicate Page1, and then show or hide the same artwork to create new pages. The artwork for this application was imported from Adobe Illustrator and is stacked together on Page1.

Flash Catalyst creates an exact duplicate of Page1. The new state is named Page2. You are creating new states that include the same objects. For example, if you have a top-level layer folder for each page, you can name the pages to match those folders. The page names now relate to the layer folders used to organize their artwork.

If you look in the Layers panel, you can see which layers are visible on this page. This is the correct artwork for the Feature page. This is the correct artwork for the Design page. For example, if you group objects or convert objects to components, the change applies to all states.

If you edit a component, you edit the component definition in the project library. The changes apply to all instances of the component in all states. As you move from one state to the next, the rows in the Layers panel are identical, although some objects may exist and be visible in one state, but not in others.

An object can be present in multiple states, and that object can have a completely different set of properties in each state, such as size, position, rotation, color, and opacity.

Once you position and modify an object to your liking, you can quickly share that object to other states. This technique makes it possible to create smooth transitions from one state to the next. For example, you can create the effect of an object fading in or out or morphing from one shape or position to another. Select the states to which you want to share the object. The object is made present and visible in the current state.

Choose the state from which you want the object removed. You can also view the state from which you want to remove the object, select the object in the artboard, and press Delete. For example, when you begin a new blank project it opens with a blank page. Add a blank page state New blank states are always added after the last state. The artboard appears to be completely blank.

A blank artboard can mean that every object in the current state is hidden, or that no objects are present in the current state. In the case of a new blank state, there are no objects present. It is truly blank. In a new blank state, every layer folder is made visible by default.

All layers are visible, but the objects within those layers are not present in the current state. When an object is present somewhere in the application in another state , but does not exist in the current state, it appears dimmed in the Layers panel. Each time you add an item from the Library panel, you create a new instance.

The eyeball icon appears for this object. You have just shared or copied the graphic to the current state, as seen in the artboard. Browse to the Lesson05 folder, select garden. Click OK to accept the default import options.

Layered artwork from the Photoshop design document is added to the application. The new artwork is placed inside the target layer and is visible in the current page state. This artwork is only present in the new page state. You can do this by clicking the graphic in the artboard, or by clicking the TopGraphic layer in the Layers panel.

The TopGraphic object appears dimmed in the Layers panel. Pressing the Delete key removes selected objects from the current state. The asset can be added again from the Library panel. The TopGraphic object still exists in these states. A menu appears with a list of every page state in the application. The image is removed from the artboard. Because this image only existed in the Gardens page, it no longer exists anywhere in the application and its row is deleted from the Layers panel.

This selects every remaining object in the Gardens page. When you delete an object in the Layers panel by clicking the Delete icon , the object is removed from every state in the application. The Gardens page is removed from the application. Review answers 1 You can quickly create a new page or component state based on an existing page. Whenever possible, consider adding new views or screens by creating custom components. You can even create components that exist within other components.

You can drag assets from the Library panel, import new assets, or share assets from another state in the application. These and other interactive elements are the building blocks of applications. Begin with ready-to-use wireframe components, or convert your custom artwork to one of several built-in components, and then add interactivity like page navigation, UI controls, and links. Components Flash Catalyst provides a collection of components with built-in states and behaviors, such as the up, over, down, and disabled states of a simple button.

You can even create components that include other components. This is a good start to learning Flash Professional, with concise lessons and basic examples. Just wish Adobe would include this level of tutorial with the product, and not as an optional update.

Love these books, it’s a great buy for beginners into CS products, would like to see an additional series for professionals with in-depth tutorials etc. Book is value for money and it does what it suppose to. Mine came with a CD Rom as specified in the product area and the chapters are easy to follow. Recommend it to anyone.

I found the instructions very difficult to follow. In many cases, I couldn’t carry out the instruction as the icon or menu item didn’t exist. It took time to find the proper procedure.

You must have a good sound knowledge of computer applications and be interested to take the time to read and go through the book. See all reviews. Your recently viewed items and featured recommendations. Back to top. Get to Know Us. Connect with Us. Make Money with Us. Let Us Help You. Audible Download Audio Books. DPReview Digital Photography. Shopbop Designer Fashion Brands. Amazon Prime Music 90 million songs, ad-free Over 15 million podcast episodes.

❿
 
 

❿