Learning FLASH

1
Learning FLASH

• 04 - 06 2003
• N. Gattuso, PPBHS

2
FLASH 5 Introduction

• Flash is a tool for creating interactive and
  animated Web sites.
• Two types of web designers those who use Flash
  and those who do not!
• Many TV cartoons are Flash driven...
• Most Gaming software also created with Flash

3
Flash Intro Continued...

• The Bottom Line Tremendous Market (Job) Demand
  for Flash Web Designers!!!

4
What is Flash?

• A multimedia graphics program specially for use
  on the Web
• enables you to create interactive movies on the
  Web
• uses vector graphics, which means that the
  graphics can be scaled to any size without losing
  clarity/quality

5
What is Flash (cont)?

• Does not require programming skills and is easy
  to learn

6
Flash vs Animated Images/JS Applets

• Loads much faster than animated images
• allows interactivity, animated images do not
• does not require prog. skills, JAVA applets do.

7
Who can view Flash?

• What percentage of Web browsers have Macromedia
  Flash preinstalled? Results show that 96.4 of
  web users have Flash already installed -- as of
  09/2000...

8
(No Transcript)
9
Flash File Formats

• Flash Files saved as .FLA files (unpublished
  files)
• Published Flash Movies exported as .SWF Files and
  played with Flash Plug-in via your browser

10
The Flash Interface

• Interface very busy, so many features almost
  overwhelming --- WE WILL GO VERY SLOW..
• Editor Workspace - area to draw objects etc.
  similar to FireWorks (blank canvas)
• Timeline - where you coordinate the timing of
  your animations, an it is also where you control
  the layers that make up your animations

11
Flash Timeline continued...

• Timeline enables you to control a movies content
  over time you can have objects appear,
  disappear, move, and change over time. ---
  Timeline window - like all windows in Flash (
  FireWorks) can be moved/docked to/at a different
  position. -- can also be hidden..

12
Symbols

• Are stored in a lib and can be re-used, sounds,
  buttons, etc.. Under Insert Menu (instances of)

13
Libs

• Window menu - Common Lib or your private Libs,
  etc can drag sounds etc on to Frames...

14
Importing Files

• Can Import all types of files into Flash, Sounds
  (WAV Files, etc..) SWF, GIF, PNG, etc. -- under
  File Menu.

15
Modify Options

• Modify - Transform Rotate, Scale, etc...

16
Text Fields

• Text Field -- Input text mode -- interactive -
  enter information - -under Text Options..

17
Locking Layers

• Modify - Arrange - Lock

18
Testing FLA Files

• Control - Test Movie
• Windows - Toolbar - Controller

19
Frames - Timeline

• 12 fps
• slow down - add blank frames
• keyframes (circles) - normal frames

20
Layers

• Ordering
• Naming
• Use of

21
Publishing FLA Files - HTML

• File Publish Preview HTML

22
Frames

• Layout of Flash Timeline
• Inserting Frames - Key Frames, Blank Frames
• Animating a Flash Document
• Adding Sound to a Frame via Window-
• previewing Flash Movie

23
Tweening

• Animation defines the changing of objects from
  one frame to another frame to create the illusion
  of movement. Frame-by-frame animation occurs
  when objects are manually changed on each frame
  of a movie. Frame-by-frame is time-consuming and
  inaccurate for certain animations that require
  smooth movement between keyframes.

24
Tweening - continued

• In this case, tweening animation is best!
• Tweening an object in Flash the prog.
  Mathematically generates a series of frames in
  between two keyframes. The farther apart the
  keyframes sit, the smoother the movement.
• Tweening takes the guesswork out of animation.

25
Tweening - continued

• Make first keyframe - object items in frame
• Go to last frame make a keyframe and move object
• Go to middle of timeline - right click - Insert
  a keyframe
• Go to middle of timeline - right click - Create
  Motion Tween.

26
Adding More KeyFrames - Motion Tweening

• To create smoother animation go to midpoint of
  tweened frameset and create new tweened frameset
• Modify-Transform options

27
Shape Tweening

• Motion Tweening deals with object as a whole -
  shape editable shape - the edges of shape can
  transform separately from the object as a whole
• shape tweening is used for morphing objects -
  morphing occurs when one shape transforms into
  another shape..

28
Shape Tweening

• Frame Panel - Shape - Properties
• Easing - controls the speed of the object
• slow -1 - -100 fast and slows down toward the
  end between 1 - 100..
• Blend - distributive 0 angular
• distributive - smooth out edges in tween angular
  - hard straight edges maintain integrity

29
Shape Tweening

• Motion Timeline light blue timeline
• Shape Timeline light green timeline

30
Making Buttons - Interactive - ActionScript

• Symbols graphic, buttons, movie clips
• To use Effects panel graphic must be a symbol!!!
• Buttons and movie clips are gateway to
  interactivity
• Flash Scripting language - ActionScript

31
Making Buttons

• Insert - New Symbol - Button or on existing
  graphic convert to symbol
• right-click - Actions - URL-need http//
• double-click Click on Symbol to get button
  timeline stage if not up
• F6 to set additional keyframes - change DOWN and
  OVER - ignore HIT State

32
Project Time

• Create a Web Page with three frames (see
  following layout) - 2 days to do
• sub pages should include links to your favorite
  groups.. Favorite sound clips if you can get..
  Etc.. On button click change in Flash button plus
  sound effect..

33
Project Time
34
Movie Clips

• Movie Clips are independent movies that run on
  their own timelines
• Possess many of the attributes common to all
  symbols.
• A movie clip can be a static graphic and occupy
  one frame or can be full-fledged animation.

35
Movie Clips Cont.

• Can be controlled by buttons and frame actions.
• They can talk to each other and nest inside each
  other.
• Can be converted to buttons.

36
Interactivity ActionScript

• When a movie is interactive, user controls
  flow/direction the movie will take place based on
  his selections, movements, or interactions.
• Gaming applications have always involved
  interactivity
• Two modes normal expert - we will use normal
  mode

37
Interactivity ActionScript

• Normal mode - via Toolbox list and Add Statement
  button.. Cant type in the Actions List in normal
  mode.
• Change mode via EditPreferencesGeneral
• Expert mode allows you to type in code by hand

38
Making Stop Go buttons for Playing Movies

• Play button Stop button...

39
ActionScript Variables

• Example of ActionScript putting it together -
  text fields with if condition, buttons, stop
  condition, password, cat strings, link to url..

40
ActionScript (cont.)

• Under Help- Samples can be reviewed and modified...

41
Smart Clips

• Movie Clips that have predefined parameters.
• Located in WindowCommon Libraries
• For Example Radio buttons, Menu list items, etc.
• Drag to Frame, click Window Panels Clip
  Parameters to view desc. change parameters.

42
Smart Clips (continued)

• Event Handler, desc. code of
• Example using Menu Smart Clip

43
Optimize the Movie Elements

• Grouping objects together keeps file sizes down
  because they are then as one object as opposed to
  several elements.
• Animation takes up a lot of frames. Tweening can
  help keep files smaller compared to
  frame-by-frame.
• Movie clips are more compact than graphic symbols.

44
Optimize the Movie Elements (cont)

• Use Symbols where possible.
• Animating bitmaps increases file size.
• Make movie dimensions as small as possible. Any
  unnecessary space should be eliminated.
• Optimize shapes with ModifyOptimizeCurves.

45
Optimize the Movie Elements (cont)

• Bandwidth Profiler View Bandwidth Profiler in
  Play Mode.
• Baud Setting - under Debug Menu in Play Mode.
• Debug Menu in Play Mode - List Variables/Objects

46
Publishing, etc.

• File Publish Preview - Publish Settings to add
  more Preview Options
• Publish Settings-HTML Setting such as Opaque
  Window, Transparent etc...

47
Additional Flash Resources

• Tech. Sources Flashplanet.com, flashlite.com,
  were-here.com, flashguru.co.uk, flashkit.com.
• Audio flashkit.com, were-here.com,
  creativepro.com, sitetracks.com, panic.com.
• Tips/Techniques moock.org, canada.cnet.com,
  flaxfx.com, macromedia.com

48
Additional Flash Resources (cont.)

• Source Code were-here.com, sapphire-innovation.co
  m, macromedia.com, flashpro.nl, flashguru.co.uk.
• Extensions macromedia.com/downloads