Exercise 3 Revisions Due April 26 noon

1
Lecture 27

• Exercise 3 Revisions Due April 26 noon
• Final Project ? Due May 3 10am
• http//scils.rutgers.edu/aspoerri/Teaching/InfoVi
  s2007_ITI/Requirements.htm
• Have class on May 3 regular time and attendance
  required
• Assist you with your Final Project Thurs April 26
  and on Tues May 1
• Course Review
• Course Evaluation
• Flash Wrap Up
• Create Function
• Create Button using ActionScript
• Name Keyframes
• Create Disjointed Rollover using ActionScript

2
Final Project

• Requirements
• 4 5 Primary Categories
• Includes About category
• 2 3 Secondary Categories for Each Primary
  Category
• Create Primary Navigation (done in Ex3)
• Create Secondary Navigation
• 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?

3
Mechanics Goals for Final Project

• Mechanics - technical competency in web and
  multimedia design
• Navigation
• Easy to find your way? Consistent Primary
  Navigation?
• Layout
• Clear, instant Visual Hierarchy? Pages easy to
  understand? "Look feel" enticing?
• Typography
• Text easy to read? Designed for scanning?
• Visuals
• Graphics easy to understand? Image Layouts tell a
  story? Animations well timed and composed?
• Interactivity
• Use of interactive elements - links, rollovers?
  Interactive elements easy to understand and
  effective?

4
Meaning Goals for Final Project

• Meaning - concise presentation of content and
  effective use of multimedia
• Clarity
• Content easy to understand?
• Conciseness
• Content presented in a concise form? Enough
  information but not too much?
• Relevance
• Content informative? Relevant? Insightful?
• Creativity
• Creative Use of text, images, multimedia
  interactivity?
• Creative Approach to communicating what you have
  learned and have to offer
• Due May 3, 2007 (send email with URL to
  instructor by 10am the latest)

5
Recap Guide the Eye

• Sharp Contrasts
• Light intensity, Color, Texture, Shape, Motion
• Visual Grouping
• Continuity Within vs. Sharp Change Across
• Related Spatially Close
• Unrelated Large Gap
• Visual Hierarchy
• More Important Larger / Sharp Contrast
• Visual Weight Conceptual Importance
• Short-term Memory 5 ? 2

6
Recap Color Coding
Large areas low saturation Small areas high
saturation
7
User Behavior ? Design Implications ? Design
Specifics

• 1 Use Grid System
• Maintain ConsistencyHelps you decide location
  of primary secondary navigation location and
  sizes of images location of headlines, main
  text, annotations etc.
• Create Visual Hierarchy Rhythm
• Present Information Clearly LogicallyUsers can
  read info more quickly.Facilitates understanding
  and recall.
• Invisible Hand guiding users and creating sense
  of place

8
User Behavior ? Design Implications ? Design
Specifics

• 2 Create Visual Hierarchy Guide Eye
• Important Things Visually Prominent(More
  Important Larger / Sharp Contrast)Use
  headlines to guide the eye
• Visual ContrastUse sharp changes in size
  (headline), light intensity (bold), color,
  texture, motion to create contrast.
• Proximity related things spatially closeSpatial
  separation conceptual separation.Don't mix
  alignment styles.
• Use Grouping Nesting to Increase Information
  Density (Short-term Memory 3-7)Use bounding
  shapes.

9
User Behavior ? Design Implications ? Design
Specifics

• 3 Typography Heuristics
• Sans Serif type is easier to read on screen
• Type size 10 -14 points
• 7 - 10 words per line
• Column width proportional to type size
• Bold and italic for small blocks of text
• Enough contrast between type background

10
User Behavior ? Design Implications ? Design
Specifics

• 1 Use Grid System
• Maintain ConsistencyHelps you decide location
  of primary secondary navigation location and
  sizes of images location of headlines, main
  text, annotations etc.
• Create Visual Hierarchy Rhythm
• Present Information Clearly LogicallyUsers can
  read info more quickly.Facilitates understanding
  and recall.
• Invisible Hand guiding users and creating sense
  of place

• 2 Create Visual Hierarchy Guide Eye
• Important Things Visually Prominent(More
  Important Larger / Sharp Contrast)Use
  headlines to guide the eye
• Visual ContrastUse sharp changes in size
  (headline), light intensity (bold), color,
  texture, motion to create contrast.
• Proximity related things spatially
  close.Spatial separation conceptual
  separation.Don't mix alignment styles.
• Use Grouping Nesting to Increase Information
  Density (Short-term Memory 3-7)Use bounding
  shapes.

• 3 Typography Heuristics
• Sans Serif type is easier to read on screen
• Type size 10 -14 points
• 7 - 10 words per line
• Column width proportional to type size
• Bold and italic used for small blocks of text
• Enough contrast between type and background

11
Summary Basic Editing Principles
12
Survey Software Skills Flash Goal
Teach Key Design Principles for Web, Video and
InfoVis Focus on Video and Flash design skills
13
Course Goals

• Foundation in Human Visual Perception
• How it relates to creating effective information
  visualizations.
• Understand Key Design Principles
• Web Design Multimedia Information
  Visualization
• Analyze website, video, infovis tools
• Web Design Matrix
• Video Editing Essentials
• InfoVis Toolbox
• Videos and Software Demos
• Video Editing using Premiere
• Transitions Overlays Text
• Flash Programming
• Animation Interactivity ActionScript

14
Course Goals

• InfoVis course has Given You
• Hands-on Experience
• InfoVis apps (demo or video), Video Editing,
  Flash Design
• Practical Knowledge
• Key Design Principles Web Design Matrix, Video
  Editing Essentials, InfoVis Toolbox
• Foundation in Human Visual Perception
• Video editing
• Flash design
• Marketable Skills
• How to present information effectively
• How to use multimedia, such as video and
  animations, to communicate complex ideas
• How to design effective web pages
• How to visualize large and abstract data sets

15
In a nutshell

• Guide the Eye
• Crystallize Information
• Facilitate Understanding

16
Course Evaluation

• College Course Section
• 04 547 321 01
• Instructor Name Anselm Spoerri
• Course Title Information Visualization

17
Cover Today

• Flash
• Create Function
• Create Button using ActionScript
• Name Keyframes
• Create Disjointed Rollover using ActionScript

18
Recap Dot Syntax . and Behaviors

• movieClip._x
• movieClip._alpha
• movieClip._xscale
• movieClip._visible true
• _parent.movieClip.play ()
• onRollOver onRollOut onPress onRelease

19
Step 0 Download files, Launch Flash, Create
Document

• Create folder infovis25 in My Documents
  folder
• Download Files
• http//scils.rutgers.edu/aspoerri/Teaching/InfoVi
  s2007_ITI/Lectures/Lecture27/stepbystep27/
• Launch Flash
• Open File Step2c.fla
• Using Grid, Rulers and Guides
• Rulers
• View gt Rulers
• Guides
• View gt Guides gt Show Guides

20
Done 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

21
Done 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

22
Done 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)

23
Done 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")

24
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

25
Step 3b Modify attached ActionScript

• Modify ActionScript attached to FurcupDown
  instance
• var scalePress 120
• this._alpha alphaPress
• this._xscale scaleOut
• this._yscale scaleOut
• 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")

26
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

27
Step 4b Create Disjointed Rollover

• Make FurcupText Invisible
• 1) Select actions layer at frame 20
• 2) Add ActionScript
• FurcupText._visible false

28
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")