Video links

Watch some successful assignments using curved paths and Masks:

http://soma.sbcc.edu/users/ajarabo/F_online/masks_examples.html

Refresh concepts in Animation Assistants.

Refresh those concepts:
Animate smooth transformations, through Keyframing the properties of an object (Position, Rotation, Scale, Alpha...)with a tween.
In classic tweens all properties keyfrme at the same time, in Motion Tween layers (turquoise), you can have keyframes for different properties.

In a Motion Tween, you can Orient the Object to the path (like a mouse running through a mace, following the turns and rotations of the mace/path).
You can also establish a complete revolution for a Rotation (or as many times as you define), and choose the direction of the rotation (Clock Wise or Counter Clock Wise).

Look at the options of the Tween in the Properties Panel, with the first keyframe of the tween selected.

In Working with MASKS in Adobe Animate:

To create a mask in flash you need to 2 layers working together:

TOP LAYER: Contains the shape of the area we will see through (the MASK).
You will draw here the fill area (a shape, not a closed line).
LOWER LAYER: whatever you want to see as the fill of the shape of the mask.
This layer will be set to be functioning as MASKED.

Think of the Mask as your cookie cutter, and the Masked as the dough.
Together they will define the shape of the cookie.

You change the properties of a layer by double clicking on the little color-rectangle at the right of the layer-name. In the "Layer Properties" dialog box" you an change the behavior of a layer.

The masked effect will only be visible when you lock both layers!

To change the behavior of a layer, you open the Dialog box for the "Layer Properties"
of that layer, independently. In the case of a mask effect with 2 layers, you will have to open the dialog box for EACH layer.
You can have several layers masked by ONE mask layer too.

Consult my Flash help-website on paths and masks:

http://soma.sbcc.edu/users/ajarabo/F_online/motion_tween_path.htm

http://soma.sbcc.edu/Users/Ajarabo/F_online/using_mask.htm

Refresh the use of the Motion Editor or Speed-curve editor for Motion tweens in your software version.
Use Eases to create Accelerations or Decelerations. Seen as curves in the Motion editor.

You can set a simple Ease IN, or Ease OUT, Using the Ease slider in teh properties panel (easier).
You can also use the new Speed Editor of the Motion tween and add an Ease from there.

(Look at the bottom of the graphic on the right, see where to choose an EASE-pattern or curve to apply to your Motion tween).

(Look a the the first image in this page, to see the options in the Properties panel, when the first keyframe of the tween is selected. You can see the Ease slider.

See how the new speed curve-editor represents a graph for each property (property Name and color-code on the Left).
When you click on a property, the graph for the changes of that property shows at its maximum intensity, the others show dim.

Compare the Curve for a Simple-Fast EASE (here below) to the changes that the Ease has applied to the CURVE of the property we applied a Simple-Fast Ease to (on the left, as a dotted line)

Curving the path

We practiced using the motion path last week, but this week you need to take it further, and create a path that really brings something to the story.

You can modify the IN and OUT points of the path with the white arrow tool.
(if you click on the path and you still don't see the "antennas of the points", hold OPTION when you click on a point with the white arrow tool).

You can add points to the path by holding OPTION and dragging with the BLACK arrow tool ( if you try to add the point with the pen tool it will tell you you cannot draw on the layer).

You can use the pen tool to DELETE points from the path, though.

You can scale, skew and rotate the path with the "free transform tool".

Orient to path

If you want the object to head the path by adapting its rotation to it, you should select "orient to path" in the Properties panel.

Don't worry about all those keyframes, they are actually only placed by flash in one property: "orient to Z", the rest of the properties mantain previous keyframes.
(look at the Motion editor)

Using guides with Classic Tweens

In order to create a"Guided Classic tween", to get a curved motion on a Classic tween, you need to follow those basic steps:

You will set a LAYER to act as a guide and draw a raw line in tht layer, describing the "motion path"you want to use
(you can use the pencil, the pen tool...).Do not group that line or make it into a symbol.

Go to layer-properties (double click the colored-rectangle at the right of the layer-name)and change the layer, from Normal to Guide.

On a separate layer you should have your Classic Tween. You should set that layer to work as a "guided layer". In t previous versions of Flash, you could do this in layer-properties. "guided layer" is not an option any more but if you DRAG the layer containing the classic tween INTO the guide layer, grabbing from the name area, you will see that the layer containing the ween becomes indented and the guide layer's icon changes, from a Hammer, to a little curved path with a ball (look at the image on the right).

For the guided effect to work, the element moved by the Classic Tween (that is a symbol) needs to snap to some point along the guide line, both the IN and the OUT keyframes of the motion tween.
Go to the IN keyframe of the tween, move the symbol so it snaps to the guide-line. Then go to the OUT keyframe and move symbol so the center of it (little circle) touches the line.

If it is not working easily, make sure your guide-line is not grouped and you "Snap to object" option is ON.

If you want the animated element to change orientation as it goes through the path, you should check the "orient to path checkbox" in the Properties panel.

For more info, check my flash help-website on "Using guides"

http://soma.sbcc.edu/Users/Ajarabo/F_online/Guide_layer.htm

About nesting symbols

Last week we learned how to convert out still-artwork to a graphic symbol. This way we can make full use of motion tweens and save file-size by reusing symbols on several occasions.

(It will not matter in how many times you are using the same artwork, if the artwork is used as a symbol, it will only count once file-wise)

This week we are discovering that we can actually create an animation INSIDE a symbol.
When a symbol containing an animation is placed on Stage, it will play the animation across the Timeline through all the duration of that keyframe.

If you give that keyframe enough Time on the Stage, the animation inside the symbol will keep looping across its duration.

Sometimes, you will animate something and THEN realize you would want to use that animation inside a symbol.

You should know how to copy/paste ANIMATION inside a symbol.
This means copying several keyframes, with motion or shape tweens, all at once. I explained it on module 4.

(it is not the same thing as copy/pasting still-artwork with Command_C/Command_V,
or Control_C/Control_V )

Here I have a little tutorial on how to Copy/paste frames in Flash in a new symbol. Its an animated gif.

http://soma.sbcc.edu/users/Ajarabo/F_online/nesting_symbols2.htm

What exactly is to nest symbols

To nest symbols is to use them one symbol inside ant other one.

This means that One Library-symbol is made as a combination of other Library-symbols, and when several similar elements are repeated, that specific symbol is re-used.

Here I have a little project using nested-symbols.

http://soma.sbcc.edu/users/Ajarabo/F_online/nesting_movie.htm

In this movie, I made a symbol called "leg" and animated the leg inside the symbol with shape tweens.
The symbol "insect" was made of a body with several legs (each one of them already containing animation).

On Stage, I animated my "Insect symbol" so it would move following a path, like swimming in the water.