Flash 4.0

1
Flash 4.0
2
What is Flash

• Vs traditional HTML Webpage
• Fully vector-based graphics
• Flash 4.0 Vs Flash 5.0
• Interface
• Action script
• Vs Director
• Shockwave
• More powerful in director
• Simple in flash

3
Table of Content

• Introducing the Flash Working Environment
• Simple Animating
• Basic Interactivity
• Testing and Exporting Movies

4
Introducing the Flash Working Environment
5
(No Transcript)
6
Defining the Flash Framework

• As illustrated by the figure, a Flash movie is
  basically made up of
• individual Scenes, in which the content of an
  animation is organized.
• Each scene can contain an unlimited number of
  Layers, which provides easy separation of
  graphics as arranged in the timeline.
• The unit that are responsible for the illusion of
  time in the animation are Frames . Each layer may
  be composed of a sequence of one or more frames
  controlled by the timeline. Within these frames,
  animation can be produced either by changing the
  contents on a frame-by-frame basics
  (frame-by-frame animation), or by establishing
  two key frames and instructing Flash to
  interpolate the change in between them (tweened
  animation).

7

Basic Elements of the Flash Environment
8
Menu Bar
Timeline
Drawing Toolbar
Controller Window
Stage or Movie Area
Inspector Window
Work Area
9
General Information about Stage

• The Stage is the area on which you draw and place
  the content of your movie. What you see on the
  stage at any given time represents the content of
  the current frame.
• The default color of the stage is white, which
  serves as the background for your movie. You can
  change the dimension and the background color of
  your movie from the Movie Properties dialog box
  by choosing Modify Movie.

10
Note that you can change the frame rate in the
Movie Properties dialog box. The best frame rate
for animations on the web is usually 12 frames
per second (fps). If the frame rate is too
large, the details of the animation will be
blurred when it is shown.
11
General Information about Scene

• Scenes are used to organize your movie into
  sections.  Flash starts out with one default
  scene named Scene 1. To insert a scene, choose
  Insert Scene from the menu.  Flash will default
  the names to Scene 2, Scene 3, and so on.  
• Nested between the menu bar and the top of
  timeline is the Scene and Symbol bar. The Scene
  Name button at the far left indicates the name of
  the current scene. At the far right is the Edit
  Scene button, clicking the button will evoke a
  menu of scenes within the current movie.

12

• Form the scenes menu, you can see the playing
  order of the scenes as arranged in your movie.
  The top scene will play first, then the next down
  second, etc.  You can rearrange the order in the
  Scene Inspector, which can be launched by
  choosing  Window Inspector Scene.

13

• The Scene Inspector list all the scenes in a
  movie, with the active scene highlighted. To
  switch scenes, highlight a scene in the list. To
  rearrange the order of the scenes, highlight the
  scene and drag. The Add, Delete and Duplicate
  buttons function according to their names. To
  rename a scene, double click the scene name or
  click the Properties button to launch the Scene
  Properties dialog box.

14
General Information about Timeline

• The Timeline is where you organize and control a
  movies content over time by the use of Frames
  and Layers.
• Whenever you select a layer and then draw on the
  stage or import content onto the stage, that
  content becomes part of the layer, since it is
  currently selected.
• Frames on the timeline allow you to change
  content over time. By moving, adding, changing
  and deleting content from layers, animation can
  be created.

15
(No Transcript)
16
General Information about Layers

• As part of the timeline, layers are used to
  separate artwork so that different elements can
  be combined into a cohesive visual image.
• Layers are placed on top of another in the
  stacking order, i.e. objects that reside in the
  top layer will always appear on the stage above
  objects contained in the layers below.
• To add a Layer, click the Add Layer button to
  delete a layer, click the Delete Layer button
• To rename a layer, double click the text and type
  in the new name for the layer.  
• To rearrange the order of the layers, simply
  click on the layer to highlight it and drag to
  the position you want.

17
(No Transcript)
18
General Information about Frames

• Empty frame - Indicated by an empty circle in the
  frame. 
• Keyframe - Indicated by a black filled circle in
  the frame. 
• Motion tweened frame Indicated by a pastel blue
  area with arrow between two fames.
• Shape tweened frame Indicated by a pastel green
  area with arrow between two frames. 
• A Dashed Line Indicates a problem with a tween.
• A small a- Indicates the frame has been
  assigned a frame action

19
The Flash Library Symbol and Instance

• The Library Window
• By using symbols in Flash, one can create a
  'Library' of symbols that can be dragged onto the
  movie at any time. 
• The Library window is where you store and
  organize symbols created in
• Flash, as well as imported files including Sound
  files, Bitmap graphics,
• and QuickTime movies. The Library window can be
  assessed by choosing
• Window Library.
• In addition, the Library gives you a preview of
  what that symbol looks like in the top portion of
  the library window. From the Library, you can
  grab your graphic and drag it onto your movie

20
The Library Window
21

• Symbol and Instance
• Symbols are essential elements in creating
  interactive movies. They are reusable elements
  that reside in either the Flash libraries, which
  are assessed directly from the Libraries menu, or
  in the current movies Library.
• After you have created a symbol, you can use it
  as much as you want by simply dragging it from
  the Library and placing it onto the stage. When a
  symbol is placed on the stage, it is called an
  Instance. The advantage is that no matter how
  many instances are there in your movie, only the
  symbol will be saved resulting in an enormous
  reduction in file size. In addition, changes made
  to a symbol are reflected in each instance of
  that symbol throughout the movie, thus saving a
  lot of time and trouble in editing individual
  copy of the instance.

22

• Three types of symbol exist. Each type is unique
  and suited for particular purposes. They are
• Graphic Symbols the simplest kind of Flash
  symbol used for static images and simple
  animations controlled by the main movies
  timeline.
• Button Symbols used to create interactive
  buttons.
• Movie Clips are actually movies within a
  movies, only need a single keyframe in the
  timeline of the main movie to play.

Icons associated with each type of symbol
23
(No Transcript)
24
Creating Simple Animations
25

• Animation is the process of creating the effect
  of movement or change over time. It can be
• The movement of an object form one place to
  another.
• The change of an objects appearance such as
  size, angle, color or opacity over time.
• Morph from one shape to another.
• In Flash, animation is created by changing the
  content of successive frames over a period of
  time. These changes can occur independently or in
  concert with other changes. For example, you can
  make an object rotate and fade in as it moves
  across the Stage.

26

• In Flash, there are basically two types of
  animation
• Frame-by-frame animation
• Frame-by-frame animation is the most basic form
  of animation, which can be employed for
  everything from creating animated cartoons to
  bringing clay figures to life. This type of
  animation is created by changing the contents of
  successive frames over time, so that when the
  frames are playing in a quick succession, you can
  see movement and animation.
• Tweened Animation
• In a Tweened animation, Keyframes are used to
  define two points the graphics appearance at
  the beginning of the animation and at the end,
  and Flash calculates how it should look in the
  intermediate frames.

27
In Tweened animation, starting and ending points
are defined by Keyframes, then Flash will
interpolate the changes in between them.
28

• Tweening
• Tweened animation is a huge timesaver because it
  allows you to make objects/shapes move without
  actually having to do it frame by frame.  Two
  kinds of tweened animation can be created in
  Flash
• Motion Tween
• Shape Tween

29
Creating Motion Tween

• Motion Tweening is useful for animating groups,
  symbols and editable text. As suggest by the
  name, Motion Tweening is used to move an element
  from one place to to another, but it can do so
  much more than that. Motion tweening enables one
  to scale, rotate, skew and move elements. Its
  also good for changing the color settings and
  transparency of a symbol over time.

30

• The general steps in creating Shape Tween are 
• Place 1st shape in the first keyframe and break
  it down.
• Place the 2nd shape in another keyframe and break
  it down.
• On the first frame double click the frame and
  select the 'Tweening' tab then 'Shape' in the
  Tweening drop down menu.
• In this tutorial, we will try to create 3 types
  of Shape Tweening
• Text to text Shape Tween
• Shape to text Shape Tween
• Shape to shape Shape Tween

31
Frame-by-Frame Animation

• Frame-by-frame animation is produced by changing
  the contents on a frame-by-frame basics. In
  flash, it involves moving the timeline to a
  frame, adjusting the content, moving the timeline
  to the next frame, adjusting the content, and so
  on. Since unique drawings are employed in each
  frame, this kind of animation is ideal for
  complex animations that require subtle changes.
  However, it is very time consuming and increases
  the movies overall file size.

32

• Movie clip symbol
• As mentioned before, a Movie Clip is simply a
  mini movie inside the main movie. Since the
  timeline of a movie clip is independent of the
  main movies timeline, when the main movie comes
  to stop, the movie clip can still continue to
  play. Unlike animated graphic symbols, movie
  clips only need a single keyframe in the timeline
  to play.

33
Basic Interactivity
34
Actions and Events

• Interactivity in Flash is fundamentally composed
  of two basic parts the behavior and the cause of
  the behavior. In Flash, behaviors are referred to
  as Actions, while any occurrence that cause an
  Action to happen is referred to as an Event. For
  example, suppose there is a soundtrack in a
  movie, and a button that when clicked, turns the
  soundtrack on. The behavior is the sound being
  turned on, and the cause of the behavior, i.e.
  the Event, is the mouse clicking on the button.
  In addition, the Mechanism that used to tell
  Flash what Action to perform when an Event occurs
  is known as an Event Handler.

35

• Actions
• Actions can be assigned to a frame or to the
  instance of a symbol. The Action tab is located
  in the Frame or Instance Properties dialog box,
  which can be opened by double clicking the
  keyframe / Instance or by choosing Modify Frame
  / Instance.
• Clicking the Plus sign will bring up a list of
  Actions that you can add, while clicking the
  minus sign will remove the Actions that you have
  added.

36
(No Transcript)
37

• As they appear in the Flash interface, the
  Actions are coincidentally sorted from the top to
  bottom roughly according to their complexity.
• Go to
• Causes a movie to jump to specific frame or
  scene on the timeline and stop or begin playing
  from that point forward. The default behavior is
  to jump to a frame and stop the movie.
• Play
• Causes a movie to begin playing from its current
  position in the timeline.
• Stop
• Causes a movie to stop playing.

38

• Toggle High Quality
• To turn anti-aliasing for a movie on and off.
  With anti-aliasing off, the movie plays faster.
• Stop All Sounds
• Stops all currently playing audio track without
  interrupting the movie Timeline.
• Get URL
• Opens a browser window with the specific URL
  loaded, or sends variables to the specific URL.
• FS Command
• Sends data to the application hosting your Flash
  movie.

39

• Load/Unload Movie
•   Loads a Flash movie, at the specified URL,
  within Flash player, or it unloads a previously
  loaded movie. You can also use it to load
  variables from a remote file into a movie.
•  
• Tell Target
•   A command that is used as a way of identifying
  a movie so that you can get it to perform an
  action.
•  
• It Frame Is Loaded
•   Determines whether a particular frame has been
  loaded and, if it has, performs an action.
• On Mouse Event
•   Mouse events are actually triggers rather than
  actions.

40

• If
•   Checks to see if a conditional statement is
  true and, if it is, performs an action.
•  
• Loop
•   Continuously performs an action or set of
  actions as long as a condition is met. When the
  condition ceases to be met, the loop stops.
•  
• Call
•   Performs a set of actions attached to a
  particular frame.
• Set Property
•   Allows you to set various movie properties.

41

•  Set Variable
•   Allows you to create a new variable or update
  an existing one.
•  
• Duplicate/Remove Movie Clip
•   Allows you to create or remove instances of
  movie clips dynamically.
•  
• Drag Movie Clip
•   Allows you to make a movie-clip instance
  draggable in relation to the pointers movement
• Trace
• Displays a custom message when an action is
  performed. Used primarily to test interactivity.
  
• Comment
•   This option allows you to place comments in
  your script to help clarify the underlying logic.

42

• Events
• In Flash, there are three ways to initiate
  events, known as
• Mouse Events those that detect mouse activity
  on buttons
• Keystroke Events - those that recognize when a
  key is pressed on the
• keyboard and
• Frame Events - those that respond when a set
  amount of time has passed.

43

• Mouse Events (button actions)
• The occurrence of Mouse Events is based on the
  users interaction with a button, and is relied
  entirely on the location and movement of the
  mouse pointer. This kind of events are also
  known as Button Actions because they are always
  attached to buttons and they always trigger an
  action.
• In Flash, the actions that can be assigned to
  buttons are referred to as On MouseEvents, which
  include
• Press
•   A Press Event occurs when the mouse pointer is
  over the Hit area of a button and the down-stroke
  (press)of a mouse click is detected.

44

• Release
•   A Release Event occurs when the mouse pointer
  is over the Hit area of a button and both the
  down-stroke (press) and the up-stroke (release)
  of a mouse click are detected. Release is the
  standard button action.
• Release Outside
•   A Release Outside Event occurs in response to
  the following series of mouse movements the
  mouse pointer moves over a buttons Hit area the
  moue button is pressed the mouse pointer is
  moved off the buttons Hit area the mouse button
  is released.
• Roll Over
• A Roll Over Event occurs when the mouse pointer
  moves onto the Hit area of a button without the
  mouse button depressed.  

45

• Roll Out
• A Roll Out Event occurs when the mouse pointer
  moves off of the Hit area of a button without the
  mouse button depressed.
• Drag Over
• A Drag Over Event occurs in response to the
  following series of mouse movements The mouse
  button is pressed while the mouse pointer is over
  the Hit area of a button the mouse pointer moves
  off the Hit area (mouse button still depressed)
  and the mouse pointer moves back over the Hit
  area (mouse button still depressed).  
• Drag Out
• A Drag Out Event occurs in response to the
  following series of mouse movements the mouse
  button is pressed while the mouse pointer is over
  the Hit area of a button the mouse pointer moves
  off the Hit area (mouse button still depressed).

46

• Keystroke Events
•  
• The Keystroke Events execute an Action when the
  user presses a key on their keyboard. To add a
  Keystroke Event, you must first place a button on
  stage at the frame where you want the keyboard to
  be active. You then attach the Keystroke Event
  to the button.
•  
• If you are only using the button as a container
  for your Keystroke Event and you do not want the
  button to appear on stage, you should make sure
  that (in Symbol editing mode) all the frames of
  the button are blank.

47

• Frame Events
•  
• Any actions that attached to keyframes on the
  timeline are referred to as Frame Events. This
  kind of event are dependent not on the user, but
  on the playback of the movie itself. It is
  because the actions will be executed when the
  play head enters the keyframe, whether it enters
  naturally during the linear playback of the movie
  or as the result of a Go to Action. So, for
  instance, you may place a Stop Action on a
  keyframe to pause the movie at the end of an
  animation sequence.
• Complex movies can have dozens or even hundreds
  of Actions attached to keyframes. In order to
  prevent conflicts between uses of keyframes for
  animation and uses of keyframes as Action
  containers, it is highly advisable to create an
  entire Layer solely for Action keyframes. Name
  the Layer Actions and keep it on top of all your
  Layers for easy access. Remember not to place
  any objects, text, or artwork on your Actions
  Layer.

48

• Examples
• Preload movies
• Simple Shooting Game

49
(No Transcript)
50
Testing and Exporting Movies
51
Testing Movies

• Within the Flash authoring environment you can
  test the following
• To test a buttons visual functionality, choose
  Modify Enable Buttons. Now you can place your
  pointer over your buttons, and they will react
  visually the way they will in your final movie.
  Disable this feature to edit instances of
  buttons.
• Go To, Play, and Stop are the only actions that
  work in the authoring environment. To test these
  frame actions, choose Modify Enable Frame
  Actions. Now, the actions will respond when the
  timeline is played within the authoring
  environment (as long as they dont rely on Action
  Script expressions or point to URLs).

52

• Testing within the authoring environment is
  limited. To evaluate movie clips, action
  scripts, and other important movie elements, you
  must move outside the authoring environment by
  the use of the Test Scene and Test Movie commands
  located in the Control menu. They automatically
  create a working version of the current scene or
  entire movie and open it in a window where you
  can test nearly every aspect of its
  interactivity, animation, and functionality.
• To test the current scene, choose Control Test
  Scene. Flash will automatically export the
  current scene and open it in a new window ready
  for you to test it.
• To test the entire movie, choose Control Test
  Movie. Flash will automatically export all of the
  scenes within the current project and open the
  file in a new window ready for you to test it.

53
Exporting Movies

• With Flashs Publish feature, you can simply
  choose the formats in which you want your
  authoring file to be exported, adjust any
  settings available for that format, then click
  Publish, Flash will export your authoring file to
  the selected formats and creates the files based
  on the settings you selected for that format. To
  open the Publish Settings dialog box, choose File
  Publish Settings. Then choose the type of
  format you want to export your movie.
• Among all the formats, the Flash .swf file and
  HTML are the most common way of delivering a
  Flash movie.  

54
(No Transcript)
55

• Flash and HTML
• You can place a Flash movie on an HTML page
  automatically by using the Publish feature.
  However, if you wish to build your pages or are
  interested in creating custom templates, you
  should know how Flash Integrates with HTML.
• To display a Flash Player movie in a browser, you
  have to insert the .swf file into an HTML page
  using the OBJECT and EMBED tags. The OBJECT tag
  allows the movie to display in Internet Explorer
  on Windows and the EMBED tag allows the movie to
  display on Netscape Navigator (Macintosh and
  Windows) and Internet Explorer (Macintosh). Also,
  use the NOEMBED tag with the IMG tag to display a
  GIF or JPEG file in place of the Flash Player
  movie on browsers that don't support ActiveX or
  Plug-ins.

56

• The HTML code below is used for Flash Object.
  Flash Player movie name, width, and height
  attributes are in both the OBJECT and EMBED tags.
  The NOEMBED to display alternate content for
  browsers that do not support Netscape compatible
  plugins or ActiveX controls.
• Using the Object and Embed Tags
  Together
• 553540000"
• codebase"http//download.macromedia.com/pub/shock
  wave/cabs/flash/swflash.cabversion4,0,2,0"
• width100 height80
•   height80
• pluginspage"http//www.macromedia.com/shockwave/d
  ownload/index.cgi?P1_Prod_VersionShockwaveFlash"
   
•  

57
True and False Questions

• Vector-based graphic is the main different of
  Flash from Traditional HTML
• Frame Rate is optimized as 6 frames per second
• IE supports Flash
• Netscape does not need additional plug-ins for
  Flash
• Flash can create animated gif

58

• THANK YOU