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.
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!
Enroll for Announcements | Legal | Privacy
Policy | Contact Us
