Color | circlecube

Posts Tagged ‘color’

parallax_thumb I’ve had quite a few questions about how to make depth in flash. Earlier (like, 2 years ago) I put up an experiment file to give some interactive depth to some sketchbook sketches, see Floating Sketches. I’ve finally gotten around to translating that into as3. It’s still the same basic idea, Create layers of levels, and have each one respond to the mouse a little differently. The ‘closer’ depths will move faster while the farther away depths will be slower. A simple technique called Parallax.

Seperate the scene into layers
Place the layers in the correct depth
Make closer layers react fast and farther layers slower

Example

parallax_thumb

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

//define number of layer.
var numLayers:uint = 15;
//number of items in a layer
var numBallsPerLayer:uint = 100;
var defaultBallSize:uint = 25;

var stageWidth3d:uint = 800;
var stageHeight3d:uint = 800;

var layers:Array = new Array();
//init
makeMatrix();
//3d created by layers and placing objects on each layer - the layer has it's own distance, simulated by movement and alpha

function makeMatrix():void {
//walk through desired number of layers
for (var layerNum:uint=0; layerNum<numLayers; layerNum++){
//make layer object to add balls to
var thisLayer:MovieClip = new MovieClip();
addChild(thisLayer);
layers.push(thisLayer);
//create desired number of balls per layer
for (var ballNum:uint=0; ballNum<numBallsPerLayer; ballNum++){
//trace("layer: "+layerNum +"; ball: "+ballNum);
var c1:Number = randomColor();
var c2:Number = randomColor();

//create ball
var thisBall:MovieClip = new MovieClip();
thisBall.graphics.beginFill(c1, .9);
thisBall.graphics.lineStyle(defaultBallSize/3, c2, .9);
thisBall.graphics.drawCircle(defaultBallSize, defaultBallSize, defaultBallSize);
thisBall.graphics.endFill();

//apply filter to ball
var myGradientGlowFilter = new GradientGlowFilter(0,
0,
[c1, c2, c1],
[0, .9, 1],
[0, 63, 255],
20,
20,
.9,
BitmapFilterQuality.HIGH,
BitmapFilterType.OUTER,
false);
var myBlurFilter = new BlurFilter((numLayers-layerNum)/numLayers*5, (numLayers-layerNum)/numLayers*5, 1);
var filtersArray:Array = new Array(myGradientGlowFilter, myBlurFilter);
thisBall.filters = filtersArray;

thisLayer.addChild(thisBall);

//coordinates
thisBall.x = Math.random() * stageWidth3d * layerNum;
thisBall.y = Math.random() * stageHeight3d * layerNum;
//size
thisBall.scaleY = thisBall.scaleX = layerNum/numLayers * (Math.random() + 1);

//ball animation
thisBall.layer = layerNum;
thisBall.addEventListener(Event.ENTER_FRAME, animateBall);
}

//layer depth/alpha
thisLayer.alpha = layerNum/numLayers;

}
//listeners to animate from mouse movement
addEventListener(Event.ENTER_FRAME, positionLayer);

}

var easingStrength:Number = 10;

function positionLayer(e:Event):void{
for (var layerNum:uint=0; layerNum<numLayers; layerNum++){
//move layers according to mouse poosition
var xv:Number = (stage.stageWidth-layers[layerNum].width)/stage.stageWidth;
layers[layerNum].x -= (layers[layerNum].x - xv * mouseX) / easingStrength;
var yv:Number = (stage.stageHeight-layers[layerNum].height)/stage.stageHeight;
layers[layerNum].y -= (layers[layerNum].y - yv * mouseY) / easingStrength;
}
}

function animateBall(e:Event):void{
e.target.x += (Math.random() - .5) * 2 * e.target.layer/numLayers;
e.target.y += (Math.random() - .5) * 2 * e.target.layer/numLayers;
}

function randomColor():Number{
return Math.floor(Math.random() * 16777215);
}

Source

depth.fla

4 COMMENTS

30 Jan 2009

Dynamic 3d space | Floating Sketches Tutorial

Author: Evan Mullins | Filed under: tutorial

Tags: 3D, abstract, animation, as3, collage, color, download, experiment, flash, game, interactive, open source, tutorial

Overview

Color can sometimes make or break your design. I’ve put together this flash to show how to set a movieclip to a certain color, I’ve had to do this at runtime and had to go by different values such as a hex number, rgb values and have even wanted to just set a random color, so this example does them all! It’s even nice for translating a Hexadecimal color into RGB color.

Flash uses a Transform object to control certain properties of movie clips. To set color we need to use a Transform object as well as a ColorTransform object. ColorTransform objets are used to, you guessed it, tell the Transform object what color we want to set our clip to. It was a little unintuitive for me to learn, but now it makes sense, or at least enough sense to use.

I’ve made a function that does all this for you. You just send it the movieClip reference and a color.

1	setColor(myMovieClip, myColor)

There are functions to convert rgb values to a hex value, and from a hex value to red, blue and green values as well.

To make a random hexadecimal number Math.random() * 16777216 (the total number of hexadecimal numbers)

Steps

Imports
1
2
import flash.geom.ColorTransform;
import flash.geom.Transform;
Make a Transform object
1
var myTransform:Transform = new Transform(item);
Make a ColorTransform object
1
var myColorTransform:ColorTransform = new ColorTransform();
Set the rgb color of the ColorTransfrorm object
1
myColorTransform.rgb = myColor;
Set the colorTransform property of the Transform object to your ColorTransform object
1
myTransform.colorTransform = myColorTransform;

Flash Color App

Source Actionscript (as2)

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

//method to set a specified movieClip(item:movidClip) to a specified color(col:hex value number)
function setColor(item, col) {
//make transform object and send the specified movieClip to it
var myTransform:Transform = new Transform(item);
//make colorTransform
var myColorTransform:ColorTransform = new ColorTransform();
//check color bounds
if (col > 16777215) col = 16777215;
else if (col < 0) col = 0;
//variable to hold the color value
var myColor:Number = col;
//set color through color transformation
myColorTransform.rgb = myColor;
myTransform.colorTransform = myColorTransform;

trace("the hex number: 0x" + addZeros(myColorTransform.rgb.toString(16)));
var rgbObject = hex2rgb(myColor);
trace("the hex number in rgb format: "+rgbObject.r+", "+rgbObject.g+", "+rgbObject.b);
trace("the hex number in decimal format: " + myColorTransform.rgb);
displayColors(myColorTransform.rgb);
}

//bitwise conversion of rgb color to a hex value
function rgb2hex(r, g, b):Number {
return(r<<16 | g<<8 | b);
}
//bitwise conversion of a hex color into rgb values
function hex2rgb (hex):Object{
var red = hex>>16;
var greenBlue = hex-(red<<16)
var green = greenBlue>>8;
var blue = greenBlue - (green << 8);
//trace("r: " + red + " g: " + green + " b: " + blue);
return({r:red, g:green, b:blue});
}

//BUTTONS
randomColor.onRelease = function() {
//make random number (within hex number range)
var theColor = Math.floor(Math.random() * 16777215);
//set ball color to random color value
setColor(colorBall.inner, theColor);
}
readHexColor.onRelease = function() {
//convert 6 character input string into hex color format used by actionscript
var theColor = "0x"+hexColorIn.text;
//set ball color to hex color value
setColor(colorBall.inner, theColor);
}
readRGBColor.onRelease = function() {
//convert rgb values into hex value
var theColor = rgb2hex(redColorIn.text, greenColorIn.text, blueColorIn.text);
//set ball color to converted hex color value
setColor(colorBall.inner, theColor);
}
readDecColor.onRelease = function() {
//convert rgb values into hex value
var theColor = decColorIn.text;
//set ball color to converted hex color value
setColor(colorBall.inner, theColor);
}

Open Source Download

color.zip (containing color.fla and color.swf)

13 COMMENTS

21 Oct 2008

ColorTransform | RGB, Hex and random colors | Actionscript Color Tutorial

Author: Evan Mullins | Filed under: tutorial

Tags: actionscript, animation, as2, color, download, flash, interactive, open source, tutorial

Many have read my Integrate Google Analytics with Flash Tutorial in which I express enthusiasm for the new event tracking at google analytics! Well, it’s been a while, but I was admitted to the Beta testing group! So I’ve now had the chance to play with event tracking a bit and wanted to publish my findings!

Overview

Almost a year ago Google Analytics announced their new event tracking model and have had help documents published and code samples up. And as with many of Google’s products the beta stamp has lasted a very very long time. Many have seen my earlier tutorial exploring using traditional Google Analytics Tracking from within Flash, and it does wonders to track your flash apps in this manner, but there is a problem with it. We’re using supposed object oriented concepts to track objects as pageviews. One thing is it really isn’t a very intuitive way to represent that data, and another it inflates your pageviews! The solution? the long awaited and announced Event Tracking model. I’ve been itching for this to be released so I could refresh my analytic tactics I use in my flash projects. No, to answer your questions, it has not been released yet, but I contacted Google and explained that I would be a great beta tester for this feature and after a bit of correspondence they invited me to join in the beta testing! This is good news for you too! Because I will tell you all about how to do it and even show you what the reporting looks like and when it is released finally, you will know what you’re in for after this sneak peak!

UPDATE: Here are the reports for this very example: Report from Event Tracking with Flash Tutorial

The very quick summary is this:

1	_trackEvent(category, action, optional_label, optional_value)

Note that the _trackEvent function is called on the pageTracker object itself. (initially Google had you instantiate a separate event tracker for every object (or category) you wanted tracked)

For example, if we want to track a ball. All the actions that can apply to the ball are: it being created, dragged, dropped, bounced, deleted… You get the idea. We can have direct user actions tracked or even automatic actions. If we have gravity and physics running, the ball may bounce a lot without any direct user interaction. But it will never be dragged or dropped without direct interaction. I’d recommend only tracking user interactions because who cares how often a ball bounces on your page (unless you’re doing an experiment, of course), want we want to know is how and when a user interacts with the ball.

category:string (required)

This is the name of the object you are tracking.

action:string (required)

This is the action that happens to your object you want to track.

optional_label:string (optional)

This can be more information to accompany the action.

optional_value:integer (optional)

A number to provide numerical information to accompany the action.

Steps

First, I’d recommend reading up about Event Tracking at Google
Decide your object oriented structure for tracking events. What objects do you want to track and what useful information do you want to get through tracking user interaction?
Make sure you have the new Google analytics tracking code on your page
Use these functions to communicate Google Analytics from your flash
1. Call the main function with the specified parameters
2. It will call the appropriate function and send the data to your pageTracker object through javascript with externalInterface calls
See the reports in your analytics profile! (if your a beta tester, or else, wait until it is released)

Source code

The tracking functions are below, I enhanced the earlier trackGA function I wrote about. Now you call trackGA with 2 required parameters, categoryOrPageTrack and action. categoryOrPageTrack is where you have to pay attention. I wanted to keep the ability to track pageviews as well as have event tracking, so as the first param you either send in the string ‘page’ to explicitly state that you want to track the page view, or you send in another string to state you want to track an event on that specified object. Action remains the same, the action you want tracked (either on the pageview, it is the path that will appear in your reports; or the event tracking will be the action tracked to the category)…
So to track a pageview I call

1	trackGA("page", "swfLoaded");

and to track an event to an object I call ball:

1	trackGA("ball", "created");

The trackGA function will rout your call to the appropriate place and send the info to Google through either the trackGAPage function or the trackGAEvent function.

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

//trackGA (categoryOrPageTrack [required], action [required], label [optional], value [optional]
//categoryOrPageTrack - either the category string or a string saying 'page'
function trackGA(categoryOrPageTrack:String, action:String, optional_label:String, optional_value:Number) {
//call page tracking version of Google analytics
if (categoryOrPageTrack == "page") {
//trace("GATC pageTracker call");
trackGAPage(action);
}
//call event tracking method
else {
//trace("GATC event tracker call");
trackGAEvent(categoryOrPageTrack, action, optional_label, optional_value);
}
}

var prefix:String = "flashGA";
//Google Analytics Calls Page Tracking - for tracking page views
function trackGAPage(action:String) {
//GA call
if (prefix != null && !eventTrack){
var call = "/" + prefix + "/" + action;
//Old Google Analytics Code (urchinTracker)
ExternalInterface.call("urchinTracker('"+call+"')");
//New Google Analytics Code (_trackPageview) pageview
ExternalInterface.call("pageTracker._trackPageview('"+call+"')");
trace("==GATC==pageTracker._trackPageview('"+call+"')");
}
_root.tracer.text = action;
}

//Google Analytics Event Tracking Calls - for tracking events and not pageviews
//category, action, label (optional), value(optional)
function trackGAEvent(category:String, action:String, optional_label:String, optional_value:Number) {
/*
objectTracker_trackEvent(category, action, optional_label, optional_value)
category (required) - The name you supply for the group of objects you want to track.
action (required) - A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
label (optional) - An optional string to provide additional dimensions to the event data.
value (optional) - An optional integer that you can use to provide numerical data about the user event.
*/

theCategory = "'" + category;
theAction = "', '" + action + "'";
theLabel = (optional_label == null) ? "" : ", '" + optional_label + "'";
theValue = (optional_value == null) ? "" : ", " + optional_value;
//New Google Analytics Code (_trackEvent) event tracking
theCall = "pageTracker._trackEvent(" + theCategory + theAction + theLabel + theValue + ")";
ExternalInterface.call(theCall);
trace("====GATC===="+theCall);
_root.tracer.text = theCategory + theAction + theLabel + theValue;
}

Here’s the actionscript lines where I call the trackGA function:

1
2
3
4
5
6
7
8
9
10
11
12

//Tracks that the swf loads, so I pass 'page' to let it know I want a pageview tracked...
trackGA("page", "swfLoaded");
//Tracks various objects sending various actions
trackGA("gravity", "on");
trackGA("gravity", "off");
trackGA("friction", "on");
trackGA("friction", "off");
trackGA("ball", "deleted", count);
trackGA("ball", "created", ballCount);
trackGA("ball", "drag", this.ballNum, this.ballNum);
trackGA("ball", "drop", this.ballNum, this.ballNum);
trackGA("ball", "bounce", "right", this.ballNum);

Example

View example in it’s own html page, I even added a couple html buttons with javascript hooked in to show javascript event tracking implementation.

Download

Download Source

Concerns

I’ve noticed while putting this together that the calls to google analytics are not completely fullfilled, this example sends out correct calls to javascript, but (in firefox at least) a max of about 1 tracking call is registered with the tracking code every 5 seconds or so. I noticed this as I was monitoring the drag and drop events for each ball, although the drag and drop events are both fired, usually the drag event was received and the drop is not. After verifying that my code was consistent, I noticed that no matter how fast I interacted with the objects, the calls were much slower. I’m guessing this is a limit placed by the google team to keep us from sending pointless data such as is posted at the bottom of the event tracking implementation guide, titled Events Per Session Limit.

24 COMMENTS

3 Oct 2008

Event Tracking with Google Analytics | Flash Integration | Tutorial

Author: Evan Mullins | Filed under: tutorial

Tags: actionscript, analytics, as2, color, download, experiment, flash, game, html, interactive, javascript, open source, review, tutorial, website

I’ve re-purposed an old project of mine, the interactive pog portfolio viewer, to FlashDen. 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!

View Details here at FlashDen

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Random Gear

Random gear photograph from FlashDen assets.



random_gear.jpg


random_gear.jpg



http://flashden.net


Photo|Industrial

Download source at FlashDen

Enjoy, and let me know what you think!

Circlecube Files on FlashDen

NO COMMENTS

17 Sep 2008

Interactive Image Viewer v1 @ FlashDen

Author: Evan Mullins | Filed under: portfolio

Tags: abstract, actionscript, analytics, animation, as2, circle cube, color, download, experiment, flash, flashDen, game, interactive, open source, physics, portfolio, review, web design, work, xml

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

NO COMMENTS

20 Feb 2008

Men Circles | Interactive Experiment

Author: Evan Mullins | Filed under: portfolio

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

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

Source

Overview

Steps

Flash Color App

Source Actionscript (as2)

Open Source Download

Overview

category:string (required)

action:string (required)

optional_label:string (optional)

optional_value:integer (optional)

Steps

Source code

Example

Download

Concerns

Circlecube Files on FlashDen

Tags

Recent Posts

FlashDen Files

Evan Mullins

Recent Comments

Frank

SmaJLe

Patrick

Dion Snoeijen

Evan Mullins

Abdullah

Evan Mullins

Ed

Beta

Evan Mullins

Archives