When a participant moves from one node (location) to another, the participant sees the "Moving to New Location" message for the period of time that the designer has set for the movement duration.  When this period of time is more than a couple of seconds, it is easy for the participant to lose the sense of where he or she is.  This tutorial tells you how to incorporate a Flash file, what we call a "node transition movie," that plays during that period, for example, to show one moving from one location to the next, such as climbing stairs.  This helps to minimize the disjointedness of moving from one location to the next.

To add a node transition movie, currently (version 1.7) you must do so in a manual way--there are no special features of the Scenario Designer application to do so.  You edit your files at the final stage of your scenario production, just before you upload your finished definition file to the server.  If you later change your definition file, you must re-enter the information about the video transition.

The basic steps to accomplish adding a node transition movie are (details provided in the next sections):

1. Create your transition movie as one or more Flash movies (one movie for each location-to-location move you want -- note that you probably want to create two movies for each node pair, so if you are going between A and B, you want A-to-B and B-to-A, though you don't need to have both).
   
2. Make sure you have performed your scenario packaging for the scenario, using the Server File Prep Tool.
3. In a text editor such as WordPad, or Notepad++, edit your sceneDef.xml file to add the moveURL attribute to the XML <movement> tags
   
4. Copy your video transition Flash files to the "firestates" folder in your scenario package
5. Move your scenario package to your server.
   

Step 1. Preparing your Node Transition Movie

People often ask about adding videos during node-to-node movements, but Flash animations often serve the orientation purpose better because they may be easier to prepare than shooting a real video.  For example, with a Flash animation, you can take a static picture and zoom it in or out, simulating the effect of walking down a street. Turning a corner may be accomplished by sliding in and out other static pictures.

Essentially, you need a create a Flash movie of the same dimensions as your scenario files, and put in the content you want shown during the node movement.  By default, CommandSim will load your transition movie and it starts playing.  Therefore, you want to note how long (in seconds) you want your transition to occur over, and then add the appropriate key frames and animation for that duration.

Note that the first time the movie loads, the system will be retrieving it from the server and that takes whatever load time, so your animation may not complete by the time the transition (move to the next node) occurs.  For example, if you say the transition duration (in the Scenario Designer) is 5 seconds, and you make your transition movie 5 seconds long, the transition movie may get cut off because it could take a few seconds for the transition movie to load initially.

The next sub-section describes converting a video into Flash format.  If your transition movie does not use a video, you can skip to Step 2.

Step 1a. Converting a video into Flash

The recommended way to convert a video into Flash is to convert it first into an FLV (Flash Video) format using the Flash Video Encoder application.  If you bring a video directly into Flash by trying to import it, Flash may or may not encode it properly (it will tell you if it can or cannot).  The Video Encoder is installed when you install the Flash authoring tool.

Here is a screenshot of the Video Encoder that comes along with Flash CS4:

Step 1b. Incorporating your video into a Flash movie

Once your video is in FLV format, you can bring it into a Flash movie by first creating a blank Flash movie (ActionScript 2.0, if you are using CS3 or CS4).  Then choose the menu File > Import Video....  It will ask you to locate the FLV, but most importantly, you must select the radio button labeled "Embed FLV in SWF and play in timeline", as shown below:

Once it imports your video, it will place the video on the timeline.  Then you save your Flash document (FLA) with the name you want, then Test Movie or Publish it to create the Flash movie (SWF).

Your video, by default, will be set for looping.  To have your video play just once, from beginning to end, you will need to add a "stop" action to the last frame of your movie.  Scroll over to the end of your movie on the Flash timeline, as seen below:

(the frame number for your video will likely be different from the picture above, based on its duration).

We recommend adding a layer and then, right-click on the final frame in the new layer, and select "Insert Keyframe".  Once you do that, open the Actions panel (Window > Actions), then type in the word "stop();", as shown below:

That will tell Flash to stop playing and not loop the video.

Step 2. Packaging your Scenario

For consistency, we recommend putting your Flash document (FLA) and Flash movie (SWF) in the same folder as your other Flash files for the scenario.  However, you are going to have to manually copy the node transition movie files from your folder to the package that gets uploaded to your server.

As you would ordinarily, you use the Server File Prep utility to create a package ready to upload to your server.

Step 3. Editing your sceneDef.xml to add moveURL attribute

Now that you have created a package of files using the Server File Prep and are about ready to upload the whole lot to the server, you need to locate and edit the sceneDef.xml file that is inside this package.  All the scenarios have one of these files.  For example, if you have packaged your scenario in a folder called "fastFood", then the sceneDef.xml file will be at the top level inside that folder.

You will now add a reference to your node transition movies inside your sceneDef.xml file.  For this, you must use a text editor like WordPad or Notepad++, or an XML editor.  Do not use Notepad as the file may not display properly.

Especially for people who are not familiar with XML, we recommend you make a backup copy of sceneDef.xml just in case you add or remove important characters while making these changes.

Look for the starting node for your transition movie in this file.  For example, if the start of your transition is from a node named "Dedication", find the following place in the file:

Right beneath that you will find the <movement> tags corresponding to the allowable directions one can move from that node.  Look for the target node (the one that your transition movie ends with) in the allowable movements.  For example, suppose your transition video goes from Dedication to Tower Lane when the participant clicks on forward.  Your movement tag would look like this:

Step 4. Copying your transition Flash files

The transition movies are not copied over from your source material folder when you use the Server File Prep utility, since that utility doesn't know about your movies at the time.  Therefore, copy all of your transition Flash movies (SWF's, not FLA's or FLV's) over to the firestates folder, which is located inside your scenario package ready to go to the server.

Step 5. Moving the scenario package to your server

Finally you are ready to upload the whole scenario to your server.  Just upload the whole folder (from the previous example, fastFood).  As usual, you will need to adjust scenarios.xml (the master scenario index), but that is the same as any other scenario.

You're Done!

Now when you visit a node with a transition movie, when you move in the appropriate direction, Flash will load your transition movie.  If the screen is blank during that time, then the file name was not specified properly.  Go back to Step 3 to make sure that the name was specified properly and that the transition movie Flash movie is in the correct place (Step 4).