Exercise 3 - PowerPoint PPT Presentation

Loading...

PPT – Exercise 3 PowerPoint presentation | free to download - id: 12fff5-ZmZmZ



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Exercise 3

Description:

Create 'Disjointed Rollover' using ActionScript Anselm Spoerri. Recap Symbol: Behavior Types ... Step 4a Create 'Disjointed' Rollover. Create 'Furcup Animation' ... – PowerPoint PPT presentation

Number of Views:42
Avg rating:3.0/5.0
Slides: 22
Provided by: anselms8
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Exercise 3


1
Lecture 26
  • Exercise 3
  • Graded
  • http//scils.rutgers.edu/aspoerri/Teaching/InfoVi
    s2007_ITI/classexercises.htm
  • Revisions Due April 26 noon
  • Recap Exercise 3 Steps
  • Final Project ? Due May 3 10am
  • http//scils.rutgers.edu/aspoerri/Teaching/InfoVi
    s2007_ITI/Requirements.htm
  • Have class on May 3 regular time
  • Assist you with your Final Project next week and
    on May 1
  • Extra Credit
  • Participate in an information visualization user
    study
  • Interested?
  • Flash New Material
  • Create Function
  • Create Button using ActionScript
  • Name Keyframes
  • Create Disjointed Rollover using ActionScript

2
Key Points
  • 4. Button UP BUTTON Symbol
  • OVER State
  • 3. Animation MOVIE Symbol
  • 2. Bitmap Symbol GRAPHIC Symbol
  • Import Bitmap
  • To Change Alpha ? Select Instance of Symbol
  • Animation Stops ? Add stop () to last keyframe
  • Navigation
  • Select instance of Button and attach ActionScript
  • Save Time ? Use Duplicate and Modify

3
Done So Far Create Flash Website with Animated
Buttons
  • Import Images
  • Convert Images to Graphic Symbols
  • Insert gt Convert to Symbol
  • Create Movie Clip using Insert gt New Symbol
  • Insert Graphic Symbol and Animate
  • Create Buttons
  • Insert Movie Clip in Over State
  • Create UP and DOWN Buttons
  • Create Navigation Bar in Scene 1 and add
    ActionScript
  • Create Scene for Each Category and Swap In
    Down Button
  • ? This Week Create Secondary Navigationand
    Disjointed Rollover using ActionScript

4
Cover Today
  • Flash
  • Create Function
  • Create Button using ActionScript
  • Name Keyframes
  • Create Disjointed Rollover using ActionScript

5
Recap Symbol Behavior Types
  • Graphic Symbols for static images
  • Button Symbols to create interactive buttons
  • Movie Clip Symbols to create reusable pieces of
    animation
  • Font Symbols to use in other Flash movies
  • Convert Element to Symbol
  • Insert gt Convert to Symbol
  • Drag the selection to the Library panel
  • Convert to Symbol from the context menu

6
Attach ActionScript
  • Frame ? stop () Function definitions
    Variables
  • Button
  • Movie Clip
  • Actions panel allows you to select, drag and
    drop, rearrange, and delete actions
  • Reference panel to view detailed descriptions of
    actions
  • ? Window gt Reference
  • Flash can detect what action you are entering and
    display code hint
  • Scripts attached to a frame execute when playhead
    enters frame.
  • first frame in a movie is rendered incrementally
  • Scripts attached to movie clips / buttons execute
    when event occurs

7
ActionScript Terminology
  • Objects are collections of properties and methods
  • Methods are functions assigned to an object
  • Instances are objects that belong to a certain
    class
  • Instance names are unique names that allow you to
    target movie clip instances in scripts
  • Use Property inspector to assign instance names
    to instances on Stage.
  • this to movie clips
  • Target Paths Hierarchical Addresses movie clip
    instance names, variables, objects in movie
  • Use target path to direct action at a movie clip
    or to get or set variable value
  • _root.stereoControl.volume

8
Dot Syntax .
  • Indicate the properties or methods related to an
    object or movie clip
  • Used to identify target path to a movie clip,
    variable, function, or object
  • movieClip._x
  • movieClip._alpha
  • movieClip._xscale
  • movieClip._visible true
  • _parent.movieClip.play ()

9
Defining a Function
  • // global
  • _global.myFunction function (x)
  • return (x2)3
  • // local
  • function sqr(x)
  • return x x

10
MovieClip Event Handler Actions and Methods
onPress onRelease onRollOver onRollOut
11
Final Project
  • Requirements
  • 4 5 Primary Categories
  • Includes About category
  • Develop each category scene
  • 2 3 Secondary Categories for Each Primary
    Category
  • Create Primary Navigation (done in Ex3)
  • Create Secondary Navigation (name frames within
    scene)
  • Communicate Your Message
  • Short Burst of Text
  • Images
  • Animations
  • Answering Question
  • What did you learn in ITI program?
  • What do you have to offer?
  • What are your passions?

12
Step 0 Download files, Launch Flash, Create
Document
  • Create folder infovis26 in My Documents
    folder
  • Download Files
  • http//scils.rutgers.edu/aspoerri/Teaching/InfoV
    is2007_ITI/Lectures/Lecture26/stepbystep26/
  • Launch Flash
  • Open File Step0.fla
  • Using Grid, Rulers and Guides
  • Rulers
  • View gt Rulers
  • Guides
  • View gt Guides gt Show Guides

13
Step 1 Create Global Function
  • Insert Layer functions in first scene Bilbao
    to contain global functions
  • Want to create function that changes transparency
    and scale of movie
  • Open Actions Window
  • Enter function definition
  • _global.changeVisuals function (movieClip,
    alpha, scale)
  • movieClip._alpha alpha
  • movieClip._xscale scale
  • movieClip._yscale scale

14
Step 2a Create Secondary Navigation Buttons
Using ActionScript
  • 1) Create Movie Symbol Furcup Button
  • 2) Create Button Background and Text
  • 3) Create Secondary Navigation Area in Meret
    Scene
  • 4) Add instance of Furcup Button movie clip to
    Meret scene and name it Furcup
  • 5) Select Furcup instance
  • 6) Open Actions window

15
Step 2b Create Secondary Navigation Buttons
Using ActionScript
  • With Furcup movie clip instance selected, add
    in Actions Window
  • onClipEvent (load)
  • var alphaOut 50
  • var alphaOver 75
  • var alphaPress 100
  • var scaleOut 100
  • var scaleOver 110
  • var scalePress scaleOver
  • // set transparency
  • this._alpha alphaOut
  • this.onRollOver function ()
  • trace ("Over")
  • changeVisuals (this, alphaOver, scaleOver)

16
Step 2c Create Secondary Navigation Buttons
Using ActionScript
  • onClipEvent (load)
  • var alphaOut 50
  • var alphaOver 75
  • var alphaPress 100
  • var scaleOut 100
  • var scaleOver 110
  • var scalePress scaleOver
  • // set transparency
  • this._alpha alphaOut
  • this.onRollOver function ()
  • trace ("Over")
  • changeVisuals (this, alphaOver, scaleOver)
  • this.onRollOut function ()
  • trace ("Out")
  • changeVisuals (this, alphaOut, scaleOut)
  • this.onPress function ()
  • trace ("Press")

17
Step 3a Label Keyframe, Create DOWN Button
  • 1) Create layer labelled
  • 2) Select frame 20, Insert Keyframe and Name it
    Furcup
  • 3) Add stop () to actions layer at frame
    20(need to add insert keyframe)
  • 3) Insert Keyframe at frame 20 in layer
    furcup
  • 4) Select instance of movie clip and name it
    FurcupDown

18
Step 3b Modify attached ActionScript
  • Modify ActionScript attached to FurcupDown
    instance
  • var scalePress 120
  • this._alpha alphaPress
  • this._xscale scaleOver
  • this._yscale scaleOver
  • this.onRollOver function ()
  • trace ("Over")
  • changeVisuals (this, alphaPress, scaleOver)
  • this.onRollOut function ()
  • trace ("Out")
  • changeVisuals (this, alphaPress, scaleOut)
  • this.onPress function ()
  • trace ("Press")
  • changeVisuals (this, alphaPress, scalePress)
  • _parent.gotoAndStop("Furcup")

19
Step 4a Create Disjointed Rollover
  • Create Furcup Animation
  • 1) Import Furcup image and convert to Graphic
    Symbol
  • 2) Create new movie clip symbol called Furcup
    Animation
  • 3) Create Animation (make sure image expands from
    origin of movie clip).
  • 4) Add instance Furcup Animation to Meret
    scene at frame Furcup
  • 5) Name instance FurcupImage
  • Create Furcup Text"
  • 1) Create new movie clip symbol called Furcup
    Text
  • 2) Create Text
  • 3) Add instance Furcup Text to Meret scene
    at frame Furcup
  • 5) Name instance FurcupText

20
Step 4b Create Disjointed Rollover
  • Make FurcupText Invisible
  • 1) Select actions layer at frame 20
  • 2) Add ActionScript
  • FurcupText._visible false

21
Step 4c Create Disjointed Rollover
  • Add Disjointed Rollover to FurcupImage
  • Select FurcupImage instance and in Actions
    window
  • onClipEvent (load)
  • this.onRollOver function ()
  • trace ("Over")
  • _parent.FurcupText._visible true
  • this.onRollOut function ()
  • trace ("Out")
  • _parent.FurcupText._visible false
  • this.onPress function ()
  • trace ("Press")
About PowerShow.com