05 Labels and headings

Create two new layers, one called ‘labels’ and the other called ‘heading’. In the heading layer, create a Static text field and place your question, ‘what colour do you prefer?’ at the top of the stage. In the labels layer, create four Static text fields and place the colour names inside. Then using the Free Transform tool, rotate by 90 degrees counterclockwise.

06 Display the totals

Next, you need to create your total text field so you can get a visual representation of the amount, which is divided into the bars’ total. Create a new layer called ‘total’ and add a Dynamic text field to the bottom of the stage. In the Property Inspector’s instance field, call it ‘total_txt’. Save your progress so far.

07 Giving some options

You have created most of the visual aspects to the poll now apart from the actual options that the user can choose from. You can do this in a number of ways, from pull-down menus to buttons. In this tutorial you will be creating buttons. Create a new layer called ‘options’ then create a button (F8). Inside the button clip, draw a red square.

08 More on buttons

Make sure the hit area is also covered by selecting and copying the square onto the hit state. Do the same for the other three colours and then navigate back to the main stage. Open the Property Inspector and call the buttons ‘red_btn’, ‘yellow_btn’, ‘orange_btn’ and ‘blue_btn’

Create your last layer in the movie and call it ‘code’. Add the import statements below, which will be used when you need to parse your data to and from the database and PHP scripts, which you will be creating in the boxout section. Now add the variables. These are initialisation variables for the bar totals and the maximum amount they can reach, so you can calculate the percentage size of the bar.

import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.net.URLLoaderDataFormat;
// vars
var max:int = 100;
var redtotal:int = 0;
var yellowtotal:int = 0;
var orangetotal:int = 0;
var bluetotal:int = 0;

10 UpdateChart function

Next, create a function that has no input or output parameters. First of all, add up the total of all the bar amounts and assign to the ‘total’ variable. Then calculate the height of each bar by taking the bar amount divided by the total of all the bars then times by the maximum amount. Do the same for all the bars and then assign the text fields the amount to display.

function updateChart():void {
// calc the amounts
var total:int = redtotal + yellowtotal +
orangetotal + bluetotal;
redbar.height = redtotal / total * max ;
yellowbar.height = yellowtotal / total * max ;
orangebar.height = orangetotal / total * max
;
bluebar.height = bluetotal / total * max ;
// set the amounts
redres_txt.text = String(redtotal);
yellowres_txt.text = String(yellowtotal);
orangeres_txt.text = String(orangetotal);
blueres_txt.text = String(bluetotal);
total_txt.text = “Total: “ + String(total);
}

11 Button code

Now you need to add a mouse click event, so that when the button is clicked it triggers a function call. In the function, remember to add the mouseEvent as a parameter. First update the total by one, and then call the functions loadData() and updateChart().

Button events
Add one to the total and update the chart
*/
red_btn.addEventListener(MouseEvent.CLICK,
onRedClick);
function onRedClick(evt:MouseEvent):void {
redtotal++;
// update database
loadData();
// update chart
updateChart();
}
yellow_btn.addEventListener(MouseEvent.CLICK,
onYellowClick);
function onYellowClick(evt:MouseEvent):void {
yellowtotal++;
// update database
loadData();
// update chart
updateChart();
}
orange_btn.addEventListener(MouseEvent.CLICK,
onOrangeClick);
function onOrangeClick(evt:MouseEvent):void {
orangetotal++;
// update database
loadData();
// update chart
updateChart();
}
blue_btn.addEventListener(MouseEvent.CLICK,
onBlueClick);
function onBlueClick(evt:MouseEvent):void {
bluetotal++;
// update database
loadData();
// update chart
updateChart();
}