|
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
- 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.
- Under the File menu > Save Quicktime VR
C. Animation
- Find keyframe views using View menu > Edit Cone
of Vision.
Save sequential views named view 1, view 2, view 3, etc.
-
From Palettes menu > open Animation palette and Views palette. In Views
Palette, check all keyframes by clicking on the Eye icon.
- 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.
-
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
|