circlecube

RSS comments
LinkedIn Twitter delicious fb last.fm

Posts Tagged ‘color’

With all the buzz about new improvements in CSS3 I’ve been meaning to write about it, but…

css3 please screen shot

I couldn’t find any excuses when I stumbled on Paul Irish’s new css3please.com: a cross-browser css3 rule generator. Just had to do a quick post to spread the word.

It’s great for cross-browser testing as well as generating the code for many css3 rules:

  • border-radius
  • box-shadow
  • gradient background
  • rgba backgrounds
  • transform (rotate)
  • @font-face

and more coming soon!

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
9 Mar 2010

CSS3 Tool, CSS3Please

Author: Evan Mullins | Filed under: review

flashvars_as3_thumbFlashvars and actionscript 3! Flashvar is a way that in your html embed codes (object tags) you can send variables and values into your swf file. These variables can then be grabbed internally and used your programming! Examples of these could be images that you want to use in your swf but don’t want to import or hardcode them into the flash file or paths to xml or flv files to use as well. Actionscript 3 has a different procedure than as2 did as to how you read these flashvars from the actionscript side. The embed codes and html side of things are still the same, but in case your new to actionscript altogether, I’ll give an example of the html as well.

1
2
3
<object width="200" height="200" type="application/x-shockwave-flash" data="flashvars_as3.swf">
<param name="flashvars" value="colors=0x012345,0x123456,0x234567,0x345678,0x456789,0x567890,0x678901,0x789012&delay=.11&loop=true&random=false"/>
</object>

In actionscript 3 we use the loaderInfo object to access the flashvars. The parameters Object of the loaderInfo will contain all the flashvar variables and values.

1
this.loaderInfo.parameters

As an example of something that is visual I’ve created this little app to read some options from flashvars about colors. An app that will read a list of colors and update a box that is on the stage already to those colors with the specified delay. I always have fun with randomness so I threw in the option for random colors as well. This file looks for certain flashvars: color, loop, delay and random. These are the keys or names of the variables and they are followed by the values you want them to hold. Note that flashvars can be set in any order, so you don’t have to start with color and end with random.

In this example I’m looking for 4 flashvars specifically (in any order):

  • colors:String – a comma delimited list of hex colors or simply a string “random” for randomly generated colors (the hex for black #000000 needs to be 0×000000 in flash) (default is random)
  • loop:Boolean – whether or not to repeat these colors (default is true)
  • delay:Number – the delay between colors (in seconds). (default is 1 second)
  • random:Boolean – determines whether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)

This is much more than is required for this example, but I was having fun playing with random colors and timing and options. I figured it diesn’t hurt to show the effect you can have with a couple different variables on one file. Here is an example using the object tags above:

Get Adobe Flash player

And here are some more (please don’t have a seizure!)

Here’s the full source if you’re interested:

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
/*
circlecube.com

App to demonstrate the process of getting flashvars from embed code to actionscript (as3)

Displays colors specified.

looking for 4 flashvars specifically (in any order):
colors:String - a comma delimited list of hex colors or simply a string "random" for randomly generated colors (the hex for black #000000 needs to be 0x000000) (default is random)
loop:Boolean - wether or not to repeat these colors (default is true)
delay:Number - the delay between colors (in seconds). (default is 1 second)
random:Boolean - determines wether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)

*/


//initialize vars
var myflashvars:Object = new Object()
var myColors:Array = new Array("random");
var myLoop:Boolean = true;
var myDelay:Number = 1;
var randomOrder:Boolean = false;
var allRandom:Boolean = false;
//read flashvars in actionscript3
//if colors flashvars doesn't exist use these defaults
if (!this.loaderInfo.parameters.colors){
    myflashvars = {colors: "random", delay: 1};
}
else{
    myflashvars = this.loaderInfo.parameters;
}
//assign flashvars to variables within flash
for (var item:String in myflashvars) {
    trace(item + ":\t" + myflashvars[item]);
    if (item == "colors"){
        myColors = myflashvars[item].split(',');
    }
    else if(item == "loop"){
        myLoop = parseBoolean(myflashvars[item]);
    }
    else if(item == "delay"){
        myDelay = myflashvars[item];
    }
    else if(item == "random"){
        randomOrder = parseBoolean(myflashvars[item]);
    }
}

//use my variables!
if (myColors[0] == "random"){
    allRandom = true;
   
}
var counter:Timer = new Timer(myDelay * 1000);
counter.addEventListener(TimerEvent.TIMER, nextColor);
trace ("color number: 0", "color hex: "+myColors[0]);
setColor(myBox, myColors[0]);

counter.start();
stop();
function nextColor(e:Event):void{
    //cycle through colors
    if (!allRandom && !randomOrder){
        if (counter.currentCount+2 > myColors.length){
            if (myLoop == true || myLoop == "true"){
                counter.reset();
                counter.start();
            }
            else{
                counter.stop();
            }
        }
        trace ("color number: "+counter.currentCount, "color hex: "+myColors[counter.currentCount]);
        setColor(myBox, myColors[counter.currentCount - 1]);
    }
    //randomly select a color from the myColors array
    else if (!allRandom && randomOrder){
        var randomColor = Math.floor(Math.random() * myColors.length);
        trace ("random number: "+randomColor, "color hex: "+myColors[randomColor]);
        setColor(myBox, myColors[randomColor]);
    }
    //randomly create colors
    else{
        trace ("number: "+counter.currentCount, "color hex: "+myColors[0]);
        setColor(myBox, myColors[0]);
    }
}
function setColor(item:DisplayObject, col):void{
    if (col == "random"){
        setRandomColor(item);
    }
    else{
        setHexColor(item, col);
    }
   
}
function setHexColor(item:DisplayObject, col:Number):void {
    var myColor:ColorTransform  =  item.transform.colorTransform;
    //check color bounds
    if (col > 16777215) col = 16777215;
    else if (col < 0) col = 0;
    myColor.color = col;
    item.transform.colorTransform = myColor;
}
function setRandomColor(item:DisplayObject):void{
    setColor(item, (Math.floor(Math.random() * 16777215)));
}
function parseBoolean(str:String):Boolean
{
    switch(str.toLowerCase())
    {
        // Check for true values
        case "1":
        case "true":
        case "yes":
        return true;
 
        // Check for false values
        case "0":
        case "false":
        case "no":
        return false;
 
        // If all else fails cast string
        default:
        return Boolean(str);
    }
}
  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
11 Dec 2009

Flashvars and as3

Author: Evan Mullins | Filed under: tutorial

Interactive Design project for StomperNet’s tease of the announced reveal on 09/09/09 at 09:09:09!

“Online Marketing Changes Forever!”

stomper999-black
Wanted it to be unexpected, and I think we hit it! Check it out live at stomper999.com!
stomper999-white

Details:
For this project I used flash, html, css and javascript. Tweener for the fading effects. Found a nice stock flash from flashDen for the countdown and used jquery and the easing and color plugins.

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
24 Jul 2009

Stomper999

Author: Evan Mullins | Filed under: portfolio

If you didn’t know, Grant Skinner has introduced an interesting competition called tweetcoding!

Mixing as3 with the 140 character limit of tweeting he calls for the community to tweet visually interesting source code.

I’ve played a bit with it and tweeted my first #tweetcoding entry! See more tweetcoding here

1
g.clear(),o[++i]={x:mouseX,y:mouseY,c:r()*0xFFFFFF};for each(k in o)k.c*=.9,g.beginFill(k.c),ls(i,k.c),g.drawCircle(k.x,k.y,1),g.endFill();

Want to see my entry? Here it is!

tweetcode_circlecube_a png

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
27 Feb 2009

#tweetcoding

Author: Evan Mullins | Filed under: portfolio

I have had feedback that certain random movements I program are a bit “jumpy”. Such as my old brownian movement tutorial and I really noticed it in my last tutorial, the parallax 3d depth effect tutorial. I’ve been thinking about it and looking around at some code and now have this updated brownian movement example! Updated for as3 as well as making it less jumpy.

as3brownian thumb pngFirst I’ll explain what I’ve found to be the reason of the jumpiness. And then explain and show what can be done to make this movement be more smooth.

So to examine the old jumpy code. Jump back to the first version post here. I think my technique was well thought out here, but the application was poor. It was recalculating the velocities every single frame and then incrementing the coordinate positions by the newly calculated velocities… This is where the jumpiness comes in. Even though the random value was named velocity, it didn’t actually affect the dot’s velocity, it was just a variable that stored the random value used to move the current x/y coordinates.
To help the animation be more smooth, the velocity needs to be more smooth. The velocity, rather than calculating it fresh each frame, should be randomly modified each frame. And then the new velocity will calculate the new ‘random’ position. Another addition is to introduce another force to dampen the velocity over time, so things don’t get too crazy…

Steps:

  1. Modify velocity randomly
  2. With velocity and current position, calculate a new position
  3. Dampen the velocity

Example:

Here I have a velocity for the x coordinate as well as the y. I’m also experimenting with a z velocity. This adjusts the alpha and scale for depth perception. It doesn’t actually edit the depth or layer the dot shows up on the stage however… keyword here: experimenting. :)

Get Adobe Flash player

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
//number of balls
var numBalls:uint = 50;
var defaultBallSize:uint = 30;

//init
makeDots();

function makeDots():void {
    //create desired number of balls
    for (var ballNum:uint=0; ballNum<numBalls; 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();
       
        addChild(thisBall);
       
        //coordinates
        thisBall.x = Math.random() * stage.stageWidth;
        thisBall.y = Math.random() * stage.stageHeight;
        //percieved depth
        thisBall.ballNum = ballNum;
        thisBall.depth = ballNum/numBalls;
        thisBall.scaleY = thisBall.scaleX = thisBall.alpha = ballNum/numBalls;
        //velocity
        thisBall.vx = 0;
        thisBall.vy = 0;
        thisBall.vz = 0;
       
        //ball animation
        thisBall.addEventListener(Event.ENTER_FRAME, animateBall);
    }
}

var dampen:Number = 0.95;
var maxScale:Number = 1.3;
var minScale:Number = .3;
var maxAlpha:Number = 1.3;
var minAlpha:Number = .3;
function animateBall(e:Event):void{
    var thisBall:Object = e.target;
    //apply randomness to velocity
    thisBall.vx += Math.random() * 0.2 - 0.1;
    thisBall.vy += Math.random() * 0.2 - 0.1;
    thisBall.vz += Math.random() * 0.002 - 0.001;
   
    thisBall.x += thisBall.vx;
    thisBall.y += thisBall.vy;
    thisBall.scaleX = thisBall.scaleY += thisBall.vz;
    thisBall.alpha += thisBall.vz;
    thisBall.vx *= dampen;
    thisBall.vy *= dampen;
    thisBall.vz *= dampen;
   
    if(thisBall.x > stage.stageWidth) {
        thisBall.x = 0 - thisBall.width;
    }
    else if(thisBall.x < 0 - thisBall.width) {
        thisBall.x = stage.stageWidth;
    }
    if(thisBall.y > stage.stageHeight) {
        thisBall.y = 0 - thisBall.height;
    }
    else if(thisBall.y < 0 - thisBall.height) {
        thisBall.y = stage.stageHeight;
    }
   
    if (thisBall.scaleX > maxScale){
        thisBall.scaleX = thisBall.scaleY = maxScale;
    }
    else if (thisBall.scaleX < minScale){
        thisBall.scaleX = thisBall.scaleY = minScale;
    }
    if (thisBall.alpha > maxAlpha){
        thisBall.alpha = maxAlpha;
    }
    else if (thisBall.alpha < minAlpha){
        thisBall.alpha = minAlpha;
    }
}

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

Source:

as3random_brownian_movement.fla

  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
10 Feb 2009

Random Movement | Brownian revisited for as3

Author: Evan Mullins | Filed under: tutorial