Programming Art, LLC
   
Products Web Services Free stuff Forums
SEARCH
   
SOFTWARE
100% Satisfaction Guarantee
Credit Cards Accepted
Programming Art's Tutorials

Flash
Using Local Shared Objects in Flash to Store Info on a User's Computer
We like to think of Local Shared Objects as Flash MX's answer to cookies. You can use them to store locally persistent data on a user's machine, and retrieve it next time your movie executes. Very cool stuff, and we'll give you a rundown on how to use it right here. Just tell us if you'd like to add anything, or need some clarification.

Get the FREE source file here and see how it works! [Flash MX, 33Kb]



The finished shared object test file. Test it out by reloading your browser window after fiddling with the buttons a bit.

The application we are going to use as an example is a simple color picker. You can see it above. Just click on any color above, and you'll see the counter at the bottom updated. Easy stuff. Shared Objects come in when you reload the page. Reload this page completely, and Flash remembers your variable! There are a lot of great implications for this, and it's really an exciting addition to Flash MX. Notice you can also clear the stored variable by clicking the Reset button. Read on to find out how all of this works.


1. First we will set up our movie for the application. We used a size of 400 pixels wide and 220 pixels high. We used 5 layers and a layer folder for the background elements with an additional 2 layers in that. You can view the initial layer setup below.


Layer setup

2. Now create the color buttons. You're going to need a few buttons with different colors on them [we decided on 6]. Name your library items for organization and then drag the instances to the stage on the first frame of the Color Buttons layer. Give each button on the stage a unique instance name using the Properties panel. We went with colorButton1, colorButton2, and so on.

3. You also need a larger color block with the instance name ColorChange, which we placed on the Color Change layer. This is what we will update as the user clicks colors to reflect the current color chosen. Inside the movie clip for this symbol, you want to create 1 frame for each color button you've made. We will update the color of this symbol by cycling to the appropriate frame based on what color button was picked. So in our case, we made 6 frames inside ColorChange, and filled each one with a different colored version of ColorChange. Make sure the numbers of your color buttons match up to the frame number of ColorChange. For example, if colorButton2 is a green button, frame 2 of ColorChange should be a green ColorChange. Easy!

4. The last button we will use in this tutorial will be a reset button of some kind. Create the symbol and drag it to the stage somewhere in the Reset Button layer. The instance name for the reset button should be resetButton.

5. For the text fields, you need one static text field for the instructions, and one dynamic text field as a counter display. Select the BG_Text layer in the Background folder and drag a text field out using the Text Tool. Select the font and properties you like, and type some useful instructions in there. We just decided to write "Select a color, then refresh." Now select the Dynamic Field layer and drag out a text field for the counter text. Select the text field on the stage, and in the Properties panel give it an instance name of numChanges.

Feel free to dress up the movie a little bit using some nice background elements or anything that suits you. After you're finished, proceed on to the coding portion of this tutorial.

6. Now that our interface elements are set up and named, we need to start writing some Actionscript. We will start by writing the code for our Local Shared Object. Select the Actions layer, and enter the following into the Actions panel:

//Create the shared object, place it in the object
//myLocalSharedObject, and call the shared object myCookie
myLocalSharedObject = sharedobject.getLocal("myCookie");

//If the user has never been here:
if (myLocalSharedObject.data.hitCounter == null) {
   numChanges.text = "You've never altered colors.";

   //Set the default color
   ColorChange.gotoAndStop(1);
}

//If there is data for this visitor
else {
//Update the text field
   numChanges.text = "You have altered colors " + myLocalSharedObject.data.hitCounter + " times.";

   //update the color with the shared object
   ColorChange.gotoAndStop(myLocalSharedObject.data.chosenColor);
}


First is the creation of our Local Shared Object. We start by saying that myLocalSharedObject, our custom object, should be assigned [=] as the container for our Local Shared Object. So we say sharedobject.getLocal() because to create a Local Shared Object we use the getLocal() method of haredobject. If there isn't already a Local Shared Object stored with the name of "myCookie", one is created. If there is, its value is assigned to myLocalSharedObject. So either way, myLocalSharedObject ends up being the way we manipulate the Local Shared Object.

Next we have an if statement with two distinct parts. The first checks to see if the method of the shared object data.hitCounter is null. Later we will set this to have a value when the user clicks a color button, so if it has no value here then we know that this Local Shared Object is new and that the user has not visited before. Since our user has never been here, we can set the text field numChanges to say that the user has never altered colors. Then, we set the default color to display on startup by telling ColorChange to gotoAndStop to it's first frame, but you can pick any one of the frames it contains as the default.

We then have an else statement to cover for users who have been here before and who have data in their Local Shared Object. Now that we know they have data in their Local Shared Object, we need to use it. So we assign text to our dynamic text field numChanges. Notice that we insert the value of data.hitCounter in the middle of the string so that we can display the hit number. The next line updates the ColorChange frame number, thus updating the color it displays. To get the color that was last chosen, we read from the data.chosenColor variable [which we will describe the creation of later], and use that value as the frame number.

7. Now we will write code for the color change buttons. Flash MX has the great ability to write code on the main timeline to control your buttons. It's great because all of our code is in one place and we don't have to go clicking around on button instances to edit code later. Here is the code we used for the color buttons, all placed inside the Actions layer on the main timeline:

colorButton1.onRelease = function () {
   chosenColor = 1;
   updateColor();
}


colorButton1.onRelease = function () {
   chosenColor = 2;
   updateColor();
}


colorButton1.onRelease = function () {
   chosenColor = 3;
   updateColor();
}


colorButton1.onRelease = function () {
   chosenColor = 4;
   updateColor();
}


colorButton1.onRelease = function () {
   chosenColor = 5;
   updateColor();
}


colorButton1.onRelease = function () {
   chosenColor = 6;
   updateColor();
}


As you can see, it's very simple. For each button, we use the instance name and then .onRelease to call a function. That just means that when the user releases that button, Flash will play all the code inside that function. Then we set a variable, chosenColor, to a number. Each button sets the variable to a different number, so we know which button has been clicked. Finally, we call a function we will write later, updateColor().

8. The final button we need to write code for is our reset button. You can enter this code before or after the color button functions in the Actions panel:

resetButton.onRelease = function () {
   myLocalSharedObject.data.colorChosen = 1;
   myLocalSharedObject.data.hitCounter = 0;
   numChanges.text = "You've never altered colors.";
}


Basically we just reset the data in our Local Shared Object to their default values. I will explain more about this next, but the main purpose of this button is to reset everything to their default stage, the data and the text field.

That takes care of all of our color buttons and the reset button, so let's move on to the writing of the updateColor() function.

9. The updateColor() function does a number of things, and it's the core of this program. Here is the code:

function updateColor(){
   //Set the ColorChange to the correct color
   ColorChange.gotoAndStop(chosenColor);

   //First, we assign the selected color to the shared object
   myLocalSharedObject.data.chosenColor = chosenColor;

   //Now we update the hitcounter for the shared object
   //by adding 1 to it
   myLocalSharedObject.data.hitCounter++;
   //Then we update the text field hitCounter
   numChanges.text = "You have altered colors " + myLocalSharedObject.data.hitCounter + " times.";

   //Now we save the data to the user's computer
   myLocalSharedObject.flush();
}


The code for this function can be entered between the Local Shared Object code and the button functions. First, we update the color that ColorChange displays to the newly clicked color [remember, it's the color buttons that calls this function]. Now we write data to the Local Shared Object. To do that, you call on the data method of the object, and assign it new attributes of your choosing. So we create a new attribute called chosenColor to store our color number. That way when user's come back we can recall it and make ColorChoice the right color. Next, we update the data attribute hitCounter [also created by us]. This way we can keep track of how many times the colors have been changed. We then update the text field just like we did before to always display the correct information. Finally, we use a built in method of the sharedobject, flush(). Calling flush() writes the data in the shared object to the user's computer. That's it for this tutorial! There are many great ways to use Local Shared Objects, send us an email if you do something fantastic!

Your Shopping Cart
$
Item(s)
CHECKOUT NOW