Open the file that you created in the Using advanced live preview tutorial ("simple.fla").
Change the width and height of any side.
Test your movie:
This demonstrates how the "Auto
dimensions" works. This also shows us how important it is to use the corresponding dimensions for each side, in order to create a well fitting box. In other words: The
width of the top side must be equal to the width of the front side. The height of the front side must be
equal to
the height of the right side and so on...
Note: In order to see the changes in the "advanced live preview" immediately after you have changed one of the movieclips: Test your movie (ctrl+enter), in order to share the new symbols in the external file. Then, go to the third page (button 3) in the 3D box properties panel and press "Refresh Live Preview".
We'll now create a new 3D box that is not cube shaped (does not have the same dimensions for all 6 sides):
1. Start a new Flash MX movie and save it under the name 'box.fla'.
2. Draw the pattern (a flat 2D model representing what will become the 3D box):
By laying the elements out this way on your stage, it's easy to ensure that each side is of the correct dimensions.
You can use any flash element to create the sides (vector forms, bitmaps,
other movieclips or video elements). For example, you can create a simple
3D box using 6 bitmaps.
If you use different colors on some sides, it's recommended that you add a hairline
border created in a solid color (such as black) to smooth the joints.
3. Now we'll make the six sides of the box out of our 2D
pattern.
Select all of the elements that belong to the front side:
4. Press "F8" ("Convert
to Symbol) and name it "front". It's recommended to choose the central registration point,
and remember to check "Export for ActionScript" (leave the default linkage name of "front"):
5. Create the remaining 5 sides in the same way and
name them accordingly: "left", "right", "bottom", "top" and "back".
6. Now drag an instance of the 3DBox component from
the Components Panel and drop it onto the stage. Test your movie in order to create the required swf for the
"advanced live preview".
7. Enter the following in the "content" field: "top,right,front,back,left,bottom".
8. You can
now remove the elements from the stage that you used to create the movieclips for the box.
Your box should now look something like this:
9. Up till now we been using "Auto dimensions". You can try experiment by setting manual
dimensions instead. Uncheck "Auto dimensions" in the 3D
Box properties and set your own values:
This may be useful if you want to create a box with loose fitting sides:
Note: Try avoid using dimension
values that are less
than the size values of the adjacent sides. If the sides cross over one another, the z-sorting
may not working correctly.
These are three simple rules to avoid this happening:
1. "front" and "back" can cross over all other planes.
2. "left" and "right" can
overflow "top" and "bottom",
but they cannot go beyond "front"and "back".
3. "top" and "bottom" cannot
cross over other the sides.
The following movie illustrates this effect: