Workshop Chapter 16. Using the Local SharedObject to Remember User Settings

CONTENTS

Workshop Chapter 16. Using the Local SharedObject to Remember User Settings

A common reaction to a long, drawn-out Flash introduction is to quickly click the Skip Intro button. Actually, the site www.skipintro.com exaggerates the issue. It doesn't have to be this way, however. You can use the new local SharedObjects to store information about a user's activities and preferences, and then retrieve that data later to adjust your Flash actions to that specific user.

The scenario for automatically skipping an intro animation might work like this: The first time the user sees the intro animation, you write a local SharedObject; then, for subsequent visits, you can check to see whether the local SharedObject is present and, if so, skip the intro for the user.

In this workshop chapter, we'll use a Flash movie to let the user specify his language of preference; we'll store that selection in a local SharedObject file. If the user ever revisits your site, the preferred language will be restored automatically. When we're done, I'll show you some other uses for local SharedObjects.

This exercise requires very little programming; most of the work is design, as you'll see:

1. Draw a button, and then create six instances of the button, stacked vertically and spaced evenly (see Figure W16.1).

   Figure W16.1. Draw six buttons and space them evenly apart.

   

2. On top of each button, place some text to specify a language choice. If this weren't a workshop, you'd actually spell out the name of each language in the native language that is, you'd write Espa ol rather than Spanish. However, this is just an exercise, so don't waste your time fumbling for your Swahili dictionary.

3. Arbitrarily establish that the top button is language 1, the second button is language 2, and so on, and then give each button an instance name lang_1, lang_2, and so forth.

4. To make a highlight (that indicates which button is selected), copy one of the language buttons. Select it and choose Modify, Break Apart. Set a really thick stroke by using the Ink Bottle, and then remove the fill. Select the outline and convert it to a Movie Clip. Give it an instance name of highlight. Then move it off the Stage.

5. Start with the following code in the first frame of the movie:

   lang_1.onPress=function(){pick(1)}  lang_2.onPress=function(){pick(2)}  lang_3.onPress=function(){pick(3)}  lang_4.onPress=function(){pick(4)}  lang_5.onPress=function(){pick(5)}  lang_6.onPress=function(){pick(6)}

   This code just assigns a callback to each button to trigger the pick() function (but with a parameter for each language).

6. Next we can define the pick() function. Although we'll add more later, here's the start:

   function pick(whichOne){   language=whichOne;    redisplay(whichOne);  }

   After setting the language variable, this function just goes and triggers another function: redisplay(). The redisplay() function will handle all the display issues, including placing the highlight in position. We want to separate that job from the pick() function because we'll need to do it both when the user clicks a language button as well as when she resumes.

7. To make a separate function to handle the highlight display, write this function:

   function redisplay(whichOne){   highlight._x=this["lang_"+whichOne]._x;    highlight._y=this["lang_"+whichOne]._y;  }

   This code positions the highlight in the same location as the appropriate language button. If you want more things to happen when the user selects a language or returns to the site, you can add extra code inside the redisplay() function. For example, maybe you have a background image that relates to the selected language. You could display that graphic in this function too.

8. Now for the local SharedObject issue. We'll need to both write the language preference when the user clicks a button as well as check (at the beginning) to see whether there is an existing value for language. We'll write the code to read in any existing language choice. Type the following code above all the rest of the code already in place:

   my_so=SharedObject.getLocal("language_choice","/");  if (my_so.data.language!=undefined){   redisplay(my_so.data.language);  }

   Because this code isn't inside any function or callback, it executes when the movie first plays. The first line does three things at once! It places an instance of SharedObject in the variable my_so; it checks for the existence of an .sol (shared object local) file named language_choice and creates one if it doesn't exist; finally, it sets all the variables contained in the built-in data property (provided that an old file exists). Then the if statement checks to see whether the value for language (within the data property of my_so) is not undefined it will be undefined the first time, but for subsequent visits the redisplay() function is invoked because the condition will be true. You can learn more details and the full syntax for local SharedObjects in Chapter 16, "Interfacing with External Data."

9. To write this local SharedObject file (or, more importantly, to save the user's language choice in that file), just modify the pick() function, as follows:

   function pick(whichOne){   my_so.data.language=whichOne;    my_so.flush();    redisplay(whichOne);  }

   Instead of placing our language variable in the _root timeline, this code places it as a property inside the data property. Naturally, my_so needs to be an Object data type before we can set the values of properties but the getLocal() method handles that in the first line (of step 7). Also, this example uses only one variable, but you can store as many as you want. Each variable just needs to be saved as a property of the data property. Finally, the flush() method immediately writes the data to disk.

//

If, by chance, this workshop is not working for you, confirm that your Flash settings allow you to write movies to disk. Just right-click (or Control-click on Macintosh) while testing the movie. You'll want to make sure the slider (accessed when you click the second tab labeled Local Storage) is set above 0 (see Figure W16.2). Normally, these settings can be different for each domain you visit; however, there's one "local" setting for movies you view when selecting Control, Test Movie.

Figure W16.2. Users can change how much Flash local SharedObject data is stored on their computer.

That's it! I feel guilty that this was such a piece of cake. As most of the workshop chapters illustrate, you can accomplish equivalent tasks much easier with Flash MX than you could with Flash 5. For example, saving the user's language preference in the past would require writing JavaScript cookies. Not only was that more work, but it would fail on some browsers. Furthermore, cookies contain only the String data type, whereas SharedObjects enable you to store any data type, including, as in the case of our language variable example, the Number data type. You can even store arrays. In addition to this workshop, you'll find a sample at www.phillipkerman.com/actionscripting that lets the user drag shapes around the screen and save their positions (see Figure W16.3).

Figure W16.3. Local SharedObjects enable you to save complex data, such as the arrays for this drag-and-drop interaction.

Just so that we explore another feature of local SharedObjects, consider a scenario in which you plan to store a lot of data in a SharedObject. It turns out that the default setting of 100KB is plenty big enough for most applications, although you might still want more perhaps to let users store huge databases of information locally. Although users can take it upon themselves to select the Settings dialog box and crank up the Local Storage option, they won't normally see that dialog box automatically unless you try storing more data than they currently have set (which is likely 100KB because that's the default). However, you can use the System object's showSettings() method to force the user to see this dialog box. For example, the following code will display the settings dialog box:

System.showSettings(1);

The optional parameter (1 in this case) specifies which tabbed panel will initially appear (0-3 correspond to the four different panels in the dialog box).

Anyway, you probably don't want to let users spend a lot of time interacting with your movie if, in the end, they don't want to let you store data locally. It would be nice if, before you get rolling, you give users the option to save a lot of data; if they decline, you offer them a different experience.

CONTENTS