0% found this document useful (0 votes)
26 views

Lesson 5 Symbols

1. Symbols allow the reuse of graphics, buttons, or movie clips throughout an Animate document or across documents. Instances are copies of symbols that can differ from the parent symbol in properties like color and size. 2. There are four main types of symbols - graphic, button, movie clip, and font. Graphic symbols are static while button and movie clip symbols allow interactivity and nested timelines. 3. Nested timelines allow independent animation within movie clip symbols so that elements inside a symbol can animate separately from the main timeline, like wings flapping on a flying symbol.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
26 views

Lesson 5 Symbols

1. Symbols allow the reuse of graphics, buttons, or movie clips throughout an Animate document or across documents. Instances are copies of symbols that can differ from the parent symbol in properties like color and size. 2. There are four main types of symbols - graphic, button, movie clip, and font. Graphic symbols are static while button and movie clip symbols allow interactivity and nested timelines. 3. Nested timelines allow independent animation within movie clip symbols so that elements inside a symbol can animate separately from the main timeline, like wings flapping on a flying symbol.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

A symbol is a graphic, button, or movie clip that you create

once in the Animate (formerly Flash Professional CC) authoring


environment or by using the Simple Button (AS 3.0) and Movie
Clip classes. You can then reuse the symbol throughout your
document or in other documents.
A symbol can include artwork that you import from another
application. Any symbol that you create automatically becomes
part of the library for the current document.
An instance is a copy of a symbol located on the
Stage or nested inside another symbol. An instance can
be different from its parent symbol in color, size, and
function. Editing the symbol updates all of its
instances, but applying effects to an instance of a
symbol updates only that instance.
Each symbol has a unique Timeline and Stage, complete with
layers. You can add frames, keyframes, and layers to a symbol
timeline, just as you can to the main Timeline. When you create a
symbol you choose the symbol type.
1. Use graphic symbols for static images and to create reusable
pieces of animation that are tied to the main Timeline. Graphic
symbols operate in sync with the main Timeline. Interactive
controls and sounds won’t work in a graphic symbol’s animation
sequence. Graphic symbols add less to the FLA file size than
buttons or movie clips because they have no timeline.
Graphic symbols are the most basic kind of symbol. Although
you can use them for animation, you’ll rely more heavily on mo
vie clip symbols. Graphic symbols are the least flexible symbols,
because they don’t support ActionScript and you can’t apply
filters or blending modes to a graphic symbol. However, in
some cases when you want an animation inside a graphic
symbol to be synchronized to the main Timeline, graphic
symbols are useful
2. Use button symbols to create interactive buttons that respond
to mouse clicks, rollovers, or other actions. You define the graphics
associated with various button states, and then assign actions to a
button instance.
Button symbols are used for interactivity. They contain four
unique keyframes that describe how they appear when the mouse
is interacting with them. However, but-tons need ActionScript
functionality to make them do something. You can also apply
filters , blending modes , and color settings to buttons.
3. Movie clip symbols are one of the most common, powerful, and flexible
of symbols. When you create animation, you will typically use movie clip
symbols. You can apply filters, color settings and blending modes to a movie
clip instance to enhance its appearance with special effects. Also notable is
the fact that each movie clip symbol contains its own independent Timeline.
You can have an animation inside a movie clip symbol just as easy as you can
have an animation on the main Timeline. This makes very complex
animations possible; for example, a butterfly flying across the Stage can move
from left to right as well as have its wings flapping independently of its
movement. Most important, you can control movie clips with ActionScript to
make them respond to the user.
4. Use font symbols to export a font and use it in
other Animate documents.
Animate provides built-in components, movie clips
with defined parameters, that you can use to add user
interface elements, such as buttons, checkboxes, or
scroll bars, to your documents.
1. Select an element or several elements on the Stage.
Do one of the following:
✓ Select Modify > Convert To Symbol.
✓ Drag the selection to the Library panel.
✓ Right-click (Windows) or Control-click (Macintosh)
and select Convert To Symbol from the context
menu.
2. In the Convert To Symbol dialog box, type the name of the
symbol and select the behavior.
3. Click in the registration grid to position the registration point
for the symbol.
4. Click OK.
Animate adds the symbol to the library. The selection on the
Stage becomes an instance of the symbol. Once you have created
a symbol, you can edit it in symbol edit mode by choosing Edit >
Edit Symbols, or you can edit it in the context of the Stage by
choosing Edit > Edit In Place.
The Transparency effect is used to make an image partially transparent.
The Transparency effect is useful when fading images in and out, such as a
phantom or to make something partially see-through, such as a window.

Use the Transparency editor to control how translucent the element should be.
You can enter a value in the Transparency field or change the transparency
value over time by linking it to a function curve. Entering a value of 100 in
the Transparency field will make the element 100% transparent, in other
words, invisible. Entering a value of 0 will render the element completely
opaque.
It is also possible to adjust a layer/
module's transparency directly in the
Layer Properties window without using
the Transparency module. In the layer's
properties, go to the Drawing tab and
adjust the Opacity parameter.
Animating filters is no different from 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 Animate creates a smooth transition.
You can transform graphic objects, groups, text blocks, and instances, by
using the Free Transform tool or the options in the Modify > Transform menu.
Depending on the type of element you select, you can transform, rotate, skew,
scale, or distort the element. You can change or add to a selection during a
transformation operation.
When you transform an object, group, text box, or instance, the Property
inspector for that item displays any changes made to the item’s dimensions or
position. A bounding box appears during transform operations that involve
dragging. The bounding box is rectangular (unless it was modified with the
Distort command or the Envelope modifier), with its edges initially aligned
parallel to the edges of the Stage. Transformation handles are on each corner
and in the middle of each side. As you drag, the bounding box previews the
transformations.
The motion tween of the object shows a colored line with dots indicating
the path of the motion. You can edit the path of the motion easily to make
the object in a curve, or you can move, scale, or rotate the path just like any
other object on the Stage.
Moving the Path of the Motion
You can move the path of the motion to the relative movement of the
object to remains the same but its starting and ending positions change.
✓ Select the Selection tool.
✓ Click the path of the motion to select it.
✓ The path of the motion becomes highlighted.
✓ Drag the motion path to move it to a different place on the Stage.
The relative motion and timing of the animation remain the same, but the
starting and ending positions are relocated.
The motion tween model in Animate CC is object based. This means that an object
and its motion are independent of each other, and you can easily swap out the target
of a motion tween. If, for example, you’d rather see an alien moving around the Stage
instead of a rocket ship, you can replace the target of the motion tween with an alien
symbol from your Library panel and still preserve the animation.
✓ Drag the movie clip symbol of the alien from the Library panel onto the rocket
ship.
Animate will asks if you want to replace the existing tween target object with a new
object.

✓ Click OK.
Animate replaces the rocket ship with the alien. The motion remains the same, but
the target of the motion tween has changed.
Often, an object that is animated on the Stage will have its
own animation. For example, the wings of a butterfly moving
across the Stage may flap as it moves. Or the alien that you
swapped with the rocket ship could be waving his arms. These
kinds of animations are called 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.
You can animate some of the symbols
that make up the alien’s body to allow him
to wave.
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 appears in
the middle of the Stage. In the Timeline,
the parts of the alien are separated in
layers.
2. Select the Selection tool.
3. Right-click the alien’s left arm and choose Create Motion Tween.

Animate converts the current layer into a tween layer and inserts 1 second’s
worth of frames so you can begin to animate the instance.
4. Select the Free Transform tool.
5. Move the mouse pointer near the corner transformation handle until the
cursor changes to the rotation icon. Drag the corner handle near the hand to
rotate the arm upward to the alien’s shoulder height.
A keyframe is inserted at the end of the motion tween. The left arm
rotates smoothly from the resting position to the outstretched position.

6. Move the red playhead back to frame 1.

7. Now create a motion tween for the alien’s other arm. Right-click his
right arm and choose Create Motion Tween.

The current layer is converted into a tween layer and 1 second’s worth
of frames are inserted.
8. Choose the Free Transform tool if it’s not selected already.

9. As you did for the left arm, drag the corner transformation handle
near the right hand to rotate the arm upward to the alien’s shoulder
height.
Animate inserts a keyframe at the end of the motion tween. The arm
rotates smoothly from the resting position to the outstretched position.
10. Select the last frame in all the other layers and insert frames (F5) so
that the head, body, and feet all remain on the Stage for the same amou
nt of time as the moving arms.
11. Click the Scene 1 button in the Edit bar at the top of the Stage to exit symbol-
editing mode.
Your animation of the alien raising his arms is complete. Wherever you use the
movie clip symbol, the alien’s nested animation will continue to play.
12. Preview the animation by choosing Control > Test.
Animate 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.
The Animate Export commands do not store export settings
separately with each file, as does the Publish command. (To create all the
files you need to put Animate content on the web, use the Publish
command.)
Export Movie exports a Animate document to a still-image format,
creates a numbered image file for every frame in the document, and
exports the sound in a document to a WAV file (Windows only).
1. Open the Animate document to export, or select the frame or image to
export in the current document.
2. Select File > Export > Export Movie or File > Export > Export Image.
3. Enter a name for the output file.
4. Select the file format and click Save. If the format you selected requires more
information, an Export dialog box appears.
5. Set the export options for the format you selected.
6. Click OK, and then click Save.

You might also like