Color | circlecube

Posts Tagged ‘color’

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

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

Actionscript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

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");
};

Download

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

4 COMMENTS

26 Jul 2007

Rollover elastic bounce rezise

Author: Evan Mullins | Filed under: portfolio

Tags: abstract, actionscript, animation, as2, color, experiment, flash, interactive, open source

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.

1 COMMENTS

6 Apr 2007

Synesthesia | Installation- converting sound to shape and color

Author: Evan Mullins | Filed under: portfolio

Tags: abstract, color, experiment, installation, interactive, max msp jitter

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

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.

NO COMMENTS

21 Mar 2007

Circle Cube

Author: Evan Mullins | Filed under: portfolio

Tags: abstract, cg, circle cube, color, experiment, illustrator, rhino

3D circle cube vector graphic.

NO COMMENTS

21 Mar 2007

Circle Cube

Author: Evan Mullins | Filed under: portfolio

Tags: cg, circle cube, color, illustrator, rhino

Video Art made simply with colors.

NO COMMENTS

1 Mar 2007

Color Field

Author: Evan Mullins | Filed under: portfolio

Tags: abstract, animation, color, movie, video

Frank
@ugh – I couldn’t disagree more. This is just what I was looking for –...
SmaJLe
thank you thank you thank you ! =)
Patrick
Need some help here~ forgive if this isn’t related. I have created a flash animation...
Dion Snoeijen
Hi, nice script, i am testing it right now. Is there a way to prevent them from...
Evan Mullins
@Abdullah -the technique is detailed in the tutorial and here is the link to the fla...
Abdullah
Hello Mullins,Amazing work man, i checked out the link above also but this customizable...
Evan Mullins
@Ed – It looks like it should be pretty simple. I’m sure it is possible....
Ed
Evan, I could use some of your expertise. Take a look at this URL...
Beta
Simple and nice tracking…with google analytics, thanks for tutorial.
Evan Mullins
@AJ – to keep the colors restricted it’s obviously all in the randomColor...

Posts Tagged ‘color’

Example

Actionscript

Download

Tags

Recent Posts

FlashDen Files

Evan Mullins

Recent Comments

Frank

SmaJLe

Patrick

Dion Snoeijen

Evan Mullins

Abdullah

Evan Mullins

Ed

Beta

Evan Mullins

Archives