Thomas Joos | mobile application developer

(re)create your thoughts and expand your limits.

Archive for November 2007

3D: Papervision: Plane Events

with 34 comments

We all have heard of pv3D: Papervision 3D. I have been playing with this stunning api for a while and I have noticed some problems when you want to go just a bit further than a quick demo. When you are making a project using pvd3D you obviously would like to use your plane object and make it clickable for example. Those who have been playing with papervision know that it is not possible to add an event listener directly to your plane.

There is a great tutorial on rockonflash which guides you through this proces using an interactiveSceneManager. Basically this manager handles an OBJECT_CLICK event and makes it possible to see which object (for example a plane ) has been clicked on. But there are some things that bother me. You can’t add a buttonMode to your plane so users do not see their mouse change to notify them that an object is clickable. It also is not possible to add some animation onto you pv3D object when using a MOUSE_OVER event for example.

But here you can download a fla that shows you a way to implement plane events in your project and handles these problems like buttonMode and for example an alpha change on a mouse over. Let’s get a quick view at the code:

First of all we configure our scene, import our pv3D classes etc.. we are going to make 50 icons so a nice icon is used for a bitmapassetmaterial. (yeah that’s right, it’s mike chambers! )

import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import caurina.transitions.Tweener;
//container
var container:Sprite=new Sprite();
container.x=stage.stageWidth*0.5;
container.y=stage.stageHeight*0.5;
addChild(container);
//een 3D scene maken
var scene:Scene3D=new MovieScene3D(container);
//camera aanmaken
var camera:Camera3D=new Camera3D();
//initial zoomin eigenlijk, default better view, achteraf makkelijk adjusten
//camera.zoom=5;
camera.zoom=4;
//bitmap asset material BAM
var bam:BitmapAssetMaterial = new BitmapAssetMaterial("Mike");
//show both sides, default one side
bam.oneSide=false;
//smooth true=> smoothing
bam.smooth=true;

So far so good, nothing special really. But here comes the new part, we are going to use a dictionary, this is something like an array but instead of using integers to reference as an index to our stored plane objects; we are going to use sprites. Because we are using a MovieScene3D, every 3D object we create, has an sprite property, you could say it is the object’s bounding box.

we make an instance of a dictionary and we use the sprite propertie of the plane to store our plane into the dictionary
//dictionary
var myPlaneDictionary:Dictionary=new Dictionary();
var p:Plane=new Plane(bam,128,128,2,2);
//HERE IT COMES!
var myPlaneContainer:Sprite = p.container;//we use the container sprite propertie of the plane
myPlaneDictionary[myPlaneContainer]=p;//here we have container as key and plane as value

Now we have stored our plane into a dictionary by using it’s sprite container, but now comes the cool part, we are going to use this container to add event listeners, and then we can use our dictionary to know which plane we need. We can configure this container’s buttonMode to true, so the users see their mouse change and know they can click on the object. We also use this container’s alpha property to have a plane alpha change when we have a mouseover.

myPlaneContainer.buttonMode = true;//we configure a button mode
//events koppelen aan plane container
myPlaneContainer.addEventListener( MouseEvent.ROLL_OVER, doRollOver );
myPlaneContainer.addEventListener( MouseEvent.CLICK, clicker );
myPlaneContainer.addEventListener( MouseEvent.ROLL_OUT, doRollOut );
//event functies
function doRollOver(evt:MouseEvent) {
var sprit:Sprite=evt.target as Sprite;
sprit.alpha = 0.5;
//we use the container sprite to do an alpha change

To check our performance we write a for loop that creates 50 of these objects with a listener, and it seems to run quite smoothly so lack of performance should not be an issue when trying to implement Plane Events ( or other pv3D objects ) like this.

Check it out and let me know what you think!

Advertisements

Written by vilebody

November 29, 2007 at 12:59 pm

Posted in 3D

3D: Room3D

with 4 comments

This video shows a project I made last week for my 3DCourse. We had to model a room and it had to be presented in a video. I went for a modern design office and here’s the result! Turn on your speakers for maximum entertainment :) Hope you like it. Please feel free to give you honest opinion. I’m sorry for the bad ass quality but in order to slow down the rendering proces, the quality of the movie is not that good. I’d even say its quite bad actually but even though I think it gives you a quick overview of the Room. Enjoy!

Written by vilebody

November 23, 2007 at 2:55 pm

Posted in 3D

AIR: spaz: a cool AIR app for twitter

leave a comment »

Spaz is a free, open source twitter client for Mac, Windows and Linux. The current version, known as Spaz.AIR, uses the Adobe Integrated Runtime. Spaz has won “Best HTML Community Application” in the AIR Developer Derby. It has a nice interface, look and feel and a high usability. Following your friends and collegues was never this fun ^^ I could recommend this application to everyone who likes to twitter but is tired to check the site constantly or to use a boring twitter tool (like twinja or twitterAIR ) I just started with twitter but this tool makes it much more fun for me

to download this app click here and start twittering on your desktop.

Written by vilebody

November 14, 2007 at 11:36 am

Posted in AIR

AIR: AUG-meeting with Mike Chambers & Lee Brimelow

leave a comment »

Yesterday I went with some other students to Braschaat for another interesting AUG-meeting. They hosted a session about AIR, presented by Mike Chambers & Lee Brimelow. Chambers’ part was a little introduction into flex and he also talked about new technologies like Hydra and Thermo, which both seemed amazing by the way. Brimelow’s part was more AIR-related. First of all he showed us a couple of AIR examples to explain how usefull this new technology could be. He also showed us some of the cool stuff you could do with a desktop application that no other technology could output. He gave a overview of the sort of nativ window options you have in AIR. You could basically tune you’re own desktop app into any shape you want.

Getting started with AIR is something that I have on my tot do list but it is not quite that difficult to produce an AIR application, because as a developer you already have the existing web development skills in HTML, Flash, .. to create it. Lee also give a nice overview when to use Flex and when to use Flash to develop applications.

if you want to learn more about AIR you could visit some of these sites:
http://labs.adobe.com/technologies/air/
http://onair.adobe.com/
http://www.mikechambers.com/blog/
http://theflashblog.com/

grtz Vile Body

Written by vilebody

November 13, 2007 at 12:03 pm

Posted in AIR, as3

Flash actionscript 3: Pixelfumes’ AS3 Reflection class

with 26 comments

We all have seen the new web 2.0 style. Everything reflects on the ground.. sometimes it’s nice, sometimes it is quite an overkill. But if you think a reflection could be impressive in a project or design you are working on, the Reflection class could come in handy.

Pixelfumes guru Ben Pritchard released an actionscript 3 reflection class which reflects static objects ( bitmap or movieclip ) for you. The Reflection class as3 also supports updating. This means when the movieclip ‘changes’, the reflection will too. If you ever would feel the need to reflect an flv for example, it would be no problem no more.

First of all, you can download the class here, and here’s an example of how to use it when trying to reflect a movieclip

import com.pixelfumes.reflect.*;
var r1 = new Reflect({mc:ref_mc, alpha:50, ratio:50, distance:0, updateTime:-1, reflectionDropoff:0});

as you see you need to fill in some properties, the alpha rate of the reflection, his gradient ratio, the distance, an updateTime ( if you have a changing mc like an flv for example, it needs to bee updated, but when you use a static object, this is not really necessary so just put -1 ) and then finally you give a reflectiondropoff value, this simply specifies how large the reflection should be, the gradient ratio just specifies how quickly the reflections loses his opacity.

if you would like to know more about the class you should absolutely visit adobe’s developer center

Thomas

Written by vilebody

November 8, 2007 at 11:20 pm

Posted in as3

Tagged with

Flash actionscript 3: proportional image resizing

with 24 comments

There is always a moment in a flash developer’s life where he want’s to resize images. For example to create a thumbnail, or just a resized image for your image gallery.

the point is you’d like to resize your images proportional of course, so you won’t get a crappy result. It’s no biggie but I wrote a class in as3 wich resizes the bitmap you like and returns the result.

-UPDATED-

you can download the class HERE. and here’s an example of how you could use it

I’ll explain how you can use the class:

Let’s say you have a few images in a container and you’d like them all to fit in a bounding box with a maximum width and height , 100 px for example. Of course you’d like to resize them proportional. You can use the static class ResizeImage and just make a call to the resizeIt function. Just make sure to assign a few parameters.
ResizeImage.resizeIt(obj,100,100);

Just assign the object you’d like to resize, and give a value for the maximum width and height. The class will resize your object, and in stead of returning another bitmap, your object is resized directly!

For those who are interested here is some explanation about how the class handles the proportional resizing:

first we calculate our ratio, to make sure we can recalculate the width and height proportional

var r:Number;//ratio
r = b.height/b.width;//calculation ratio

With a simple if loop we check if the width of the image is bigger than the max width you want, if so then we set the width to the max value and recalculate the height proportional

if (b.width>maxW) {
b.width = maxW;
b.height = Math.round(b.width*r);
}

After the height is updated we check if this is bigger than the max height you want, if so then we set the height to the max value and recalculate the width proportional.
if (b.height>maxH) {
b.height = maxH;
b.width = Math.round(b.height/r);
}

Written by vilebody

November 7, 2007 at 12:13 am

Posted in as3

Hello world!

with one comment

Hello and welcome to my blog. I will post every now and then some stuff which I think other multimedia developers could be interested in. My experiences with new technologies, some source code to make your developing process a bit easier.. you name it. What I like the most is working with the adobe cs3 set. Flash and Photoshop in particulary. Hope you might find some useful information here..

grtz Vile Body

Written by vilebody

November 6, 2007 at 2:29 pm

Posted in Zonder categorie

Tagged with