Tutorial details: This tutorial show how to make a voting-system, where flash communicate with php and mysql
Written by : August Jorgensen,
Difficulty Level: intermediate
Requirements: Flash MX 2004, and a server where php and mysql is installed
Topics Covered: loadVars, database, php
Assumed Knowledge: Flash MX 2004 components, some php and mysql
Download FLA+PHP

I Introduction

In this tutorial you will be able to create a voting system inside flash, using the loadVars class. You have to have a server with php and mysql installed, or use apache to test locally:

http://www.php.net

http://www.mysql.com

http://www.apache.org/

II How does it work?

From flash the user selects he's choice (in this example 4 choices) the choice Is submitted to php, and from php to mysql. In the same php file all the results are send back to php from the mysql database, and from php to flash that receives the result and shows the user how many votes to each choice

Adobe Systems



III Setting up the first part of the flash file

Create a new flash file, and set the dimensions to 170x160px

In this import four radio buttons from the components menu, and one button.

In the component parameters set data from 1- 4 in the four radio buttons parameters. Choose a label on the four Radio buttons

Finally write a headline like ?Poll: your choice? ? see my source files.



Add current actions to frame 1:

stop();
submit_btn.enabled = false;
var loadVars_in:LoadVars = new LoadVars();
var loadVars_out:LoadVars = new LoadVars();

Firstly we tell flash to stop and that the submit button is disabled

Then we create two instance of the LoadVars class, we create two because we need some information out of flash (to change the database) and some information in because we need to display the results.

loadVars_in.onLoad = function(success) {
        if (success) {
                //If the values are in, goto results
                gotoAndStop("result");
        } else {
                //notify of failure
        }
};

Next we need to tell flash if what to do if the loadVars_in instance is loaded in to flash. And if you want you can notify the user about failure.

You are properly wondering about why I disabled the submit button in the start, the reason for this, is I don't want the user to press is unless a radio button is pressed.

The method of doing this is listeners, and the radioGroup that is default in radio buttons:

// Does the user wants to vote?
listenerObject = new Object();
listenerObject.click = function(eventObject) {
        submit_btn.enabled = true;
};
radioGroup.addEventListener("click", listenerObject);

Firstly we create an object to listen to, and then on click is should enable the submit button. And finally add eventlistener to the radioGroup

//Vote
submit_btn.onRelease = function() {
        var selectedNum:Number = radioGroup.selectedData;
        loadVars_out.choice = selectedNum;
        loadVars_out.sendAndLoad("vote.php", loadVars_in, "POST");
};

When the submit button is pressed we need to know which button pressed. The easiest way to get this information is once again the radioGroup.

Then we add this data from the radio button to the loadVars_out instance, and finally we send this to ?vote.php? and receives the loadVars_in information.

 IV Setting up the vote.php file and creating the table in mysql

Open up your favourite text editor, or just notebook and add this code:

<?
$user="Your user";
$password="Your pass";
$database="Your database";
mysql_connect(localhost,$user,$password);
@mysql_select_db($database) or die("Unable to select database");
$query="CREATE TABLE votesystem (vote1 int(4),vote2 int(4),vote3 int(4),vote4 int(4))";
mysql_query($query);
mysql_close();
?>

The only thing this code does is to make a table with 4 values, vote1 to vote4. And they are all int(4) = Number(4) the 4 means its can be 4 long.
Save this as createTable.php and run it on your server using your favourite browser on the server.

Another way of making the table is using phpMyAdmin, if you have this installed, use It and create the table inside it.
Next we are going to make, if the php file to read and tell flash the values:

<?
//User, password & database
$choice =$_POST['choice'];
$user="your_user";
$password="your_password";
$database="your_database";
mysql_connect(localhost,$user,$password);
@mysql_select_db($database) or die( "Unable to connect to database");
// what choice did the user choose in flash?
if($choice == 1){
        $query="UPDATE votesystem SET vote1=vote1+1";
}
if($choice == 2){
        $query="UPDATE votesystem SET vote2=vote2+1";
}
if($choice == 3){
        $query="UPDATE votesystem SET vote3=vote3+1";
}
if($choice == 4){
        $query="UPDATE votesystem SET vote4=vote4+1";
}
mysql_query($query);
//Get values from the database
$query="SELECT * FROM votesystem";
$result=mysql_query($query);
mysql_close();
//What are the values from the database?
$vote1_out=mysql_result($result,0,"vote1");
$vote2_out=mysql_result($result,0,"vote2");
$vote3_out=mysql_result($result,0,"vote3");
$vote4_out=mysql_result($result,0,"vote4");
//Votes in total
$total=$vote1_out+$vote2_out+$vote3_out+$vote4_out;
//Info to send back to flash:
$values="&totalVotes=$total&vote1total=$vote1_out&vote2total=$vote2_out&vote3total=$vote3_out&vote4total=$vote4_out";
echo "$values ";
?>

Save this as vote.php

I wont be going in much detail in this code, but basically what you do is get the choice from flash using $_POST, then store this in the variable $choice.

Then the php file checks what the choice is, if the choice is 2, the php file tells the mysql database to update vote2.
Then we import information from the database about which vote have been made, and this information is being stored in the $result variable

Then the result is being splittede up in four parts ($vote1_out to $vote4_out)

You don't have to make the $total inside the php file, but I think it's easier. And finally the results are send back to flash using echo.
The way we send this information to flash is by using &totalVotes=$total À identifier=variable, this identifier we can get inside flash, and output the variable.

IV Setting up the second part of the flash file

In the flash file go to frame 10 and make a keyfreme name this ?result?

Now add this code to the frame:

//How many votes in total?
var totalVotes:Number = loadVars_in.totalVotes;
//What end?
var end:String
for(i=1;i<=4;i++){
        //how many votes to each choice?
        vote = loadVars_in["vote" + i + "total"]
        //How many procent to each?
        procent = Math.round(( vote / totalVotes) * 100);
        //if the votes is 1, then the end is vote, else its votes
        if(vote==1){
                end = "Vote";
        } else {
                end = "Votes";
        }
        //change _xscale to procent, and change the text field
        _root["graph"+i+"_mc"].bar_mc._xscale = procent;
        _root["graph"+i+"_mc"].procent.text = procent + " % - " + vote + end;
}

The first thing this script does is to get totalVotes variable from the loadVars_in

Then we make this script for the four graphs, and for each graph we get how many votes using the loadVars_in again.
The next thing the script does is to get how many procent votes on each of them, using the vote and totalVotes.
The reason why I want to know if vote is only 1, is that if its 1 I would look like this:
  • 1votes
The last thing the script does if to change the graph's _xscale to procent, and change the procent text field to how many procent.

Final Notes:

The one thing missing in this is a vote system with ip-support, this is a big problem because people can vote as many times as they want. This problem will be covered in my version 2 of this vote system.