Create a poll and chart component in Flash CS3

Collect your website visitors’ views and opinions via a Flash poll, and display the results on a Flash bar chart

Click here to download all the source files for this tutorial http://www.webdesignermag.co.uk/?page_id=85

Before we start, ask yourself this question: do you value your web visitors’ opinions and views? For example, if you have just redesigned a website that’s a customer-facing eCommerce site or social network, wouldn’t you want their opinion on the usability or the look and feel? This sort of market data has been used and gathered for many years, and used to shape the way we use sites such as Amazon and eBay today. They employ companies that specialise in this area, but for you wanting to ask a simple question then a Flash poll will do that for you, giving you the stats required to make your own judgements and decisions.
Over the next few pages, you will be creating a Flash poll that links to a MySQL database to retrieve and store the data. The results are then displayed via a bar chart to give you and your users a visual representation. We will be stepping through the tutorial and creating one, and shall then leave it up to you to decide which style you prefer. So enough chat on using polls to shape your design decisions, and let’s create one!

01 Setting the scene

Open up Flash CS3 and create a new Flash file (ActionScript 3.0). Call this file ‘barChart.fla’, open up the Property Inspector and click on Size. Set the stage to 250 x 400px and give the file a title and description. Press OK and then save.

02 Bars

Navigate to the main stage and create a new Movie Clip (F8). Call this Movie Clip ‘redbar’. Inside the Movie Clip, create a rectangle of – you guessed it – red, then create another layer under the main layer and copy the rectangle. Place it slightly to the right and a bit higher. Using that as a guide, you can then create two more layers and draw the top and side views. Delete the guide when you have completed the side and top.

03 The other bars

Now that you know how to create a 3D-style bar, do the same again but make the bars yellow, orange and blue, naming them in the same manner (‘bluebar’, etc). Place them all on the stage and align to the top and left. Open the Property Inspector and name them accordingly (‘redbar’, ‘yellowbar’, ‘orangebar’ and ‘bluebar’) in the instance name field.

04 Amounts

Create a new layer called ‘amounts’. Using the Text tool, create a Dynamic text field under each of the coloured bars. This is where the individual amount per bar will be displayed. Next up, in the Property Inspector, call the text fields ‘redres_txt’, ‘yellowres_txt’, ‘orangeres_txt’ and ‘blueres_txt’ in the instance name field.

Pages: 1 2 3