1 / 29

Lecture 6

Lecture 6. Housekeeping Exercise 1 : Revisions due Week 7 Exercise 3 : Due Week 8 Visual Storytelling and Visual Hierarchy Meaning Presentation Pyramid Mechanics Fireworks Recap New Features: Import Image, Text as Mask Dreamweaver Step-by-Step Example Layout

austin
Download Presentation

Lecture 6

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 6 • Housekeeping • Exercise 1 : Revisions due Week 7 • Exercise 3 : Due Week 8 • Visual Storytelling and Visual Hierarchy • 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 • Example

  3. Exercise 3 – How • Find Images to Support Storyline • Scan from Books or Magazines • 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. Dreamweaver – Example – Step by Step • Layout & Interactions Example • 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

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

  13. “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

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

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

  16. Step 0 – Download files and Initialize • Create folder “mplec6” in “My Documents” folder • 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 Layout Table • Layout View • Select “Layout” in Insert bar and then click “Layout” button Or • View > Table Mode > Layout Mode • Create Layout Table • Select green “Layout Table” icon and draw layout table in top left corner • Specify Width & Height • Select tab of “layout table” object • “Properties Inspector” changes to “Layout Table” • Select “Fixed” in Properties Window and enter Width = 700 and Height = 450

  18. Step 1b – Create Layout Tables within Larger Table • Create Three Interior Layout Tables Select green “Layout Table” icon and draw each layout table: • Interior Table 1: start at (horizontal = 50, vertical = 50) and Width = 200 and Height = 50 • Interior Table 2: start at (hori. = 50, vert. = 125) = top left cornerand Width = 200 and Height = 300 • Interior Table 3: start (hori. = 300, vert. = 50) = top left cornerand Width = 300 and Height = 375

  19. Step 1c – Create Layout Cells • Open file “layout1b” to continue • Create Layout Cell • Select blue “Layout Cell” icon and draw layout cell in top left corner of “Interior Table 3” • Specify Width & Height • Select bounding box of “layout cell” object • “Properties Inspector” changes to “Layout Cell” • Select “Fixed” in Properties Window and enter Width = 100 and Height = 50 • Create Series of Layout Cells • Two Cells: next to cell created above and same dimensions Gap of 50 pixels • Nine Cells: forming a 3x3 square of 9 square cells with Width = Height = 100

  20. Step 1d – Insert Images and Assign Names • Open file “layout1c” to continue • Insert Images • Place Cursor inside cell into which want to insert an image(if cell is selected you can not insert)Place cursor inside top left cell • Insert > Image or Click “image” icon in “Objects” panel • “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

  21. Step 1e – Insert Images and Assign Names • Insert & Name Images • Place Cursor inside cell into which want to insert an image(if cell is selected you can not insert) • Insert > Image • Top right cell = “dancebutton” and name it “dance” • 9 Cells of 3x3 Square: • Cell1and1 = “1_1” and name “cell1and1” • Cell1and2 = “1_2” and name “cell1and2” … • Cell3and2 = “3_2” and name “cell3and2” • Cell3and3 = “3_3” 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

  22. Step 1f – Adding text • Insert Text • Place Cursor inside cell into which enter text • Type “Animated Rollovers” • Format Text • Select Text • “Properties Inspector” changes to “Format” • Select “Font” pull down menu and select “Verdana”(provided the Page type is not already set to “Verdana”) • Select “Size” pull down menu and select “12” This way you can specify your preferred typeface and its size

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

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

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

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

  27. 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  Demo

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

  29. Step 3 – Creating Image Map • Open file “layout3” to continue • Create Layout Cells in Interior Table 2 • Top cell: Width = 200 and Height = 50 • Middle cell: Width = 200 and Height = 200 • Insert Images • Middle cell = “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”

More Related