1. © Anselm Spoerri Lecture 8 Meaning –Course Reward –Term Project –Exercise 4 Mechanics –Dreamweaver –Layers = AP Elements  more flexible page layouts –Overlapping Layout Tables & Cells –Animation

2. © Anselm Spoerri Comfort Sophistication Interactive Multimedia Website that Communicates Course Reward Beginning of Sense of What is POSSIBLE Building Tension For Breakthrough In Future Classes Will Work on Final Project

3. © Anselm Spoerri Term Project “Role of Personal Interests?” –Very important –Place where you can be especially Playful & Creative Overall Goals of Term Project –Create Website that Communicates Your Vision –Build Cool Site to Use as Your Calling Card –Demonstrate Technology, Media and Culture Savvy –Demonstrate Your Understanding of Class Content –Present your web site to the class Evaluation Criteria –Mechanics : technical competency in web and multimedia design, such as navigation, layout, media editing, access performance. –Meaning : concise presentation of content and effective use of multimedia. –Creativity

4. © Anselm Spoerri Exercise 4 Create Images for Navigation Bar –Images need to have same height (horizontal bar) or same width (vertical bar) Create Navigation Bar –Create Dreamweaver file with Navigation Bar –Save as … to create other pages … or use Copy & Paste –Update “"Show 'Down Image' Initially" option for each page so that it is selected for the right button Alternative Navigation Bar –Can create Navigation Bar using Rollovers (or Flash Buttons) –Making sure correct DOWN image used on specific page –Can have multiple “navigation bars” on same page

5. © Anselm Spoerri Recap – Navigation Bar Select “Layout Cell” into which to insert Navigation Bar Insert > Images Objects > Navigation Bar “Navigation Bar” dialog 1.Add Nav Bar Element by selecting “+” 2.Name = “category” 3.Select images for “Up”, “Over”, “Down” and “Over while down” 4.Set “When clicked …” = browse to file for category 5.Options –Select “Preload Images” ALWAYS –Select “Show Down Image initially” only if current category = current page –“Table” checkbox : only if Navigation Bar is placed in a Layout Cell “not equal to” Layout Table 6.Repeat steps 1-5 for another category Copy Navigation Bar and paste into other page –Make sure “Show Down Image initially” is properly configured

6. © Anselm Spoerri Recap – Modifying Navigation Structures Modify Navigation Bar –Modify > Navigation Bar Change Hyperlink –Property Inspector: “Link” field Change Behavior –Behavior Panel: double click on Event

7. © Anselm Spoerri Layers = AP Elements Overview More Control & Flexibility to make page Dynamic –Layout flexibility like in print design –Change visibility of layers –Animate layers and move them across screen with a timeline –Layer = container for HTML page elements Disadvantage –Layers not viewable in 3.0 Browsers –Layers do not accept events in both 4.0 Browsers. “Behavior” Window: click event pull down menu and change target browser to HTML 4.01 in the “Show Events For” pop-up menu. Create Layout using Layers, then convert to Tables –Issue of “overlapping layers” –Modify > Arrange > Prevent Layer / AP Elements Overlaps Nesting Layers –Inherit properties from parent layer such as visibility

8. © Anselm Spoerri AP Elements (Layers) Window –Window > AP Elements –Visibility open eye = visible; closed eye = hidden; no eye = inherits –Stacking Order –The greater the ID, the higher up in the stack –Nesting Layers –Hold Control key and drag layer to target layer

9. © Anselm Spoerri Create & Manipulate Layers Create Layers –Have to be in “Standard Mode” –Insert > Layout Object > AP Div (Layer) or Click “Draw AP Div” (Layer) button in “Layout” toolbar, then drag to draw Manipulate Layers –Must select layer before you can move, resize, or align it –Resize and move layer via Layer Handles –Align Layers –Select layers, then Modify > Align > Alignment option –Create Nested Layer –Place insertion point inside existing layer and choose Insert > Layout Objects > AP Div –Drag Draw Layer button from Objects panel and drop inside existing layer

10. © Anselm Spoerri AP Div (Layer) Properties Layer ID = name Position - L and T (left and top) –Relative to top left corner of page or parent layer (if nested) Size - W and H specify the width and height of layer –Overridden if the content of the layer exceeds the specified size Possible Dimensions – px, pt, in, mm, cm, % –Abbreviations must follow the value without a space Visibility - visible, hidden, inherit –Use a scripting language, such as JavaScript, to control the visibility Z-Index - determines stacking order of the layer –Higher-numbered layers appear above lower-numbered layers Overflow – what to do if contents of layer exceed its set size –Visible (increases layer size) Hidden (clips content) Scroll (adds scroll bars) Auto (scroll bars only if excess).

11. © Anselm Spoerri Step 0 – Download files, Launch Dreamweaver, Define Site Create folder “mplec8” in “My Documents” folder Download Files (select zip file & extract into “mplec8”) http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture8/stepbystep/ Launch Dreamweaver Define Site –Site > New Site –Local Info : Local Root Folder = “mplec8” This Week 1.Use Layers to create “disjointed” rollover without need to use GIF or JPEG images example example 2.Use Layers to create simple animation example example

12. © Anselm Spoerri Step 1a – Create Layers with Images Create Layout Table (800 x 600) Select “Standard Mode” –Necessary if you want to create layer Create Layers with Images –Click “Draw AP Div” (Layer) button in “Layout” toolbar, then drag to draw –Layer1: W = 160, H = 120, Name = Paris, Overflow = hidden –Layer2: W = 160, H = 120, Name = Furcup, Overflow = hidden –Select Layers (using SHIFT select) and apply “Modify > Align = Left” –“Paris” Layer: Insert image “paris” … Press F12: notice overflow hidden Select image and resize to 160 x 120 and name = paris Press F12: whole image now visible –“Furcup” Layer: Insert image “furcup” and resize to 160 x 120 and name = furcup

13. © Anselm Spoerri Step 1b – Create Text Layers and Manage Visibility Open file “layers1” Create Layers with Text –Click “Draw AP Div” (Layer) button in “Layout” toolbar, then drag to draw –Layer3: W = 250, H = 150, Name = IntroText, Visibility = Hidden –Layer4: select and copy “IntroText” layer, deselect and paste (notice: “ParisText” is in exact same position as “IntroText” as we want it) Select top layer in “Layer” Window and rename it “ParisText”: –Layer5: copy & paste “IntroText” and rename “FurcupText” Enter text into three layers –Select layer in “Layer” Window and enter text AP Elements / Layer Visibility Management –“AP Elements” Window: click in “eye” column to make “IntoText” = visible and drag “IntroText” to top of stack –Make “ParisText” and “FurcupText” = invisible

14. © Anselm Spoerri Step 1c – Use Elements (Layers) to create “disjointed” rollover Open file “layers2” Attach “Show-Hide Elements (Layers)” Behavior to Images –Select “paris” image –“Behavior” Window: click “+” and select “Show-Hide Elements (Layers)” –“Show Hide Elements (Layers)” Dialog: select “IntroText” and “hide” –“ParisText” = show and “”FurcupText” = hide –“Behavior” Window: select event associated with “paris” image and click on pull-down menu to select “(onMouseOver)” –Attach behavior for “(onMouseOut)” to image “paris” where now “IntroText” = show and “ParisText” & “FurcupText” = hide

15. © Anselm Spoerri Timeline Window Open Timeline Window –Window > Timelines Animation Channels –Display bars for animating layers and images –Animation bars show duration of each object –Different bars cannot control the same object in the same frame Keyframes = specified properties for timeline object –Specify properties such as Position or Size of object –DW calculates intermediate values for frames in between keyframes Behaviors Channel –Specify behaviors to be executed at specific frame in timeline Timeline Options –Playback options: Rewind, Backward or Forward –Fps = Frames per second = 15 frames good choice for most browsers –Autoplay: Timeline plays automatically when page loads in browser –Loop: “Go To Timeline Frame” behavior inserted after last frame

16. © Anselm Spoerri Step 2a – Place Object on Timeline Open file “layers3” Create Text Layer  “Play” button –W = 40, H = 20, Text = “Play”, Typesize = 1 Create Image Layer  image to be animated –Create layer = “SpringFeast” and Visibility = hidden –Insert image “springfeast” and resize 160 x 120 Open Timeline Window –Window > Timelines –Drag & drop “SpringFeast” onto first Timeline channel (make sure you select layer and not content of layer) –Creates object with default (15) frames –Can change start and end frame  drag end frame to frame 45 –Channel can have multiple successive objects

17. © Anselm Spoerri Step 2b – Create Timeline Animation and Keyframes Create Animation –Select circular end keyframe of “Springfeast” on Timeline and move it to frame = 45 –Select “SpringFeast” layer and move to end location of animation Add Keyframes –Select object on Timeline –Select frame on Timeline –Modify > Timeline > Add Keyframe –Select layer and move to desired location –DW calculates intermediate values for frames in between keyframes and fits smooth curve passing through keyframe locations –Add Keyframes at frame = 15 and 30 to create curved path (length of animation = 45 frames)

18. © Anselm Spoerri Step 2c – Add Behaviors to Text and Timeline Frame(s) Open file “layers3a” Attach Behavior to Text –Select text “Play” –Assign # = dummy link to “Link” slot in “Property” Window –Attach these behaviors for “onClick” event: –“Show-Hide Elements (Layers)”: “SpringFeast” layer = show –“Timeline > Go To Timeline Frame” = 1 –“Timeline > Play Timeline” Attach Behavior to Timeline Frame –Select last frame of animation and click in “Behavior” track –Attach Behavior: –“Show-Hide Elements (Layers)”: layer “SpringFeast” = hide Press F12 Final file “layers4”

19. © Anselm Spoerri Example 2 – Timeline Animation Example 2 Create Complex Paths –Add & Move Keyframes Change Size of Layers –Can also use % to specify layer size –Make sure final size equal to content Record Path of Layer –Select a layer and move its start position –Choose Modify > Timeline > Record Path of AP Element (Layer) –Drag the layer around the page to create a path. Tips –Reveal Text: Use Clip feature –Attach Behavior to Image: Image needs to have a name

20. © Anselm Spoerri Animation - Playback Scenarios Playback Buttons Text - select text, assign # = dummy link and attach behavior Image - select image and attach behavior PLAY always from start –Attach behaviors 1) “Go to Timeline Frame” = START and 2) “Play Timeline” to PLAY button (order matters!) OR –Attach “Go to Timeline Frame” = START to PLAY button –Attach “Play Timeline” at START Frame PLAY from current frame –Attach “Play Timeline” to PLAY button –Attach “Stop Timeline” to STOP button –Requires REWIND REWIND automatically –Attach “Go to Timeline Frame” = START after END Frame (  creates LOOP if first frame has “Play Timeline” attached) REWIND on request –Attach “Stop Timeline ” at END Frame –Attach “Go to Timeline Frame” = START after END Frame –Attach “Play Timeline” to PLAY button

21. © Anselm Spoerri Modify Timeline & Animations Modify > Timeline –Add / Remove Frame, Keyframe, Object or Behavior Modify Animation –Animation Length: drag start / end frame marker to left / right –To prevent the other keyframes from moving, press Alt –Start Time: select bar(s) and drag left or right –Keyframe position: select & move keyframe marker –Shift animation path: select entire bar and drag object on page Copy & Paste Animations –Select and copy object(s) in Timeline –Paste selection into current or different Timeline in same or different document –Animation bars for the same object cannot overlap –If document contains a layer with the same name, Dreamweaver applies animation properties to the existing layer –Timesaver: create animation once and apply it to other layers –Select and copy animation in Timelines –Click any frame and paste animation –Right-click pasted animation and choose Change Object from context menu –In dialog box, choose another object from pop-up menu

22. © Anselm Spoerri Animation Tips Show & Hide Layers Instead of Changing Source File for Images –No noticeable pauses or missing images if all images are downloaded at once in hidden layers before the animation runs Extend Animation to Create Smoother Motion Increase Number of Frames per Second (fps) to Improve Speed –Most browsers cannot animate much faster than 15 fps –Test animation on different systems with different browsers Don't Animate Large Bitmaps –Create composites and move small parts of the image. For example, show a car moving by animating only the wheels. Create Simple Animations –Browsers always play every frame in a timeline animation, even when system or Internet performance decreases

23. © Anselm Spoerri Behaviors - General How to Attach Behavior to Text –Can not attach a behavior to plain text. –Easiest way is to add a null link (#) to the text, then attach a behavior to the null link. Behaviors Window –Window > Behaviors –Press (+) to attach action. Press (-) to remove selected action. –Actions for a given event are executed in specified order. Use (up) and (down) arrow buttons move the selected action. –Order of execution of actions can be changed only for a particular event, e.g. onLoad or onClick event. –Different events appear depending on the object selected. Make sure the correct page element or tag is selected. –To select a specific tag, use the tag selector at the bottom left of the Document window. –“Show Events For” specifies the browsers in which the current behavior should work.

24. © Anselm Spoerri Events – Useful Subset onClick –User clicks element and releases mouse onDblClick –User double-clicks the specified element onLoad –Generated when an image or page is loaded onMouseDown –User presses the mouse button onMouseOver –Mouse first moves over specified element onMouseUp –Generated when a pressed mouse button is released

25. © Anselm Spoerri Behaviors for Controlling Layer or Timeline Attach behaviors to link (# = dummy link), button (image), or place in Behaviors channel: Drag Layer –Lets the user drag a layer in (un)constrained fashion –Use this action to create puzzles, slider controls, and other moveable user interface elements. Show-Hide Layers –Shows, hides, or restores default visibility of one or more layers –Useful for showing information as the user interacts with the page Play and Stop Timeline Go To Timeline Frame –The Loop check box in the Timelines panel adds the Go To Timeline Frame action after the last frame of the animation, causing it to go to frame 1 and start the animation again. Set Text of Layer –Replaces the content and formatting of an existing layer on a page with the content you specify. The content can include any valid HTML.

26. © Anselm Spoerri Timeline Behavior Channel Select Frame in Behavior Channel and Add Behavior Change Property –Type of Object = “Layer” and specify Named Object –Property to change: Layer Height & Width or Layer Visibility Play Sound –Browse to select a sound file, or enter the path and file name Text of Layer –Choose the target layer, enter a message in the New HTML field Show-Hide Layers –Shows, hides, or restores the default visibility of one or more layers Swap Image –Use to create (disjointed) rollovers –From the Images list, select images whose sources to change Timeline Behaviors –Go To Timeline Frame, Play Timeline, Stop Timeline

27. © Anselm Spoerri Conversion: Layers & Tables Some prefer layers & tables instead of layout cells & tables. Create layout using layers, then convert them into tables since 3.0 browsers don't support layers. Modify > Convert > Layers to Table –No overlapping layers –Cannot create table from overlapping layers, because table cells cannot overlap –Modify > Arrange > Prevent Layer Overlaps –Dreamweaver does not automatically fix existing overlapping layers when you turn on “Prevent Layer Overlaps” –“Use Transparent GIFs” fills last row with transparent GIFs. Ensures same column widths in all browsers. Cannot edit the resulting table by dragging its columns. Modify > Convert > Table to Layers –Can't perform conversion in a template document