Tutorial details: Ever wanted to do Object VR without QuickTime? We show you how to rotate objects in Flash, step by step from initial concepts to testing.
Written by: Tim Murray , www.gmg.com.au
Difficulty Level: Advanced
Requirements: Flash MX, an QTVR Object VR file (or similar)
Topics Covered: Designing, coding, testing, shared resources, trace(), gotoAndStop() , _parent object, _xmouse, _totalframes
Assumed Knowledge: Basic math, basic ActionScript, interface familiarity, video compression and keyframing
Download FLAs

Object VR In Flash MX

Introduction

QuickTime. What a cool idea for internet media delivery. Movies and Object VR are two of the best features of this great package from Apple. Great, that is, until you need to download QuickTime to view media. For the PC this means 5.8 to 11Mb for QuickTime version 6.4. And the codecs (the actual movie compression and decompression programs) can vary from PC to Mac. What about AVI format for Windows Media Player? No ? same problem, and no Object VR. What is a developer to do?

Thankfully, Flash MX can cover us for movie and Object VR playback. All it takes is a little coding. And if your site visitor doesn't have Flash, version 7.0.14.0 is only 466kb to download it. That's only a minute with a 56K modem!

This tutorial will cover how to create a QuickTime VR player in Flash MX, allowing your visitors to easily rotate objects. Specifically, we will:

  • Import a movie of a rotating object so that it can be played forwards and backwards without video keyframe issues.
  • Build a set of Flash MX movie clips that will handle the rotation.
  • Code the Object VR player to handle imported movies of any length of objects that rotate clockwise or anticlockwise.
  • Provide a visual method to control the rotation characteristics.
  • Have a look at the uber-useful trace ActionScript command.

We will be developing this Flash MX file: spin-me.zip (382kb). Sorry about the file size, but we have embedded some video in it so you can see what's going on. It also makes use of loader.zip (35kb).

What we will not discuss is how to create an Object VR movie with QuickTime (or any other video or 3D tool). And if you are still wondering what Object VR is, a quick search on Google for "QuickTime Object VR" should get you to Apple's site so you can see what the fuss is all about!

Before we go any further, I would like to point out that some of the screen shots are from the Western Australian Museum's "Western Australia: Land and People" exhibition. Included in that project were twelve 3D studies using the Object VR player that we are going to develop here. Their great content and our stylish Flash MX work produced an inspiring virtual exhibition.

I am assuming that you have had a glance through the Using Flash help file, and that you have completed the online Flash tutorials "Introduction to Flash MX Tutorial" and "Introduction to ActionScript Tutorial" that come with your copy of Flash MX. You should also be familiar with creating QuickTime VR movies and you may find our other tutorial "Yet Another Flash MX Loader" useful because we will be using it to provide a bit of download polish to what will be a largish file (due to the video we will embed).

What should the QTVR player do?

Here's my list of features for our player:

  1. Work without interaction.
    We wanted the QTVR movie to rotate whenever the mouse moved over the movie. No clicking and dragging. This would provide the simplest method of interaction for all users.
  2. Use a visual method to control the spin of the object.
    Why do stuff in code when you have the best visual development tool available? We want to visually indicate how much mouse movement should cause the object to rotate once.
  3. Be quick to add to a file.
    Because I'm busy.
  4. Be simple to add to a file.
    Because I forget stuff.

You may want your player to do more. Maybe it could have a default rotation, or some momentum when using a click-and-drag interaction method. Feel free to add anything you need.

How should the player be structured?

The structure for the player is very simple:

Our main movie will have a scene containing (amongst other things) a layer (named "qtvr") with our Flash qtvr movie clip object. This is where all of our code will go.

The other movie elements that are on the stage are just plain old text, graphic, and button objects.

If you have a look at the Symbol Definitions, you can see that the qtvr Movie Clip contains the actual QTVR mov file that we import (DivingHelmet.mov in our example), and a controller Movie Clip (named "driver") that has our code to rotate the QTVR movie.

Useful reading

Our Object VR player will be a self-contained SWF file with your video file of a rotating object embedded in it. The movie will need to be imported a little later on in this tutorial, so now would probably be a good time to have a quick look at how to import video into Flash MX. You will find it in "Using Flash > Using Imported Artwork and Video > Importing video" in the contents of your online help. Be sure to read the whole section ? you never know what might be useful!

We will also be mucking around with the frame rate of the Object VR player. See "Using Flash > Working in Flash > Using the Property inspector to change document attributes" in your help file for more info.

Testing the movie that we are developing will also be a strong part of this tutorial. In this case we will be focussing on the Output window. You'll find it here "Using Flash > Testing a movie > Using the Output window" in the contents of your online help, but you can read the whole "Testing a movie" section if you want.

The last thing you should check out is the trace() ActionScript command. You'll find it here "ActionScript Dictionary > T > trace" in the contents of your online help. Learn to love the trace, and use it fearlessly.

Designing the player

First, we are going build a container Movie Clip for our Object VR player.

Start Flash MX and create a new file. Save it and call it something that relates to your site. We picked "spin-me.zip".

Rename Layer 1 to qtvr.

Now, create a Movie Clip symbol, name it appropriately. We called it "qtvr". This is where we will import our QuickTime Object VR movie and place our controlling ActionScript.

The next step is to create our layers as follows:

The actions layer is for the mighty stop() command. The driver layer will hold our dummy movie (a movie that doesn't really do anything) so that we can put an enterFrame event handler on it. And the mov layer is for the QuickTime Object VR movie that we will import soon.

Go back to the "Scene 1" root. Open the Library window (F11) and drag the qtvr Movie Clip that we just created on to the stage.

Save it at this point.