AS3 analog clock in 3D

Hi,

In the previous post I have presented how to create a simple analog 2d clock using as3 only.

Now it is time to do it in Papervision3D

I’ve used the same mechanism as in the 2D one - the polygon generator I’ve created serves now as a vertex creator - and basing on the vertex - cubes are added to the scene. Tweener is used for animating the cubes then. A simple mathematical mechanism is used for camera movement.

You can download the source code here. The source is well commented. All classes included.

Comments are welcome as usual

Have fun with it,

FLAIM

 

Simple AS3 analog clock (2d)

hi,

Basing on the previous post (2d polygon generation) I’ve created a simple, ‘redrawing’ analog clock (in 2d).

Why complicate with polygons? Why not circles and lines from the drawing api?

- I wanted to have all the points coordinates (x,y) for later use with papervision3d. Drawing a circle using the Flash drawing API (graphics.*) will not give you such information.

Of course there are other methods to get the coordinates but this is probably the fastest one - additionaly we have full control of the number of vertexes we create.

How it works?

- The interval is Tweener based - it executes a function that gets the seconds/minutes/hours and then clears and redraws the polygons - once every second using a fake Sprite,

- polygons are drawn using the method from the previous post,

- entire clock is code based - no stage elements required.

The code

You can download the entire source here.

Have fun,

FLAIM

Simple Maths in AS3 part 4 - drawing polygons

 

Hello,

This time some simple drawing in a really short post. I’ve needed this functionality for my next post (I’m finishing a 3d-html-rotator -and creating polygons is crucial for positioning the elements in a 3d environment).

What it does?

Draws a regular convex polygon using specified parameters (radius,number of sides,x,y).

drawPoly(30,6,50,50); // draws a 30px radius hexagon positioned on x:50,y:50px

The code (AS3):

//some vars
var poly_id,ratio,top,coords;
//the main function  drawPoly(radius,segments,center x, center y);
function drawPoly(r:int,seg:int,cx:Number,cy:Number):void
{
 poly_id=0; //->0
 coords=new Array(); //->0
 ratio=360/seg; //calculated ratio/step
 top=cy-r; //top
 for(var i:int=0;i<=360;i+=ratio) //the main loop- ratio used here
 {
  var px:Number=cx+Math.sin(radians(i))*r; // point X
  var py:Number=top+(r-Math.cos(radians(i))*r); // point Y
  coords[poly_id]=new Array(px,py); //2nd level array
  if(poly_id>=1)
  {
   poly_draw(coords[poly_id-1][0],coords[poly_id-1][1],coords[poly_id][0],coords[poly_id][1]); //drawing here
  }
   poly_id++; // increment for the id
 }
 poly_id=0; //id->0
};
//degrees2radians
function radians(n:Number):Number
{
 return(Math.PI/180*n);
};
//the drawing function - you can draw anything you want here - in this case it connects the points with red lines
function poly_draw(sx:Number,sy:Number,ex:Number,ey:Number):void
{
 graphics.lineStyle(1,0xFF0000,1);
 graphics.moveTo(sx,sy);
 graphics.lineTo(ex,ey);
};
// example usage
drawPoly(30,6,50,50); //hexagon
drawPoly(30,3,150,50); //triangle
drawPoly(30,4,250,50); //square
drawPoly(30,8,350,50); //octagon
drawPoly(30,64,450,50); //almost a circle

The .fla file - here.

Have fun,

FLAIM

Real 3d in Html - updates

Hello,

The update includes:

- z-sorting for html objects (see this page),

- simple mouse interactivity,

- optimized z-scaling of fonts,

- optimized speed (redesigned communication with js).

 

The complete updated source is here.

Known issues:

- Antivirus software (checked with KAV) causes major slowdown when checking Javascript (only Internet Explorer browsers) …use Mozilla if you have Kaspersky turned on - fixed that

- slow…as hell - it’s better now

have fun,

FLAIM

***** RECENT UPDATE ******

I’ve optimized the code and changed the files in this post (both the sources and example link) - everything is 500-800% faster than in the previous post. Thanks to the optimization the issue with Kaspersky disappeared also

… have fun

Real 3d in html / javascript / pv3d

Hello everyone,

In the previous post I’ve mentioned that it could be possible to use papervision 3d and ExternalInterface to create 3d in HTML …

..well that wasn’t too hard to imagine when I’ve found out that it is possible to get coordinates of any vertex of a pv3d object you want - using : “..geometry.vertices[index].vertex3DInstance.attribute “..so I did it..

It’s a bit “proof of concept” idea - it of course ‘doable’ rather than ‘usable’ (too slow) but that didn’t put me off

You can see the test movies right here (or by clicking the large image above). Click the embed button first and then wait for the flash to load. I did it on purpose - because it is processor heavy.

You can download the complete source! here.

So how does it work?

It’s described in the sources but shortly:

- creates a whole pv3d environment with a simple cube, a camera and so on…

- dynamically creates html content then used to animate (simple divs with text),

- creates communication (see the html source) between js and as3,

- uses Tweener for animation yep - that’s a cool part:),

- the pv3d cube is a fake all the time - it exists but it’s not really visible - the coordinates are passed to html objects using the method described in the beginning of this post,

What could be done with it? 

- a lot! You could do a whole menu/website with it - as long as you don’t use too many items on the stage. It’s very easy to add full mouse interaction to it using the same methods I used in the demo. It’s also very easy to modify the 3d environment and steer the camera from js Use your imagination!

I hope you like the little demo - comments are welcome!

FLAIM

*** UPDATE

Please use the code from my newer post about the 3dHTML - it’s optimized and works significantly faster.

Using Flash and Tweener to tween html objects without external javascript!

 

Hello ,

This time I’ve found a nice feature of ExternalInterface in AS3 (and AS2 also) which allows you to create your own Javascript code INSIDE the flash file and then execute it from INSIDE Flash and even pass parameters to this code.

And what is the use of that?

Well… I can give you some examples..

- you could (as in this example) use AS3 tweener to tween any properties of html objects on the site (you could use JSTweener instead of this method - but it’s a lot easier to do it with Actionscript if you are a flash developer!)

- you could even pass coordinates of 3d points in papervision to create a simple 3D HTML site ! :),

- you could use any other class you use with your movieclips/sprites/bitmaps and try to implement and use them in plain html,

- use your imagination

But what is the difference between normal javascript (and executing it only) and building javascript inside flash?

- the js code is not easily visible for everyone and compiled inside flash,

- you edit everything in the flash environment without having to use other software thus having everything in one place,

- your html is more tidy and doesn’t need any external js classes,

- many others I didn’t think of just now,

And how to do it?

Well I’ve made a simple example. It consists of a html page with a flash movie embedded. There is a div on the site with id=”box”. Flash creates a js function inside an XML object and then executes it every Tweener update (onUpdate). Normally Tweener wouldn’t run on parametres which doesn’t exist - so I create a Sprite which is not really visible and Tween its parametres with Tweener - and then -> I pass those parameters to the js function…really simple and running smooth. Note that the motion in html is now strictly dependant on the flash framerate

You can see the example HERE.

The files including the flash source are HERE.

And the sample code is here:

// import
import caurina.transitions.Tweener;
import flash.external.ExternalInterface;

// XML variable with the javascript function
var myJavaScript :XML =    
<script>       
<![CDATA[           
   function(x,y,id)
   {                              
   mover = function(x,y,id)
   {
    document.getElementById(id).style.left=x+'px';
    document.getElementById(id).style.top=y+'px';
   }
   mover(x,y,id);
  }       
]]>
</script>

//this function is executed every Tweener update (onUpdate),
function move_div(div_id)
{
 //we will now use the sprites properties to animate the DIV
 var xpos=getChildByName(div_id).x;
 var ypos=getChildByName(div_id).y;
 // execution of the function - passing x,y and the ID to the javascript function
 ExternalInterface.call(myJavaScript ,xpos,ypos,div_id);
};

function create_object(div_id)
{
 //a virtual sprite which will hold the properties…
 var object:Sprite = new Sprite();
 object.name=div_id;
 object.x=500;
 addChild(object);
 //…and the tween on that sprite
 Tweener.addTween(object,{x:500,y:500,time:2,transition:”easeOutBounce”,onUpdate:move_div,onUpdateParams:[object.name]});
};

// pass the id of the div you want to move
create_object(”box”);

Feel free to comment and..

..have fun,

FLAIM

 

Simple maths in AS3 part 3 - rotating object around another

Hi everyone,

Next part of the series.

This time I wrote a small function which uses trigonometry (sin and cos) to rotate one object around another one.

The only thing you need to do is to specify the two objects used in the animation and some parameters like that:

rotate_around_object ( object_to_rotate, center_object, radius, speed , start angle);

The function will create an event listener for the object (on_enter_frame) and move object_to_rotate around the center_object in a certain radius at a certain speed. The animation will start at the specified start_angle. If you want to change the rotation direction - specify the speed with a minus value.

The code is here (AS3) :

function rotate_around_object(object1,object2,radius,speed,angle)
{
 var xpos,ypos;
 object1.addEventListener(Event.ENTER_FRAME, object_ENTERFRAME);
 function object_ENTERFRAME(e:Event):void
 {
  xpos = object2.x + object2.width/2 + Math.cos(angle) * radius;
  ypos = object2.y + object2.height/2 + Math.sin(angle) * radius;
  angle += speed;
  object1.x=xpos;
  object1.y=ypos;
 }
};

// example usage (you need 4 movieclips on the stage in this example..
// …with instance names: point1, point2.. and so on.
rotate_around_object(point2,point1,100,.2,0);
rotate_around_object(point4,point3,200,.1,45);

You can download the fla file here.

You can see it running here.

Have fun,

FLAIM

Simple maths in AS3 part 2 - rotation

Hello,

This time a short explanation how to use trigonometry and rotation to achieve a ‘point_to’ effect. The maths is really simple here and useful for various effects and other uses. I’ve used a mousemove listener on the stage to execute the function and mouseX + mouseY to give the coordinates to the script. The movieclip (or sprite if you wish) can be rotated to face the direction of a point you specify (in this case - the mouse position on the stage).

Here is the code (as3):

var dx,dy,target_rotation:Number;

function point_to(what)
{
dx = mouseX - what.x;
dy = mouseY - what.y;
what.rotation = Math.atan2(dy, dx) * 180 / Math.PI;
}

// example usage
stage.addEventListener(MouseEvent.MOUSE_MOVE,stage_MOUSEMOVE);
function stage_MOUSEMOVE(e:MouseEvent):void
{
 point_to(movie_mc);
}

You can download the FLA file here. The example can be seen here.

Feel free to comment and have fun with Flash!,

FLAIM

simple maths in AS3 part 1 - distance between two points

Just decided to start a small series of simple beginner tutorials about actionscript maths and usage. People send me loads of questions about ‘how to do this or that…?” - most of them are so simple to solve that it gives me a feeling that most of us nowadays stopped thinking at all…. ; (

Anyways… here is how to calculate distance between two points using the Pythagorean Theorem (a2+b2=c2 - simple as that). The small picture above shows the idea (older than the wheel i guess ;o-)) and here is the code which does the simple calculation…

// distance
function distance(p1,p2)
{
 var dist,dx,dy:Number;
 dx = p2.x-p1.x;
 dy = p2.y-p1.y;
 dist = Math.sqrt(dx*dx + dy*dy);
 trace(dist);
}
distance(point1,point2); // point1 and point2 are example objects (movieclips or sprites) located somewhere on the stage (just create them with the flash ui and give them instance names)

Hope it helps,

FLAIM

Blur + Tweener in AS3

Hi again

Many people ask me how to do tweening of blurX and blurY (and other filters and properties) using Tweener - but in AS3 not AS2 (as in previous posts).

The solution is quite simple:

1. You need Tweener for AS3 (you can download it from googlecode) - import the class,

2. import the filter you want (from flash.filters.*),

3. place an example mc on the stage and name it ‘my_mc’,

4. finally here is the example code:

// Import Filters
import flash.filters.*;
// Import Tweener
import caurina.transitions.Tweener;
// Add Events
my_mc.addEventListener(MouseEvent.ROLL_OVER, my_mc_ROLLOVER);
my_mc.addEventListener(MouseEvent.ROLL_OUT, my_mc_ROLLOUT);

// And that is how it works…
function my_mc_ROLLOVER(e:MouseEvent):void
{
 Tweener.addTween(my_mc, {_blur_blurX:15,_blur_blurY:15, time:2});
};

function my_mc_ROLLOUT(e:MouseEvent):void
{
 Tweener.addTween(my_mc, {_blur_blurX:0,_blur_blurY:0, time:2});
};

HAVE FUN,

FLAIM

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

A recent commercial project

I’ve recently made a website for a large Polish furniture company ‘Asadena’ (english version temporarily unavailable).

Tech used:

• some flv movies,
• full stage,
• database driven,
• multi-level dynamic menu system,

The project was fun and it’s the last thing I’ve done in as2. I’m switching to as3 for good,

Feel free to comment,

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