How To create your first Shockwave application

→Return to Examples

In this small tutorial you will create your first augmented reality application using the Unifeye Viewer Shockwave Xtra. The final result should look like the ShockwaveSimpleAR example of the Unifeye Viewer package. It is included in the Unifeye Viewer package.

• Open Adobe Director and create a new workspace.
• Save the workspace as SimpleTutorial in the folder where the ShockwaveSimpleAR example application is located.
• Resize the movie to 640x480 pixel.
  You can set the size with the property dialog to the right.
• Create the image background where the webcam picture is drawn.
  Right click the "Cast" area -> click on "Import" -> select the file white640x480.png -> click on "Import" again. A new dialog will appear. Check the options "Stage" and uncheck the option "Trim White Space". This will import the image as it is. The image white640x480.png itself is located in the subfolder media of the ShockwaveSimpleAR sample application. The image is blank white and has the same size as the stage.
  If the image would be smaller than the stage you would have to rescale it’s sprite to fit to the stage. But rescaling the sprite would lead to incorrect augmentation. The image would be stretched but never change its resolution. However you could dynamically change the pixel width and height by destroying the old image of the sprite and replacing it with a newer one. This way you can adapt the video background to the resolution of the stage dynamically. See the example application ShockwaveARFrame for how it is done (just change the size of the movie and everything will adapt to it).

Creating the image background

• Create the video background sprite.
  Drag the cast member "white640x480" to the stage.
• Select the video background sprite, position it and rename it.
  Click on the stage and select the sprite of the video background. In the "Property Inspector" to the right switch to the label "Sprite". Change its name to "VideoBackground". This enables a script to reference the video background to draw the webcam image later. Position the sprite at x: 320 pixel and y: 240 pixels. This will match the border of the sprite to the border of the stage.

Setting up the video background

• Import a 3D model that should be augmented onto the video image.
  Right click on the cast and select "Import". A file dialog will open. Navigate to the subfolder media of the ShockwaveSimpleAR application. Select the file !RotatingBox.w3d and click on "Import". Now a 3D model has been loaded into Director.

Importing a 3D model

• Create the sprite of the 3D model.
  Drag the cast member "RotatingBox" to the stage.
• Setup the 3D model.
  Select the 3D model sprite of the stage by clicking on it. Navigate to the "Property Inspector" and select the label "Sprite". Center the sprite on the stage and rescale it so that it fits to the stage. Set the values for X to 320, Y to 240, W to 640, H to 480. Additionally set the background of the sprite to "Background Transparent". You will recognize that the background of the box is still black and you can’t see what is behind (e.g. the video image). Therefore click on the label "3D Model" and uncheck its property "DTS". Now you should be able to see the white background image.
  Note: Usually switching on "DTS" is recommended as it increases rendering performance. Please refer to the FAQ on rendering performance for more details.

Setting up the 3D model

• Setup the application logic.
  Right click on the first frame in the "Score". In the sub-menu click on "Frame Script". This will add a new script to the application that allows you to add logic. Open the text file !SimpleARLogic.txt of the sub-folder scripts of the ShockwaveSimpleAR example application (e.g. in a separate text editor). The text contains the application logic of the ShockwaveSimpleAR application. The logic controls everything to set up a simple AR application using the Unifeye Viewer Xtra. Just copy the whole text and paste it into the newly created frame script. If you want to know what the logic does in detail (e.g. starting the camera, drawing the camera image, tracking…), have a look at the script itself. It contains an elaborate documentation that explains all necessary steps.
  Please note, that you will have to change the line:
  trackingDataPath = the moviePath & "testdata\TrackingData_Shockwave_roivis_enc.xml"
  on a Mac system as the moviePath contains the old Mac path separators ":" instead of "/" (see also the according FAQ article). You will also have to change testdata\TrackingData_Shockwave_roivis_enc.xml to testdata/TrackingData_Shockwave_roivis_enc.xml.

Setting up the application logic

• Run the application.

Print out the tracking pattern of the ShockwaveSimpleAR application which is named TrackingPattern_roivis.pdf in the subfolder testdata of the ShockwaveSimpleAR application.
Set the score slider to frame 1 and click on the play icon in the menu bar (do not forget to activate the stage). After the startup of the camera, put the printout in front of the camera. You should now see the camera image with the augmentation of a red cube.

Running the application inside Adobe Director

Congratulations. You just finished the creation of your first AR application using Adobe Shockwave and the Unifeye Viewer Xtra. For a more complex example please look at the ShockwaveARFrame example application.

→Return to Examples

-- SupportMetaio - 2010-07-15