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);

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

You can get the plugin and an example here.


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)
}


I searched the web for available plugins and the jQuery Cycle plugin seemed the best start. The only task left for me was finding a way to display text over the images and style the carousel. The result is astonishing and since the content is html it has a lot of advances over flash, SEO, accesibillity and much easier to implement for backend developers. However flash still has to advantage ( or disadvantage ) that it compiles your code which makes it less easy to copy it.

The result and code ( of the jQuery carousel ) can be found here

Documentation

The full paper

Abstract

Is it possible to make an interpretable sonification of the web? To answer this question the Musical Browser was build, The Musical Browser makes it possible to explore the web, and sent the HTML to the parser. The parser translates this model into data which a sound synthesizer understands. The synthesizer software turns this model into sound. This separation made it easy to experiment with the sonification.

Several tests were conducted with custom created, preselected and random webpages. These test provided a granular approach to interpretation. From webpages with a distinct property, (very dark webpage) to more average webpages (colorful webpage). For the last test predictions were made about webpages after hearing the sonification of these webpages.

The result is that the musical browser’s sonification is interpretable for the HTML tags and some style properties of a webpage. But the sonification is not sufficient to make an exact prediction of the visual display of the webpage.

var _chapters_ar:Array = _chapters.list.source;

for( var i:int = 0; i < _chapters_ar.length; i++ )
{
     var _clips_ar:Array =  _chapters_ar[i].Clips.list.source;

     for (var j:int = 0; j < _clips_ar.length; j++)
     {
        ...
}

see screenshot below

OSC does not make it possible to send multidimensional arrays, therefore this only works with multidimensional arrays with the same data type. Now the code, processing sends an Integer array of an index and 4 values.

Processing Code

import oscP5.*;
import netP5.*;

OscP5 oscP5;
NetAddress myRemoteLocation;

void setup()
{
  size(400,400);
  frameRate(25);
  /* start oscP5, listening for incoming messages at port 12000 */
  oscP5 = new OscP5(this,5555);

  myRemoteLocation = new NetAddress("127.0.0.1",5555);
}

void draw()
{
  background(0);
}

void mousePressed()
{
  /* in the following different ways of creating osc messages are shown by example */
  OscMessage myMessage = new OscMessage( "processing" );

  myMessage.add(new int[] { 1, 2000, 1000, 5, 5, 2, 400, 500, 5, 6, 3, 200, 560, 5, 6 }); 

  /* send the message */
  oscP5.send(myMessage, myRemoteLocation);
}

Max/MSP part

Now in Max/MSP we need to update the objects to their maximum buffersize and their maximum listsize. To extract the data we need to slice the list to remove the “processing” String and then divide the list in chunks of 5, the last step is to unpack these object to get to the data.

As you can see you need to set the buffersize for the OpenSoundControl object in bytes. For the zl object you can set the maximum list size.

update ( 09-03-2010 )
You can download a sample application with a processing patch as well as a max/MSP patch.

works in  IE7+, FF 3.5, Chrome 2+

Application functionalities

This little application makes use of dynamic font loading and uses a seperate class file to give the cubes a movieclip face with a dynamic textfield. Download the papervision-poetry source.

But the fun part stays, creating realtime interactive 3D scene’s. I have a bachelor degree in product design, and some working experience in the field. But none of the 3D things I did back then were realtime, of course you could interact with a 3D model on a very high granular level. I cannot wait to see more interference between 3D and the still flat world of internet.

It struck me that working with papervision is easy and real fun, it provides sufficient functionality to seperate a 3D model be interactive with those seperate parts, keep up the good work!

Download the sourcefiles accordionlist.zip and accordionlistscroll.zip

I will explain the code shortly. Perhaps it will be usefull for somebody and safe some time. I have left the styling basic just to show the working and principle to make is easier to be customized. The visual part of the accordion is made in flash to make it easy to add mouseOver etc.

Accordion List

I have tried to keep the accordion principle in the main class, so that the main class could act as the director. The accordion header communicates with the main class through an custom event. An in the end it might be necessary to add an custom event to the menu items, for example to retrieve some other data through an remote call, or to switch to another page.

After this accordion I realised that the main advantage for an accordion is the possibillity to display an unknown number of items and subitems in a small place. So I decided to ad a scrollbar to supply this advantage to the accordion.

To make the scrollbar work properly I needed to add all the AccordionList as well as the Scrollbar to a seperate containerclass ( AccordionListContainer ). The next step was to update the scrollBar roperties with the setScrollProperties when the user clicks on one of the headers.

The result is a flexible accordion list class, which can be used to display anything from links to images. Since the class loads symbols it should be easy to style it to your own preferences. And of course remove my hard coded item height values.

During the development of a rather big flash video portal, I noticed some difficulties with setting paths during the stages of development. The application made a lot of connections to external data: XML, Flash Media Server 3.5 and made call with a Microsoft .NET backend through FluorineFX remoting.

To make al this easily manageable I used a SWFObject to make it easy to transfer the application from Developing to Testing and finally to Production. The flash project was built in a way that the .NET developer needs to copy the SWFObject code and one includes folder to his backend. The includes folder contains all the swf, xml, img, javascript etc…

At that point the designer came with a preloader, which made the preloader.swf receive the SWFObject flashvars. I have made a Flash application template that works for me and the company I work for. But I am very curious if there are other, more neat ways to over come this problem.

The main feature of this template structure is that the preloader checks whether it has received a value form SWFObject. Based on the result of this check two different functions can be called in the main class of the main flash file.These functions sets the path for the flash file to make it work in the flash IDE or on the server with in HTML wrapper, after these paths or parameters are set the function initializes the application. See the code below

var ldr:Loader = new Loader();
ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressEventListener);
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeListener);
ldr.contentLoaderInfo.addEventListener(Event.INIT, initListener );

var req:URLRequest = new URLRequest( mainPath );
ldr.load( req );

function initListener( e:Event ):void
{
	if( root.loaderInfo.parameters.swfBasePath != null )
	{
		Object( ldr.content ).setSWFObjectValues( swfParams );
	}else{
		Object( ldr.content ).setLocalValues( );
	}
}

I really would like to discuss if this is a proper solution