Shared Object – utilizing the Flash cookie

Overview

The Shared Object is like a cookie for flash. It lets flash store some data on the local machine, so between sessions it can remember things. Learn more from wikipedia.
Shared Objects are used to store data on the client machine in much the same way that data is stored in a cookie created through a web browser. The data can only be read by movies originating from the same domain that created the Shared Object. This is the only way Macromedia Flash Player can write data to a user’s machine. Shared Objects can not remember a user’s e-mail address or other personal information unless they willingly provide such information.

I’ve seen many Local Shared Object tutorials and examples, which have users input their name and/or hometown and other filler data. But I wanted to show how to creatively incorporate shared objects into interactions. So I’ve thrown in many simultaneous examples including the uber-simple ‘input your name and I’ll remember it’ approach. I hope I didn’t throw in so much that it got confusing… just let me know if you have any questions or anything is unclear. Keeping it simply and broad there’s only a few things to know about Shared Objects.

Steps

    Simply put there are only a couple things to worry about with Local Shared Objects

  • Create them.
    • As in create the shared object
  • Write them.
    • As is write to the shared object
  • Set them.
    • As in setting variables in the shared object
  • Get them.
    • As in getting variables back out of the shared object
  • Clear them.
    • As in clearing the shared objec

Actionscript

here’s samples on how to do each of those

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Create them. */
//make Local Shared Object named myLocalSO(in as) called "myflashcookie" on disk
var myLocalSO:SharedObject = SharedObject.getLocal("myflashcookie");

/* Write them. */
//flush the SO, write the SO to disk
myLocalSO.flush();

/* Set them. */
//set key's value to specified value in SO
//key is the name of the data
//val is key's value
function setVal(key, val) {
myLocalSO.data[key] = val;
trace(key +" set to "+val);
/* including writing to Shared Object in the setter function */
//flush the SO, write the SO to disk
myLocalSO.flush();
}
/* Get them. */
//get key's value from SO
function getVal(key) {
return myLocalSO.data[key];
trace(myLocalSO.data[key] +" received from "+key);
}
/* Clear them. */
myLocalSO.clear();

Example

here’s my colorful example.
The purple/yellow circle is draggable, so place it where you want it. Enter your name and age in the input boxes. Press the center red ‘Set cookie’ button to copy those values to the shared object that is on your computer now. The red transparent circle represents the cookie positions. You can position the purple/yellow circle from the cookie contents with the dark green ‘Position from cookie’ button, or position it randomly with the blue ‘Position randomly’ button. Erase the cookie with the orange ‘Erase cookie’ button. Toggle easing (animation) with the Bright green button (which changes to dark red when off), it tells the current mode of ease. I have the cookie coordinates displayed and the current coordinates of the purple/yellow circle also displayed.
The cookie includes a date object, which is used to calculate the age of the cookie (watch it reset when you erase the cookie (orange button)).
The ‘All Time Visit’ stat is the only thing that does not get reset when you erase the cookie,

Get Adobe Flash player

and source code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
////////////////////////  Initialize variables  ///////////////////////

//make Local Shared Object named myLocalSO(in as) called "myflashcookie" on disk
var myLocalSO:SharedObject = SharedObject.getLocal("myflashcookie");
//speed var for easing
var speed = 3;
var w = myCircle._width/2;
//toggle var for easing
var ease = true;
//as var to store alltime cookie
var allTimeVisitCount=0;
countVisit();
cookieFeedback();
//line style for tracing movement
lineStyle(1, 0, 50);


////////////////////////  Functions  ///////////////////////

//set key's value to specified value in SO
//key is the name of the data
//val is key's value
function setVal(key, val) {
  myLocalSO.data[key] = val;
  trace(key +" set to "+val);
  //flush the SO, write the SO to disk
  myLocalSO.flush();
}
//get key's value from SO
function getVal(key) {
  return myLocalSO.data[key];
  trace(myLocalSO.data[key] +" received from "+key);
}

function countVisit() {
  //if first visit
  if (getVal('visitCount') == undefined) {
    //create date for now and store in cookie
    var todayDate:Date = new Date();
    setVal('date', todayDate);
    trace("creating date");
    //start/reset counting visits
    var visitCount = 0;
    //notice allTimeVisitCount is not reset, but stored still as a var in actionscript
  }

  //not first visit
  else {
    visitCount = getVal('visitCount');
    allTimeVisitCount = getVal('allTimeVisitCount');
  }
  //increment visit counter
  setVal('visitCount', visitCount+1);
  setVal('allTimeVisitCount', allTimeVisitCount+1);
  //feedback of visit counting
  visitsFeedback.text = getVal('visitCount');
  allTimeVisitsFeedback.text = getVal('allTimeVisitCount');
}
//feedback of cookie contents
function cookieFeedback() {
  //in defined print coordinate contents
  cookiex.text = getVal('circleX') == undefined ? "no cookie" : getVal('circleX');
  cookiey.text = getVal('circleY') == undefined ? "no cookie" : getVal('circleY');

  //if not easing assign coordinates from cookie
  if (!ease) {
    myCookie._x = getVal('circleX');
    myCookie._y = getVal('circleY');
  }
  //set target to cookie coordinates
  else {
    ctargetx = getVal('circleX');
    ctargety = getVal('circleY');
  }
  //if name then trace cookie contents
  if (getVal('name') != undefined) {
    visitorFeedback.text = "Returning Visitor";
    nameInput.text = getVal('name');
    ageInput.text = getVal('age');
  }
  //no name then a new visitor
  else {
    visitorFeedback.text = "First Time Visitor";
    nameInput.text = "";
    ageInput.text = "";
  }
  calculateCookieAge();
}
function calculateCookieAge() {
  //make a date now
  todayDate = new Date();
  //get the cookie's stored date
  cookieDate = getVal('date');
  //difference between two dates
  cookieDateAge = Math.floor(todayDate - cookieDate);
  //convert miliseconds to a timecode
  cookieAge.text = msToTimeCode(cookieDateAge);cookieDateAge;
}

//convert miliseconds to a hh:mm:ss
function msToTimeCode(ms) {
  //make sure value is within bounds. if a number grater than zero and less than the duration of video
    if (isNaN(ms) || ms< 0) {
        ms = 0;
    }
  //find seconds
  var sec = ms/1000;
  //find minutes
    var min = Math.floor(sec/60);
  //adjust seconds
    sec = sec - min*60;
  //find hours
  var hour = Math.floor(min/60);
  //adjust minutes
  min = min - hour*60;
  //floor seconds down to whole number
  sec = Math.floor(sec);
  //make time code with hours
  if (hour == 0) {
    if (sec < 10) {
          sec = "0"+sec;
      }
      if (min < 10) {
          min = "0"+min;
      }
      var tc = min+":"+sec;
  }
  //make time code without hours
  else {
    if (sec < 10) {
          sec = "0"+sec;
      }
      if (min < 10) {
          min = "0"+min;
      }
      var tc = hour+":"+min+":"+sec;
  }
  return tc;
}





//////  Actionscript attached to Objects/handlers  //////////

//place data on stage into cookie (circle coordinates and input text)
setCookieButton.onRelease = function() {
  setVal('circleX', myCircle._x);
  setVal('circleY', myCircle._y);
  setVal('name', nameInput.text);
  setVal('age', ageInput.text);
  //update the display on stage
  cookieFeedback();
}
//make random coordinates on stage
randomButton.onRelease = function() {
  //if not easing assign coordinates to myCircle
  if (!ease) {
    myCircle._x = Math.random() * (Stage.width - w);
    myCircle._y = Math.random() * (Stage.height - w);
  }
  //if easing assign coordinates to myCircle's target coords
  else {
    targetx = Math.random() * (Stage.width - w);
    targety = Math.random() * (Stage.height - w);
  }
}

myCircle.onPress = function() {
  this.startDrag();
  dragging = true;
  lineStyle(1, 200, 30);
}

myCircle.onRelease = myCircle.onReleaseOutside = function() {
  targetx = this._x;
  targety = this._y;

  lineStyle(1, 0, 50);

  dragging = false;
  this.stopDrag();
}

myCircle.onEnterFrame = function() {
  //print position feedback
  currentx.text = this._x;
  currenty.text = this._y;
  //if eas move to target
  if (ease) {
    if (!dragging) {
      moveTo(this._x+w, this._y+w);
      this._x+=(targetx-this._x)/speed;
      this._y+=(targety-this._y)/speed;
    }
    //draw line
    lineTo(this._x+w, this._y+w);
  }
}

myCookie.onEnterFrame = function() {
  //if ease move cookie to target
  if (ease) {
    this._x+=(ctargetx-this._x)/speed;
    this._y+=(ctargety-this._y)/speed;
  }
  calculateCookieAge();
}

//Position from Cookie
cookieButton.onRelease = function() {
  //if not easing set coordinates from cookie
  if (!ease) {
    myCircle._x = getVal('circleX');
    myCircle._y = getVal('circleY');
  }
  //if easing set target coordinates from cookie
  else {
    targetx = getVal('circleX');
    targety = getVal('circleY');
  }
}
easeBtn.onRelease = function () {
  //toggle easing
  ease = !ease;
  //advance the frame of this button...
  this.play();
}
clearCookieBtn.onRelease = function() {
  //clear the cookie (swipe all data)
  myLocalSO.clear();
  //restart visit count
  countVisit();
  //read cookie and give feedback
  cookieFeedback();
}

Source

download the source for this example: sharedObject.fla

This entry was posted in tutorial and tagged , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Posted March 12, 2010 at 10:43 am | Permalink

    Hi,
    Thanks for the creative example. I used these once for a flash header on a website. The client wanted the movie to continue to play as people navigated through different pages and it was pretty amazing.

    Thanks!

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Recent Posts

    custom post types wordcamp presentation evan mullins

    WordCamp Presentation on WordPress.TV

    My presentation about Custom Post Types and Custom Fields from WordCamp Atlanta 2014 has been added to wordpress.tv. Here it is! Enjoy! Tweet

    WCATL-Speaker

    Custom Post Types or Choose Your Own Adventure – WordCamp Atlanta 2014

    I’ve been fortunate enough to be able to present at WordCamp Atlanta 2014. That makes the 3rd year in a row I’ve been able to contribute to WordCamp Atlanta! Here are my slides. I’ll be posting a full blown post of my presentation as soon as I can get it all down. Plus I hear […]

    Screenshot 2014-03-17 08.12.14

    What screens want

    Great read if you haven’t yet read it yet: Frank Chimero : What screens want : http://frankchimero.com/what-screens-want/ web and interaction design are just as much children of filmmaking as they are of graphic design. Maybe even more so. After all, we both work on screens, and manage time, movement, and most importantly, change. So what […]

    bed-bug-lifecycle-stages

    Before You Report that Bug, Use this Pre-Contact, Self-Diagnosis Routine

    Wisdom for bug reporting from Newfangled There are a few things a developer usually needs to know in order to diagnose a bug, and these are the things we’re likely to come back and ask you about if you haven’t already provided them. So, to ensure we can help you as quickly as possible, here’s […]

    deathtozach-06

    In dependence – Not dead

    Great summary and call to arms to write our own content in our own ways on our own sites. Call it what you like but ‘blogging’ is somewhat waning, in the social webs. Since as easy it is to create your own site and express your own voice, we’re flocking to the ‘services’ that will […]

    Screenshot 2014-03-17 08.50.27

    I ain’t ‘fraida no maths

    I’d heard of the ‘coding maths’ series, but hadn’t watched it yet. I should have, it’s great! Keith Peters (one of the people who first got me into scripting) has a great series about the math behind coding and as always he has a way of making complex things simple to me! Learn all you […]

css.php