Tutorial: Voting Preference Survey: Actionscript 3

Tutorial: Voting preference survey: ActionScript 3.0 to server-side (php)

This tutorial describes how to build a survey such as would be built to gather information on voting preferences. A system for actual voting would need to incorporate authentication procedures to make sure people who voted were entitled to vote and/or at a minimum, make sure people did not vote more than once. The system described here is pretty basic. What it does demonstrate is building a Flash ActionScript 3.0 front end to server-side programming, specifically php programs that read and write a file maintained on the server.

The opening screen shows radio buttons for each candidate (pre-Iowa caucuses):

The vote clicks on the radio button of his or her choice and then clicks on the button with label VOTE. Note that I made it this way to allow people to change their mind. Technically, I did not use the change event for radio buttons.

After voting, the file on the server is updated and the voter can click on a link to see the totals so far:

Clicking on the hyperlink invokes another php program:

This application consists of the Flash file, a 'flat file' holding the vote totals, and 2 php files. The term 'flat file' refers to something that is not a database and does not have much structure, which certainly is the case here. The [published] .fla file invokes one php file that updates the numbers in the vote totals file. The second php file displays the vote totals.

For this explanation, I will call the flat file xxxx.php. You can choose your own name.

Here is the original xxxx.php file. The organization is line by line, with elements of the line separated by commas. You can construct it using TextPad or Dreamweaver.

Biden, 0

Clinton, 0

Dodd, 0

Edwards, 0

Gravel, 0

Kucinich, 0

Obama, 0

Richardson, 0

Democrat:other, 0

Giuliani, 0

Huckabee, 0

McCain, 0

Paul, 0

Romney, 0

Thompson, 0

Republican:other, 0

The terms Biden, Clinton, etc. are the values in the radio buttons in the .fla file.

The following is a screen shot of the board:

Notice the selected text field, Dynamic, named res. Notice also that the > indicator is set to show that the field can hold HTML. This field also is used to tell the voter to make a selection if the VOTE button is clicked and no radio button has been selected.

The radio buttons are components: go to Window, Components, Radio button and move instances to the Stage. The next screen shows one button selected:

When a radio button is selected, click on Parameters in the Property panel. I changed three things: I made the groupname for all the buttons candidate. I gave each button a label and a value. Since I made them the same, I probably could have skipped the value.

I acquired the button from Window/Common Library. I edited the button to change the name. I gave the button the name votebtn.

As with other applications, I renamed the original layer board and put all the material there. I added a new label, named it actions, and put the coding there.

The ActionScript starts with import statements:

import flash.events.Event;

import fl.events.ComponentEvent;

import fl.controls.RadioButtonGroup;

The next statement connects the radio button group set up by the Flash authoring system with a RadioButtonGroup object that I named rg. If I didn't do this, I would not be able to use the methods and properties to detect what button was selected.

var rg:RadioButtonGroup = RadioButtonGroup.getGroup("candidate");

The next line sets up the event handler for the VOTE button.

votebtn.addEventListener(MouseEvent.CLICK,getvote);

The next 4 lines set up the objects for invoking and communicating with the php program. There are 3 objects: variables, request and loader.

var variables:URLVariables = new URLVariables();

var request:URLRequest = new URLRequest();

var loader:URLLoader = new URLLoader();

request.url = "change.php";

The getvote function does all the work! Note that I chose the name who for the one variable the code is sending to the php program. You can have any number of variables as properties of variables. Think of these as parameters passed by name to the php function. Notice also that there is a call to the addEventListener of the loader object. This sets up the call to the completeWriting function when the php program returns.

function getvote(ev) {

if (rg.selection==null) {

res.text = "Please make a choice";

}

else {

variables.who = rg.selection.value;

request.data = variables;

loader.load(request); //sends the request

loader.addEventListener(Event.COMPLETE, completeWriting);

}

}

The next and last function takes the data returned/generated by the php function and places it as html in the text field. Please note that the value returned is essentially a constant.

function completeWriting(event:Event):void {

res.htmlText = event.target.data;

}

The php function could return something more interesting. At one point, I thought it would return the whole file, but I decided to make this be a distinct function since I might want to look at the survey results without voting and would need this function anyway.

The php files can be built using TextPad or the equivalent, or DreamWeaver. A php file can include HTML and php, bracketed by <?php and ?>. The php part typically includes print or echo statements that produce HTML to return to the calling program or get displayed as HTML. Note also that variables in php start with $ signs. The . is the string concatenation operator.

Before going on (and I should have said this at the start), you need to confirm that your server supports php. Write the following php program

<?

phpinfo();

?>

Upload to your server and invoke it. If the server supports php, you will see a whole lot of information. My server uses Apache. Scroll down to see something labeled SCRIPT_FILENAME. I used this to model what to use as the file name for the fopen command. It turns out that the file command and the fopen command took slightly different names, though both referred to the same file. The coding here assumes that you know exactly where the data file is. An alternative approach is to do calculations to locate the file assuming it can be figured out in terms of the location of the php files themselves.

The program that updates the data, change.php,creates a whole new file by writing out each line, with the voted for line, being the only one changed. Other options for writing are to Append.

<?php / Start php
$fn = " …xxxx.php"; / Set $fn the complete file name, starting with http://
$fn1 = "/home….xxxx.php"; / Set $fn1 to be file name modeled after results doing phpinfo
$cands = file($fn); / Loads whole file into an array
$votefor = $_GET['who']; / Gets the parameter passed by the Flash program.
$fh = fopen($fn1,'w'); / Open file for writing from the start.
/* go through whole array */
foreach ($cands as $ctr=>$cand) { / Start looping through the $cands array. Note that this head line sets up the index pointer to be $ctr and each individual element to be $cand.
$parts = explode(",",$cand); / Set up $parts to be an array, size 2, of the contents of the line before and after the comma.
if ($parts[0]==$votefor) { / Is this the one?
$parts[1]=strval(intval($parts[1])+1); / Increment the value: notice I need to convert to an integer and then convert back to string.
$cands[$ctr]=$votefor . ", " . $parts[1] . "\n"; / Re-construct the line. The \n is a line break.
} / Close if
fwrite($fh,$cands[$ctr]); / Write out the line
} / Close foreach loop
fclose($fh); / Close the file
echo ("<a href='show.php'<u>See totals to date</u</a>"); / Write back to the Flash program.
?> / Close php

Notice that when the php script invoked by the Flash program is over, a hyperlink to invoke the other php file, show.php, is on the screen. This file, which can be invoked directly, reads in the whole file and then uses a foreach loop to echo each line. It is necessary to insert line breaks explicitly using <br/>.

<?php

$fn = "http://newmedia.purchase.edu/~Jeanine/as30/xxxx.php";

$cands = file($fn);

echo "<h1> Survey Results </h1<p/>";

foreach ($cands as $ctr=>$cand) {

echo $cand;

echo "<br/>";

}

?>

Publish the Flash document and upload the .html, .swf, both the php files and the data file to their designated places! Test. Comments welcome.