Take Home Exam #2 - Flash portion solution
I've put the original instructions in blue
1. Import your Illustrator file from the Illustrator portion of the exam (you may find that you need to resize everything if you've made it too large for Flash to handle). Delete the bars in your "gas prices by state" bar chart and the state labels so you can draw them with ActionScript). [NOTE: if you didn't include the bar chart in your design, that's fine, you can just add it for the purposes of this Flash exercise]
I took out the bar charts from my design, then imported it into Flash. Here's what it looked like:
2. Add the following functionality
a. Allow the viewer to sort the chart alphabetically by state name or by gas price. Use the model in the flash file you've downloaded and tweak elements one-by-one until you've gotten what you want. Don't let yourself get stuck with this - just keep tweaking one thing at a time to see what happens. Here is my recommended approach for this task:
STARTED WITH:
1. Figure out how to make the bars vertical rather than horizontal (there's a tricky bit where you'll need to figure out how to make them all level)
A: I swapped height for width values when drawing the bars...of course it doesn't look right since the previous code lined them all up on the left:
B. I swapped the x & y values of the bars (changed from having them all have the same x value to having them all have the same y value):
C: I changed the y value of the bars by starting with a y value that is would put their tops near the bottom of the page, then subtracting the height of the bar:
2. Position the labels below the bars and angle them at 300 degrees.
A. I changed the vertical position of the label from the top of each bar (y = 0) to the bottom (y = the height of the bar):
B. I changed the rotation attribute of the text to 300:
C. I changed the text alignment from LEFT to RIGHT to make them all lined up at the top rather than at the bottom :
D. I moved the labels below the bars by making the y value larger (this pushes them mosly off the stage):
E. I changed the "barLengthMultiplier" value to scale the height of the bars (i.e. shorten them all proportionally):
F. I changed the y value of the bars to move them up so everything fits on the screen:
It would be easy enough to move everything over to the right by just changing the starting x value...but I won't bother with that now.
3. Switch the XML data source. The structure of the gas prices XML file is a little different than the structure of the dorm XML file so you'll need to figure out how to accomodate that.
A. Change the name of the XML file being retrieved (now the xml references all wrong since the data structure is different so the bars aren't drawn at all)
'
B. Correct the XML references:
dormsXML.dorm to dormsXML.state
dormData.Gross_Square_Feet to dormData.price
dormData.sizeOrder to dormData.priceOrder
dormsXML.dorm[i].sizeOrde to dormsXML.state[i].priceOrder
dormsXML.dorm[i].yearOrder to dormsXML.state[i].alphabeticalOrder
currentDorm.name to currentDorm.@id
dormData.Long_Name to currentDorm.@id..and change the barLengthMultiplier from a very small number (e.g. .00007) to something like 10 since the price numbers are much smaller than the building size numbers:
When I click on "Sort alphabetically", I get this:
D. Change the tween to alter the x value rather than the y value:
Here's my file at this point: SortableBarChartModified.fla (it needs to be in the same folder as the xml file: gasPrices.xml
4. Now that the bar chart is vertical and uses the correct data, incorporate it into your imported file which includes the map and then position and resize the bars so they're where you want them.
A. 1st image below: I pasted all the code into the file where I had imported from Illustrator and also copied over the buttons
B. 2nd image below: I changed the y value of the bars to position them vertically (i.e. change the value to 410 in this line: currentDorm.y = 410 - dormData.price * barLengthMultiplier;)
C. 3rd image below: I changed the scale to get the height right (I wanted the first bar to be $3.26 - the cheapest gas price.
D. 1st image below: To move the bars to the right, I added 15 px to the x value of the bars (currentDorm.x = 15 + dormData.priceOrder * distanceBetweenBars;)
E. 2nd image below: I changed the width of the bars and the gap between them: var barWidth = 6; var distanceBetweenBars = 7.5
F. 3rd image below: I changed the bar color: currentDorm.graphics.beginFill(0xD2D0C6);
G. 4th imgae below: EXTRA I wanted to make those white gridlines I had in my original design so I made a button with the lines, then exported it to ActionScript and wrote code to add it to the stage after the bars were drawn (then I experiment with the x and y values to get it in the right position)
H. 1st image below: To make the labels show up, I changed the color from white to black; labelFormat.color = "0x000000";
I. 2nd image below: I Reduced the size of the labels: labelFormat.size = "8";
J. 3rd image below: I embedded the font
K. 4th image below: I adjusted x value of labels: labelTextField.x = 45;
L. I repositioned the buttons and changed their appearance:
J. When I clicked the sort buttons, the bars shift to the left because I hadn't added the same x-value offset that I used when I placed the bars:
...so I added that: var myTweenx:Tween = new Tween(currentDorm, "x", None.easeOut, currentDorm.x, 35 + dormsXML.state[i].priceOrder * distanceBetweenBars, 1, true);:
b. When you click on or hover over a state on your map, have it highlight the corresponding bar in the bar graph by changing it to a color that highlights it effectively. (Implement this for at last 10 states). HINT: At the end of the Flash file, you'll find some commented code that shows how to find a given bar based upon its name - you can use this to find the bar you need to highlight.
A. I turned 1 state into a button with an instance name that started with the name of the state ("Texas_btn), then gave it an event listener and created a function that looked through all of the bars and checked to see what the name was and whether it matched the name of the button:
if(dormArray[i].name == e.target.name.substr(0,e.target.name.length-4)){
B. Then I chose a highlighting color and did a color transform when I hovered over the state
dormArray[i].transform.colorTransform = new ColorTransform(1, 1, 1, 1, -26, -13, 1, 0);
C. That seemed too subtle, so I made it a darker version of the same color:
All done. Here's the final file: MORedesign.fla - it needs to be in the same folder as the xml file: gasPrices.xml
