3D PieChart - Tutorial 2

Advanced Tutorial

Using additional options

1. Create a new instance of the 3DPieChart (drag it from the Components Panel).

2. View the properties panel of the component. On the right hand side, you will see 4 buttons to access other pages/properties of the 3DPieChart component:

3. Click on button "2" to go to the second properties page

These are the extra properties that can be set:

Scaled pieces - allows pieces to have different heights (depending on their value).
Allow mouse spin - allows the end user to control (spin) the position of the 3DPieChart in the final movie.
Allow shift+drag - allows the end user to move the position of the pieces (drag them while pressing the 'SHIFT" button on your keyboard).
Height - maximum height of pieces (if scaled pieces is checked).
Alpha - set the alpha transparency for the pieces (if alpha < 100, the collateral border is invisible)
Friction - coefficient of deceleration for rotating the 3DPieChart (used in combination with allow mouse spin)
Enable text labels - enable or disable text labels
Text color - color for text labels
Text rotation - change the angle of the text rotation

4. Now let's change some parameters to create a more impressive 3D PieChart. Uncheck scaled pieces, check Allow mouse spin and Allow shift+drag to control the 3DPieChart in the final Flash movie. Also change alpha to 70. Data: "45,70,80,400", Colors: "FF3300,CCCC00,000FF0,009933".

5. Use the mouse to check the built in 3d engine (just click and drag on the 3DPieChart in the movie shown above). Although the 3DPieChart engine is highly optimized, the movement of multiple transparent objects in Flash may be CPU demanding on slower processors.

Using built-in functions

1. Create a new instance of the 3DPieChart and copy these values into the Data text field: 5,7,12,15,3,15

2. The pieces will now look a little 'messy'. To improve this, just go to the fourth page of the 3DPieChart properties (button "4") and press "sort".

All the pieces should be placed in increasing order. Note that the colors are sorted in the same way. We will now change them to get a clearer color palette...

4. Return to the first 3DPieChart properties page (button "1") and change the first color in the Colors text field from "3333FF" to "FF0000" (light red).

5. Now go to the fourth page and click "range". This will generate a range of color from the first color "FF0000" (smallest pie) to the last color "6633FF" (largest pie):

Now you should see the 3DPieChart with sorted pieces, and the colors increasing in an anticlockwise direction as the height of the pieces grows. The smaller the piece, the furthest from the center it will be. All these factors will help simplify the perception of the information represented by the 3DPieChart.

6. There are three more options to check out:

Put all pieces together" and "Place pieces in spiral order" are simple functions which allow to place the 3DPieChart pieces in two specified positions. Just try them out and observe the effect that they create.

7. "Generate attachMovie command" is a useful function for ActionScript programmers. Press "Generate" and see the text string in the Output window. This is useful to dynamically generate the 3DPieChart.

8. Now remove the 3DPieChart component instance from the movie (we don't want to create it statically anymore), copy the entire string from the output window and paste it into the Actions panel.

Test the movie.

You have now created the 3DPieChart dynamically.

Note:

attachMovie command: _x and _y are equal to 0 by default, set them to your own position (as well _xscale and _yscale, should be added if you want to scale the 3DPieChart).

PieChartID is the instance name for of the new 3DPieChart movie - change this, if you would like to create more than one 3DPieChart instance.

depth - change the depth parameter as desired (next value after PieChartID) - by default it equals to "1"

rotation parameter is the position of the 3DPieChart in 3D space represented by Euler corners (just ignore it if you are have never heard of this before). All other parameters are self-explanatory.

Huge 3DPieChart creation

Let's suppose we have more data than we used before. For example: "50, 214, 229, 234, 302, 484, 573, 661, 901, 2631, 17811" (or even more). The problem is that small pieces get mixed up and the text labels on the 3DPieChart become useless (as there is insufficient space to place them and this results in poor accuracy in the percentage values.). The following instructions will direct you as to how to create a good visual representation of the data in such a case.

1. Sort the data (if it is unsorted) and press (under button 4) on "spiral" to place the pieces in a more comfortable fashion.

2. On the Options page (under button 2) ensure that "Allow mouse spin" and "Allow shift+drag" are turned off (it is not very good idea to rotate the 3DPieChart with so many pieces - as it is very CPU intensive). Ensure "Scaled pieces" is checked, this helps lighten the info perception and improve the back pieces visibility. Also uncheck "Allow text labels"

3. You can use Flash's transformation tool to make the 3DPieChart bigger.

4. You can now give appropriate colors to the pieces (or choose "range" for automatically created colors).

5. Spin the 3DPieChart in the 3D space to get the best position and angle for display.

6. The most important object for our movie is ready. We would need several text fields to create hints and several lines to connect the hints to the pieces. All other decorative elements can be added at this point. See a completed example below:

Control the 3DPieChart motion with Actionscript

The 3DPieChart does not have any special actionscript functions to program the motion, however you can change the main 3DPieChart parameters (3D rotation, pieces position, pieces size and colors) dynamically to animate it through actionscript. See some examples below:

1. To rotate around the X coordinate (or Y coordinate): change rox (roy) parameter:

//use it on the 3D PieChart instance
onClipEvent (enterFrame) {
rox+=10;
}

2. To rotate around the3DPieChart axis based on mouseWheel movement (IE6 only):

//use it on the 3D PieChart instance
onClipEvent (enterFrame) {
currentMouseWheel +=12;
}

===========================================================================================
For mouseWheel support, add the following Javascript in the <head> section of the HTML file:

<script language="javascript" >

</script>

Note:
Ensure that the ID of the Flash Object in the HTML matches the name specified in the JavaScript.
In this example, set: id="piechart" in the <OBJECT> tag. If you choose a different ID, the word
"piechart" should be replaced in the JavaScript accordingly.
===========================================================================================

3. To change the position of specific pie pieces: keep dpx variable nonzero and change the position of the array.

//use it on the 3D PieChart instance
onClipEvent (enterFrame) {
dpx = 1;
positions[3] +=2; // move third pie
}

4. To change the size or colors of pieces (also any other public parameters of the 3DPieChart): first remove the old 3DPieChart and recreate it with new parameters (note, the creation of the new instance is a comparatively slow process.

//use it in root frame actions
//to get attachMovie command use build-in function (fourth properties page of the 3D PieChart
_root.onEnterFrame = function() {
n++;
attachMovie("FPieChart", "piechart", 1, {_x:172, _y:164, data:[45+n*3, 70, 80, 400], colors:[0xFF3300, 0xCCCC00, 0x000FF0, 0x009933], rotation:{u1:1.04, u2:-0.43, u3:2.22}, positions:[51, 65, 39, 0], alpha:70, height:60, allowScale:false, allowText:true, allowMouse:false, allowDrag:false, friction:.98, textColor:0xFFFFFF, textRotation:0});
};