18 Architectural Forms on the Web

Objective:

  • To understand how 3D information can be placed on web pages

I. FormZ export formats

A. VRML (File menu > Save to VRML format)
See Samir Emdanat's FormZ VRML tutorial

B. Quicktime VR panorama

  1. Use Display menu > Image Options (Maintain Proportions off) to set the size of the window i.e. 800 x 200. Find a starting viewpoint towards the center of the model. Use View parameters to set height (Z-coordinate) of Eye and Target to be the same. Check the rendering with View Menu > Panoramic.
  2. Under the File menu > Save Quicktime VR

C. Animation

  1. Find keyframe views using View menu > Edit Cone of Vision. Save sequential views named view 1, view 2, view 3, etc.
  2. From Palettes menu > open Animation palette and Views palette. In Views Palette, check all keyframes by clicking on the Eye icon.
  3. In the Views menu, select "Animation from Keyframes". In the dialog box, select Half Screen, and choose the number of frames you want, click OK. In the Views palette, "Animation" appears.
  4. In the Display menu, select "Generate Animation", then make sure you make the file format either .AVI (windows native format) or Quicktime .MOV (Mac native format). Either can be linked into a webpage.
(See Part III of Richard Coyne's FormZ Notes and FormZ CD Tutorials > Wexner)

II.  Placing movies on a Web page

Objects > Basic > Plugins

Size panoramas larger to fit controls

III. Animation Comparison

Type Software Advantages Disadvantages
Animated GIF (2D Raster) ImageReady 3.0, GifBuilder, GIF Animator Combines Raster images Large files
DHTML GoLive Floating boxes with text & raster images Not consistently supported by all browsers
2D Vector Macromedia Flash Small Files, scaleable Needs plug-in, drawingtools simple (import from other programs)
3D Camera Animation FormZ, Design Workshop Lightscape Simple Keyframe Animation Eye and Target only (+ Sun for DW)
3D Object Animation 3D Studio Max, Strata Studio Pro Close control of 3D objects & Environment, Max Object oriented Complex interfaces
Video editing software Adobe Premiere, iMovie, Final Cut Pro Combines video, sound, images & text with transition effects Files can be large

IV. ImageReady GIF Animation

Add Inc. Site & Components

Building components

Layer Mask Animation (Photoshop Classroom in a Box Lesson 8, part 2)

V. GoLive Animation

Building components

Example with transparent components

Floating box DHTML animation tutorial (frog)

VI. Links

Animation Websites