2008 April | Circle Cube Studio

Archive for April, 2008

Shared Object - utilizing the Flash cookie

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

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

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

/* 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,

and source code:

////////////////////////  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

Tags: actionscript, as2, download, experiment, flash, interactive, open source, tutorial

Comments

Update to Wordpress 2.5

April 14, 2008 at 9:07 pm · 215 views · Filed under other

Circlecube Blog is now enjoying the speed and ease of the latest Wordpress, 2.5 is hot.

Enjoy! I know I am, thanks Wordpress

Note: So far my theme and every plugin are functioning perfectly!

Tags: blog, wordpress

Comments

XML and Flash Actionscript made Easy | Parse XML to Object | Tutorial

April 11, 2008 at 10:31 pm · 3,274 views · Filed under tutorial

XML and flash is something that always seemed to be more complicated than it needed to be. Then I had an idea to parse the xml nodes into actionscript as objects, that would make working with xml tons easier for me, I could just parse it once and then forget about the xml, I could refer to something with the familiar dot syntax rather than worry about firstChild and nextChild and so forth…

And then I found someone who’d already done that with XML2Object.as, here it is:

XML@Object.as Class

Actionscript Class:

//////////////////
// - Derived from code written by Alessandro Crugnola - http://www.sephiroth.it/file_detail.php?id=129#
// - Refactored and documented by Phil Powell - http://www.sillydomainname.com
// - 25 July 2006 - Added helper method to sanitize Windows line breaks.
//////////////////
// Convert an XML object to an object with nested properties.
//
// Example usage:
//
//   import net.produxion.util.XML2Object;
//   var contentObj:Object;
//   var xml:XML = new XML();
//   var xmlLoaded = function( success:Boolean )
//   {
//    if( success )
//    {
//     contentObj = XML2Object.deserialize( this );
//     this['timeline'].play();
//    }
//   }
//
//   xml.ignoreWhite = true;
//   xml['timeline'] = this;
//   xml.onLoad = xmlLoaded;
//   xml.load( 'some.xml' );
//
/////////////////
// What do you get back?
//
//   <content created="22-May-2006">
//       <title>My Title</title>
//       <links>
//           <heading>Here be links!</heading>
//           <link>http://somewhere.com</link>
//           <link>http://somewhere-else.com</link>
//       </links>
//   </content>
//
//   Becomes:
//
//   contentObj.content.title.data => "My Title"
//   contentObj.content.links.title.data => "Here be links!"
//   contentObj.content.links.link => [Array]
//   contentObj.content.links.link[0].data => "http://somewhere.com"
//   contentObj.content.attributes.created => "22-May-2006"
/////////////////
class XML2Object {private var _result:Object;
private var _xml:XML;
private var _path:Object;
private static var xml2object:XML2Object;public function XML2Object()
{
this._result = new Object();
}
 
public static function deserialize( xml:XML ):Object
{
xml2object = new XML2Object();
xml2object.xml = xml;
return xml2object.nodesToProperties();
}
 
public function get xml():XML
{
return _xml;
}
 
public function set xml( xml:XML ):Void
{
this._xml = xml;
}
 
private function nodesToProperties( parent:XMLNode, path:Object, name:String, position:Number ):Object
{
var nodes:Array;
var node:XMLNode;
 
path == undefined ? path = this._result : path = path[name];
if( parent == undefined) parent = XMLNode( this._xml );
 
if( parent.hasChildNodes() )
{
nodes = parent.childNodes;
if (position != undefined) path = path[position];
 
while( nodes.length &gt; 0 )
{
node = XMLNode( nodes.shift() );
 
if ( node.nodeName != undefined )
{
var obj = new Object();
obj.attributes = node.attributes;
obj.data = sanitizeLineBreaks( node.firstChild.nodeValue );
 
if( path[node.nodeName] != undefined )
{
 
if( path[node.nodeName].__proto__ == Array.prototype )
{
path[node.nodeName].push( obj );
}
else
{
var copyObj = path[node.nodeName];
delete path[node.nodeName];
path[node.nodeName] = new Array();
path[node.nodeName].push( copyObj );
path[node.nodeName].push( obj );
}
position = path[node.nodeName].length - 1;
}
else
{
path[node.nodeName] = obj;
position = undefined;
}
name = node.nodeName;
}
 
if( node.hasChildNodes() )
{
this.nodesToProperties( node, path, name, position );
}
}
 
}
return this._result;
}
 
private function sanitizeLineBreaks( raw:String )
{
if( raw.indexOf( "\r\n" ) &gt; -1 )
{
return raw.split( "\r\n" ).join( "\n" );
}
return raw;
}
}

Example:

Source:

Here is my example file. But since you cant really see Objects in the code on the stage, I’ve included a recursive trace function to loop through the object and print the data.

import XML2Object;
 
var xmlObject:Object;
var xml:XML = new XML();
 
var xmlLoaded = function( success:Boolean ){
if( success ) {
xmlObject = XML2Object.deserialize( this );
this['timeline'].play();
recurseTrace(xmlObject, " ");
myTrace("\n\n")
myTrace("xmlObject.catagories.catagory[10].name.data = "+xmlObject.catagories.catagory[10].name.data);
}
}
 
xml.ignoreWhite = true;
xml.onLoad = xmlLoaded;
xml.load( 'sampleXML.xml' );
 
function recurseTrace(info:Object, indent:String) {
for (var i in info) {
if (info[i] == null){}
else if (typeof info[i] == "object") {
myTrace(indent + i + " -");
recurseTrace(info[i], indent);
}
else {
myTrace(indent + i + " = " + info[i] +", ");
}
}
}
 
function myTrace(myLine:String){
feedback.text += "|"+myLine;
trace(myLine);
}

And here’s my sample xml file: (it’s the same one I use in my Dynamic Flash Scrolling Link List files)

<catagories>
<catagory>
<name>3D</name>
<url>http://blog.circlecube.com/tag/3d/</url>
</catagory>
<catagory>
<name>abstract</name>
<url>http://blog.circlecube.com/tag/abstract/</url>
</catagory>
<catagory>
<name>actionscript</name>
<url>http://blog.circlecube.com/tag/actionscript/</url>
</catagory>
<catagory>
<name>animation</name>
<url>http://blog.circlecube.com/tag/animation/</url>
</catagory>
<catagory>
<name>blog</name>
<url>http://blog.circlecube.com/tag/blog/</url>
</catagory>
<catagory>
<name>book</name>
<url>http://blog.circlecube.com/tag/book/</url>
</catagory>
<catagory>
<name>CG</name>
<url>http://blog.circlecube.com/tag/cg/</url>
</catagory>
<catagory>
<name>charcoal</name>
<url>http://blog.circlecube.com/tag/charcoal/</url>
</catagory>
<catagory>
<name>circle cube</name>
<url>http://blog.circlecube.com/tag/circle-cube/</url>
</catagory>
<catagory>
<name>collage</name>
<url>http://blog.circlecube.com/tag/collage/</url>
</catagory>
<catagory>
<name>color</name>
<url>http://blog.circlecube.com/tag/color/</url>
</catagory>
<catagory>
<name>css</name>
<url>http://blog.circlecube.com/tag/css/</url>
</catagory>
<catagory>
<name>drawing</name>
<url>http://blog.circlecube.com/tag/drawing/</url>
</catagory>
<catagory>
<name>dreamweaver</name>
<url>http://blog.circlecube.com/tag/dreamweaver/</url>
</catagory>
<catagory>
<name>experiment</name>
<url>http://blog.circlecube.com/tag/experiment/</url>
</catagory>
<catagory>
<name>film</name>
<url>http://blog.circlecube.com/tag/film/</url>
</catagory>
<catagory>
<name>final cut</name>
<url>http://blog.circlecube.com/tag/final-cut/</url>
</catagory>
<catagory>
<name>flash</name>
<url>http://blog.circlecube.com/tag/flash/</url>
</catagory>
</catagories>

Download:

Here’s the XML2Object.as class: XML2Object.as class
Here’s a zip containing everything and the working example: xmlToObject.zip

Tags: actionscript, as2, download, flash, open source, tutorial, xml

Comments

Poll Results are in!

April 11, 2008 at 10:25 pm · 228 views · Filed under other

You have spoken, and here’s the Flash and XML made easy Post!
XML and Flash Actionscript made Easy | Parse XML to Object | Tutorial

Loading ...

Be sure to vote on the new poll, for your Most Wanted Post (here or over in the sidebar)

Loading ...

Choose your most wanted post(s):

Flash cookie | Shared Object
Reference Dynamic Instances in Actionscript
Flashvar
Visual Flash Preloader
Dynamic 3d space | Floating Sketches Tutorial

Tags: poll

Comments

Archive for April, 2008

Shared Object - utilizing the Flash cookie

Overview

Steps

Actionscript

Example

Source

Update to Wordpress 2.5

Circlecube Blog is now enjoying the speed and ease of the latest Wordpress, 2.5 is hot.

XML and Flash Actionscript made Easy | Parse XML to Object | Tutorial

XML@Object.as Class

Example:

Source:

Download:

Poll Results are in!

Circlecube

Recent Posts

Recent Comments:

Most Popular

Poll