Well, had a project to create a simple and updateable flash donation bar, and it worked out nicely so I decided to share the wealth of information to those that may want to employ something similar later on.

The object we are going to make today is shown here. Added a slider to show the effects and results in real-time.
First, lets go through the objectives we want to achieve.

1. Create a working bar that reacts to a value, and then readjusts width using a modified scale of 1 - 100. (minimal math required)
2. Create some reactant statuses (if value is # then this, else this)
3. Create dynamic text fields to display the data
4. Load data externally via a document (or flashVars which is what we are going to use, will be explained later)


Fairly simple right? Sure! You can apply some of these techniques to a preloader, so if you have experience doing that, you'll do fine with this.

First off, lets create our flash document. For those interested in compatibility, I have created this project using flash 8 professional and I am using AS2.0. You can make it any size you want, but for convenience purposes, lets go with the default size of 550x400. We can always adjust to fit later on.

The next thing you want to do is create a bar. A simple 100 pixel rectangle will suit the needs of the project, but you may use any size bar. I also added some filter effects, since Im using flash 8, we might as well take advantage of the tools of the trade Make this object have an instance name of "bar".


Once you draw your shape, you will then need to convert it to a symbol. Right click your object and click Convert to Symbol >> Movieclip. Before you close the dialog, you need to change the REGISTRATION point of your object (The middle left point should be selected), this is needed because of the way you want the bar to change. Registration is basically the center or axis that the object will use to rotate on, or morph size and shape. In this example, it will allow the bar to increase size to the right. Using the lower and upper points is also possible, but creates problems later should you want to animate it any further.

Once this is done, change the instance name of the object to barObj, and then convert to a movieclip one more time, again using the left registration point. Once this is done, double-click the object to enter editing mode. You should be able to see the object that has the instance name, If the object doesnt have the instance name you assigned, you are not fully inside the movieclip.

From here, insert a new keyframe in frame 2. Now you have two instances of the bar, and this can be used to create a "blinking" effect for when the bar reaches its intended goal. To do this, make sure in the first frame, that the movieclip has just an ordinary shape. For the second frame, you will need to break it apart, so that when you edit it, you don't edit the instance clip, which is shared in frame 1. Break that apart, so that you have the regular shape with no movieclip, and then convert it to a new movieclip, giving it the same instance name as before (barObj). Now since we have two frames that include the same instance name object, there should be no problem, since both exist on seperate frames.


Hopefully everyone is still with me and I havent lost anyone hehe. Now, go into the movieclip you just created in frame 2. In this project, I chose to change the opacity from 100% to 85%. You don't need to tween it, just insert a keyframe in frame 10, change the opacity of the shape using the color tab on the right, and then create another keyframe in frame 20 and set the opacity back to 100. This will be our looping "blink" object.

Okay, 2 down and 2 to go

Lets make some text fields to display our data! In this project I created two. One will be used to show the total donations, and the second will show what remaining balance is required to reach the intended goal. Doing all of this requires simple math to be done. But you will learn everything soon!

For exactness to project purposes, we will use the instance name and var names I used in my project.
For the first field (or the total amount field) use the following: instance name: lblReached & Var: reached
For the second field (or the remaining needed field) use the following: instance name: lblRemain & Var: remain

Okay, now lets do our script for the bar!
Open up the actions panel for the bar object you are going to use to display visually how much has been collected. Use this script:

Code:
onClipEvent (enterFrame) {
 _root.bar._xscale = Percentage;
 recieved = _root.reached;
 goal = 1500;
 Percentage = recieved / goal * 100;
 remainder = goal - recieved;
 _root.remain = "$" + remainder
Okay, heres the workhorse of the object. This is where all the math is done (obviously). For those of you who are lost right now, here is an explanation of the script.


_root.bar._xscale = Percentage;
We needed to declare a variable to get the data from so that we can adjust the width of the shape. The movieclip property _xscale (or _width, works too) will do this for us. Note that I use absolute paths to direct everything. It's always a good idea to use direct paths for everything so that you know its pointing to the right object.


recieved = _root.reached;
Yes I know, i before e except after c. Whatever, I spelled it wrong. Anyway. This assigns the variable recieved to equate to whatever shows up in _root.reached; which is our total amount text field (for those that forgot). There will be more for this once we get to loading the actual data into the document.


goal = 1500;
Quite obvious. Our goal is 1500 dollars total. This can be adjusted, but other changes will need to be made to follow suite and allow the script to work correctly, which I will explain later on. This variable is used to calculate the other data.


Percentage = recieved / goal * 100;
Okay, here we go, this is where all those previous declared variables come into play. Basically we are taking the recieved data, and dividing it by the goal. To get the applicable data we want in order to figure out what percentage has been obtained, we multiply it by 100. Doing this will give the percentage value of 1-100. This will allow us to change the width of the bar according to that value.
remainder = goal - recieved;


_root.remain = "$" + remainder
Lets knock these out together. The first line assigns the remainder value to be the sum of goal minus recieved. So if we recieved $400, and the goal is $1500, the value returned would be.....$1100 right? Okay, so the next line takes that data and assigns a text field to it. Note that I also used the operative symbol + to add a currency sign.

Okay, now that we have all our math done, lets set up some interactive statuses that change dependent on how much is obtained. This what you will need to adjust depending on your needs (Since our goal is $1500, the values reflect that).

Code:
 if (recieved <=800) {
  var colorful = new Color("_root.bar.barObj");
  colorful.setRGB(0x869097);
 
 } else if (recieved <= 1300) {
  var colorful = new Color("_root.bar.barObj");
  colorful.setRGB(0xFFCC00);
 } else {
  this.gotoAndStop(2);
  var colorful = new Color("_root.bar.barObj");
  colorful.setRGB(0xFF0000);
 }
}
Basic if else statement. This goes below the previously stated code. Basically what this does is ask 3 questions. One: Does recieved equal a number less than or equal to 800. If true, the color var is used to change the color of the shape to the original color of the shape, in other words, no change is made (make this value the same color of your object when you first made it. If false, it goes to the next if statement, which is an else if. This time is exactly the same before, but applies the data after 800, in this case 801-1300. This time, if true is returned, a yellow tint will be used. If all return false, then the value must be 1301-1500, and the object will turn to a red tint. Note also, that "this.gotoAndStop(2); is used. This is where your "blinking" status is used, so make sure you did one, or just delete that line to not use it.

Okay, we've completed all the work that needs to be done inside the movie. Now let's do some research. How do we want to get the data into the movie? Essentially, loading the data externally would provide the most convenient solution, since the value will probably be changing quite often, and we don't want to go through the trouble of opening flash, changing data, saving, uploading, and hoping to go there isn't a cache. Right?

Easy solution. Quick and painless too.

For this project I used a method of approach called flashVARS. Basically what this does is pass variables from the html document right to the movie. Simple way of supply data. if you've ever used a flash movie creator that works off of "custom" data, this is probably how it was done. This is also how the "aninote" movies were done. (ex. http://www.solaris.youaremighty.com) You can pass variables to an html document which then passes it to the flash object. To do this, we need to do two things:

1. Add a flashVARS field to the html document where we want the flash object to be placed.
2. Bring that data into flash.

First, lets research this method a little bit and see what macromedia has to say about it (now adobe)
http://kb.adobe.com/selfservice/viewConten...7&sliceId=1 - helptopic on flashVars

If you read up, it shows you examples on how to use the property in the object tag method, and the embed tag mathod. But keep in mind, that IE uses the object tag, and FF ignores that and uses the embed tag. So it becomes neccessary to use both. So with that in mind, close that, and lets use a whole code.

Code:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub...ersion=9,0,0,0" width="170" height="120"><param name="allowScriptAccess" value="sameDomain" />
 <param name="movie" value="bar.swf" />
 <param name="quality" value="high" />
 <param name="bgcolor" value="#F3F7FB" />
 <param name="FlashVars" value="donations=1500" /> 
 <embed src="bar.swf" FlashVars="donations=1500" quality="high" bgcolor="#F3F7FB" width="170" height="120" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
Note that I use the code that is published through flash. Take a look at both tag bases. I use the flashVars property twice. Lets break down the syntax:

For the embed tag, flashvars is used as a propert: FlashVars="donations=1500". Flashvars being the property, and donations being the variable, and 1500 being the value.
For the object tag, its used as a parameter: <param name="FlashVars" value="donations=1500" /> again the variable and value are the same, just used in a different context.

So apply this to your document. Make sure that when you update the info, that you change both fields, or it may not display correctly in one or both browsers, and even runs the risk of not working at all.

Okay, so we are sending a variable to flash through flashvars. What next? Easy, you need to catch that data in a string, In other words, we need to go back into flash one last time.

Open up the actions panel for frame 1 on the root stage. Put this script in:
Code:
var donations:String;
var amount:String = donations;
lblReached.text = amount;
Ever used VB? You've probably seen this before then. Basically the "donations" variable is sent to flash through a string, you just need to declare what that string is. In this case the first line gives the variable a "string" property, which means that all data will be displayed literally, with no conversion.

The next line you see takes the string and assigns it to a new variable called "amount".
The third gives that lowly text field a place to get the data. In this case, the total amount text field will reflect data gathered from amount.

So lets put this into perspective. How is the data being loaded and where is it going?
From point A. html Document >>> flashvars >>> string >>> variable >>> text field.

The text field is obviously the point of interest for the rest of the document. If the total amount text field is empty and displays no data, the rest of the script will fail or just not display any data as a result.

That's it! You're done. Keep in mind that this will only work when you view the movie as embedded in an html document like I have shown above. Otherwise you're just leaving out half of the equation

Of course, there are alternatives to using flashvars. For instance, you could load the data from a text document. To do this, you will need to take out the first two lines of the code we used above. Those lines will be replaced with something like:
Code:
loadText = new LoadVars();
loadText.load("donations.txt");
loadText.onLoad = function() {
 donations.text = _root.reached;
};
Your text document will need to read as: donations=#####, # being the value.

That's it. If you wanted to, you could introduce another language, such as PHP, and print the data from a CMS into a text document, which in turn loads the data into the flash object, but that is entirely your discretion. The possibilities are limitless.
Want the source? Ask!

I hope you learned something today!
enjoi.

- Solaris