Directional Blur + Tweener in AS3

Hello,

What is it?

Click here to see it… - click the background to execute the movement.

How it works?

User executes tweener for movement. Then the distance (between last update and current object position) and angle (directional vector of the movement) are calculated in each tweener update - so are the blur amounts - basing on previous object coordinates (from the previous update) - then the blur is appled to the object and current coordinates become the previous one so the whole thing can start again on next tweener update

I assume this is not the best method for this effect (senocular did this better using bitmaps in as2- but this method is slow and needs rewriting for simple usage. There could also be transparency issues with bitmapdata there). Anyways it looks far better than mine (the object leaves the trail and is not just blurred like in my method) but the method here works without the bitmapData and sports Tweener

The source?

Sure! You can download it here

Quick Q&A:

Q: Can it be used with papervision in 3d?

A: Yep… you have to introduce Z to the equations and change the distance calculating function for one that would calculate it in three dimensions.

Q: Can I use it with multiple objects?

A: Yes you can! You can execute as many instances you want (and flash can handle;)) It uses the object reference so it can run many times on different objects simultanously.

Have Fun!

FLAIM

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

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

 

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

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

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