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

Go get the source files at Flashden

Other Circlecube Items at FlashDen

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).’

You may remember it as the formula you memorized in geometry or algebra class ‘a squared plus b squared equals c squared’

Okay, but how does that help in flash? You want to find the distance between point

and point

. Well

would be the distance between the two points. We know the formula, solving for c.

.

is the square root function, so

.

computes and returns the square root of

.

is the power function, so

(4 squared).

computes and returns

to the power of

.

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

Download

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

Overview:

Using what I learned with the Actionscript Javascript Communication Tutorial, and pushing it a little further I’ve set up this example of how flash renders html and css. This is basically a wysiwyg (What you see is what you get) html editor! Natively flash only handles some html and css. Many people have enhanced it’s capabilities with projects and Classes, but I made this to show what is accepted by default as far as html and css is concerned. I know there are specs and many lists about what will work, but to me the best way to know if my code will work is to try and see…
I’ve made this app so if I have a question, I just paste in my html/css and send it to the swf to see it rendered live. This saved me a few headaches, so I thought other might enjoy it as well… So here it is.

Example:

Render your own html and or css in flash. htmlToFlash.html
Here is the flash rendering of some dummy text as html with css applied


Here’s the html interface where I paste in the html and css.

Each supported css property has a corresponding actionscript property, but the naming convention is a little different for css in actionscript. Each actionscript property name is derived from the corresponding CSS property name; the hyphen is omitted and the subsequent character is capitalized. So for example: ‘font-weight’ becomes ‘fontWeight’.

Download:

Here’s the open source files if you want to get your hands dirty.

Let me know if you improve this or even have any questions about it!

Again, note there are only certain HTMl and CSS supported by flash, follow the links for more info.
HTML supported by Flash and CSS supported by Flash

Gives feel of perspective and depth by reacting to mouse movements. The effect is parallax, read more…
The city images are very choppy and ugly, I know, it’s just a test.

Sample Actionscript. This in on one of the buildings which are separate movie clips. Adjust the equation for different effect.
The basic formula is as follows: this._x = _root._xmouse / (speed) + transform

Update: Here’s a similar effect achieved by just negating the relation between the mouse and the building movie clips.

Download Source Fla File