Lecture 6

1. 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

2. 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

3. 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

4. Summary Two to Three Paragraphs More detailed information Presentation Pyramid: Summary  Paragraph  Page

5. 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

6. 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

7. 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 • 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” actionand return to step 3.

8. Fireworks - Import Image • File > Import … (navigate to image you want) • Align Insertion Pointer and Clickwith 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

9. 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

10. 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

11. Disjointed Rollover 1. Select Graphic 2. Select “+” in Behavior Window 3. Select “Swap Image” 4. 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

12. “Behavior Management” • Changing Which Event Triggers Action • Select Event in “Behaviors” Window • Press on black triangleand 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

13. “Behavior Management” – Show Events for … Only “onMouseOver” event visible? Or Most of Behaviors grayed out? Select thisto have moreEVENT and BEHAVIOR options

14. 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

15. 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

16. 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”

17. 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 • ID = “Left”; Width = 100; Height = 50; L = 300; T = 50; • ID = “Right”; Width = 100; Height = 50; L = 500; T = 50; • ID = “Center”; Width = 300; Height = 300; L = 300; T = 150; • ID = “ImageMap”; Width = 200; Height = 200; L = 50; T = 200;

18. 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

19. 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

20. 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” and name “cell1and1” • Cell1and2 = “whiteCell” and name “cell1and2” … • Cell3and2 = “whiteCell” and name “cell3and2” • Cell3and3 = “whiteCell” and name “cell3and3” • Why white placeholder images? • Will be used for “disjointed rollover” e.g. when we move mouse across “dance” imagethe placeholders will be exchanged with dance images

21. 1. Select “dance” 2. Browse to & select “dance_text” (a star symbol will be placed toimage being swapped) Always select “Preload Images” If want initial images restoredon MouseOut, select check box For now do not select it. 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”)

22. 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

23. 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

24. 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

25. 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

26. Corners Middle Center State 1 State 2 State 3 State 4 Coordinating Animated GIFs Example

27. 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” imagebut “Restore Images on MouseOut” selected • Swapped on mouse click = “onClick” • Final file “layout4”