Foundations of Web Design

Animation

1. Using DHTML to create animation and other effects
   
   
   • DHTML (Dynamic Hypertext Markup Language) is actually a combination of HTML, Javascript, CSS, and Document Object Model (DOM) that allows certain animation and interactive elements to appear in a Web page. No plug-ins are necessary as long as a recent browser version (4.0 and above) is used.
     
     
   • Beware, however, because DHTML is implemented differently in Netscape and Internet Explorer and you may need to use browser detection for pages to be universally consistent.
     
     
   • Examine the HTML code for this example of how DHTML (i.e. CSS & Javascript with browser detection) can be used to place objects on a Web page without tables, animate objects, and layer them.
     
     
   • Dreamweaver allows you to create layers and behaviors very easily. Use the Insert/Layers menu command to add a layers (which can overlap). Each layer can be precisely positioned with drag and drop control as well as controlled with its Visibility, Height, Width, and other preferences. You can also use the Behaviors window (Window/Behaviors menu command) to create effects such as mouseovers, image swapping, browser detection, etc.
     
     
   • Dreamweaver can be used to convert a web page that uses non-overlapping layers into tables using the Modify/Convert/Layers to Table menu command for increased browser compatibility. You may even want to storyboard your web page using non-overlapping layers for the drag-and-drop ease of use rather than using the View/Table View menu commands.
     
     
   • Activity:
     
     1. Open Dreamweaver, create a new document, immediately save it with an appropriate file name (such as dhtmlexample.htm)
     2. Click the Insert/Layer menu command.
     3. With the cursor blinking in the new layer, click the Insert/Image from the menu and select an image from your hard drive that your previously downloaded.
     4. Resize the layer to barely contain the image if necessary. Now you can drag and place the layer with the graphic wherever you wish.
     5. You can create other layers and overlap images and text in this way.
     6. Click on the graphic to select it. Find some interesting behaviors by choosing the Windows/Behaviors menu command and looking under the plus symbol. Perhaps the Show/Hide Layers behavior will serve as an example. The onMouseOver event may be selected.
     7. Save the Web page and view in Netscape.
     
     
   • Activity:
     
     1. Continuing from the previous activity, choose the Window/Timelines menu command.
     2. Drag and drop the Layer from the document onto the Timelines window.
     3. Click frame 15 on the Layer's lifeline in the Timeline window.
     4. Drag the Layer to a new position in the document window. A line will appear.
     5. Click and hold down the Play button at the top of the Timeline window to see the animation.
     6. Click the Autoplay checkbox at the top of the Timelines window.
     7. Save and view the page in Netscape.
     
     
   • Activity: Using Dreamweaver's Timeline window, create a continuous slide show (preferably with images but use text if necessary) for one of the pages in your Final Project site.
     
     
   • Activity: Use several JavaScript behaviors found in the Window/Behaviors panel. Browser & plugin detection can be easily be added to a page this way. You can also use Show/Hide Layers to create popup menus. The Set Text and Swap Image behaviors can be useful as well.
     
     
2. Flash
   
   
   • Flash is a program made by Macromedia for authoring Web animation. It specifically allows you to create and animate two-dimensional vector (as opposed to bit-mapped, pixel) graphics. This yields small but compelling animation segments.
     
     
   • The Flash Player plug-in has been widely distributed with browsers and even the Windows 98 and higher operating systems. Over 90% of your audience probably has the Flash plug-in.
     
     
   • See these examples of Flash or view the Flash inspiration sites at Lynda Weinman's site.
     
     
   • Activity: Create a popup Flash banner (468 x 60 pixels) for your Final Project site's home page. If you can incorporate motion, shape, and color tweening. Also save a version of the banner as an animated gif and compare the quality of the two animations. Add a sound from the Flash Common Library.
     
     
   • Activity: Create Flash buttons within Dreamweaver using the Insert/Interactive Images/Flash Button or Flash Text menu commands.
     
     
   • (optional) Activity:
     1. Choose the File/New menu command.
     2. Choose the Insert/New Symbol menu command.
     3. Click the graphic option button.
     4. Change the name to "circle".
     5. Choose the Circle tool in the Toolbox.
     6. Hold down the Shift key and drag a circle centered around the plus (+) symbol in center of the screen.
     7. Click the Scene1 tab at the top of the window.
     8. Choose the Window/Library menu command.
     9. Drag a copy of the circle symbol from the Library window into your movie scene.
     10. Use the Arrow tool in the Toolbox to position the circle in the top left corner.
     11. Click frame 25 in Layer1 of the Timeline window.
     12. Choose the Insert/Keyframe menu command.
     13. Move the circle to the upper right corner of the window with the Arrow tool.
     14. Choose either the Control/Play or the Control/Test Movie menu command.
     15. Right click any frame between frame 1 and frame 25 in Layer1. Select Create Motion Tween.
     16. Choose either the Control/Play or the Control/Test Movie menu command.
     17. Click frame 25 again.
     18. Change the Color selector on the Properties Inspector from None to Alpha.
     19. Change 100% to 10%.
     20. Choose the Control/Play menu command.
     21. Click frame 25 again.
     22. Select the faint circle in the right corner.
     23. Click the Free Transform tool in the Toolbox.
     24. Hold down the Shift key and resize it smaller by dragging a corner handle inward.
     25. Choose the Control/Play menu command.
     26. Click the Insert/Layer menu command. Make sure that the new layer, Layer2, is selected in the Timelines window.
     27. Choose a different color with the Fill Color tool.
     28. Choose the Text/Size/48 menu command.
     29. Choose the Text tool (A) in the Toolbox.
     30. Click in the top left corner of the movie window and type "Acme Inc."
     31. Choose the Control/Play menu command.
     32. Click and drag Layer2 below Layer1 in the Timelines window.
     33. Choose the Control/Play menu command.
     34. Right-click frame 25 in Layer1 and choose Actions.
     35. Click Basic Actions and double-click Stop.
     36. Choose the Modify/Document menu command and change the height of the movie to 100 px (pixels).
     37. Choose the File/Save As and save the movie file as "Demo1.fla".
     38. Choose the File/Publish menu command.
     39. Open a browser and view the file Demo1.htm that was automatically created
         
         
3. Shockwave
   
   
   • Shockwave is a standard for complex, interactive animation on the Web even though the Shockwave plug-in must be added to a browser. Visit Macromedia to obtain the free plug-in. Visit shockwave.com or Macromedia's Shockwave Showcase to play compelling online games and see examples of the Shockwave format.
     
     
   • The multimedia authoring application Macromedia Director is used to create Shockwave movies. It is a powerful (and rather expensive) program that is used for full-scale multimedia development but includes a simple "Save As Shockwave Movie..." export option.
     
     
   • I created this simple Shockwave movie as an example
     
     
4. PowerPoint
   
   
   • Microsoft PowerPoint allows you to integrade audio tracks, video tracks with a PowerPoint presentation and upload it to the Web.
     
   • Your clients can download and install the PowerPoint 97 Animation Player plug-in to view animated PowerPoint Web presentations.
     
   • You can use the free RealPresenter Basic application to allow our voice audio track to be published to the Web along with the PowerPoint presentation.
     
   • You can use the free Microsoft Producer Add-In with PowerPoint 2002 to easily combine video and audio tracks with a PowerPoint presentation.
     
   • You can simply use the Save As...HTML menu command in PowerPoint to convert the static slides to static Web pages:
     • No Frames example
     • Frames example
     • Animation Player-enabled example (you must have the PowerPoint 97 Animation Player plug-in)
       
       
5. SMIL Format
   
   
   • The Synchronized Multimedia Integration Language (SMIL) allows multimedia authors to build time-based, streaming multimedia presentations. Based on an XML DTD, the standard allows the author to control media elements with a language similar to HTML. See http://www.w3.org/AudioVideo for details.
     
     

Wrapping up the Workshop

• Final Project Requirements - See your Student Manual for this workshop for the listed requirements and the due date.
  
  
• Take the "Final Exam" quiz and submit it to be graded before you leave today.
  
  
• Course Evaluations - Follow these instructions to complete the online evaluation form.
  

1. Visit www.webpro.psu.edu
2. Click the ENTER hyperlink to enter.
3. Click the 1st Day Sign Up hyperlink in the lower left corner.
4. Choose the Penn State Berks campus in the combo box.
5. Choose the "I have signed up once before." option button (assuming that you have logged into the webpro web site before.)
6. Click the Continue hyperlink.
7. Choose the "IST6773: Sec. ?- Foundations of Web Design - Minich" option button.
8. Type the course password "addme_2" in the lower right corner.
9. Click the Continue hyperlink.
10. Enter your PSU Access Account username and password and click the Finish hyperlink.
11. At this point, it may require you to sign in again to the www.webpro.psu.edu web site.
12. After you have logged in again, you will be able to click the "Course Evaluations" hyperlink along the left side of the page and see our course (Foundations of Web Design - Section ?) listed in the evaluations area. (Or, I think you can directly visit the page at www.webpro.psu.edu/studentsurvey.cfm after logging in to the site.)

• Good luck in your future Web Design endeavors!