Flash CS3 special effects tutorial

The educational technology and digital learning wiki
Revision as of 18:19, 21 September 2009 by WikiSysop (talk | contribs)
Jump to navigation Jump to search

<pageby nominor="false" comments="false"/> This entry is part of the Flash CS3 tutorials.

Introduction

Learning goals
  • Learn how to add special effects to animations
Prerequisites
Moving on
Level and target population
  • Beginners (but see the prerequisites)
Quality
  • Rather low. This tutorial doesn't contain many details, just some short "how to"s and feature demonstrations.
To Do
  • Filters

In Flash there are several built-in special effect features.

  • You can create some kinds of combined shape/motion/duplication animations (timeline special effects)
  • You can work with masks
  • You can apply filters

Some of these effects may be very demanding on your CPU. Try to work with simpler objects or space out generated keyframes if this happens.

Timeline effects

Timeline effects are effects that are automatically generated by the Flash environment from an object. You only can parameterize these effects, but not hand-edit generated objects and frames !

Summary of the procedure

Step 1 - Select an object and open the effects tool
  • Create a new layer
  • Insert an object (i.e. text, shapes, simple graphics, groups, graphic symbols and button symbols, bitmap images)
  • Select this object
  • Right-click->Timeline Effects or else Menu Insert->Timeline Effects , then see next step
Step 2 - Select an effect
  • Select an effect and adjust parameters
  • You can preview the effect within the Effects tool.

NB: Ignore error warnings about Flash 7 etc.

Step 3 - Start over
  • Right-click on the object: Timeline Effects; Remove Effect or Edit Effect

There are three sub-menus for effects:

(1) Assistants
  1. Copy to Grid (not a timeline effect, just a multiplication of drawing to a grid)
  2. Distributed Duplicate. Will make "tumbling copies" of an element.
(2) Effects
  1. Blur (object will blur and change size in all or one chosen direction)
  2. Drop Shadow (just draws a static drop shadow)
  3. Expand (object will expand/shrink)
  4. Explode (object will explode and draw different fragments on an configurable arc)
(3) Transform/Transition
  1. Transform (A shape tween with extra options, e.g. duration, position, scale, rotation, spin, ...)
  2. Transition (A motion tween with extra options, e.g. direction, duration, fading, motion ease)

For each of these effects you can set certain parameters, in particular:

  • Number of copies
  • Offset and rotation parameters, i.e. where the generated images will display and if/how they rotate
  • Offset start frame: Keyframes in which the images will be drawn

Important: Using the special effects means that you can not change anything Flash will generate. Also, do not make modifications to the object. Flash will:

  • rename the layer (do not choose a "better" name)
  • add stuff to a Effects Folder in the library
  • Add an item to the library

If you want to remove an effect, it is best to Right-click->Remove on an object ! You also can delete all the generated objects, but this is more work and you may by mistake delete something else ....

An example with timeline effects

The following (ugly) example contains three effects:

Timeline effects example

(1) Distributed duplicate (tumbling): An object will tumble and be reproduced with X copies. You may set several parameters like:

  • Number of copies
  • Offset of copies in x an y position (in pixels)
  • Rotation of copies (in degrees)
  • Offset start frame (keyframes across the timeline that will have this animation). So "number of copies" * "offset start frame" will define the total length (frames) of this animation.
  • Linear scaling in x and y direction (in percentage)
  • Alpha and color change.

(2) Blur: Motion blur that may include change of alpha, position or scale of an object

  • Total duration (in frames)
  • Scale (in percentage): Object will become bigger or smaller.
  • Resolution, i.e. number of steps: How many times should the object be duplicated during the blurring process.
  • Horizontal/vertical blur on/off and direction

(3) Explode

  • Effect duration (frames)
  • Direction of explosion
  • Arc size (x/y pixels)
  • Rotation of fragments and change of fragments
  • Final alpha (in percentage)
Distributedduplicate timeline effect

To edit create special effects animation, you will work with a tool available from the Time-line effects menu. Below we show a screenshot of "Distributed duplicate". You then have to play with the parameters until you get it right. Remember that you cannot make any changes to the object or the generated objects!

The only way you can change an effect is through the edit effects tools. There are two methods:

  • Click somewhere in the frames of the layer where an effect is defined, the use Modify->Timeline Effects->Edit Effect
  • Select the animated object on the stage, then Right-click-Timeline Effects->Edit Effect.

This way you also can remove an effect.

Example:

flash-cs3-special-timeline-effects-1.html
Source: flash-cs3-timeline-effects-1.fla
Directory: http://tecfa.unige.ch/guides/flash/ex/special-effects
Same example that will start animation a bit later
flash-cs3-special-timeline-effects-2.html
Source: flash-cs3-timeline-effects-2.fla
Directory: http://tecfa.unige.ch/guides/flash/ex/special-effects

An other example that uses tumbling is this "enhanced" video.

flash-cs3-video-timeline-embedd.html
Source: flash-cs3-video-timeline-embedd.fla
Directory: http://tecfa.unige.ch/guides/flash/ex/component-video-intro/

Masks

“For spotlight effects and transitions, use a mask layer to create a hole through which underlying layers are visible. A mask item can be a filled shape, a type object, an instance of a graphic symbol, or a movie clip. Group multiple layers under a single mask layer to create sophisticated effect” (About mask layers, retrieved 16:51, 8 October 2007 (MEST)).

Mask and masked layers

Masks are layers that will allow you to see what is underneath through a sort of hole (i.e. a drawing). You then can animate this hole with a motion tween for example. Masked layers are the layers underneath.

In the following picture, a mask lets you see part of bookshelf through an oval.

A mask with an oval

Step 1 - Create some contents:

  • Put these contents in one or several layers. We will turn these layers "masked" in step 3.

Step 2 - Add a mask layer:

  • On top of these layers, create a new layer
  • Right-click on the layer name and select Mask. This layer will mask the others and it should contain a single graphic element (shape, graphic symbol or group).

Step 3 - Define the masked layers:

  • The layer just beneath the Mask layer already should be masked. If it is not, right-click on the layer name and select Masked.
  • You can turn other layers underneath to be masked with the same procedure. Move normal layers to a position after the mask layer or an already masked layer or create new ones...

To undo a masked layer, just right-click and revert back it to "normal". We show a picture of mask and masked layers further down. Such static masks are of course not very interesting, so let's move on ...

Masks animated by a simple motion tween

Step 1 - Add a simple motion tween:

  • Select the mask layer
  • Draw a non-editable object (graphic object, symbol)

Step 2 - Do a motion tween

The user will only see things that will lie underneath the tweened object. E.g. if you move a circle, only the stuff that sits under the moving circle will be shown.

Example:

flash-cs3-mask.html
Source: flash-cs3-mask.fla
Directory: http://tecfa.unige.ch/guides/flash/ex/special-effects

Shape tween

  • Step 1 - Draw a shape in the mask layer
  • Step 2 - Do a shape tween

The tweened shape will determine what parts of the drawing in the masked layer(s) you can see.

Guided motion tween

The principle is not the same as for the simple motion tween. You will have to created an embedded movie clip in the mask layer. If you don't understand embedded movie clips, read the Flash embedded movie clip tutorial.

Step 1 - Create a movie symbol

  • Select the mask layer
  • Create an embedded movie clip, e.g. in frame 1
    • E.g. Create first a drawing then Right-click->Convert to Symbol, select Movie Clip
    • E.g. Menu Insert New Symbol (CTRL-F8), then draw the object in symbol edit mode.

Timeline might look like this:

Movie clip in a mask

Step 2 - Edit the movie symbol

  • Double click on the symbol
  • Create a guided motion tween (this implies that you should again make the graphic into symbol, then proceed in the same way as normal guided motion tweening).

Your embedded movie clip might look like this:

A guide motion animation of a movie clip as mask

Example:

flash-cs3-mask-2.html
flash-cs3-mask-2.fla
Directory: http://tecfa.unige.ch/guides/flash/ex/special-effects

Filters

This section needs to be written, but filters are also introduced in the Flash colors tutorial.

Look at the options in the parameter panel when you do a "normal" motion or shape tween and play with these ...

Links