RGB2HSV conversion using actionscript…

Another simple conversion function. This time it converts RGB values to HSV (Hue, Sat, Val).

function rgb2hsv(r,g,b)
{    
 var x, val, d1, d2, hue, sat, val;    
 r/=255;    
 g/=255;    
 b/=255;    
 x = Math.min(Math.min(r, g), b);    
 val = Math.max(Math.max(r, g), b);    
 if (x==val)
 {        
  return(”h is undefined, s: “+0+”,v: “+ val*100); //err obj
 }    
 d1 = (r == x) ? g-b : ((g == x) ? b-r : r-g);    
 d2 = (r == x) ? 3 : ((g == x) ? 5 : 1);    
 hue = Math.floor((d2-d1/(val-x))*60)%360;    
 sat = Math.floor(((val-x)/val)*100);    
 val = Math.floor(val*100);    
 return(hue+”,”+sat+”,”+val);
};

Have fun,

FLAIM

RGB2CMYK conversion using actionscript…

Hello

A small and useful function for converting RGB values to CMYK color space…

function rgb2cmyk(r,g,b)
{
 C = 1 - ( r / 255 );
 M = 1 - ( g / 255 );
 Y = 1 - ( b / 255 );
var_K = 1

if ( C < var_K )   var_K = C
if ( M < var_K )   var_K = M
if ( Y < var_K )   var_K = Y
if ( var_K == 1 ) { //Black
   C = 0
   M = 0
   Y = 0
}
else {
   C = ( C - var_K ) / ( 1 - var_K ) *100
   M = ( M - var_K ) / ( 1 - var_K ) *100
   Y = ( Y - var_K ) / ( 1 - var_K ) *100
}
 K = var_K*100
 return(”C: “+Math.floor(C)+”/ M: “+Math.floor(M)+”/ Y: “+Math.floor(Y)+”/ K: “+Math.floor(K));
};

// rgb2cmyk(255,0,0); returns –> C: 0/ M: 100/ Y: 100/ K: 0

Have fun

FLAIM

RGB2PANTO…err … I mean PATAPONE(R) ;-)

 

Imagine that you need to convert a RGB colour to the nearest colour in a palette (I won’t mention its name so let’s call it my way - Patapone(R) ) which has only a few thousand colours (in comparison to RGB’s 16mln.). So what you need to do is to make an algorithm which can do the conversion. That, of course would be simple …but human eye is a tricky thing and there is a difference between the nearest colour calculated and the nearest that one could find by himself (using printed colour matrices). This method does it better and takes under consideration the way people see and compare colours…

So what the application does:

1. converts RGB 2 PATAPONE(R) and shows the results in RGB (for display),
2. converts PATAPONE(R) numbers to RGB and does a simple conversion (inaccurate I suppose) to CMYK and HSV..

all conversion besides cmyk and hsv are server sided… The conversion to PATAPONE(R) was very heavy so it was done only once for all RGB’s and saved in a database which the application uses.

For all companies that patent colours and claim them their own - GO AWAY!

Have fun using it!

FLAIM

Dynamic _saturation, _brightness and _contrast in AS2

In my previous AS2 post I’ve explained how to dynamically adjust saturation on MovieClips using ColorMatrix. Most of you would also want to have the possibility to do the same on brightness and contrast params. I’ve prepared a small compilation of those three in one package - you can download it here

You could also combine all three and use them simultanously, it can be done easily - feel free to contact me if you have problems with that.

 FLAIM

MovieClip saturation Tweening using ColorMatrix and Tweener

Here is a more complicated implementation of ColorMatrix Class in conjunction with Tweener in order to get a “_saturation” property of a MovieClip which can then be fully controlled by Tweener (used in this example) - or other Tweening engines.

Here is the sample code (you can download FLA example HERE):

import ColorMatrix;
import caurina.transitions.Tweener;
import flash.filters.ColorMatrixFilter;

MovieClip.prototype.addProperty(”_saturation”, this.getSAT, this.setSAT);
MovieClip.prototype.setSAT = function(sth)
{
 this._saturation = sth;
};
MovieClip.prototype.getSAT = function()
{
 return this._saturation;
};

example_mc._saturation=0;
example_mc.cm = new ColorMatrix();
example_mc.cm.adjustSaturation(example_mc._saturation-100);
example_mc.filters = [new ColorMatrixFilter(example_mc.cm)];

changeSAT = function(what)
{
 //the same as above but in form of a function executed on each Tweener UPDATE (onUpdate
 what.cm = new ColorMatrix();
 what.cm.adjustSaturation(what._saturation-100);
 what.filters = [new ColorMatrixFilter(what.cm)];
};
// ___________________USAGE

example_mc.onRollOver = function()
{
 Tweener.addTween(this,{_saturation:100,time:.4,transition:”easeOutSine”,onUpdate:changeSAT,onUpdateParams:[this]});
};
example_mc.onRollOut = function()
{
 Tweener.addTween(this,{_saturation:0,time:.4,transition:”easeOutSine”,onUpdate:changeSAT,onUpdateParams:[this]});
};

the full code available for download is fully commented - here

 FLAIM

Replacing text inside strings

 

A small function that replaces parts of text with different text. Useful for HTML text and XML. Example usage - replacing special characters of a users choice from a XML file to html tags for use with htmlText.

Here it is (works both in AS2 and AS3):

var test:String = “A big bad wolf ate a big sheep.”;
var some_result:String;
function replacer(ss,searchStr, replaceStr)
{
    var arr:Array = ss.split(searchStr);
    return arr.join(replaceStr);
};
replacer(test,”big”,”small”);
trace(replacer(test,”big”,”small”)); // returns “A small bad wolf ate a small sheep.”

FLAIM

switching places within an Array() using XOR

 

This small function switches places of two array elements. Very useful and quick. I’ve needed to write this for a simple aplication that uses layers (like the photoshop ones) and changes the places of elements in the layer when the user moves the layer to a different depth

 Here it is:

var my_array:Array = new Array(12,3,55,24);
function swap_indexes(a,b)
{
 my_array[a] ^= my_array[b];
 my_array[b] ^= my_array[a];
 my_array[a] ^= my_array[b];
 trace(my_array); // 55,3,12,24
};
swap_indexes(0,2); // these are the two array indexes you want to switch place

The above works both in AS2 and AS3 - Hope it helps someone

Of course the above method works only with Numbers. If you want to use it with different variable types like String you should use the old and slow method.

It would look like this (works both AS2 and AS3):

var my_array:Array = new Array(”mike”,”dan”,”jeremy”,”chris”);
var t:String;
function swap_indexes(a,b)
{
 t=my_array[a];
 my_array[a] = my_array[b];
 my_array[b] = t;
 trace(my_array); // “jeremy”,”dan”,”mike”,”chris”
};
swap_indexes(0,2); // these are the two array indexes you want to switch place

FLAIM

A recent (non)commercial project

I’ve made a simple and minimal flash (as2 still) website for a Polish charity organization.. tech used:

 - tweener as2

- xml based structure

- text scroller component from play.ground

Feel free to visit and comment (polish version available only),

 FLAIM

Recent commercial projects update.

Just released a new website for a large Polish furniture company. The core is lightweight (30k) but loads additional +-1000 high res pictures of the product collections. Whole site is database driven allowing the client to modify all the site contents.

Some tech info:

• Flash8, AS2,
• Animation using tweens,
• XML based data import,
• Some bitmapData and ColorMatrix usage,
• Multilanguage support,

Anyway - feel free to visit and comment - http://www.rattanprestige.pl

Flaim

Some Recent Commercial Projects.

I had a long break from posting because I’ve been doing some flash projects (in addition to my Flash full-time job). One of them is my friends website/photo gallery. It’s simple and minimal. You can check the finished project out here - http://www.andrzejgrabowski.eu/ . Feel free to comment as always,

…and have fun,

 Flaim

Complex Gallery in Flash 8

 

I’ve decided to use and publish my latest version of a flash gallery as a private photo book - http://galeria.czytnik.com . 

The gallery uses some cool features:

 - ColorMatrix for _saturation and _contrast effects,

- Built in Tweening Class for image transitions and animations

- Stage (100%) with Stage.onResize

- Bitmap Filters and matrices for creating dynamic glass effects under photos

Feel free to comment the effort I’ll include the sources soon so stay tuned. Maybe someone will need something like that in his own project/gallery.

 Have fun,

Flaim

Tweening part 3 - scaling, easing, blur

 

A slightly different approach to the Tweening Class - Now I’m using it to dynamically change the _xscale and _yscale values of a movieclip on roll over. In conjunction with the Elastic.easeOut and BlurFilter we’re getting nice effects needed for juicy user interaction. Experimenting with it is fun.

Click to see it running here.


import mx.transitions.Tween; // first the import
import flash.filters.BlurFilter // some eye-candy
// YourMC needs a filter in the beginning
YourMC.filters=[new BlurFilter((205-100-YourMC._xscale),(205-100-YourMC._xscale),3)];
MovieClip.prototype.expand = function(speed,from,to) //movieclip extended
{
// this needs a name that would be visible in the onMotionChanged
var what = this;
//tweens for both scales and _x for moving MC to center
var scale_x:Tween = new Tween(this, “_xscale”,mx.transitions.easing.Elastic.easeOut, from, to, speed, false);
var scale_y:Tween = new Tween(this, “_yscale”,mx.transitions.easing.Elastic.easeOut, from, to, speed, false);
scale_x.onMotionChanged = function()
{
// dynamic blurring with _xscale dependency
scx = what._xscale;
what.filters=[new BlurFilter((205-100-scx),(205-100-scx),3)];
}
};
// example usage
somebutton.onRollOver = function()
{
YourMC.expand(70,YourMC._xscale,250);
};
somebutton.onRollOut = function()
{
YourMC.expand(70,YourMC._xscale,100);
};

Note that it is highly important not to use the tweened MC as a button as well - in this case I used a fake button (’somebutton’) in order to avoid glitches (rollouts and rollovers would happen automatically if the MC resized). Stay tuned for the next parts of the Tweening series. You can download the .FLA source here.

Have Fun,
Flaim

Tween Class part 2 - moving MC’s

 

In the previous post I used tweening to fade (_alpha) movieclips. Now we will try to complicate the situation and use the same routine to move some MC’s . Source:


import mx.transitions.Tween; // first the import
MovieClip.prototype.easeclip = function(startx,starty,endx,endy,speed) //movieclip extended
{
  //tweens for both x and y
  var movex:Tween = new Tween(this,”_x”,mx.transitions.easing.Regular.easeOut,startx,endx,speed,false);
  var movey:Tween = new Tween(this,”_y”,mx.transitions.easing.Regular.easeOut,starty,endy,speed,false);
};
// example usage
overlayMC.onRelease = function()
{
 YourMC.easeclip(YourMC._x,YourMC._y,Math.round(_xmouse),Math.round(_ymouse),30);
};


Note the usage of Math.round(); - MC’s in Flash do not like being positioned on half-pixels (i.ex. x:28.2 y:25.4) - using round or floor is a good solution for this problem.

I’m using “.Regular.easeOut” for the tweens - please note that there are several other options (depends on the effect you want to achieve) - Elastic.easeOut, easeIn, easeInOut and several others including the None.easeNone for “non-eased” transitions.
You can download the .FLA source here. 
Have Fun,

Flaim

Dynamic Fadeouts with the Tween Class

 

If you ever needed a quick dynamic solution for fade-outs and ins - here it is:
 

import mx.transitions.Tween; // first the import
MovieClip.prototype.alphize = function(from,to,speed) //movieclip extended
{
  // and a proper usage of the Tweening Class 
  var alphizeT:Tween = new Tween(this,”_alpha”,mx.transitions.easing.Regular.easeOut,from,to,speed,false);
};
// example usage
YourMC.onRollOver = function()
{
  this.alphize(this._alpha,100,10);
};
YourMC.onRollOut = function()
{
  this.alphize(this._alpha,0,10);
};
And that’s more or less an easy way to smoothly fadein/out movieclips without those glitchy animation errors when using the Timeline (bleh!). I’ll extend this idea onto other uses in my next posts.

You can download the .FLA source here. 
Have Fun,

Flaim