Lecture 6
Housekeeping
– Exercise 1 : Revisions due Week 7
– Exercise 3 : Due Week 8
– Visual Storytelling and COLORS Layouts
Meaning
– Presentation Pyramid
Mechanics
– Fireworks
– Recap
– New Features: Import Image, Text as Mask
– Dreamweaver Step-by-Step Example
– Layout
– Interactivity: Rollovers and Image Maps
© Anselm Spoerri
Exercise 3 - Goal
Visualize idea you want to communicate in final project
Create layout of images & limited text that "tells visual story”
Create layouts with clear visual hierarchy & good rhythm
Ask: What is most important?
Images = "adjectives“ in story
–
Close ups, Faces, Detail, Shows action, Matching reaction
Make sure that key idea is visible “above the fold”
(640x480 area)
Introduce pauses in your animated GIFs.
Can use several animated GIFs to guide the eye across page
© Anselm Spoerri
Exercise 3 – How
Find Images to Support Storyline
– Scan from Books or Magazines
– Flickr
– Web Images
– “Save As” in the Browser: saves images in supporting folder
– Mouse Right Click on image and use “Save Target As”
Fireworks
–
–
–
–
Resize or Crop original image
Create Selections (rectangle or polygon)
Create Collages by combining layers
“Image Preview”: JPEG if rich in color, GIF if limited colors
Create Grid & Layout
– Resize images if needed (via image handles + SHIFT key)
or Crop image
© Anselm Spoerri
Presentation Pyramid: Summary  Paragraph  Page
Summary
Two to Three Paragraphs
More detailed information
© Anselm Spoerri
Recap – Fireworks: Simple Image Manipulation
Goal
– Create or manipulate image to create Visual Focus & Hierarchy
– Create imagery for Navigation Bar, Rollovers or Image Map
– Create frames for Animated GIF
Create Smaller Image
– Modify > Canvas > Image Size
– Specify Width / Height
– Make sure width & height linked (check “Constrain Proportions” box)
– File > Image Preview > Export
(do not overwrite original)
Create Image of Specific Size
– Select “Crop” tool
– Specify Crop Area by holding mouse down and moving cursor
– Change size of crop area by interacting with its corner handles
– Move crop area by selecting inside crop area
– Double–click or enter Enter
– File > Image Preview > Export
© Anselm Spoerri
Recap – Fireworks: Selection
Goal
– Want to combine part of image with other images to create collage
How?
– Create Selection
–
–
–
–
–
Select object you want select (parts of) or trace
Select “Selection” or “Lasso” tool
Perform Selection or Lasso Action
Edit > Copy
Edit > Paste (new object is created)
– Control Layer Visibility and Stacking Order in “Layers” Panel
– (De)select EYE icon and select & drag layer to desired stack position
– Control Object Properties
– Select Object and use Properties Inspector
Selection / Lasso Tool
– Rectangular or Rounded, Circle, Ellipse
– Click Tool icon, hold mouse and choose shape of selection
– Square or Circle - hold down shift key while drag mouse
– Lasso, Polygon Lasso
– Lasso: Hold down mouse and draw shape - release of mouse closes shape
– Polygon: Mouse click creates corner - double click closes polygon
© Anselm Spoerri
Recap – Fireworks: Create Text and Images for Animation
Goal: Create Text
–
–
–
Text for buttons in Navigation Bar
Text for links or captions in Image Map
Add text to frame of Animated GIF
How?
–
–
–
–
–
–
Select “Text” tool
Move Cursor & Click Mouse where you want text to start
Text Property Inspector: type face & size, anti-aliasing, color, effects
Type (text layer is created – make sure layer towards top of stack)
Select “Pointer” Tool to move text
Select “Text” Tool and select (part of) text to change its properties
Create Images for Animated GIF
1.
2.
3.
4.
5.
Select “Crop“ tool
Specify Width & Height
Create Cropped Image Area and double–click
File > Image Preview > Export as GIF
Apply “Edit > Undo” to go back to state before “crop” action
and return to step 3.
© Anselm Spoerri
Fireworks - Import Image
File > Import …
(navigate to image you want)
Align Insertion Pointer and Click
with upper left corner of canvas or location of your choice.
– If you hold & drag mouse, then you can specify size of inserted image.
Specify Transparency
– Select object
– Specify transparency in Property Inspector
See “Lec6InsertImage.png” file part of “stepbystep6” zip file
© Anselm Spoerri
Fireworks - Using Text as a Mask
Create or Select Text Object
Position Text Object
so that so that it overlaps object or group of objects to be masked
Edit > Cut Text Object
Select Object(s) to Mask
– If masking multiple objects, they must be grouped
Edit > Paste as Mask
or Modify > Mask > Paste as Mask
See “Lec6TextMask.png” file part of “stepbystep6” zip file
© Anselm Spoerri
Interaction Design
Interactivity Choices
– Rollovers
– “Jointed” = interact with page element and it changes its appearance
 example
– “Disjointed” = interact with page element and OTHER elements change
 example
– Image Maps
– Interact with Hotspots = Circle, Rectangle, Polygon
 example
© Anselm Spoerri
Disjointed Rollover
1.
2.
3.
4.
Select Graphic
Select “+” in Behavior Window
Select “Swap Image”
Select Image(s) to swap and browse to
replacement image (* indicator now next to image)
5. Select “Preload Images”
Importance of NAMING your graphic elements
© Anselm Spoerri
“Behavior Management”
Changing Which Event Triggers Action
– Select Event in “Behaviors” Window
– Press on black triangle
and pull down menu appears
– Select which event triggers behavior
(mouse click or mouse over etc.)
Multiple Behaviors
–Can attach multiple actions to same object
–Action for “MouseOver” (Default)
–Action for “MouseClick”
–Etc.
–Press “+” icon and select
© Anselm Spoerri
“Behavior Management” – Show Events for …
Only “onMouseOver” event visible?
Or
Most of Behaviors grayed out?
Select this
to have more
EVENT and
BEHAVIOR options
© Anselm Spoerri
Image Map
Create Hotspot(s)
– Select Image
– Select hotspot tool in “Properties Inspector”
– Make sure all Property Inspector options visible
(if not, click bottom right triangle)
– Rectangle / Circle: draw shape over hotspot region
– Polygon: trace contour of hotspot region by clicking mouse
– Select Hopsot using “hotspot selection arrow”
– Attach Behavior
© Anselm Spoerri
Dreamweaver – Example – Step by Step
Layout & Interactions
– Create layout for navigation and multiple images
– Work with Animated GIFs
– Create Disjointed Rollovers
– Use of "blank images" that can be swapped
– Assign "image swaps"
– Orchestration of multiple Animated GIFs
– Create Image Map: move over, single click, double click
Next Class
– Create Primary Navigation: "you are here now“
– Use Navigation Bar and/or Rollovers
© Anselm Spoerri
Step 0 – Download files and Initialize
Create folder “mplec6”
Download Files and Images
(select “zip” file and download)
http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture6/stepbystep/
Launch Dreamweaver
Initialize
–
–
–
–
File > New
View > select “Design”
View > Rulers > select “Show” and “Pixels”
Windows > select “Properties” and “Behaviors”
© Anselm Spoerri
Step 1a – Create AP Elements
Create AP Element
– Standard Mode + Layout View
– Insert > Layout Object > AP Div
or
Click “Draw AP Div” button in “Insert” panel, then drag to draw
ID = “Main”; Width = 700; Height = 500; L = 0; T = 0;
Nested AP Elements in “Main” AP Element
1. ID = “Left”; Width = 100; Height = 50; L = 300; T = 50;
2. ID = “Right”; Width = 100; Height = 50; L = 500; T = 50;
3. ID = “Center”; Width = 300; Height = 300; L = 300; T = 150;
4. ID = “ImageMap”; Width = 200; Height = 200; L = 50; T = 200;
© Anselm Spoerri
Step 1b – Create Tables Inside AP Element
Open file “layout1a” to continue
Create Table inside of AP Element
–
–
–
–
Place Cursor inside “Center” AP Element
Insert > Table 3 Columns x 3 Rows
Select all Nine Cells
Property Inspector : Width = Height = 100
© Anselm Spoerri
Step 1c – Insert Images and Assign Names
Open file “layout1b” to continue
Insert Images
– Place Cursor inside “Left” AP Element
– Insert > Image
– “Select Image Source” dialog opens
– Select “images” folder
– Select “bilbao_L”
Name Image
– Select image (you want to name)
– “Properties Inspector” changes to “Image” and its thumbnail shows
– Enter name “bilbao” next to thumbnail
Why name image?
– Want to be able to refer to image (and select in a list)
e.g. so that we swap it with another image in rollover
© Anselm Spoerri
Step 1d – Insert Images and Assign Names
Insert & Name Images
– Place Cursor inside AP Element / Table Cell
(if cell is selected you can not insert)
– Insert > Image
– “Right” AP Element = “dancebutton” and name it “dance”
– 9 Cells of 3x3 Table:
– Cell1and1 = “whiteCell”
– Cell1and2 = “whiteCell”
…
– Cell3and2 = “whiteCell”
– Cell3and3 = “whiteCell”
and name “cell1and1”
and name “cell1and2”
and name “cell3and2”
and name “cell3and3”
Why white placeholder images?
– Will be used for “disjointed rollover”
e.g. when we move mouse across “dance” image
the placeholders will be exchanged with dance images
© Anselm Spoerri
Step 2a – Create Simple Rollover Using Behaviors
Open file “layout2” to continue (press F12 to view in Browser)
Attach Behavior to Image
– Select image = “dance”
(BTW: similar for text)
– In “Properties” window, enter dummy hyperlink = #
into hyperlink field
– In “Behaviors” window, select “+” icon
– Select “Swap Image” in pull down menu
– Specify which of listed images should swapped
with which another image (using “Browse” and “Select”)
1. Select “dance”
2. Browse to & select “dance_text”
(a star symbol will be placed to
image being swapped)
Always select “Preload Images”
If want initial images restored
on MouseOut, select check box
For now do not select it.
© Anselm Spoerri
Step 2b – Create Simple Rollover Using Behaviors
Done so far (Open file “layout2a” to continue)
Attached Simple Rollover to “dance” so mouse-over changes it to “dance_text”
 Use F12 to test it
Next
Attached Simple Rollover to “bilbao” so mouse-over changes it to “bilbao_text”
Attach Behavior to Image
= “bilbao”
– Select image = “bilbao”
– In “Behaviors” window, select “+” icon
– Select “Swap Image” in pull down menu
– Select “bilbao” and Browse to & select “bilbao_text”
– “Restore Images on MouseOut” not selected
What is missing?
– When moving mouse over “dance” we want “bilbao” to change as well
 We want to create a Disjointed Rollover, where not only image we move
mouse over is changed
© Anselm Spoerri
Step 2c – Create Disjointed Rollover Using Behaviors
Done so far (Open file “layout2b” to continue)
Attached Simple Rollovers to “dance” and “bilbao”
Next
Attach Disjointed Rollover to “dance” so “bilbao” changes to “bilbao_L”
Attach Disjointed Rollover to “bilbao” so “dance” changes to “dancebutton”
Attach Behavior to Image
Select image = “dance”
– In “Behaviors” window, double click on “Swap Image” behavior
– In “Behavior - Swap Image dialog” for “dance” image
– Select “bilbao” and Browse to & select “bilbao_L”
– “Restore Images on MouseOut” not selected
Select image = “bilbao”
– In “Behaviors” window, double click on “Swap Image” behavior
– In “Behavior - Swap Image dialog” for “bilbao” image
– Select “dance” and Browse to & select “dancebutton”
– “Restore Images on MouseOut” not selected
Use F12 to test it
© Anselm Spoerri
Step 2d – Add Disjointed Rollovers Using Behaviors
Add further Disjointed Rollovers to “dance” image (Open file “layout2c” to continue)
Select “dance” image
In “Behaviors” window, double click on “Swap Image” behavior
Still in “Behavior - Swap Image dialog” for “dance” image
– Select “cell1and1” and browse & select “dance1_1”
– Select “cell1and2” and browse & select “dance1_2”
…
– Select “cell3and3” and browse & select “dance3_3”
– Make sure “Preload Images” selected
“Restore Images on MouseOut” not selected
Press F12 to test page in Browser
© Anselm Spoerri
Step 2e – Add Disjointed Rollovers Using Behaviors
Add further Disjointed Rollovers to “bilbao” image (Open file “layout2d” to continue)
Select “bilbao” image
In “Behaviors” window, double click on “Swap Image” behavior
“Behavior - Swap Image dialog” for “bilbao” image
– Select “cell1and1” and browse & select “bilbao1_1”
– Select “cell1and2” and browse & select “bilbao1_2”
…
– Select “cell3and3” and browse & select “bilbao3_3”
– Make sure “Preload Images” selected
“Restore Images on MouseOut” not selected
The “bilbaox_x” images are Animated GIFs
– Open in Fireworks if you want to examine them
© Anselm Spoerri
Coordinating Animated GIFs
Example
Corners
Middle
Center
State 1
State 2
State 3
State 4
© Anselm Spoerri
Step 3 – Creating Image Map
Open file “layout3” to continue
Insert Images
– “lmageMap” AP Element = “imagemap” and name it “imagemap”
Open file “layout3plus”
Create Hotspot
–
–
–
–
–
Select “imagemap” image
Select “Polygon” hotspot tool in “Properties” window
Trace contour of dancer by clicking mouse along contour
Select Hopsot that was created
Attach “Swap Image” behavior
and make same swaps as with “dance” image
but “Restore Images on MouseOut” selected
– Swapped on mouse click = “onClick”
Final file “layout4”
© Anselm Spoerri