Download the data for this tutorial here. The download contains two files. MaterialChanging.fla is the source file for the Flash interface. cube.bla is the source file for the 3d cube.

As it stands, the Flash file will load the 3d and contains actionscript to allow the user to move it around. Let's publish the source files and get the demo running in the Blaze player.

1. Download the tutorial files above and save them in a new folder. This is your project folder.
2. Open cube.bla in Blaze 3D Studio.

3. The bla is already set up with several materials and texture maps. Do not change any of the settings. Press the 'Publish' button to create a swf from the bla.
4. A progress bar will appear and when it is finished a new tab will open called 'cube.swf'. This is the swf that has been created, playing in the Blaze 3D Studio preview window. All you should see is the corner of the cube at the top left. Not very useful on its own. We need to load it into a Flash created swf to make it interactive.
5. Check in your project folder and you will see that cube.swf has been saved there.
6. Open MaterialChanging.fla in Flash MX
7. The fla already contains ActionScript to load cube.swf. Publish the fla to create MaterialChanging.swf in your project folder.
8. Now drag MaterialChanging.swf into Blaze 3D Studio. It will open in a new tab and start playing in the preview panel. The cube will load and you will be able to move it around, but none of the buttons will work.

Our job now is to add ActionScript to the fla file so that the buttons work as they do in the Extras example. First lets get aquainted with the actionscript that is there already.

All the actionscript on the main timeline is in the level called 'Actions'. On frame 1, cube.swf is loaded into the movieclip called mc3d. This movieclip is placed in the center of the stage on the layer called '3D'. It is set invisible on frame 1 so that we can control when the 3d appears.

The next three frames handle the loading. There is a simple loop that checks for when cube.swf has finished loading. When it has, the playhead is sent to frame 4, which is blank. This blank frame is necessary to make sure that frame 1 of cube.swf has been executed. Only when is has will the 3D be available to access from ActionScript.

On frame 5, we know the loading is finished and set the position of the 3d camera to something apparently pulled out of the air. But we're not concerned with that right now. Then the movieclip mc3d is made visible. Finally, on frame 7 there is a stop command to prevent looping.

The only other actionscript in the file is attached to the mc3d movieclip. It is the standard navigation code from this site which allows mouse interaction with the 3d.

So what's the plan? Looking at cube.bla in Blaze 3D Studio we can see the explorer tree on the left which shows all the details of the 3D model. There are two surfaces on the cube, called 'number' and 'blank' in the bla. Selecting 'number' will show its surface settings. It is using a texture map called 'tex1.jpg'. Selecting 'blank' shows that this surface has a solid blue colour. It cannot be set to use a texture map because it had none assigned when it was created in Maya so it has no uv set (texture mapping information).

Looking back at the explorer tree, we see there are four environment material maps. Two are in use and two are currently unused. There are also two texture maps. tex1.jpg was used by the surface 'number', but tex2.jpg is unused.

We will set up buttons in the Flash movie so that the textured surface can have its texture changed between the two textures in the bla, and two movie clip textures made in Flash. We will also have buttons which change the colour of the non-textured surface and the environment material map that it is using.

Back to Flash.

Luckily, someone has already created these buttons for us. We just need to fill them in. First of all, we need to get references to the materials which we want to change. We will store these in variables on frame 5.

9. From the explorer tree, we see that the cube is known as 'boxShape' in the scene. To access this from the root timeline we can write, on frame 5:

   var cube = mc3d.boxShape;

10. The cube variable is of the SceneObject class. All SceneObjects have a member called 'model' which stores the geometry and material information of the object. So

    var cubeModel = mc3d.boxShape.model;

11. The cubeModel variable is of the Model class, which has a method getMaterial(surfaceName:String). The surface names for our two surfaces can be found 'by choosing each in the explorer tree of Blaze 3D Studio and looking in the box at the bottom of the panel called 'ActionScript' opposite 'Surface Name(s)'. Using this information, we conclude that:

    var texturedMaterial = cubeModel.getMaterial("numberNewTriSet");
     
    var nonTexturedMaterial = cubeModel.getMaterial("blankTriangleSet");

    Add these lines to frame 5.

These two variables are of the Material class. The Material class has one very general method called setData(), which can be used to change any aspect of the material. Each of the buttons will use this method to alter one of our materials. Let's start with the top two buttons, which will change the texture map on texturedMaterial.

12. Select the button beneath 'Texture maps' containing the number 1

13. In the Actions panel, add the following script:

    on(release){
      _root.texturedMaterial.setData("texture", 1,
     "name", "tex1.jpg");
    }

    The first parameter here, "texture", indicates that we will be setting a texture of the material. The second parameter, '1', indicates that the texture is the color map for the material. Other numbers can be used to control environment maps, which we will do later. The third parameter, "name", is necessary but somewhat redundant - there are no other options for this parameter. The fourth parameter is the linkage name of the texture that we wish to use, as it appears in the tree diagram of Blaze 3D Studio.

14. We wil do the same for the '2' button. Select it and add the following script:

    on(release){
      _root.texturedMaterial.setData("texture", 1,
     "name", "tex2.jpg");
    }

If you now test this in Blaze 3D Studio you will be able to change the number on the cube from 1 to 2 and back again using those buttons.

Next, let's fill in the buttons beneath "MovieClip Textures". These will set the color map of the same material as before to use the movieclips shown at the bottom left.

15. The movie clips need to be given instance names so that we can reference them. Select the "BANANAS AND APPLES" clip. In the properties panel give it the name 'staticMovie'. This movie clip does not animate.
16. Select the purple and blue clip. In the properties panel give it the name "animatingMovie". This movie clip does animate.
17. Now select the black button. This will set the color map to be the static movie. The syntax is the same as before, but the texture name is replaced with a movie clip reference:

    on(release){
      _root.texturedMaterial.setData("texture", 1, "name", _root.staticMovie);
    }

18. Select the purple buttons. This will set the color map to be the animating movie:

    on(release){
      _root.texturedMaterial.setData("texture", 1, "name", _root.animatingMovie);
    }

Both the static and animating movie clips are anti-aliased to the same quality when mapped onto the model. These buttons can now be tested in Blaze 3D Studio.

The three buttons beneath "Environment Maps" will change the environment map of the non-textured material:

19. Select the green button. Add the following script in the Actions panel:

    on(release){
      _root.nonTexturedMaterial.setData("texture", 0, "name", "green_shiny");
    }

    This is the same pattern as before, now using the non-textured material. The '0' in the second parameter indicates that we will change an environment map. The name of the texture in the final parameter is as the environment material map is named in Blaze 3D Studio.

20. Repeat with the red and white buttons for the environment maps "red_shiny" and "shiny".

When you test this in Blaze 3D Studio, the four coloured sides of the cube will change colour. They will not become green or red, because the base colour of the material is still blue. We will finish now by adding script to the remaining three buttons to change this base colour:

21. Select the yellow button. Add the following script in the Actions panel:

    on(release){
      _root.nonTexturedMaterial.setData("colour", 1, "r", 255);
      _root.nonTexturedMaterial.setData("colour", 1, "g", 255);
      _root.nonTexturedMaterial.setData("colour", 1, "b", 51);
    }

    The first parameter of each call indicates that we will change a colour value, rather than a texture. The second parameter as before indicates that the colour is the base colour of the material. The third parameter chooses the rgb channel, and the fourth paramter is a 0 - 255 value for that channel. The values above give a pale yellow. Suitable numbers can be found easily in Flash using the color picker tool.

22. Repeat for the blue and white buttons. The values should be 51, 153, 255 and 255, 255, 255.

The Flash file is now finished. Previewing in Blaze 3D Studio, it should be identical to the Material Properties Extra.