Dynamic Flash Part 1: Counting Users Online

Dynamic Flash Part 1: Counting Users Online - The Basics Of Dynamic Flash
(Page 2 of 5 )

In this article I'm going to show you how to make an on the fly 'current active users' animation. Because we are using flash, this means that you wont have to refresh the page to see the updated content.

Before we begin I'm going to show you really basically how to create dynamic flash, as well as a few other things you will need to know. We will simply create a button that loads a text file. This means that you can load the text file, change it, hit the button again, and the text will change, without refreshing the page.

Firstly, open up your flash program and create a new file. You should see a white box in the middle of your screen. Click the white background, open the properties box, and set it to 330 wide by 180 high.

Create a new text area with dimensions of 310x120, like this:



Our New Text Area
Bring up its properties and set it to dynamic text. Also, call it 'Count' in the Var area. You might also want to set it to render html tags and give it a border. You now have your dynamic text area finished.



We need to create a button that will load up the dynamic text. Firstly, create a box of any size. This is the background for our button. You can change the line and background colours if you like. Once you've created your box, select it, by double clicking in the middle of it. Now, hit F8 and call it 'Button'. Make sure that its behaviour is set to button.



With the box selected, click on the Edit > Edit Selected menu option. It should bring the box up in its own window. Grab the text tool and create the word 'Update'. Place it over the top of your box and try to centre it as much as possible. Make sure that its set to static text and not dynamic:



Select the 'over' frame and hit F6. This should create a new key frame.



Select the background of your button and change the colour. Do the same for down -- create a new keyframe, and change the colour. You have now got your update button in place. Hit Ctrl+E to go back to the main document.

Position the button where you would like it and minimise the properties bar. Make sure your button is selected and paste the following code into the action properties.

on (release) {
loadVariablesNum("data.txt?RND="+random(999), 0);
}

The code above loads the contents of the data.txt file into flash. Data.txt contains some variables, as you will see shortly. 

You will notice that I've created a random variable called RND. This is because flash likes to use a cashed version of the file. The random number forces flash to load the file, and not used a cached version.

The RND variable doesn't actually do anything apart from stoping it from cashing. Its very important, that if you create dynamic flash to ALWAYS have this variable attached.

Once you've successfully done that, save the file as data.fla and hit Ctrl+F12. This should open your web browser with the flash animation. You can now close the flash program and open up notepad.

Add the following text to the file:

Count=<b>Hello World</b>.

Save this file as data.txt in the same folder where you saved your .fla file.
Go back to your browser and hit the refresh button. It should show the text Hello World.



Go and change the value of the variable in the text file, save it, and click the update button. This action should then update the file without refreshing the page!

You have now created your dynamic flash movie. I think its time to move onto our 'Online Counter' example.
blog comments powered by Disqus