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