Interactive Image Viewer v1 @ FlashDen

I’ve re-purposed an old project of mine, the interactive pog portfolio viewer, to activeden. I call it the pog portfolio because each work is represented by a circle, or pog, and you play ith it in the “bay” with different interactive physics configurations. When you click a pog you can view a close up image of that item and more details. The whole file has been cleaned up (code and graphics) and documented for easy customizations.It is a small file size as well, under 36kb swf!

This is mainly an image viewer, stay tuned for any updates, like video support etc.

INTERACTIVE IMAGE VIEWER WITH PHYSICS AND ANIMATION EXAMPLE!

pog portfolio image

View Details here at activeden

Works and configuration loaded in through a single xml file. Select works from the bay to view title, description image and a link (if applicable). Organize works with the tags or select all and choose the physics of the bay for interactivity control (gravity, spring, grid and friction).

It is fully customizable and fully driven by xml. The xml file contains values for configuring the swf, and also all the information about each work to be included in the portfolio.

Each work is loaded into the ‘bay’ as a round thumbnail or ‘pog’. These pogs are animated with the interaction options (gravity, friction, spring and grid). The pogs are sortable by tags (parsed in from the xml).

The whole color scheme of the image viewer is configurable, or can even be set to random! Have a different color scheme every time your image viewer loads!

Clicking a pog in the interactive bay sends that thumb to the holding area and loads the close up into the focus window for that work. It also loads the details about that work into the detail box (to the right of the focus box). Each works needs a 50×50 thumbnail and a close up (max 375px x 270px) image. Focus images are all loaded in with an informative preloader and fade is once loaded.

Site easily integrates with Google Analytics to track user interactions within this flash portfolio!

All works in the portfolio are passed in through an external xml file, here is a sample work node from xml:
[cc lang=”xml” tab_size=”2″ lines=”40″]


Random Gear

Random gear photograph from activeden assets.

random_gear.jpg


random_gear.jpg

http://activeden.net


Photo|Industrial

[/cc]

Download source at activeden

Enjoy, and let me know what you think!

Circlecube Flash Items on activeden

21075 24687 45713 45893 22018

Men Circles | Interactive Experiment

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.

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/02/MenCircle.swf” width=”550″ height=”550″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

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
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
_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;
}
}
[/cc]

Rollover elastic bounce rezise

Flash experiment that could be used for navigation. Rollover each area and watch them all resize themself to accomodate the growing box. It’s pretty fun to play with.

Example

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2007/07/rolloverresizeevan.swf” width=”550″ height=”400″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]
I’m sure there is a way to simplify the code, but this worked so there was no need.

Actionscript

[cc lang=”actionscript” tab_size=”2″ lines=”70″]
import mx.transitions.easing.*;
import mx.transitions.Tween;
var normWidth:Number = mc_1._width;
mc1x = mc_1._x;
mc2x = mc_2._x;
mc3x = mc_3._x;
mc4x = mc_4._x;
mc_1.onRollOver = function ():Void {
//Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
//Double in size
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth, normWidth * 2, 1, true);
mc_1.gotoAndPlay(“over”);
//Shrink by 33% and move 66% along using width
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc2x, (mc2x) + (normWidth * 2 / 3), 1, true);
//Shrink by 33% and move 33% along using width
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
//Shrink by 33%, no need to move as already in position
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//trace(“rollOver 1”);
};
mc_1.onRollOut = function ():Void {
//Return to normal width
var mc1Move:Tween = new Tween (this, “_width”, Elastic.easeOut, normWidth * 2, normWidth, 1, true);
mc_1.gotoAndStop(“up”);
//Return to normal width and use mc_1 as basis for x
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, (mc2x) + (normWidth * 2 / 3), mc2x, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
//Return to normal width and use mc_4 as basis for x
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
//Return to normal width
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
//trace(“rollOut 1”);
};
mc_2.onRollOver = function ():Void {
//Double in size and move left 33%
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth, normWidth * 2, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc2x, (mc2x) + (normWidth * 2 / 3), 1, true);
mc_2.gotoAndPlay(“over”);
//Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
//shrink by 33% mc1
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
//Shrink by 33% and move 33% along using width
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
//Shrink by 33%, no need to move as already in position
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//trace(“rollOver 2”);
};
mc_2.onRollOut = function ():Void {
//Return to normal width and position
var mc2Move:Tween = new Tween (this, “_width”, Elastic.easeOut, normWidth * 2, normWidth, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, (mc2x) + (normWidth * 2 / 3), mc2x, 1, true);
mc_2.gotoAndStop(“up”);
//Return to normal width and use mc_1 as basis for x
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
//Return to normal width and use mc_4 as basis for x
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
//Return to normal width
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut,normWidth * 2 / 3, normWidth, 1, true);
//trace(“rollOut 2”);
};
mc_3.onRollOver = function ():Void {
//Double in size and move left 33%
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth, normWidth * 2, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
mc_3.gotoAndPlay(“over”);
//Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
//shrink by 33% mc1
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
//Shrink by 33% and move 33% along using width
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc2x, (mc2x) + (normWidth * -2 / 3), 1, true);
//Shrink by 33%, no need to move as already in position
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//trace(“rollOver 3”);
};
mc_3.onRollOut = function ():Void {
//Return to normal width and position
var mc3Move:Tween = new Tween (this, “_width”, Elastic.easeOut, normWidth * 2, normWidth, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
mc_3.gotoAndStop(“up”);
//Return to normal width and use mc_1 as basis for x
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
//Return to normal width and use mc_4 as basis for x
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, (mc2x) + (normWidth * -2 / 3), mc2x, 1, true);
//Return to normal width
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
//trace(“rollOut 3”);
};
mc_4.onRollOver = function ():Void {
//shrink in size and move left 33%
var mc3Width:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth, normWidth * 2/3, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, mc3x, (mc3x) + (normWidth * – 3 / 3), 1, true);
//Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
//shrink by 33% mc1
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
//Shrink by 33% and move 33% along using width
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc2x, (mc2x) + (normWidth * -2 / 3), 1, true);
//double in size, no need to move as already in position
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth, normWidth * 2, 1, true);
mc_4.gotoAndPlay(“over”);
//trace(“rollOver 4”);
};
mc_4.onRollOut = function ():Void {
//Return to normal width and position
var mc3Move:Tween = new Tween (mc_3, “_width”, Elastic.easeOut, normWidth * 2/3, normWidth, 1, true);
var mc3X:Tween = new Tween (mc_3, “_x”, Elastic.easeOut, (mc3x) + (normWidth * – 3 / 3), mc3x, 1, true);
//Return to normal width and use mc_1 as basis for x
var mc1Width:Tween = new Tween (mc_1, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
//var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
//Return to normal width and use mc_4 as basis for x
var mc2Width:Tween = new Tween (mc_2, “_width”, Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
var mc2X:Tween = new Tween (mc_2, “_x”, Elastic.easeOut, (mc2x) + (normWidth * -2 / 3), mc2x, 1, true);
//Return to normal width
var mc4Width:Tween = new Tween (mc_4, “_width”, Elastic.easeOut, normWidth * 2, normWidth, 1, true);
mc_4.gotoAndStop(“up”);
//trace(“rollOut 4”);
};
[/cc]

Download

Here is the source file: rolloverResizeEvan.fla for those who want.

Synesthesia | Installation- converting sound to shape and color

synesthesia
1. A condition in which one type of stimulation evokes the sensation of another, as when the hearing of a sound produces the visualization of a color.

Installation. May 2005
I had a microphone feed into the computer and audio from the room changed the display. I displayed a circle related to the voice of the room (pitch relates to size, and volume relates to color). As the viewer/participant speaks or sings or yells they see their voice transformed into colorful movements of varying size. The louder the sound- the colors of these forms brightened. In the background I had a sweeping cascade of colored lines. These would take control if there was no noise in the space.
I plan on making the display available online using personal mics from viewers computers to animate it. Ideally I would want multiple users to be able to log on and effect the animation collectively. Each input will generate shapes.

Here is a captured video feed.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/02/synaesthesia.swf” width=”550″ height=”550″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

Circle Cube

Circle cube graphic pushing colors. Thinking of the design as shapes in a stained glass window.

circle cube mixed up

ARST4810 CAD Fab class exhibition.
My Shattered Little World
Slide, Circle cube

Published in the Flagpole, April 4th 2007:
Rhinoceros Makes Art: Students in Michael Oliveri’s Computer Aided Design and Fabrication class at UGA are exhibiting their work in the Thomas Street Gallery. Using the computer program Rhinoceros, the students have created a diverse set of images.J.B. Courson ‘s “Alpha Hab and Worker Drones” could be plans for the set of a Star Wars movie. Caroline Covington’s “Closure” re-invents the kamikaze bomb, with essential accompanying text. Diana Gurley’s circular imagery hovers on the page like hot-air balloons. Matthew McDonald’s “Lupa Ad Nauseam,” as the Latin title states, is an image of a wolf vomiting. The drawing of the wolf appears to be taken from a realistically executed etching, while the vomit is discretely portrayed as a splatter of color. Edward Whelan’s abstract geometric piece looks back to the Italian Futurists, with a fresh new design. Evan Mullins and Louis Grabowski have both created images of realistic-looking objects of play. Works by Andy Anzardo, Alex Castellanos, Jason Maddox, Chris Merz, Winston Parker and John Powers are also included in the show, which runs through Apr. 5, so hurry! The Thomas Street Gallery is located in UGA’s Sculpture Annex just off Broad Street.