Home Contact RSS

Shared Object - utilizing the Flash cookie

April 24, 2008 at 8:07 pm · 1,478 views · Filed under tutorial

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5 out of 5)
Loading ... Loading ...

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. /* Create them. */
  2. //make Local Shared Object named myLocalSO(in as) called "myflashcookie" on disk
  3. var myLocalSO:SharedObject = SharedObject.getLocal("myflashcookie");
  4.  
  5. /* Write them. */
  6. //flush the SO, write the SO to disk
  7. myLocalSO.flush();
  8.  
  9. /* Set them. */
  10. //set key's value to specified value in SO
  11. //key is the name of the data
  12. //val is key's value
  13. function setVal(key, val) {
  14. myLocalSO.data[key] = val;
  15. trace(key +" set to "+val);
  16. /* including writing to Shared Object in the setter function */
  17. //flush the SO, write the SO to disk
  18. myLocalSO.flush();
  19. }
  20. /* Get them. */
  21. //get key's value from SO
  22. function getVal(key) {
  23. return myLocalSO.data[key];
  24. trace(myLocalSO.data[key] +" received from "+key);
  25. }
  26. /* Clear them. */
  27. 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,

and source code:

  1. ////////////////////////  Initialize variables  ///////////////////////
  2.  
  3. //make Local Shared Object named myLocalSO(in as) called "myflashcookie" on disk
  4. var myLocalSO:SharedObject = SharedObject.getLocal("myflashcookie");
  5. //speed var for easing
  6. var speed = 3;
  7. var w = myCircle._width/2;
  8. //toggle var for easing
  9. var ease = true;
  10. //as var to store alltime cookie
  11. var allTimeVisitCount=0;
  12. countVisit();
  13. cookieFeedback();
  14. //line style for tracing movement
  15. lineStyle(1, 0, 50);
  16.  
  17.  
  18. ////////////////////////  Functions  ///////////////////////
  19.  
  20. //set key's value to specified value in SO
  21. //key is the name of the data
  22. //val is key's value
  23. function setVal(key, val) {
  24.   myLocalSO.data[key] = val;
  25.   trace(key +" set to "+val);
  26.   //flush the SO, write the SO to disk
  27.   myLocalSO.flush();
  28. }
  29. //get key's value from SO
  30. function getVal(key) {
  31.   return myLocalSO.data[key];
  32.   trace(myLocalSO.data[key] +" received from "+key);
  33. }
  34.  
  35. function countVisit() {
  36.   //if first visit
  37.   if (getVal('visitCount') == undefined) {
  38.     //create date for now and store in cookie
  39.     var todayDate:Date = new Date();
  40.     setVal('date', todayDate);
  41.     trace("creating date");
  42.     //start/reset counting visits
  43.     var visitCount = 0;
  44.     //notice allTimeVisitCount is not reset, but stored still as a var in actionscript
  45.   }
  46.  
  47.   //not first visit
  48.   else {
  49.     visitCount = getVal('visitCount');
  50.     allTimeVisitCount = getVal('allTimeVisitCount');
  51.   }
  52.   //increment visit counter
  53.   setVal('visitCount', visitCount+1);
  54.   setVal('allTimeVisitCount', allTimeVisitCount+1);
  55.   //feedback of visit counting
  56.   visitsFeedback.text = getVal('visitCount');
  57.   allTimeVisitsFeedback.text = getVal('allTimeVisitCount');
  58. }
  59. //feedback of cookie contents
  60. function cookieFeedback() {
  61.   //in defined print coordinate contents
  62.   cookiex.text = getVal('circleX') == undefined ? "no cookie" : getVal('circleX');
  63.   cookiey.text = getVal('circleY') == undefined ? "no cookie" : getVal('circleY');
  64.  
  65.   //if not easing assign coordinates from cookie
  66.   if (!ease) {
  67.     myCookie._x = getVal('circleX');
  68.     myCookie._y = getVal('circleY');
  69.   }
  70.   //set target to cookie coordinates
  71.   else {
  72.     ctargetx = getVal('circleX');
  73.     ctargety = getVal('circleY');
  74.   }
  75.   //if name then trace cookie contents
  76.   if (getVal('name') != undefined) {
  77.     visitorFeedback.text = "Returning Visitor";
  78.     nameInput.text = getVal('name');
  79.     ageInput.text = getVal('age');
  80.   }
  81.   //no name then a new visitor
  82.   else {
  83.     visitorFeedback.text = "First Time Visitor";
  84.     nameInput.text = "";
  85.     ageInput.text = "";
  86.   }
  87.   calculateCookieAge();
  88. }
  89. function calculateCookieAge() {
  90.   //make a date now
  91.   todayDate = new Date();
  92.   //get the cookie's stored date
  93.   cookieDate = getVal('date');
  94.   //difference between two dates
  95.   cookieDateAge = Math.floor(todayDate - cookieDate);
  96.   //convert miliseconds to a timecode
  97.   cookieAge.text = msToTimeCode(cookieDateAge);cookieDateAge;
  98. }
  99.  
  100. //convert miliseconds to a hh:mm:ss
  101. function msToTimeCode(ms) {
  102.   //make sure value is within bounds. if a number grater than zero and less than the duration of video
  103.     if (isNaN(ms) || ms< 0) {
  104.         ms = 0;
  105.     }
  106.   //find seconds
  107.   var sec = ms/1000;
  108.   //find minutes
  109.     var min = Math.floor(sec/60);
  110.   //adjust seconds
  111.     sec = sec - min*60;
  112.   //find hours
  113.   var hour = Math.floor(min/60);
  114.   //adjust minutes
  115.   min = min - hour*60;
  116.   //floor seconds down to whole number
  117.   sec = Math.floor(sec);
  118.   //make time code with hours
  119.   if (hour == 0) {
  120.     if (sec < 10) {
  121.           sec = "0"+sec;
  122.       }
  123.       if (min < 10) {
  124.           min = "0"+min;
  125.       }
  126.       var tc = min+":"+sec;
  127.   }
  128.   //make time code without hours
  129.   else {
  130.     if (sec < 10) {
  131.           sec = "0"+sec;
  132.       }
  133.       if (min < 10) {
  134.           min = "0"+min;
  135.       }
  136.       var tc = hour+":"+min+":"+sec;
  137.   }
  138.   return tc;
  139. }
  140.  
  141.  
  142.  
  143.  
  144.  
  145. //////  Actionscript attached to Objects/handlers  //////////
  146.  
  147. //place data on stage into cookie (circle coordinates and input text)
  148. setCookieButton.onRelease = function() {
  149.   setVal('circleX', myCircle._x);
  150.   setVal('circleY', myCircle._y);
  151.   setVal('name', nameInput.text);
  152.   setVal('age', ageInput.text);
  153.   //update the display on stage
  154.   cookieFeedback();
  155. }
  156. //make random coordinates on stage
  157. randomButton.onRelease = function() {
  158.   //if not easing assign coordinates to myCircle
  159.   if (!ease) {
  160.     myCircle._x = Math.random() * (Stage.width - w);
  161.     myCircle._y = Math.random() * (Stage.height - w);
  162.   }
  163.   //if easing assign coordinates to myCircle's target coords
  164.   else {
  165.     targetx = Math.random() * (Stage.width - w);
  166.     targety = Math.random() * (Stage.height - w);
  167.   }
  168. }
  169.  
  170. myCircle.onPress = function() {
  171.   this.startDrag();
  172.   dragging = true;
  173.   lineStyle(1, 200, 30);
  174. }
  175.  
  176. myCircle.onRelease = myCircle.onReleaseOutside = function() {
  177.   targetx = this._x;
  178.   targety = this._y;
  179.  
  180.   lineStyle(1, 0, 50);
  181.  
  182.   dragging = false;
  183.   this.stopDrag();
  184. }
  185.  
  186. myCircle.onEnterFrame = function() {
  187.   //print position feedback
  188.   currentx.text = this._x;
  189.   currenty.text = this._y;
  190.   //if eas move to target
  191.   if (ease) {
  192.     if (!dragging) {
  193.       moveTo(this._x+w, this._y+w);
  194.       this._x+=(targetx-this._x)/speed;
  195.       this._y+=(targety-this._y)/speed;
  196.     }
  197.     //draw line
  198.     lineTo(this._x+w, this._y+w);
  199.   }
  200. }
  201.  
  202. myCookie.onEnterFrame = function() {
  203.   //if ease move cookie to target
  204.   if (ease) {
  205.     this._x+=(ctargetx-this._x)/speed;
  206.     this._y+=(ctargety-this._y)/speed;
  207.   }
  208.   calculateCookieAge();
  209. }
  210.  
  211. //Position from Cookie
  212. cookieButton.onRelease = function() {
  213.   //if not easing set coordinates from cookie
  214.   if (!ease) {
  215.     myCircle._x = getVal('circleX');
  216.     myCircle._y = getVal('circleY');
  217.   }
  218.   //if easing set target coordinates from cookie
  219.   else {
  220.     targetx = getVal('circleX');
  221.     targety = getVal('circleY');
  222.   }
  223. }
  224. easeBtn.onRelease = function () {
  225.   //toggle easing
  226.   ease = !ease;
  227.   //advance the frame of this button...
  228.   this.play();
  229. }
  230. clearCookieBtn.onRelease = function() {
  231.   //clear the cookie (swipe all data)
  232.   myLocalSO.clear();
  233.   //restart visit count
  234.   countVisit();
  235.   //read cookie and give feedback
  236.   cookieFeedback();
  237. }

Source

download the source for this example: sharedObject.fla

Tags: , , , , , , ,

Related posts

flashden banner

Leave a Comment