Applying Advanced Animation - Flash Professional CC - Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Book VII

Flash Professional CC

Chapter 4: Applying Advanced Animation

In This Chapter

image Making zoom and fade effects

image Creating a custom motion path

image Creating fade-outs and fade-ins

image Copying and pasting motion

image Creating motion presets

image Affecting rate of speed with easing

image Morphing graphics with shape tweens

image Masking artwork and animation

image Previewing a movie

With motion and shape tweens, creative animation possibilities are limited only by your imagination. You no doubt want to explore what’s possible, and in this chapter, you get started with some popular animation effects, such as fades and transformations.

Creating Transformations

Some of the most common effects — such as zoom, flip, lean, and spin — are all different types of transformations, or changes to a symbol’s dimensions, rotation, or skew. You can perform transformations on a symbol from the Property inspector, Free Transform tool, Transform panel, or Modify menu and combine transformations for many animation possibilities.

Follow these steps to create a zoom-in effect:

1. On the first frame of a new layer, use one of the Shape tools to create an interesting shape on the stage.

2. With the shape selected, choose ModifyConvert to Symbol.

The Convert to Symbol dialog box appears.

3. Enter a name for the symbol in the Name text box, (for example, type Zoom Shape), select Graphic from the Type drop-down list, and click OK.

The symbol is added to your library and is ready to be used as part of a motion tween.

4. Select the first keyframe; right-click and choose Create Motion Tween from the contextual menu that appears.

A new tween span is created on the layer. If you’re working with the default frame rate of 24 frames per second (fps), the tween span should be exactly 24 frames long, as shown in Figure 4-1.

imageTo perform Steps 2 through 4 in a single step, right-click the shape you draw in Step 1 and choose Create Motion Tween from the context menu. Flash converts your shape into a symbol and creates the motion tween automatically.

5. Click the frame ruler above the Timeline at Frame 24 to reposition the playhead at this point.

6. Choose WindowTransform to open the Transform panel. From the panel, enter 300% in the Scale Width and Scale Height text boxes.

The new keyframe that’s created automatically at Frame 24 within the tween span marks the change in scaling you’ve just made.

7. Press Enter or Return to play your movie.

The instance slowly increases in scale, creating the illusion that you’re zooming in closer to the object.

image

Figure 4-1: Create a motion tween span for your new symbol and increase its scale over the course of 24 frames.

The zoom-out effect is identical to the animation you just created — but in reverse. Rather than start with the smaller symbol instance, you start with the larger one and gradually pull away by tweening into the smaller one. Rather than create a new animation, you can copy and reverse the existing one by using a few handy shortcuts from the Timeline menu, which appears when you right-click (Windows) or Control-click (Mac) a frame.

To continue the existing tween and reverse the zoom effect, follow these steps:

1. On the same layer as the existing tween, right-click Frame 48, choose Insert Frame to add frames, and extend the current “zoom-in” tween.

imageInserting frames after a motion tween span is an effective way of extending that tween without shifting existing keyframes.

2. Double-click the motion tween span to select the entire span, right-click, and choose Copy Frames.

3. Select the next empty frame on the same layer.

If your tween span is 48 frames long, it’s Frame 49.

4. Right-click and choose Paste Frames from the contextual menu that appears.

A copy of the tween span is pasted back-to-back with the existing one.

5. Right-click the new tween span and choose Reverse Keyframes from the contextual menu that appears.

6. Click Frame 1 and then press Enter or Return to play back your animation.

The zoom-in effect plays, followed immediately by the exact reverse (zoom-out).

imageAnother way to complete this process is by copying and pasting the properties of a keyframe to a new location on the tween span. Instead of copying frames for Step 2, select Frame 1 and choose Copy Properties from the context menu (make sure you select the frame with the Selection tool, and not with the frame-resize tool). Then select the final frame on the tween span, right-click, and choose Paste Properties from the context menu. You can now resize the entire animation by dragging the end of the tween span.

Joining Motion

The beauty of the new tween engine is that you no longer need to create several tweens or keyframes to have lots of different motion changes. You can create several different movements, transformations, and color effects sequentially within a single tween span.

You may, on occasion, end up with two or more tween spans back-to-back, especially if you copy and paste tween spans, as described in the preceding section. You can, however, easily join tweens into a single span for easier editing and tweaking.

Follow these steps to join multiple tween spans:

1. While holding down the Shift key, click and select two or more consecutive tween spans on a single layer.

2. Right-click (Windows) or Control-click (Mac) any selected tween, and then choose Join Motions from the contextual menu that appears.

The tween spans are joined as one. You can now edit, move, and stretch the tween span as a whole directly on the Timeline.

imageYou split motion at any time by choosing Split Motion from the Timeline’s contextual menu. Select a single frame, where you want the motion to split, and choose Split Motion from the same context menu you used in Step 2.

Creating Fade-Ins and Fade-Outs

Fade effects are quite popular because they can add a cinematic feel and smooth transitions between images, text, and graphics. You can see fades used in familiar media, such as photo slide shows or film, where images or scenes fade from one to another.

In Flash, a fade is a type of basic color transformation that you can apply to any symbol by modifying its transparency, or alpha.

To create a fade-in, follow these steps:

1. Create a new Flash document. Select the Type tool and create some text on the stage.

Use no more than two words with a font size of 24 points. You can set the type size and style from the Property inspector’s Character options when the Type tool is active, so make sure that the panel is visible by choosing Window⇒Properties.

2. Select the type with the Selection tool and convert it to a graphic symbol by choosing ModifyConvert to Symbol. Name the symbol and click OK.

This step adds the type to the library as a symbol and makes it available for color transformation tweening. You do not need to perform this step if you are animating position or size.

3. Right-click (Windows) or Control-click (Mac) the first keyframe of the current layer and choose Create Motion Tween from the contextual menu that appears.

A new tween span is created, and the playhead moves ahead to the end of the tween span.

4. Grab the playhead and drag it back to Frame 1. Using the Selection tool, click the new symbol once to select it.

5. In the Property inspector’s Color Effects section, select Alpha from the Style drop-down list.

6. Use the slider or text box to set the alpha of the symbol instance to 0 percent.

The symbol becomes fully transparent and seems to disappear. (Don’t worry: It’s still there.)

7. Click Frame 24 in the Timeline; with the Selection tool, select the symbol.

8. In the Property inspector, select Alpha from the Style drop-down list and then use the slider or text box to set the alpha to 100 percent.

9. Press Enter or Return to play the movie.

The text appears to fade in from nowhere to the stage.

Much like the zoom-out effect, the fade-out is simply the reverse of a fade-in. You can use the Timeline menu’s Reverse Frames command to turn a fade-in into a fade-out. Follow these steps:

1. Select the tween span that contains your fade-in.

2. Right-click (Windows) or Control-click (Mac) anywhere on the selected frames to open the contextual menu, and then choose Reverse Keyframes.

This action reverses the animation so that the symbol starts out fully opaque.

3. Press Enter or Return to play the movie.

The text you created fades out on the stage.

imageTry duplicating and then reversing the fade-in tween to have the text fade in and then out.

Copying and Pasting Motion

A recent addition to Flash is its capability to copy the behavior of a motion tween that you then paste into a completely different symbol instance. This technique is handy if you need to have multiple objects follow exactly the same animation behavior, such as birds of different colors and sizes all following the same flight pattern.

To copy and paste motion, you need an existing tween to copy from and then a symbol instance on a different layer to copy to. The following steps show you how to copy animation behavior from one tween that you can paste and apply to a different symbol afterward:

1. Select an existing tween span on the Timeline, right-click (Windows) or Control-click (Mac), and then choose Copy Motion from the contextual menu that appears.

2. On a new layer, place an instance of a symbol from your library.

It can be the same symbol you’ve already tweened or a completely different symbol.

3. Right-click (Windows) or Control-click (Mac) the first keyframe of the new layer and choose Paste Motion from the contextual menu that appears.

A new tween span is created.

4. Press Enter or Return to play your movie.

The new symbol instance animates in the same way as the original object from which its motion was copied.

imageYou can work with two instances of the same symbol, but the beauty of this feature is that you can copy and paste animation between completely nonrelated symbol instances. You can also paste motion between symbol instances that have drastically different size, color, and rotation properties.

Creating and Using Motion Presets

In the earlier section Copying and Pasting Motion, you see the power of duplicating animation behavior across a number of symbols. However, what happens if you want to reuse animation behavior across several movies, or later after you closed and reopened Flash?

Motion Presets take the concept of reusing animation behavior to a new level, by allowing you to take a “snapshot” of an animation’s behavior and save it as a handy preset that can be applied anywhere and at any time for any project. As with Copy and Paste Motion, Motion Presets storeproperties, not specific symbols.

You can use the Motion Presets panel to save, manage, and apply Motion Presets. There are many Motion Presets that install with Flash, such as bounce, fade, or 3D rotations, or you can create custom presets of your own. Motion Presets are especially useful if you’ve taken the time to design a particularly complex animation sequence, such as a bouncing ball complete with eases and loss of inertia, and want to use it within another project later.

imageMotion Presets are saved within the application, not the project file, so you can access all your created presets from within any project.

Creating a Motion Preset

To create a Motion Preset, follow these steps:

1. Open the Motion Presets panel by choosing WindowMotion Presets.

2. Select the tween span you want to save as a preset.

You can generally select the entire span by clicking it once directly in the Timeline.

3. In the lower-left corner of the Motion Presets panel, click the Save Selection As Preset icon.

4. When the Save Preset As dialog box appears, enter a preset name in the text field, as shown in Figure 4-2, and then click OK.

The new preset appears in your Motion Presets panel.

image

Figure 4-2: Select a tween span on the Timeline and create a new motion preset.

Applying a Motion Preset

After you’ve created a Motion Preset, you can apply the animation behavior stored in that preset to any symbols on the stage. To apply a Motion Preset, follow these steps:

1. Click to select on the Timeline a layer containing a symbol instance that you want to apply a motion preset to.

For the best result, make sure that the layer has no other animation on it and that it contains a single instance of a symbol.

2. If the Motion Presets panel isn’t already visible in your workspace, open it by choosing WindowMotion Presets.

3. Locate the Motion Preset you want to apply.

If you have none of your own presets, you can choose from a number of precreated presets in the Default Presets folder.

4. Click to select the preset you want to apply, and click the Apply button in the lower-right corner of the Motion Presets panel, as shown in Figure 4-3.

Your selected layer and symbol now have a new animation applied.

5. Press Enter (Windows) or Return (Mac) to preview the animation on the Timeline.

image

Figure 4-3: Select a symbol on the stage and apply a Motion Preset to animate it.

imageThough you should target an existing symbol instance on the stage with Motion Presets, if you attempt to apply a Motion Preset to raw artwork, Flash converts the selected artwork to a symbol on the fly.

Animating along a Path with Motion Guides

Many of the motion tweens described earlier in this chapter involve simple animation from one location to another. For some tweens, you’ll want to have your symbol follow a more elaborate path of motion, such as a race car following a track. In these cases, you can give your tween a specific path to follow by creating a custom motion path.

Starting in Flash CS4, experienced Flash users may have noticed the absence of the Add Motion Guide button below the Timeline. Because the animation engine was completely revised, the process of creating motion guides no longer requires a motion guide on a separate layer. You can now modify or replace the motion paths that are created automatically with each new tween span.

Motion paths are especially useful when you work with a shape that has an obvious orientation (or direction, such as the nose of a car or an airplane). For this reason, make sure to use a symbol with an obvious orientation (such as a triangle or a character) as your tweened object in these steps:

1. Create a new Flash document and create some interesting graphics on the stage.

2. Using the Selection tool, select the graphics you created and press the F8 shortcut key to convert the graphic to a symbol.

3. When the Convert to Symbol dialog box appears, select Graphic from the Type drop-down list and enter a name for the symbol in the Name text box.

4. Create another new layer on the Timeline, select the Pencil tool in the Tools panel, and select a stroke color from the Property inspector on the right.

imageMake sure that Object Drawing mode is turned off. This button appears at the bottom of the Tools panel when the Pencil tool is selected.

5. Draw a path on the stage with the Pencil tool, as shown in Figure 4-4.

image

Figure 4-4: Use the Pencil tool to create a unique path for your symbol to follow.

6. Switch to the Selection tool and double-click the path you just created.

7. Choose EditCut to remove the path from the stage temporarily.

8. Right-click (Windows) or Control-click (Mac) Frame 1 of the layer that contains your symbol and choose Create Motion Tween from the contextual menu that appears.

A new tween span is created for your triangle symbol.

9. Choose EditPaste in Place to paste the path you created earlier.

Flash automatically converts the path to a motion path, and your symbol snaps to the path, as shown in Figure 4-5.

image

Figure 4-5: Pasting a complete path to a tween layer converts it to a motion path.

10. Press Enter or Return to play your movie.

The symbol follows the path you created. Next, you can tweak the tween so that the symbol follows the exact orientation of the path.

11. Select Frame 1 of your tween span; in the Property inspector, locate and select the Orient to Path check box, which is located under the Rotation options.

12. Press Enter or Return again to play your movie.

The symbol changes rotation to match the direction of the path.

Starting off your symbol on the right foot often helps produce better results when using Orient to Path. If the symbol orientation isn’t what you expect, try rotating the symbol in the right direction at both the beginning and ending frames of the tween span.

imageWatch out for paths that overlap themselves — the results may not be what you expect.


Snap to it: The importance of snapping

Snapping, which is an essential part of your workflow, can often make positioning items on the stage much easier and more accurate. Snapping is similar to turning on a magnet: When you drag an object, it jumps to the closest guide, path, or object that it finds on the stage, depending on which type of snapping you’ve enabled. Snapping is useful for lining up objects uniformly, for positioning artwork on a ruler guide, and especially for positioning a symbol at the beginning or end of a motion guide path.

By default, snapping is enabled for alignment, guides, and objects. Additionally, you can choose View⇒Snapping⇒Snap to Grid (when working with a grid) or View⇒Snapping⇒Snap to Pixels, which ensures that objects are positioned to the nearest whole pixel on the stage.

You can find snapping options by choosing View⇒Snapping, and you can fine-tune snapping behavior by choosing View⇒Snapping⇒Edit Snapping.


Affecting Rate of Speed with Easing

When objects take motion in real life, several factors affect their speed as they move. Picture a ball bouncing on a sidewalk: When the ball hits the ground and bounces, it loses speed as it moves upward because gravity pulls it back toward the ground. When the ball changes direction and moves back downward, increased gravity makes it pick up speed as it nears the ground again.

You can reproduce inertia and gravity, by adding eases to your existing tweens.

To create an easing behavior, follow these steps:

1. Create a new Flash document. Select the Oval tool and create a perfect circle at the bottom of the stage, or use an existing graphic.

imageHold down the Shift key to constrain the circle while you draw it.

2. With the new circle selected, press the F8 keyboard shortcut; when the Convert to Symbol dialog box appears, select Graphic from the Type drop-down list and enter a name for the symbol in the Name text box.

In this example, we named the graphic Dog.

3. Right-click (Windows) or Control-click (Mac) the first frame of the layer and choose Create Motion Tween from the contextual menu that appears.

A new tween span is created, and the playhead advances to the last frame of the tween span.

4. Using the Selection tool, select and move the symbol straight to the top of the stage while preserving its horizontal position.

imageDrag the symbol slowly toward the top of the stage to keep it from shifting left or right. The Snap to Objects behavior keeps the symbol aligned with its original horizontal position until you release it.

5. Press Enter or Return to preview the animation.

The ball should now move from the bottom to the top of the stage.

6. Click directly on the tween span on the Timeline to select it and then click the Property inspector to bring it forward.

7. Locate the Ease section, and change the value from 0 to -100, as shown in Figure 4-6.

You can click and drag over the value to change it, or double-click and enter a value by hand.

Changing the value creates an ease out, which slows the animation as it comes to completion.

image

Figure 4-6: Apply an ease to your tween from the Property inspector; the ease slows down the graphic you’re using when it reaches the top of the stage.

8. Press Enter or Return to play back and preview your animation.

The animation slows down gradually as it reaches completion.

You can see how easing affects the speed of the tween as it progresses, and now a simple animation becomes much more lifelike. However, what goes up must come down, so the following steps walk you through making the graphic return to the ground:

1. Click the Timeline tab, and then click directly on the layer anywhere within the tween span to select the entire motion tween.

2. Right-click (Windows) or Control-click (Mac) the selected frames to open the contextual menu, and then choose Copy Frames.

3. On the same layer, select the next empty frame immediately after the tween span ends.

4. To paste the tween you copied in Step 2, make sure that the frame is selected, right-click (Windows) or Control-click (Mac), and choose Paste Frames from the contextual menu that appears.

5. Click the newly pasted tween span to select it.

6. To flip the tween backward, right-click (Windows) or Control-click (Mac) the selected frames and choose Reverse Keyframes from the contextual menu that appears.

7. Press Enter or Return to preview your animation.

The graphic goes up and then down, and conveniently the animation is not only reversed but is also easing.

Fine-Tuning Shape Tweens with Shape Hinting

Chapter 3 of this minibook explores the possibilities of morphing shape and color with shape tweens. Flash does a great job of recalculating shapes during a tween, but sometimes you need to give it a little help, especially when two shapes have common features. Flash may overthink things and perform more shape morphing than it has to. In these cases, you can use shape hints — sets of matched markers that can tell Flash that two points on two different shapes are related. You can attach shape hints to the outlines of shapes on the starting and ending frames of a shape tween to let Flash know which common points exist between the two.

Two good examples of related shapes are the letters F and T. The two letters have many common angles. A shape tween between the two is a great way to make use of shape hints.

Before you get started, create a new document. Select the Type tool and, using the Property inspector, set the font style to Arial Black (or its equivalent), and set the font size to 200. Then follow these steps:

1. On the first frame of a new layer, type F in the middle of the stage.

2. Select the letter with the Selection tool and choose ModifyBreak Apart to break down the type to its raw outlines.

3. On Frame 20 of the same layer, create a new, blank keyframe by using the F7 keyboard shortcut.

4. Type T on the new keyframe and position it in the same place as the F on the first frame.

You can use the Property inspector to match the X and Y positions, if necessary.

5. Break apart the T by choosing ModifyBreak Apart.

6. Create a shape tween by right-clicking (Windows) or Control-clicking (Mac) the first frame and choosing Create Shape Tween from the contextual menu that appears.

An arrow and green shaded area appear, indicating that the tween was created successfully.

7. Press Enter or Return to preview your movie.

The F morphs into the T.

Even though the shape tween was successful, the outcome may not have been what you expected. Chances are good that the F seems to get mashed up (instead of completing a smooth transition) before being completely reconstructed into the T because Flash can’t see the common angles between the two shapes (even though you can). That’s where shape hints come in: You can add them to suggest common points to Flash and smooth out the tween.

Before you get started, make sure that Snap to Objects is enabled by choosing View⇒Snapping⇒Snap to Objects. Then follow these steps:

1. Select Frame 1 of your shape tween and choose ViewShow Shape Hints to turn on shape hinting.

2. Choose ModifyShapeAdd Shape Hint to create a new shape hint on the stage.

A red button, labeled with the letter a, appears.

3. Repeat Step 2 to add another shape hint.

This time, the shape hint appears labeled with the letter b.

imageSometimes, shape hints stack on top of each other; move one to reveal the others underneath if only one is visible.

4. Position the two shape hints on the outline of the F.

To do so, move shape hint (b) over just a bit so that you can see shape hint (a). Then move (a) and snap it to the lower-left corner of the F. Position the second shape hint (b) in the upper-left corner of the F.

5. Select Frame 20.

You see the companions to the shape hints you created, waiting to be positioned.

6. Position shape hints (a) and (b).

This step matches the lower-left and upper-left corners of the T to the ones in the F, as shown in Figure 4-7. The buttons turn green to indicate a successful match.

imageIf you can’t get the hints to snap perfectly to the edge (the hints will appear red), make sure snapping is enabled by choosing View⇒Snapping⇒Snap to Objects.

image

Figure 4-7: Keeping matching corners in place during the shape tween.

7. Press Enter or Return to preview your animation.

If you watch carefully, you see that the shape hints are keeping those two corners anchored while the rest of the shape transforms, creating a smoother transition.

Note: Much like motion paths, shape hints do their work without appearing in your final, published movie.

imageAdd shape hints with the shortcut key combination Shift+Ctrl+H (Windows) or Shift+Command Key+H (Mac).

You can also add some remaining hints to finalize your tween by following these steps:

1. Select Frame 1 of your shape tween and make sure that shape hints are still visible by choosing ViewShow Shape Hints.

If they’re already enabled, you see a check mark.

2. Create one new shape hint with the keyboard shortcut Shift+Ctrl+H (Windows) or Shift+Command Key+H (Mac).

The shape hint is automatically labeled with the letter c.

3. Position the (c) shape hint on the F, as shown in Figure 4-8, in the upper-right corner.

image

Figure 4-8: Position the new shape hint as shown on both letters.

4. Select Frame 20, and you see the companion to the new shape hint waiting to be placed.

5. Position the shape hint on the T to match the angle you marked on the F.

6. Press Enter or Return to play your animation.

You see that the shape hints have provided a much smoother transition from what you started with.

Shape hints have their own contextual menu that appears when you right-click (Windows) or Control-click (Mac) any shape hint on the first frame of a shape tween. To clear a selected shape hint, choose Remove Shape Hint or choose Remove All Hints to clear all hints on the stage and start over.

imageThough it often isn’t necessary to add more than a handful of shape hints, you may be wondering: How many shape hints are allowed? The answer is 26 — the exact amount of letters in the alphabet. After Flash runs out of letters to label shape hints, it doesn’t allow you to create more.

Using Mask Layers

The concept of masking involves using a shape (or shapes) to hide or reveal portions of a piece of artwork — much like viewing the outside through a small window in your house. The window’s size limits what you can see when you’re inside. Flash features a special type of layer, known as a mask, and its contents are used to selectively reveal (or hide) artwork or animation on another layer.

imageIf you’ve worked with layer and selection masks in other Adobe applications, such as Photoshop and Illustrator, the concept of masks should already be familiar to you. The technique for creating masks in Flash is a bit different, but the core concepts of masking are the same.

imageMask layers aren’t supported when your publish target is HTML. For new files, the Mask option will be disabled for layers on the Timeline. For existing documents using layer masks, they will be discarded at publish/preview.

You can convert any layer into a mask by using the Layer contextual menu, launched by right-clicking (Windows) or Control-clicking (Mac) the layer’s name area. Artwork on a mask layer isn’t visible; the content of a mask layer always represents the visible area of the layer underneath.

Animated text is a great candidate for masking. The following steps walk you through creating a tween to which you add a mask layer for added effect. Before you get started, create a new document and select the Text tool. Choose a fill color, and then use the Property inspector to set the typeface to Arial Black (or similar) and the font size to 40. Then follow these steps:

1. On a new layer, select the Text tool and type a few words on the layer.

For the example in Figure 4-9, we typed FLASH ROCKS in capital letters.

2. Place the text off the stage to the left so that it’s sitting in the pasteboard area.

You animate the text to bring it across the stage, entering from one side and exiting on the other.

3. Right-click the text box and choose Create Motion Tween.

Flash adds a tween span for the text you just created.

4. Move the pointer over the last frame of the new tween span until you see the double arrows. Click and drag to extend the tween span to Frame 40.

5. On Frame 40, select the text and drag it all the way to the right side of the stage.

A keyframe is created at Frame 40, and it creates a tween that moves the text from left to right across the stage.

6. Insert a new layer above the tween layer and name it Mask; create a shape to use as your mask on this layer. Make sure that the shape is at least as tall as the text symbol you created.

For example, we used the Polystar tool to create a star in the center of the stage. The Star option for the Polystar tool is available in the Property inspector, under Options.

7. Right-click (Windows) or Control-click (Mac) the new layer name, and choose Mask from the contextual menu that appears.

The new layer is converted to a mask layer, and the tween layer appears indented underneath, as shown in Figure 4-9. Both layers are locked automatically.

8. Press Enter or Return to play your movie.

The text animates, appearing through the shape (a star, in this example), much like you’re viewing the animation through a window.

image

Figure 4-9: The text animation reveals itself partially behind the star shape you created.

imageFor the masking layer to take effect, both the mask layer and the layer being masked must be locked. To edit the contents of either layer, unlock the layers by clicking and removing the padlock icons on each layer.

Mask layers can contain just about anything a standard layer can, including tweens. Try creating a motion tween on your mask layer and see what happens!

Previewing Your Movie

Previewing a movie in the Flash Player or a browser is preferable to relying on the workspace preview. Previewing also allows you to check your movie’s speed and size, and it gives you an accurate depiction of how your animation will look and perform in real life. In certain cases, such as when working with movie clips (discussed in detail in Chapter 6 of this minibook), previewing your movie is necessary to see a complete picture of your work.

To view a movie in Preview mode, choose Control⇒Test Movie⇒In Flash Professional or use the keyboard shortcut Ctrl+Enter (Windows) or Command Key+Return (Mac).

This step creates a .swf file from your current authoring file and displays it immediately in Flash Player. If you're working in a new HTML document or your publish target is set to HTML, this step creates a folder with the necessary HTML, CSS, JavaScript, and supporting files necessary to re-create your movie. Previewing is a helpful way to see how your movie will appear to users and can highlight any potential snags.

imageThe final viewing environment for most Flash content will be either in a desktop or mobile browser. At publish time, Flash creates either a finished .swf plus a container HTML (Hypertext Markup Language) page, or for HTML publishing, it will create a folder with a primary HTML file and supporting CSS, JavaScript, and graphics files. To see how your movie looks as viewed in a browser, choose Control⇒Test Movie⇒In Browser. Your default system browser launches and presents your movie in a web page, just as users will see it.