1. Create a new fla and save it as "toolbox.fla". Set the FPS to 30.
2. Draw a pattern similar to this:
3. Now create five movieclips as you did in the previous tutorials. Call them:
"front", "left", "right", "bottom"
and "back".
Note: There is no "top" for this box. Tip: Choose a centre point of registation for the "bottom" movieclip only. For all the other movieclips, use a bottom-center registration point:
4. Now drop an instance of the 3D Box component onto the stage. Test your movie to create the live preview file.
5. Enter the following in the content text field: ",right,front,back,left,bottom".
Note: the first clip name is omitted.
Try rotate the box in the above example. You'll notive that all the sides of toolbox have the same solid color which causes the inner surface
of toolbox to merge with the outer surface. Also the mirror image of the word "TOOLS" on the inner side of toolbox looks odd.
We'll now create an underside for each plane, to make the inner surface of
the toolbox.
6. Open the "front" movieclip and make the following change: Add a second keyframe. Remove the"tools" texfield and change the filled color of the rectangle to grey in this keyframe.
7. Add
the following ActionScript code to the first frame of the "front" movieclip (you
can leave the comments out):
stop();
// function "swap" is automatically called whenever this side turns
over
function swap(a) {
// parameter "a" is a flag ("0" is for face, "1" is for back)
gotoAndStop(a+1);
}
// set the initial side
swap(rootObject["front"+sideN]);
// "sideN" is a side parameter indicating the axis number orthogonal to this side ("1","2"
or "3")
// accordingly "front1", "front2", "front3" are flags indicating the axis directions
(pass to swap function, when it calls)
8. Change the other
movieclips in the same way that you changed the "front" movieclip. The ActionScript code is the same in all the instances. Note: half
of the clips have an inverse orientation, i.e. the first frame will the back and
the second will be the face. This depends on the axis direction.
Use
the following table for this:
"front" - right orientation - first frame is
the face
"left" - right orientation - first frame is
the face
"bottom" - right orientation - first frame is
the face
"back" - inverse orientation - first frame is
the back
"right" - inverse orientation - first frame is
the back
"top"
- inverse orientation - first frame is
the back
9. This is how it should now look:
The inner surface of the 3D Box has now been successfully
created.
You'll notice that the connected facets still merge a little. You can correct this by applying a thin black line to each vector shape:
Alternativelly, you can add a gradient to the inner surfaces:
You may also wish to use use bitmaps instead of vector elements to create something like this:
Experiment and have fun! :)