A Static-Image Interface Using Macromedia Flash

This document explains how to use the two Flash 3 templates available on Cow to create static-image interfaces for virtual spaces generated in Bryce. A single Web page includes a Shockwave Flash movie (.swf file) that allow users to slide from one view to another, as in Myst and Riven. Check out the demo page to see this in action.

There are two template files: fourWay.fla and twoWay.fla. The first allows four views at (more or less) ninety degrees of rotation, and the second allows two views, presumably at 180 degrees. Both templates are Flash 3 files that may be opened in either OS with Flash 3 or later. You may download the templates from the flashInterface directory within vWorldsShared on Cow. Please copy these files to your Zip disk before alter them in any way.

I: Create images in Bryce 4

Render images representing two or four views from a given point, as you would do for the HTML-based static-image interface described a few weeks ago. This time, however, your images must be rendered at 640 pixels by 480 pixels. Other aspect ratios will not work with this interface -- unless you are willing to modify the template files significantly. Save your images as JPEGs at maximum quality. Name them according to some rational convention, for instance the one we developed for the HTML static-image interface: pointXX.ZZZZ.jpg where "XX" is a two-digit sequence number and "ZZZZ" is a four-digit representation of a clockface position: 1200, 0300, 0600, 0900.

II: Fabricate the viewstrip graphic

Unlike the HTML interface, which works with individual graphics, this interface uses a crude approximation of a panorama -- a series of static shots fused together at the edges without any attempt at blending. I call this a viewstrip. Here's how to create one.

2.1 Launch Adobe Photoshop. Create a new image file with a height of 480 pixels and a width of 3200 pixels if you are using the fourWay template, or 1920 pixels if you are using twoWay.

2.2 Decide which degree of rotation represents the start or entry orientation for this viewpoint. The initial orientation will be the first one visible when users access your Flash movie. You may start from any position so long as you proceed in clockwise order.

2.3 Open the JPEG file that represents your initial orientation (e.g., point01.1200.jpg). Choose Select All from the Edit menu to select the entire image. Choose Copy from the Edit menu. Make the window for your new (viewstrip) graphic active and scroll all the way to the left. Choose Paste from the Edit menu. If your graphic does not appear flush with the left margin, shift-drag until it is.

2.4 Working in clockwise order (e.g., 1200-0300-0600-0900), repeat Step 2.3 with the one file remaining (in the case of a two-way view) or the three files remaining (for a four-way). Paste in each image and position it flush with the left edge of its predecessor.

2.5 When you have finished the previous step you should still have one 640x480 gap in your viewstrip. Fill this gap with a second copy of your initial image. This repetition allows a full-circle tour of the images. So if you are building a four-way movie (requiring five images), the image sequence from 12:00 will run 1200-0300-0600-0900-1200; for a two-way, the sequence will run 1200-0600-1200.

2.6 Select Flatten Image from the Layers menu. You won't be able to save as JPEG unless the image has been flattened. Once this is done, save your image as a JPEG at maximum quality (at least 10 on the scale). Name the image something reasonable, such as point01.1200.fourway.jpg (Windows will add the ".jpg" automatically; MacOS will not). In the name convention I suggest here, "point01" indicates the point on the map where my camera was located for these shots, "1200" indicates what orientation comes up initially, and "fourway" tells me there are four views available.

III: Modify the template to create your Flash movie

3.1 Open the appropriate template file in Flash 3. (The template may also be opened in Flash 4 if that's what you have; Flash files can be transferred between Windows and MacOS without difficulty.) The template fourWay.fla is set up for four views at ninety degrees, while twoWay.fla is set up for two views at 180 degrees.

3.2 Using Save As from the File menu, make a copy of this template under a new name. Pay attention to where you are saving your files.

3.3 Open the Library for your template by selecting Library from the View menu, or by pressing CRTL-L. The Library lists all the objects or symbols included in the current movie. The list should contain a symbol called viewStrip. Double-click on the icon to the left of the symbol name. This should bring up the Symbol Properties dialog box. Click the Edit button in this dialog.

3.4 You should see an image on a white background. If this image is not already selected (surrounded by a cross-hatched marquee), click once to make it so. Then press the Delete key. The image should disappear.

3.5 Select Import from the file menu. Navigate to the directory where you saved your viewstrip image in Step 2.6 and double-click it, or click Open. Your viewstrip should now be visible in the symbol window. Don't worry if it looks skewed or off-center -- do not reposition the image. To return from the Symbol view to the main stage of your movie, find the white arrow inside a blue circle at the right edge of the timeline. Click this icon to switch. This would be a good time to save your movie.

IV. Script hotspots for transitions

Each main view (keyframe) of the template contains three hotspots -- two thin strips along the right and left margins plus a large rectangle in the center. The right and left hotspots are pre-scripted and require no attention. You can also leave the center spot alone if you have no action to associate with that part of the screen. However, you may want to allow a click in the center to activate a transition or jump to a new viewpoint. Both template files are designed to implement such jumps by simultaneously fading out the current view and fading in the new (distant) viewpoint. You need to add a few things to your movie to make this effect work.

4.1 Find a keyframe in your movie that shows a viewpoint which you would like to use as the start of a transitional jump. Click once on this keyframe in the timeline. Note that you must use a keyframe (marked with a blue dot), and not one of the interstitial frames.

4.2 We'll start by scripting the central hotspot (actually a button in Flash parlance). First de-activate button actions by clicking on Enable Buttons on the Control menu. Your action should remove the check mark next to this option. (If the option comes up unchecked, leave it be.)

4.3 Double-click on the central hotspot to bring up its Instance Properties interface. Select the Actions tab. On the left side of the interface window you should see a button marked with a + symbol. Click on this button. A menu of commands should appear.

4.4 From this menu select the first option, Go to. The interface window will change. In the new window find the word Control: and check the box that lies between this word and the phrase Go to and play. Look toward the top of the window and find the Scene: element, which is a pull-down menu. Access this menu.

4.5 In the two-way template this menu will list four specific scenes (Scenes 1-4). The four-way template lists six scenes. In either case the first two scenes are used by the navigation graphics, with the remaining two or four scenes reserved for jump transitions. Select a scene numbered greater than two: if you are building the first transition for this movie, select Scene 3; select Scene 4 for the second transition, and so forth. Click the Okay button to lock in your changes. This is another good time to save.

V. Replace transitional graphics

You may have figured out by now that the predefined jump transitions in the template use dummy graphics. You need to replace these graphics with the appropriate static shots from your Bryce rendering. This procedure closely resembles your operations on the the viewstrip graphic in Part III.

5.1 Open the Library again (CTRL-L). Notice that the list of symbols includes several that have either the word "Here" or the word "There" in their names. Each of these symbols contains a graphic representing either a departure point ("Here") or an arrival point ("There"). Select an appropriate symbol -- if you're setting up the first transition in this movie, use jump1Here. Double-click its icon in the symbol list and click its Edit button.

5.2 Edit the graphic associated with this symbol as you did in Steps 3.4 and 3.5, but this time instead of importing a viewstrip, import the appropriate single image. For a "Here" symbol, this will be one of the component Bryce images you used to create the current viewstrip (e.g., point01.0600.jpg). For a "There" symbol, it will be an image shot from a corresponding angle of rotation at a distant viewpoint (e.g., point02.0600.jpg). The same visual mapping scheme applies here as in the HTML/static-image interface. When you've replaced the "Here" and "There" graphics, return to the main editing stage by using that white-on-blue arrow button (see Step 3.5).

5.3 Along the righthand side of the timeline and stage display you will see a row of Scene tabs. Click on the appropriate tab (e.g., Scene 3) to edit your transitional scene. You'll see that the scene has two layers, each containing 7 frames. Choose one layer (it doesn't matter which) and double-click at frame 7 to bring up the Frame Properties dialog. Click on the Actions tab.

5.4 Use the plus (+) button to introduce a new action for this frame, but this time instead of Go to, choose Load movie. The interface window will change to show you, among other things, a text box labeled "URL:". Type into this box the name of a Flash movie to serve as destination for this transitional jump. To continue the example we've been using, you would enter point02.0600.swf. Note that you're invoking a .swf file -- an exported Shockwave movie -- NOT a .fla file -- an editable Flash document. As you'll see, one leads to the other but they're not interchangeable.

VI. Exporting and delivering the Shockwave movie

6.1 When you've scripted all the transitions you desire (and you do not need to script every one that is available in the template), you are almost ready to export your movie as a Shockwave file. Before doing this, pull down the Control menu and check to make sure that both Button Actions and Frame Actions are enabled. Your exported movie won't behave very well if they are not.

6.2 Choose Export Movie from the File menu. I recommend using the same naming convention for images, Flash documents, and exported Shockwave movies: pointXX.ZZZZ.[some extension], where "XX" is a unique two-digit number, "ZZZZ" is a four-digit clockface code, and the extension indicates file type. Once you've entered the file name you'll see a dialog box with various settings. The only one that matters is JPEG Quality. Set this to 100 (maximum quality). Lower settings will save file size but you probably won't like the look.

6.4 The Flash interface requires only the single Web page and all your Shockwave movies. You do not need to include any JPEGs or editable Flash documents (.fla files). Put the Shockwave files and the Web page into a single directory.

VII. Refinements and extras

Consider some of the following, perhaps triggered by additional hotspots:

• Superimpose layers with additional graphics or animation
  
  
• Put in text blocks that are revealed by particular mouseclicks
  
  
• Add sound