Date post: | 19-Dec-2015 |
Category: |
Documents |
View: | 213 times |
Download: | 0 times |
© 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
© Anselm Spoerri
Comfort
Sophistication
InteractiveMultimediaWebsite thatCommunicates
Course Reward
Beginning of Sense of What is POSSIBLE
Building TensionFor Breakthrough
In Future Classes Will Work onFinal Project
© 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
© 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
© 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 category5. 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
© 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
© 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
© Anselm Spoerri
AP Elements (Layers) Window
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
© 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
© 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).
© 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 Week1. Use Layers to create “disjointed” rollover without need
to use GIF or JPEG images example
2. Use Layers to create simple animation example
© 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
© 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
© 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” imageand click on pull-down menu to select “(onMouseOver)”
– Attach behavior for “(onMouseOut)” to image “paris”where now “IntroText” = show and “ParisText” & “FurcupText” = hide
© 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
© 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
© 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)
© 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”
© 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
© Anselm Spoerri
Animation - Playback Scenarios
Playback ButtonsText - select text, assign # = dummy link and attach behaviorImage - 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
© 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
© 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
© 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.
© 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
© 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.
© 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
© Anselm Spoerri
Conversion: Layers & Tables
Some prefer layers & tables instead of layout cells & tables.
Create layout using layers, then convert them into tablessince 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