Experiment | Circle Cube Studio

Brownian Movement in Actionscript | Random Motion Tutorial

June 24, 2008 at 10:34 pm · 843 views · Filed under tutorial

Overview

Having things drift around or move randomly has always interested me. Having an animation that is never going to be the exact same thing is very exciting. The focus turns from key-ing exact animations to programming a feel and letting the animations take car of themselves! One type of seemingly random motion is Brownian motion. This gives the movement a random walk wandering look, it will just drift around with no real direction.

Steps

Step by step this process is very simple. In every random motion you create the random number, and apply it to the property. If you want constant random action (motion) rather than just random placement, you repeat that over and over.

Make a random number (random velocity)
Apply the random number (apply velocity to property)
Repeat (if needed)

To create a random number in actionscript, use Math.random(), which creates a random number between 0 and 1. Usually you’ll want to scale it to a range you want to use. If you want a number between 50 and 100, you’d do Math.random() * 50 + 50. *50 to scale it to 0-50, and + 50 to bring it up to 50 - 100. Also if we want to get a 100 range around 0 (-50 - 50) we would do Math.random() * 100 - 50. In the code below I’ve abstracted this to Math.random() * this.randomRange - this.randomRange/2.

Example

Here I’ve got dots created and placed randomly, with randomly set scale and alpha. On every frame each dot has a random velocity applied to it’s x and y coordinates.
The yellow dot is the simple example (code below) and the rest are included in the complex example below.

Actionscript

Simple Example:

dotOne.onEnterFrame = function() {
//create a random velocity for x and y direction
vx = Math.random() * 4 - 2;
vy = Math.random() * 4 - 2;
//apply velocity to coordinates
this._x += vx;
this._y += vy;
}

Complex example:

var numDots = 25;
var randomRange = 1;
 
for(var i=1; i&lt;=numDots; i++) {
//create a new dot
duplicateMovieClip(_root.dot, "dot"+i, i);
//save it's ref path for use
theDot = _root["dot"+i];
//give it random coordinates
theDot._y = Math.random() * Stage.height;
theDot._x = Math.random() * Stage.width;
//give each dot a distinct random range
theDot.randomRange = i/numDots;
//give each dot a random size and transparency
theDot._xscale =
theDot._yscale =
theDot._alpha =  i*4;
 
//apply this code on the dot every frame
theDot.onEnterFrame = function() {
//create a random velocity for x and y direction within the specifically created random range for each dot
vx = Math.random() * this.randomRange - this.randomRange/2;
vy = Math.random() * this.randomRange - this.randomRange/2;
//apply velocity to coordinates
this._x += vx;
this._y += vy;
}
}

Download

randomMotion.fla

Tags: abstract, actionscript, animation, as2, download, experiment, flash, open source, tutorial

Comments

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

Dynamic Flash Scrolling Link List XML driven Component on FlashDen

March 26, 2008 at 8:42 pm · 3,256 views · Filed under portfolio

Go get the file at FlashDen

Dynamic Scrolling Link List XML driven (No Wrap)

An interactive link list. Vertically scrolling list of links or just text. Could be used for a nav menu or a link list, or even just a scrolling list. Scroll speed calculated dynamically from mouse position to give not only scrolling control, but also speed control. Reads an external XML file containing just titles and url paths and creates this interactive click-able link list! On click the link is highlighted and on release loads the url either in a blank window or not (configurable). On rollover the list item grows with animation and is highlighted (all configurable, size speed etc). Once end of list is reached scrolling stops, another version is available with a wrap-around feature: Dynamic Scrolling Link List XML driven Auto wrapping

Tags: abstract, actionscript, animation, as2, download, experiment, flash, flashDen, interactive, open source, xml

Comments

Interactive Spin Actionscript Tutorial

March 14, 2008 at 6:51 pm · 3,692 views · Filed under portfolio, tutorial

I have been thinking of different interactions that are possible with objects. If you’ve read this blog at all you’ll know that I’ve played with physics and gravity and throwing balls and bouncing balls and all sorts. But I hadn’t wrapped my head around an interactive spinner. I know it’d be easy to make a slider or something that would apply a spin to an object, but this just isn’t interactive enough for me.

Circle with slider to rotate and button for random spin:

This attempt at spinning is ok. I mean, it spins the object and it even glides to a stop if you press the button for a random spin… But it’s just not intuitive and not fun. But if you want this, here’s how I did it.

Actionscript:

drag = .96;
speed = 0;
 
slider.handle.onPress = function() {
spinning = false;
//drag along the line
this.startDrag(true, slider.line._x-slider.handle._width/2, slider.line._y-slider.handle._height/2, slider.line._width-slider.handle._width/2, slider.line._y-slider.handle._height/2);
}
slider.handle.onRelease = slider.handle.onReleaseOutside = function() {
this.stopDrag();
}
_root.onEnterFrame = function() {
if (spinning) {
//apply the speed to the rotation
knob._rotation += speed;
//recalculate speed
speed = speed*drag;
//if speed gets unnoticeably tiny just set it to 0
if (Math.pow(speed, 2) &lt; .0001) {
speed = 0;
}
}
else {
//set the rotation from the slider position
knob._rotation = slider.line._x + slider.handle._x + slider.handle._width/2;
}
 
//spit out feedback continuously
feedbackr.text = knob._rotation;
feedbackaccr.text = speed;
}
spinner.onRelease = function() {
//find a random speed
speed = (Math.random()* 50) - 25;
spinning = true;
}

I want to grab it and spin it though. I want to apply the same principles from physics, like acceleration and friction as forces to the object, so I can grab to spin and release to watch it glide gracefully to a stop. I’ve been thinking about this and how I’d have to use trigonometry and stuff to do it. One day I finally had the time and tried it out. It took me a minute but I figured out that what I needed was arctangent. So (with pointers from jbum, thanks Jim!) I came up with this:

Interactive grab-able circle to spin and twirl:

This one is much more interactive and intuitive. I really think this is because there are no sliders or buttons, no controls, just an object to interact with. It’s much more like real life!

Steps:

In order to make a grab and spin object
1. You have to know where you grab. The user clicks on the shape (knob) and you must figure out what degree or rotation point they have started at. (atan2)
2. As the knob is clicked and the mouse moves (dragging), calculate new rotation by mouse position
3. When mouse is released figure out the current speed of rotation and apply it to the knob with friction, so it can be thrown and spun in that way. (Of course this is optional, if you just want to spin it when the mouse is down you’re done at step 2)

Actionscript:

damp = .96; //friction
r = 0; //rotation
accr = 0; //speed of rotation
 
knob.onPress = function() {
dragging = true;
//find mouse y coordinate in relation to knob origin
a = _root._ymouse - knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse - knob._x;
//using arctangent find the spot of rotation (in degrees)
oldr = Math.atan2(a,b)*180/Math.PI;
}
 
knob.onRelease = knob.onReleaseOutside = function() {
dragging = false;
}
 
knob.onEnterFrame = function() {
if (dragging) {
//find mouse y coordinate in relation to knob origin
a = _root._ymouse-knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse-knob._x;
//using arctangent find the spot of rotation (in degrees)
r = Math.atan2(a,b)*180/Math.PI;
 
//use current rotation and previous rotation
//to find acceleration
//averages the acceleration with the
//previous acceleration for smoother spins
accr = ((r - oldr) + accr)/2;
//apply the acceleration to the rotation
knob._rotation += accr;
//remember current rotation as old rotation
oldr = r;
feedbacka.text = a;
feedbackb.text = b;
}
else {
knob._rotation += accr;
//apply friction to acceleration force
//and if acceleration gets tiny, just set it to zero
if (Math.pow(accr, 2) &gt; .0001 ) {
accr *= damp;
}
else{
accr = 0;
}
}
//spit out feedback continuosly
feedbackr.text = knob._rotation;
feedbackaccr.text = accr;
}

I commented the code to explain what is happening, if you need more just post a comment. Let me know if you find this useful and what you end up making with it.

Downloads:

spin fla
interactive spin fla

Tags: abstract, actionscript, animation, as2, circle cube, download, experiment, flash, game, interactive, open source, tutorial

Comments (4)

Local Connection Actionscript - Communicate between seperate Flash files | Tutorial

March 12, 2008 at 6:13 pm · 3,552 views · Filed under tutorial

Overview:

Local Connection
Communication between two seperate flash files placed on the same page (or even running simultaneously on one machine) is a nice way to spread a project out. You can send variable, call functions, pretty much do anything in one swf from another. Easiest case use would be a navigation menu set up in one flash file to control the other one containing the content. I’ve made an example here showing how to send text from one to another. I’ve done it both directions here. Send text from the red swf to the blue swf, and from mr. Blue you send to the red flash file. I have named the flash functions in actionscript accordingly (or tried to, now I notice a few places I misspelled receive, ‘i’ before ‘e’, right? oh yea, except after ‘c’)…
Anyways, try out the example here, I made it a little easier by putting a keyListener on ‘Enter’, so you don’t have to actually press the send button. Didn’t realize it before, but this is like a chat app built in flash! So go ahead and chat with yourself to prove that it works!

Execute actionscript in one swf from another! Inter-swf communication.

Example:

Type here to send Red text to Blue flash file

And see it received here, and go ahead and send some back to Red.

Actionscript:

Red:

// Receiving
//create a local connection for reciept of text
var receiving_lc:LocalConnection = new LocalConnection();
//function called from other swf
receiving_lc.recieveBlueText = function(textRecieved:String) {
feedback.text += textRecieved+"\n";
};
//receive connection of specified name
receiving_lc.connect("fromBlue");
 
//Sending
sendButton.onRelease = function() {
//create local connection for sending text
var sending_lc:LocalConnection = new LocalConnection();
//put text from input into a var
var textToSend = inputText.text;
//send through specified connection, call specified method, send specified parameter
sending_lc.send("fromRed", "recieveRedText", textToSend);
//set the input empty
inputText.text = "";
}

Blue:

// Receiving
var receiving_lc:LocalConnection = new LocalConnection();
receiving_lc.recieveRedText = function(textRecieved:String) {
feedback.text += textRecieved+"\n";
};
receiving_lc.connect("fromRed");
 
//Sending
sendButton.onRelease = function() {
var sending_lc:LocalConnection = new LocalConnection();
var textToSend = inputText.text;
sending_lc.send("fromBlue", "recieveBlueText", textToSend);
inputText.text = "";
}

And the code to listen to the ‘enter’ key(this is in both files):

//Enter button to send
var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
if (Key.getCode() == "13") {
sendButton.onRelease();
}
};
Key.addListener(keyListener);

Download Source:

localConnectionRedBlue.zip

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

Comments (6)

Men Circles | Interactive Experiment

February 20, 2008 at 7:01 pm · 472 views · Filed under portfolio

Here’s a graphic of a circle of men. You may recognize the outline from any public restroom. They’re standing in a corny circle holding hands, like an all over the world theme., let’s just hope they all washed their hands…

I made the graphic a while ago, and have been wanting to interactive-ize it. I’ve really been wanting to play with elasticity, throwing things and snapping to a point… Although I’m still thinking about a version where I’d spin the objects rather than just throw them, I figured I’d put it up for any feedback that comes.

The different pieces all rotate differently and it changes if you are dragging or ‘holding’ them. Then you can press the anchor (gray) button to toggle the snap. The objects will all center around the anchor and spring into place (elasticity applied to position and rotation). And then the interactivity changes and rather than dragging and dropping them, you push and bump or throw them. It almost turns into a game…

Here’s some of the actionscript

_root.tr = 0;
_root.k = 0.2;
_root.damp = .9;
_root.margin = 150;
_root.heads.ax = 0;
_root.heads.vx = 0;
_root.heads.ay = 0;
_root.heads.vy = 0;
_root.heads.ar = 0;
_root.heads.vr = 0;
_root.heads._x = (Math.random() * (Stage.width + _root.heads._width)) - _root.margin;
_root.heads._y = (Math.random() * (Stage.height + _root.heads._height)) - _root.margin;
 
//Heads
_root.heads.dragging = false;
_root.heads.onEnterFrame = function() {
if (!_root.center.dragging){
if (_root.heads.dragging){
this._rotation += 1.2;
}
else {
rot = this._rotation + Math.random();
xmouse = _root._xmouse/Stage.width;
this._rotation += rot + xmouse;
}
 
this._x+=Math.random()*2 - 1;
this._y+=Math.random()*2 - 1;
 
}
else {
//_root.heads._x = _root.center._x;
//_root.heads._y = _root.center._y;
_root.heads.ax = (_root.center._x - _root.heads._x) * _root.k;
_root.heads.vx += _root.heads.ax;
_root.heads.vx *= _root.damp;
_root.heads._x += _root.heads.vx;
 
_root.heads.ay = (_root.center._y - _root.heads._y) * _root.k;
_root.heads.vy += _root.heads.ay;
_root.heads.vy *= _root.damp;
_root.heads._y += _root.heads.vy;
 
_root.heads.ar = (_root.tr - _root.heads._rotation) * _root.k;
_root.heads.vr += _root.heads.ar;
_root.heads.vr *= _root.damp;
_root.heads._rotation+=_root.heads.vr;
}
this.onPress = function() {
startDrag(this, false);
_root.heads.dragging = true;
}
this.onRelease = this.onReleaseOutside = function() {
stopDrag();
_root.heads.dragging = false;
}
this.onRollOver = function() {
if(_root.center.dragging){
startDrag(this, false);
_root.heads.dragging = true;
}
}
this.onRollOut = function() {
if(_root.center.dragging) {
stopDrag();
_root.heads.dragging = false;
}
}
}
 
//Button
_root.center.dragging = false;
_root.center.onEnterFrame = function() {
this.onPress = function() {
startDrag(_root.center, false);
_root.center.dragging = !_root.center.dragging;
if (_root.center.dragging) {
this.gotoAndStop("on");
}
else {
this.gotoAndStop("off");
}
 
//var vr:Number = 0;
}
this.onRelease = this.onReleaseOutside = function () {
stopDrag();
//_root.center.dragging = false;
}
}

Tags: abstract, actionscript, as2, color, experiment, flash, interactive

Comments

Dynamic Flash Vertical Scrolling Link List with XML download at Flashden

February 19, 2008 at 8:32 am · 3,432 views · Filed under portfolio

Go get the source files at Flashden

Tags: actionscript, animation, as2, download, experiment, flash, flashDen, interactive, network, open source, xml

Comments (8)

Distance Formula in Actionscript Tutorial | Pythagorean theorem

February 15, 2008 at 7:47 pm · 3,334 views · Filed under tutorial

Overview

To find the distance of any two points on an axis is easy, just subtract them. But what about when you have to find the distance of something not on the axis (a diagonal)? Find the distance between any two points with the Pythagorean theorem. This is an old problem we can look to history and find the Pythagorean theorem and Pythagoras, the Greek we’ve named this after. His theorem states that ‘In any right triangle, the area of the square whose side is the hypotenuse (the side opposite the right angle) is equal to the sum of the areas of the squares whose sides are the two legs (the two sides that meet at a right angle).’
pythagorean img

You may remember it as the formula you memorized in geometry or algebra class ‘a squared plus b squared equals c squared’
a^2 + b^2 = c^2
pythag equ

Okay, but how does that help in flash? You want to find the distance between point a and point b. Well c would be the distance between the two points. We know the formula, solving for c.
c = square root of (a^2 + b^2).
pythag equ 2
c = Math.sqrt(Math.pow(a, 2)+Math.pow(b, 2));
Math.sqrt()
is the square root function, so Math.sqrt(4)=2.
Math.sqrt(x) computes and returns the square root of x.
Math.pow() is the power function, so Math.pow(4, 2)=16 (4 squared). Math.pow(x, y) computes and returns x to the power of y.

You say I remember using this for triangles and stuff, I just want to know the distance between two points, there’s no triangles.
Well, there actually is a triangle we can draw. Go from your first, along an axis (this makes one side), and the other point, along the other axis (this is another side), and you’ll see that the distance you’re looking for is the third side of the triangle (the hypotenuse).

Example

Here’s a quick interactive flash file to show the idea.

Actionscript

xmid = Stage.width/2;
ymid = Stage.height/2;
a = _root._ymouse-ymid;
b = _root._xmouse-xmid;
c = Math.sqrt(Math.pow(a, 2)+Math.pow(b, 2));
feedbacka.text = Math.round(a);
feedbackb.text = Math.round(b);
feedbackc.text = Math.round(c);

Download

As usual, here’s the source flash file (flash 8 compatible) to take a look: distance.fla

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

Comments (2)

Next entries »

Brownian Movement in Actionscript | Random Motion Tutorial

Overview

Steps

Example

Actionscript

Download

Shared Object - utilizing the Flash cookie

Overview

Steps

Actionscript

Example

Source

Dynamic Flash Scrolling Link List XML driven Component on FlashDen

Interactive Spin Actionscript Tutorial

Actionscript:

Steps:

Actionscript:

Downloads:

Local Connection Actionscript - Communicate between seperate Flash files | Tutorial

Overview:

Example:

Actionscript:

Download Source:

Men Circles | Interactive Experiment

Dynamic Flash Vertical Scrolling Link List with XML download at Flashden

Distance Formula in Actionscript Tutorial | Pythagorean theorem

Overview

Example

Actionscript

Download

Circlecube

Recent Posts