Author: Wonderolie

jQuery BoucingElement plugin

I made this plug in while I was playing arround with jQuery. I am trying to transfer my flash skills to html. Learning actionscript started with a bouncing ball class. Therefore I tried to create the same in jQuery.

And here it is the boucingelement plugin. It was fun to make and you could do a lot of useless stuf with it. Like the form example on this page. Click in one of the input fields to start the plugin

$('#password').bouncingElement();

or with parameters

$('#password').bouncingElement({ xpos: 80, ypos: 95, speedX: 1, speedY: 3, fps: 15 });

The main code is very basic as you can see in the snippet below. A simple setInterval functionin the plugin provides the animation you can change the speed by setting the fps parameter or or the speedX/ speedY parameter. It is important to position the bouncing elements absolute.

// change the position
o.xpos += o.speedX;
o.ypos += o.speedY;
ball.css("left", o.xpos);
ball.css("top", o.ypos);

// reverse the speed if the element hits the boundary
if (o.xpos < 0 || o.xpos > (canvas.width() - ball.width()))
{
o.speedX *= -1;
}

if (o.ypos < 0 || o.ypos > (canvas.height() - ball.height()))
{
o.speedY *= -1;
}

You can get the plugin and an example here.

jQuery and ExternallInterface

It seems to be that ExternalInterface will not work if the flash file is referenced with jQuery. Which is odd because the jQuery wil translate to the javascript function getElementById. However the following code gave javascript errors that the function send2Flash could not be found.


if( $("#debaak").length > 0 )
{
$("#debaak").send2Flash(str);
}

After discussing this subject we found the following solutions. JQuery returns an object, with the get function it is possible to get any element in the jQuery object returned by the jQuery selector

$("#debaak").get(0).send2Flash(str);
or
$("#debaak")[0].send2Flash(str);

The javascript way also works perfectly whithout any errors.


if (document.getElementById)
{
flashMovie = document.getElementById("debaak");
}

if (flashMovie)
{
flashMovie.send2Flash(str);
}

Below you can find the necessary code for flash.


public function Main()
{
ExternalInterface.addCallback("send2Flash", callJS);
}
private function callJS(msg)
{
//called from js
trace('call from js:' + msg)
}