Flash CS3 special effects tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
m (Text replacement - "<pageby nominor="false" comments="false"/>" to "<!-- <pageby nominor="false" comments="false"/> -->")
 
(23 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Stub}}
{{Incomplete}}
{{Flash tutorial|CS3|beginner|}}
<!-- <pageby nominor="false" comments="false"/> -->


This is part of [[Flash]] CS3 tutorials. Doesn't contain details, just some short "how to".
== Introduction ==


; Learning goals:
<div class="tut_goals">
: Learn how to add special effects to animations
; Learning goals
* Learn how to add special effects to animations
; Prerequisites
*[[Flash CS3 desktop tutorial]]
*[[Flash drawing tutorial]]
*[[Flash object transform tutorial]]
*[[Flash colors tutorial]]
*[[Flash frame-by-frame animation tutorial]]
*[[Flash motion tweening tutorial]]
*[[Flash shape tweening tutorial]]
*[[Flash embedded movie clip tutorial]] for guided masks
; Moving on
* The [[Flash tutorials]] article has a list of other tutorials. E.g. you could start learning how to make interactive programs with the [[Flash button tutorial]].
* You also may achieve more sophisticated special effects with ActionScript libraries that you can download. E.g. if you want snowflakes for example, try the [http://flintparticles.org/ FLiNT particle system] and read the [[Flash using ActionScript libraries tutorial]].
; Level and target population
* Beginners (but see the prerequisites)
; Alternative version
* '''CS3 special effects do not exist in Flash CS4, CS5 and CS6'''.
* Either use third party libraries or explore the motion presets (a panel that can be found in the ''Windows'' menu)
; Quality
* Rather low.  This tutorial doesn't contain many details, just some short "how to"s and feature demonstrations.
; To Do
* Filters
</div>


;Prerequisites:
In Flash CS3 there are several built-in special effect features.
:[[Flash CS3 desktop tutorial]]
* You can create some kinds of combined shape/motion/duplication animations (timeline special effects). These have been removed from CS4/CS5.
:[[Flash drawing tutorial]]
* You can work with masks, see the [[Flash mask layers tutorial]]
:[[Flash object transform tutorial]]
* You can apply filters objects, including tweened ones.
:[[Flash colors tutorial]]
:[[Flash frame-by-frame animation tutorial]]
:[[Flash motion tweening tutorial]]
:[[Flash shape tweening tutorial]]


;Moving on
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.
: The [[Flash]] article has a list of other tutorials.
 
;Quality
: This text shortly demonstrates some features and should technical people get going. It is good enough for self-learning beginners. It can be used as handout in a "hands-on" class. That is what [[User:Daniel K. Schneider|Daniel K. Schneider]] made it for...
;Level


== Timeline effects ==
== Timeline effects ==


Timeline effects are effects that are automatically generated by the Flash environment from an object. You only can parametrize these effects, but not hand-edit generated objects and frames !
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 ===
=== Summary of the procedure ===
Line 43: Line 59:
* Right-click on the object: ''Timeline Effects''; ''Remove Effect'' or ''Edit Effect''
* Right-click on the object: ''Timeline Effects''; ''Remove Effect'' or ''Edit Effect''


There are three submenus for effects (I can't see the difference between the first two)
There are three sub-menus for effects:
* Assistants
; (1) Assistants
** Copy to Grid (not a timeline effect, just a multiplication of drawing to a grid)
# Copy to Grid (not a timeline effect, just a multiplication of drawing to a grid)
** Distributed Duplicate. Will make "tumbling copies" of an element.  
# Distributed Duplicate. Will make "tumbling copies" of an element.  
* Effects
 
** Blur (object will blur and change size in all or one chosen direction)
; (2) Effects
** Drop Shadow (just draws a static drop shadow)
# Blur (object will blur and change size in all or one chosen direction)
** Expand (object will expand/shrink)
# Drop Shadow (just draws a static drop shadow)
** Explode (object will explode and draw different fragments on an configurable arc)
# Expand (object will expand/shrink)
* Transform/Transition
# Explode (object will explode and draw different fragments on an configurable arc)
** Transform (A shape tween with extra options, e.g. duration, position, scale, rotation, spin, ...)
 
** Transition (A motion tween with extra options, e.g. direction, duration, fading, motion ease)
; (3) Transform/Transition
# Transform (A shape tween with extra options, e.g. duration, position, scale, rotation, spin, ...)
# 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:
For each of these effects you can set certain parameters, in particular:
* Number of copies
* Number of copies
* Offset and rotation paramters, i.e. where the generated images will display and if/how they rotate
* 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
* Offset start frame: Keyframes in which the images will be drawn


Line 69: Line 87:
You also can delete all the generated objects, but this is more work and you may by mistake delete something else ....
You also can delete all the generated objects, but this is more work and you may by mistake delete something else ....


==== An example ====
=== An example with timeline effects ===


The following (ugly) example contains three effects:
The following (ugly) example contains three effects:
[[image:flash-cs3-timeline-effects.png|thumb|400px|none|Timeline effects example]]


'''Distributed duplicate''' (tumbling): An object will tumble and be reproduced with X copies
(1) '''Distributed duplicate''' (tumbling): An object will tumble and be reproduced with X copies.
You may set several paramaters like:
You may set several parameters like:
* Number of copies
* Number of copies
* Offset of copies in x an y position (in pixels)
* Offset of copies in x an y position (in pixels)
* Rotation of copies (in degrees)
* Rotation of copies (in degrees)
* Offset start frame (keyframes accross the timeline that will have this animation). So "number of copies" * "offset start frame" will define the total length (frames) of this animation.
* 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)
* Linear scaling in x and y direction (in percentage)
* Alpha and color change.
* Alpha and color change.


* '''Blur''': Motion blur that my include change of alpha, position or scale of an object
(2) '''Blur''': Motion blur that may include change of alpha, position or scale of an object
* Total duration (in frames)
* Total duration (in frames)
* Scale (in percentage): Object will become bigger or smaller.
* Scale (in percentage): Object will become bigger or smaller.
Line 88: Line 107:
* Horizontal/vertical blur on/off and direction
* Horizontal/vertical blur on/off and direction


'''Explode'''
(3) '''Explode'''
* Effect duration (frames)
* Effect duration (frames)
* Direction of explosion
* Direction of explosion
Line 95: Line 114:
* Final alpha (in percentage)
* Final alpha (in percentage)


[[image:flash-cs3-timeline-effects.png|thumb|400px|none|Timeline effects example]]
[[image:flash-cs3-timeline-effects-distributed-duplicate.png|thumb|800px|none|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''.


To edit each animation, you will get a menu like this and you have to play with the parameters until you get it right. Remember that you can not make any changes to the object or the generated objects (except using the ''right-click->Timeline Effects'' menu !
This way you also can remove an effect.
[[image:flash-cs3-timeline-effects-distributed-duplicate.png|thumb|800px|none|Distributed duplicate timeline effect]]


Example:
Example:
* [http://tecfa.unige.ch/guides/flash/ex/special-effects/flash-cs3-special-timeline-effects.html flash-cs3-special-timeline-effects.html]
: [http://tecfa.unige.ch/guides/flash/ex/special-effects/flash-cs3-special-timeline-effects-1.html flash-cs3-special-timeline-effects-1.html]
* Grab the source of the flash-cs3-special-timeline-effects.* files from:
: Source: [http://tecfa.unige.ch/guides/flash/ex/special-effects/flash-cs3-timeline-effects-1.fla flash-cs3-timeline-effects-1.fla]
: http://tecfa.unige.ch/guides/flash/ex/special-effects
: Directory: http://tecfa.unige.ch/guides/flash/ex/special-effects
 
; Same example that will start animation a bit later
: [http://tecfa.unige.ch/guides/flash/ex/special-effects/flash-cs3-special-timeline-effects-2.html flash-cs3-special-timeline-effects-2.html]
: Source: [http://tecfa.unige.ch/guides/flash/ex/special-effects/flash-cs3-timeline-effects-2.fla 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.
An other example that uses tumbling is this "enhanced" video.
* [http://tecfa.unige.ch/guides/flash/ex/component-video-intro/flash-cs3-video-timeline-embedd.html flash-cs3-video-timeline-embedd.html]
[http://tecfa.unige.ch/guides/flash/ex/component-video-intro/flash-cs3-video-timeline-embedd.html flash-cs3-video-timeline-embedd.html]
* Grab the source from:
: Source: [http://tecfa.unige.ch/guides/flash/ex/component-video-intro/flash-cs3-video-timeline-embedd.fla flash-cs3-video-timeline-embedd.fla]
: http://tecfa.unige.ch/guides/flash/ex/component-video-intro/
: Directory: http://tecfa.unige.ch/guides/flash/ex/component-video-intro/


== Masks ==
== Filters ==
 
=== 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.


'''Step 1 - Create some contents''':
Filters are shortly introduced in the [[Flash colors tutorial]]. They just will wrap around the object, i.e. can be animated in a motion tween for example.
* Put them in one or several layers. We will make them "masked" later 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 contain a single graphic (shape, grphic 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 make other layers underneath to be masked with the same procedure. Move normal layers in a position after the mask layer or a masked layer or create new ones...
 
To undo masked layer, just right-click and revert back to "normal"
 
=== Simple motion tween ===
 
'''Step 1 - Add a simple motion tween''':
* Select the mask layer
* Draw a noneditable object (graphic object, symbol)
 
'''Step 2 - Do a motion tween'''
* Like in a normal motion tween...
 
* [http://tecfa.unige.ch/guides/flash/ex/special-effects/flash-cs3-mask.html flash-cs3-special-timeline-effects.html]
* Grab the source of the flash-cs3-mask.* files from:
: 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
 
=== Guided motion tween ===
 
You need to animate a movie clip. You also can do simple motion animation that way.
 
'''Step 1 - Create a movie symbol'''
* E.g. create a drawing then ''Right-click->Convert to Symbol'', select ''Movie Clip''
* E.g. Menu ''Insert New Symbol'' (CTRL-F8)
 
'''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).
 
* [http://tecfa.unige.ch/guides/flash/ex/special-effects/flash-cs3-mask-2.html flash-cs3-special-timeline-effects.html]
* Grab the source of the flash-cs3-mask-2.* files from:
: http://tecfa.unige.ch/guides/flash/ex/special-effects
 
== Filters ==


This section needs to be written. When you do a "normal" motion or shape tween have a look at the options in the parameter panel....
Look at the options in the parameter panel when you do a "normal" motion or shape tween and play with these ...


== Links ==
== Links ==
Line 172: Line 148:
* [http://livedocs.adobe.com/flash/9.0/UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7d8e.html  Timeline effect settings] (Adobe [http://livedocs.adobe.com/flash/9.0/UsingFlash/ Using Flash] Manual]).
* [http://livedocs.adobe.com/flash/9.0/UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7d8e.html  Timeline effect settings] (Adobe [http://livedocs.adobe.com/flash/9.0/UsingFlash/ Using Flash] Manual]).


* [http://livedocs.adobe.com/flash/9.0/UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7d97.html  Work with mask layers], a section of "creating animation - animation basics" of the Adobe [http://livedocs.adobe.com/flash/9.0/UsingFlash/ Using Flash] Manual]).
* For CS4: See [http://www.adobe.com/devnet/flash/learning_guide/graphic_effects/ Graphic Effects Learning Guide for Flash CS4 Professional]. Things did change since CS3 ....


[[Category: Multimedia]]
[[Category:Flash tutorials]]
[[Category: Technologies]]
[[Category: Authoring tools]]
[[Category: Tutorials]]
[[Category: Flash]]
[[Category: Flash]]

Latest revision as of 18:39, 22 August 2016

Introduction

Learning goals
  • Learn how to add special effects to animations
Prerequisites
Moving on
Level and target population
  • Beginners (but see the prerequisites)
Alternative version
  • CS3 special effects do not exist in Flash CS4, CS5 and CS6.
  • Either use third party libraries or explore the motion presets (a panel that can be found in the Windows menu)
Quality
  • Rather low. This tutorial doesn't contain many details, just some short "how to"s and feature demonstrations.
To Do
  • Filters

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

  • You can create some kinds of combined shape/motion/duplication animations (timeline special effects). These have been removed from CS4/CS5.
  • You can work with masks, see the Flash mask layers tutorial
  • You can apply filters objects, including tweened ones.

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/

Filters

Filters are shortly introduced in the Flash colors tutorial. They just will wrap around the object, i.e. can be animated in a motion tween for example.

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

Links