Jeff Winder Freelance Flash & Flex Developer

FaceOSC and AIR working example

2011-12-10T03:23:00.000-08:00

I got a couple of questions about how to make an AIR app listen for FaceOSC, as shown in these two previous posts, so I've put together a basic 'one class' working example in Flash Builder.

What do you need?
FaceOSC (mac only, already included in my download project in the faceOSC folder)
Osculator (mac only)
This as3 Tuio library to make it easier listening for the OSC messages from FaceOSC (also already included in the src folder)

Actually you don't need Osculator to make the FaceOSC to AIR protocol work, but you need it to open the FaceOSC-Osculator.oscd file - in the osculator folder - that comes with FaceOSC in order to see all the OSC addresses that Kyle used for the facial gestures and expressions. Note that you cannot run the Osculator file and the AIR app simultaneously as they use the same port.

I also exported the project as an AIR app, which you can find in the air folder. A certificate is included, the password is 1234. Basically, you just need to open up FaceOSC and publish the Flash Builder project, or run the AIR app. You can download the example project here.

Chanter: brainwaves, EEG, meditation and Flash

2011-09-27T06:48:00.000-07:00

I've released a desktop app called Chanter. It's a tool for people who'd like to improve their meditation or mindfulness skills, which gives instant audio feedback about your state of meditation. In short, the app plays a mantra-like audio loop, and changes the pitch of the loop according to the meditation level of the user.

You need a NeuroSky headset, the MindWave or Mindset, to make this work. The headset registers brainwaves - EEG - that are sent to the computer wirelessly, using a dongle that comes with the headset, and a small software program that you need to install.

Flash
Seantheflexguy was the first developer who made me aware of this exciting hardware, and he also wrote an open source ActionScript 3.0 API, making it simple to hook up the headset to a Flash or AIR project. Actually I'm not using that API, as NeuroSky also provides some brief and clear instructions on making Flash listen for messages from the headset.

Brainwaves and level of meditation
The messages returned by the NeuroSky software are not only the delta, theta, alpha, beta and gamma bands of the EEG, but also two values that are based on these bands: concentration and meditation. Obviously, Chanter listens to the meditation value, although concentration and meditation are not opposites; the 'ideal' state of mind would be a value of 100 for both categories.

Why Chanter?
There are quite a few apps in the Neurosky store, most of them simple games, with an emphasis on mind exercise. The one that - in my opinion - stands out is another meditation tool called Dagaz. What struck me though is that all available apps are based on the idea of visual interaction, in other words: you need to look at your computer screen while experiencing the tool or playing the game. My next thought was: wouldn't it be nice to build a meditation tool that is based on audio only, so that you don't have to look at your screen when meditating, a tool that even allows you to close your eyes? This idea resulted in Chanter.

A promotional website can be found here, and the app is available in the NeuroSky webstore. Below are a couple of screenshots of the app.

Pitching the mantra loop
The code for changing the tone of the mantra mp3 that the user selects is derived from a class by (surprise, surprise) Andre Michelle. It's not real pitch shifting, which would mean maintaining the same tempo, but it suffices for the short loops that I'm using.

Installing Adobe AIR 3 SDK in Flash Builder 4.5.1 on Mac OS

2011-09-19T03:04:00.000-07:00

To install and use a new AIR SDK, you need to overlay it on an
existing Flex SDK. This is a bit more tricky on a Mac than on
Windows, because - as far as I know - you still cannot do a copy/overwrite
without deleting the contents of the folder you are overwriting.

The following steps illustrate how to install the AIR SDK using the terminal.

UPDATE October 5, 2011
I wrote this post during the pre-release period of Flash Player 11 and AIR 3. Now that they are both officially released, I have changed the links to the official release url's, but I haven't updated all the screenshots!

1.
Close Flash Builder or Eclipse.

2.
Look up your current SDK. I was using 4.5.1. which on my macBook is located here:

/Applications/Adobe Flash Builder 4.5/sdks/

3.
Copy the entire, current SDK folder and rename it, I named it AIR3SDK.

4.
Download the AIR 3 SDK here,
and save this file inside your newly created AIR3SDK folder.

5.
Open the terminal (Applications>Utilities>Terminal.app), and cd to the root of the AIR3SDK folder.

You can also just type cd, add a white space and then drag the SDK folder in your terminal
username$ cd /Applications/Adobe\ Flash\ Builder\ 4.5/sdks/AIR3SDK
and hit enter.

6.
Now that you're in the root of the new Flex SDK folder, type or copy/paste

tar jxvf AdobeAIRSDK.tbz2
or use the name of the file you downloaded, when it's a different version,

and hit enter. This will unzip the tar file that you've downloaded, and automatically overwrite any duplicate files. Here's a (NOT UPDATED) screenshot of my terminal for step 5 and 6:

7.
In the root of the AIR3SDK folder, open flex-sdk-description.xml and change the content of the name node from Flex 4.5.1 to AIR3SDK.

8.
Still inside the AIR3SDK folder, go to

/frameworks/libs/player/

and create a folder called 11.0.
Now download PlayerGlobal (.swc) here, save it in the 11.0 folder and rename it to playerglobal.swc.

9.
Open Flash Builder or Eclipse and start a new project. In the opening popup, click on Configure Flex SDK's, click on Add, click Browse to browse to the AIR3SDK folder, and open it. Now you can set this SDK version as default SDK or select it in the dropdown list when you're back in the opening popup.

AIR 3 has some cool new features such as Captive Runtime, which bundles the AIR runtime with your app, so that the user doesn't have to download it separately; something that you already could do with AIR to iOS, but is new for Android and desktop.

Another new feature is extending AIR with Native Extensions, meaning that you can integrate native code from the target device into your app, of which one of the results can be a major performance boost.

FaceWriter, typing text with your face - FaceOSC & Flash (Air)

2011-07-25T06:43:00.000-07:00

Here's another video that shows an Adobe AIR app I've been working on. It listens for the data from FaceOSC, a great tool by Kyle McDonald; read more about it in my previous post.

This AIR app enables you to type text by moving your head and using some facial gestures.
It's quite basic for now, allowing you to add text, add spaces, do a backspace and clear the entire textfield. Functionality could be added of course, such as saving the final text to a local file or e-mailng it.

The hardest thing is to keep it all stable and precise, as you tend to change the orientation of your head quite easily. This would require a more advanced way of calibrating, and some functionality that lets you re-calibrate once in a while.

Anyway, I'm not sure if this could be benificial to anyone - I was thinking of people with spinal cord injury, but I'm far from familiar with that area. If you have any ideas, please drop me a line.

UPDATE 11-12-2011: I've put together a basic working example of an AIR project that listens for FaceOSC messages. You can find it here.

Face gestures, FaceOSC and Flash

2011-07-11T09:30:00.000-07:00

The coolest thing I saw last week was a video by Kyle McDonald , who released a brilliant tool called FaceOSC, which handles facial gestures. FaceOSC is based on Facetracker by Jason Saragih.

With the help of this open source AS3 Tuio library I made an AIR project listen for the OSC messages sent by FaceOSC. OSC stands for Open Sound Control, although this example has nothing to do with sound.

The code to receive the OSC messages is quite simple. First, create a new OSCManager, add a listener, and start the manager. I found out that I had to use port 8338 by opening the osculator that comes with FaceOSC.

var oscManager: OSCManager = new OSCManager(new UDPConnector("0.0.0.0",8338,true),null, false);
oscManager.addMsgListener(this);
oscManager.start();

Then, in a function called acceptOSCMessage, check what kinds of OSC packets are coming in by checking the message address:

public function acceptOSCMessage(oscmsg:OSCMessage):void
{
//To see the different addresses(i.e. references to the gesture values)
//trace("address: " + oscmsg.address)

if( oscmsg.address == "/pose/orientation" )
{
//roll = oscmsg.arguments[2] * rollFactor;
//speed = oscmsg.arguments[0] * speedFactor;
//your code here
}

}

To make this last function work you need to implement IOSCListener.

The 3D scene is from the book Papervision3D Essentials.

UPDATE 11-12-2011: I've put together a basic working example, which you can find here.

Controlling Unity3D with an Android phone

2010-03-27T07:49:00.000-07:00

In my previous post I turned my Android G1 into a game controller for an Adobe Air desktop app. The same thing can be done with a Unity file. Although I didn't have much time to make something really nice, I've quickly put together a short video, which demonstrates that Unity also supports UDP. Again, I've used RemoteDroid to send data to my computer over its wireless network. You can read more about the how in the previous post.

I'm not sure who made the 3d jet model, but I downloaded it here.

Remotely controlling a desktop AIR app with an Android phone

2010-02-25T10:35:00.000-08:00

AIR 2.0 has support for UDP sockets, which allows you to send and receive messages using the Universal Datagram Protocol. This means that you can communicate with other applications without the need for an extra server.

I used RemoteDroid for this demo, which is an Android app that turns your Android phone into a remote control, using your own wireless network. Originally, the app gives remote access to native applications on your computer and simulates the mouse - moving it and pressing left and right buttons - but you also need to download a server on your computer to make that work.

However, since AIR 2.0 supports UDP, you don't need an extra server to make your Android phone communicate with an AIR app. In this video, I made the AIR app listen for UDP messages sent by the Android app, to control a paperplane in a Papervision3D scene. So basically, you can turn your Android phone into a game controller.

RemoteDroid has just been open sourced, which gave me a chance to take a look at the source code of the Android app. I added the accelerometer data of the phone to it (locally, I didn't contact the owner of the project yet), and in the video you can see how I:
- control the speed of the paperplane by pitching the phone
- steer the paperplane by rolling the phone,
- zoom in and out by pressing the left 'button' on the phone's touch screen
- change the camera mode to a random perspective by pressing the right 'button' on the touch screen
- change the camera perspective to the Third Person, First Person and default perspective by pressing the 1, 2 and 3 keyboard keys respectively.

The Papervision3D scene in the video stems from chapter 6 of the Papervision3D Essentials book.

Of course there are other apps than AIR that support UDP. For instance, I also managed to control a Unity file this way, so another video will follow soon.

Video tutorial: Hooking Up Your Wii Remote In Unity Indie

2010-02-07T07:39:00.000-08:00

I've put together a (7-part) video tutorial that shows you how to get your Wii Remote working in Unity Indie. In short, I send data from the Wii Remote to Flash, and then these data are being passed to Unity.

So the tutorial covers two things:
Exchanging data between Flash and Unity with U3dObject
Hooking up your wiimote with WiiFlash

If you don't have a wiimote or are not interested in the wii part, the video may still be worth watching if you want to know how to set up communication between Flash and Unity; something that could serve many more purposes than just the wii thing.

The videos discuss only the Wii Remote, but hooking up your Nunchuck is just as easy. Also, the balance board is supported by WiiFlash.

The tutorial got a little longer than I had in mind - total running time is 55 minutes - but if you have a Flash or/and Unity background, you may want to skip forward here and there.

I have bundled two example projects, which you can find here. I included the simple project from the video tutorial, and also a second project, which demonstrates how to hook up the Wii Remote and Nunchuck to Unity's FPS_Tutorial.

UPDATE: In the video I say that the latest mac version of the WiiFlash server - 0.4.5 - was not working for me. I have tried it again, and now it seems to work fine - not sure what happened last time. Keep in mind though that you may have to tell it to open in 32-bit mode. Right-click on the app, select Get Info and check the Open in 32-bit Mode checkbox.

‘Papervision3D Essentials’ Book Out Now!

2009-09-03T05:09:00.000-07:00

So here it is, 13 chapters full of information about one of the hottest open-source Flash projects that makes real-time and interactive 3D come alive in the browser. Packt Publishing has just released the Papervision3D Essentials book that we (Paul Tondeur and I) have been working on this year.

I must say that we’re very satisfied with the content of the book, in that it covers loads of stuff, related to many different aspects of the engine. Some of the topics have been discussed a lot within the community, such as loading external models and applying materials. However, as the available information is quite fragmented, it was about time for an extensive introduction. Other topics, such as effects, particles and vector text, may have been somewhat underexposed in the past, and also have found their well-deserved place in the book, because they are so much fun to work with!

I guess the strength of the book is its comprehensiveness. During the writing process I told myself more than once: man, I wish I had a book like this about a year ago. It’s so nice to be able to look things up in one document, instead of searching the web for articles, of which many are outdated. Mind you, all the available tutorials and blog posts definitely have been an important source of information, along with the posts on the mailing list. And hopefully, it will stay that way. I have no worries there though, as the Papervision3D community seems to be highly committed and eager to learn and share.

All by all, Paul and I had a great time in exploring the inner working of the Papervision3D engine, finding out about hidden gems, obscure methods and cool tricks. I guess my new teaching motto is: ‘If you want to learn something, don’t read a book, write one!’ Don’t take this advice too seriously though :-).

You can find more information about the content and level of the book on the publisher’s site, which is right here.

Download sample chapter 8 - External Models - here.

Read excerpts from the book - 3D vector drawing and text, and Lines3D - here.

3D Vector Drawing and Text with Papervision3D

2009-08-30T02:03:00.000-07:00

The following article is an excerpt from Papervision3D Essentials and assumes that you have Papervision3D up and running on your computer. The first chapter of the book is a step-by-step introduction on how to download Papervision3D and how to configure Flash CS3, Flash CS4, Flex Builder or Flash Builder for creating Papervision3D projects.

The main part of this article is dedicated to a library called VectorVision that was incorporated into Papervision3D. After discussing the classes of this library, we will take a look at the Lines3D class in the next part that also enables you to draw 3D lines. This class was already a part of Papervision3D before VectorVision was incorporated.

VectorVision: 3D vector text and drawing

VectorVision is a library written in ActionScript that allows you to render vector graphics in Papervision3D and add a 3D perspective to them. The project started as a separate library that you could download and use as an add-on. However, it was fully integrated in Papervision3D in June 2008.

Being able to use vector shapes and text theoretically means that you could draw any kind of vector graphic and give it a 3D perspective. This article will focus on the features that are implemented in Papervision3D:

Creating 3D vector text
Drawing 3D vector shapes such as lines, circles, and rectangles

Keep in mind that 3D letters can be seen as vector shapes too, just like lines, circles, and rectangles. The above distinction is made based on how VectorVision is implemented in Papervision3D. Some classes specifically deal with creating 3D text, whereas others enable you to create vector shapes.

Creating a template class for the 3D text examples

Because the 3D text examples we are about to see have a lot in common, we will use a template class that looks as follows:

package
{
 import flash.events.Event;
 import org.papervision3d.materials.special.Letter3DMaterial;
 import org.papervision3d.typography.Font3D;
 import org.papervision3d.typography.Text3D;
 import org.papervision3d.typography.fonts.HelveticaBold;
 import org.papervision3d.view.BasicView;
 public class Text3DTemplate extends BasicView
 {
 private var material:Letter3DMaterial;
 private var font3D:Font3D;
 private var text3D:Text3D;
 private var easeOut:Number = 0.6;
 private var reachX:Number = 0.5
 private var reachY:Number = 0.5
 private var reachZ:Number = 0.5;
 public function Text3DTemplate()
 {
 stage.frameRate = 40;
 init();
 startRendering();
 }
 private function init():void
 {
 //code to be added
 }
 override protected function onRenderTick(event:Event = null):void
 {
 var xDist:Number = mouseX - stage.stageWidth * 0.5;
 var yDist:Number = mouseY - stage.stageHeight * 0.5;
 camera.x += (xDist - camera.x * reachX) * easeOut;
 camera.y += (yDist - camera.y * reachY) * easeOut;
 camera.z += (-mouseY * 2 - camera.z ) * reachZ;
 super.onRenderTick();
 }
 }
}

We added some class properties that are used in the render method, where we added code to move the camera when the mouse moves. Also, we imported four classes and added three class properties that will enable us to create 3D text.

How to create and add 3D text

Let's see how we can create 3D vector text that looks crisp and clear. The general process of creating and displaying 3D text looks as follows:

Create material with Letter3DMaterial.
Create a Font3D instance.
Create a Text3D instance, passing the text, font, and material to it, and add it to the scene or to another do3D.

We will create an example that demonstrates several features of Text3D:

Multiline
Alignment
Outlines

All the following code should be added inside the init() method. Before we instantiate the classes that we need in order to display 3D text, we assign a text string to a local variable.

var text:String = "Multiline 3D textnwith letter spacing,nline spacing,nand alignment ;-)";

Now, let's create a text material, font, and text. First we instantiate Letter3DMaterial, which resides in the org.papervision3d.materials.special package:

material = new Letter3DMaterial(0x000000);

The constructor of this class takes two optional parameters:

	Parameter	Data type	Default value	Description
1	fillColor	uint	0xFF00FF	Defines the material color with a 24-bit hexadecimal value, which in turn defines the color of the text.
2	fillAlpha	Number	1	Sets the transparency of the material.

In our example, we created black text material with no transparency.

Next, we choose the font of our liking by instantiating one of the font classes. Papervision3D has four classes that represent the following fonts:

HelveticaBold
HelveticaLight
HelveticaMedium
HelveticaRoman

The classes have the same name as the font and are subclasses of Font3D. Later we will look at how we can use fonts other than these four, but for now we will pickHelveticaBold. The Font3D constructor does not have any parameters.

font3D = new HelveticaBold();

We then create a Text3D instance:

text3D = new Text3D(text,font3D,material);

Text3D has four parameters available, of which only the last one is optional.

	Parameter	Data type	Default value	Description
1	text	String	—	Defines the text you want to display.
2	font	Font3D	—	Sets the font of the text.
3	material	Letter3DMaterial	—	Sets the text material.
4	name	String	null	An optional name for the Text3D instance.

Text3D is inherited from DisplayObject3D, so we can position, rotate, and scale the instance.

text3D.x = 800;
text3D.y = 400;
text3D.localRotationY = -30;
text3D.scale = 2;

But Text3D has more to offer, as it has the following properties that format the text:

align
letterSpacing
lineSpacing

The align property aligns the text to the left (default), right, or center, and takes a string:

"left"
"right"
"center"

The following code aligns the text to the right:

text3D.align = "right";

To set the amount of space that is distributed between all characters, you can setletterSpacing.

text3D.letterSpacing = -3;

Notice that we didn't import any classes from the flash.text package. Although these properties are named after Flash TextField properties, they are actually created and set in Text3D.

The lineSpacing property is the equivalent of leading in Flash's TextFormat class and defines the amount of vertical space between lines:

text3D.lineSpacing = -30;

Creating multiline text requires only a regular line break—n—to go to a new line.

You can also add an outline to the text. The outline is defined by three properties of the material such as line thickness, line alpha, and line color:

text3D.material.lineThickness = 2;
text3D.material.lineAlpha = 1;
text3D.material.lineColor = 0xFF0000;

Finally, we add the text3D instance to the scene:

scene.addChild(text3D);

Publishing this example should show you the text that we have passed, multilined, aligned to the right, and last but not least, in 3D:

The classes that we have described make it quite simple to get 3D text onto your screen. But what if we do not want to limit ourselves to the four font types that Papervision3D has incorporated?

Font creation

In order to use other fonts in Papervision3D, we need to create our own custom Font3D classes. Although this may sound pretty daunting, it is not hard at all, thanks to a tool by Mathieu Badimon, the developer of Five3D.

Five3D is a 3D engine written in ActionScript 3.0 that lets you create interactive vector-based 3D animations. See http://five3d.mathieu-badimon.com

In short, downloading the tool and placing in it the correct folder will create a new panel inside the Flash IDE. When the panel is opened, you can choose a font and the tool will generate an ActionScript class file that contains vector data about the font. The following screenshot shows the panel:

Go to http://code.google.com/p/five3d/downloads/list and download the latest release, which was FIVe3D_make_typography_v2.0.zip at the time of writing.

In side the ZIP file you will find a SWF and a PDF file. The PDF contains instructions on where to place the SWF and how to create a font file. Read these instructions carefully and create a file with the font of your choice.

In the instructions, a WindowSWF folder is mentioned. The path to this folder is as follows:
On Windows:
C:Program FilesAdobeAdobe Flash CS4enFirst RunWindowSWF
On Mac OS X:
UsersUsernameLibraryApplication SupportAdobeFlashCS4enConfigurationWindowSWF
Where it says FlashCS4 in the path, it can also be FlashCS3, depending on the version you use. Note that on Mac OS X the generated font file does not end up in the folder where you saved your FLA, but in the root drive Macintosh HD

When you have created a font file, which contains an ActionScript class, there are a few things to be done before we can use it. Let's assume we have exported a font file that contains data of the Courier font and thus is called Courier.as:

Create a folder named five3D inside your src folder. Inside the five3D folder, create a folder named typography. Save the font file in thetypography folder.
Open the font file and add the following import to the first line of the class it contains:

import org.papervision3d.typography.Font3D;

Extend the font class with the Font3D class, so that the first line of the class definition looks like this:

public class Courier extends Font3D{

Add the following three methods to the class definition:

{
 if(!__initialized)initialize();
 return __motifs;
}
override public function get widths():Object
{
 if(!__initialized)initialize();
 return __widths;
}
override public function get height():Number
{
 if(!__initialized)initialize();
 return __heights;
}

The class is now compatible with Papervision3D. Let's return to our previous example where we instantiated the HelveticaBold font and see how we can get this new font working. First we import the font class:

import five3D.typography.Courier;

Then, all you have to do is alter the line that instantiates the font:

font3D = new Courier();

Publishing the file should now show you the font that you exported with the tool, in our example Courier.

For further reading about font creation, VectorVision, and Papervision3D, visit http://code.google.com/p/vectorvision/wiki/FontCreation

Text3DExample

Create interactive Papervision 3D applications with stunning effects and powerful animations

Build stunning, interactive Papervision3D applications from scratch
Export and import 3D models from Autodesk 3ds Max, SketchUp and Blender to Papervision3D
In-depth coverage of important 3D concepts with demo applications, screenshots and example code.
Step-by-step guide for beginners and professionals with tips and tricks based on the authors’ practical experience

http://www.packtpub.com/papervision3d-essentials/book

Adding interactivity to 3D vector text and shapes

Adding interactivity to 3D vector objects basically works the same as adding interactivity to any other 3D object. You can use the InteractiveScene3DEvent. However, to increase the accuracy you should import VectorShapeHitTest, which is located in the org.papervision3d.core.render.command package, and add the following line at the top of your init() method:

VectorShapeHitTest.instance.assignViewport(viewport);

Another aspect worth taking a look at, is adding interactivity to 3D text. If you would try to add an event listener to a Text3D instance directly, you are out of luck. Adding interactivity is done by adding listeners to the letters of the text. Let's see how that works.

Adding interactivity to 3D text

Aga in, we will take the Text3DTemplate as our starting point. We will create a simple example with some 3D text and make it interactive. When the mouse hovers a letter, it will turn red and the color of all the other letters will change randomly. When the mouse leaves the letter, then the color of all letters will change randomly. First, we create some 3D text in the init() method.

var text:String = "Interactive Text3D";
material = new Letter3DMaterial(0xFFFFFF);
material.interactive = true;
font3D = new HelveticaBold();
text3D = new Text3D(text,font3D,material);
text3D.scale = 2;
scene.addChild(text3D);

Set the interactive property of the material to true to enable interactivity. Also, let the BasicView class know that you want to make the viewport interactive, by adding the super() call in the constructor and setting the fourth parameter to true.

super(stage.stageWidth,stage.stageHeight,true,true);

Before we add listeners and their associated methods, add the line we discussed in the previous section at the top of the init() method for more precise interactivity:

VectorShapeHitTest.instance.assignViewport(viewport);

Now, let's add a listener to each letter of the Text3D instance:

for each(var letter:VectorLetter3D in text3D.letters)
{
 letter.addEventListener(InteractiveScene3DEvent.
 OBJECT_OVER,overLetterListener);
 letter.addEventListener(InteractiveScene3DEvent.
 OBJECT_OUT,outLetterListener);
}

We use a for each loop to add an event listener to each letter. Letters in a Text3D instance are of the VectorLetter3D type, so you need to import this class, which can be found in the org.papervision3d.typography package. Text3D has a letters property, which is an array that holds the letters of the text.

The event handler that is associated with the OBJECT_OVER event looks like this:

private function overLetterListener(e:InteractiveScene3DEvent):void
{
 for each(var letter:VectorLetter3D in text3D.letters)
 {
 if(letter != e.target)
 {
 letter.material = new Letter3DMaterial(Math.random()
 * 0xFFFFFF);
 letter.material.interactive = true;
 }
 else
 {
 e.target.material.fillColor = 0xFF0000;
 }
 }
}

Again we use a for each loop. Inside the loop, an if-else statement evaluates for each letter whether it is the one that has been hovered. If it is not, we assign a new material to the letter with a random color. If it is the letter that has been hovered over, then we change the fillColor property of its material to red. Notice that we also set the interactive property to true when we apply new material to the letters that haven't been hovered over.

If you only add target.material.fillColor = 0xFF0000; in the handler, the whole text would turn red on hovering a letter. This makes sense because all letters have the same material. That is why we applied a new material to the letters that haven't been hovered.

In the handler method that accompanies the OBJECT_OUT event, we give each letter a random color:

private function outLetterListener(e:InteractiveScene3DEvent):void
{
 for each(var letter:VectorLetter3D in text3D.letters)
 {
 letter.material = new Letter3DMaterial(Math.random() * 0xFFFFFF);
 letter.material.interactive = true;
 }
}

The following screenshot shows what you should see when publishing this example. The letter the mouse is over should be red, the other letters should be randomly colored.

InteractiveText3DExample

Drawing vector shapes—lines, circles, and rectangles

The integrated VectorVision library not only lets you create 3D text, it also provides a VectorShape3D class that allows drawing basic vector shapes such as lines, circles, and rectangles. The shapes are initially drawn in 2D and then projected in 3D space.

Working with vector shapes requires two classes, VectorShapeMaterial—located in the org.papervision3d.materials.special package—and VectorShape3D - located in the org.papervision3d.objects.special package. To create a vector shape material, use the VectorShapeMaterial class.

var material:VectorShapeMaterial = new VectorShapeMaterial();

The constructor of this class does not take any parameters.

When you want to draw a shape, you must instantiate VectorShape3D. The following code draws a line:

var line:VectorShape3D = new VectorShape3D(material);
line.graphics.lineStyle(2,0x00CCFF);
line.graphics.beginFill(0x666699)
line.graphics.moveTo(-300,-300);
line.graphics.lineTo(300,-300);
scene.addChild(line);

The first line of code instantiates the VectorShape3D class, passing the material we just created. The code that then follows illustrates that vector drawing in Papervision3D is very similar to 2D drawing in Flash. The last line adds the vector shape to the scene.

In the VectorShape3D class, an instance of the Graphics3D class is created, which is the 3D equivalent of the Flash Graphics class. We can call the methods in theGraphics3D class the same way we call methods in the Graphics class. When you create an instance of VectorShape3D, you can draw lines, circles, ellipses, and rectangles using methods such as drawRect() and lineTo(). Compared to theGraphics class, Graphics3D is a little less elaborate because it does not provide methods to draw gradient lines or fills.

This is how you would draw a rounded rectangle:

var roundedRect:VectorShape3D = new VectorShape3D(material);
scene.addChild(roundedRect);
roundedRect.graphics.lineStyle(3,0xff0000);
roundedRect.graphics.beginFill(0x666699)
roundedRect.graphics.drawRoundRect(-100,-100,200,200,20,20);

You can also draw curved lines.

var curvedLine:VectorShape3D = new VectorShape3D(material);
scene.addChild(curvedLine);
curvedLine.graphics.lineStyle(2,0x00CCFF);
curvedLine.graphics.moveTo(-300,-300);
curvedLine.graphics.curveTo(0,-600,300,-300);

The following screenshots show a circle, a filled rounded rectangle, a line, and a curved line. The screenshot at the left shows a frontal view. In the screenshot at the right, the objects are rotated, offering a 3D perspective.

VectorShape3DExample

Summary

Papervision3D offers a set of easy-to-use classes to draw 3D vector shapes such as simple graphics and text. The classes were originally part of VectorVision, a separate project that was developed to create 3D vector text, but was integrated into Papervision3D.

3D vector graphics can be created similar to how the Flash drawing API works, with methods such as drawCircle() and lineTo(). The graphics, such as lines, circles, rectangles, and ellipses are drawn in 2D and can then be rotated to create a 3D illusion.

The 3D text classes allow you to create crisp looking multiline text with alignment, letter spacing, and line spacing. Although Papervision3D has only four built-in fonts, it is possible to create text with other fonts. An external tool has been discussed, which generates font classes, containing vector information about the font you want to use. These classes can easily be incorporated into your Papervision3D project.

You add interactivity to 3D text as well as other 3D vector shapes, similar to adding interactivity to any other 3D object.

In the next part, we will see how to draw lines with Lines3D and add interactivity to Lines3D lines.

Create interactive Papervision 3D applications with stunning effects and powerful animations

Build stunning, interactive Papervision3D applications from scratch
Export and import 3D models from Autodesk 3ds Max, SketchUp and Blender to Papervision3D
In-depth coverage of important 3D concepts with demo applications, screenshots and example code.
Step-by-step guide for beginners and professionals with tips and tricks based on the authors’ practical experience

http://www.packtpub.com/papervision3d-essentials/book

Make That Car Go Wild: Skoda Octavia RC Campaign Uses Wireless Live Video And Phidgets InterfaceKit

2009-07-22T08:59:00.000-07:00

Skoda launched a campaign site today to promote their new Octavia model. For the next two weeks, everyday a brand new and slightly customized 'Octavia RC' (Remote Control) is parked in a street somewhere in the Netherlands. Installed in the car are two camera's that are connected to laptops. Using a media server makes it possible to send live(!) video that is being shown on the website.
As a visitor of the website you can remotely manipulate several features of the car, like turning on and off the lights, honking the horn and making the wiper blades sweep. Furthermore, you can start promotional audio jingles that are being played by a seperate set of speakers, built in behind the front bumper.

My role in this project was getting the data out of the laptop that receives the visitor's input and sending it to the outputs of an interface board, made by Phidgets (the InterfaceKit 8/8/8). The interface kit is attached to the car's electronic circuit, and voila, you can make the car do things from behind your computer at home.

Rotating a little servomotor pulls the wiper blades handle up and down. This motor is also driven by a Phidgets device, the Servo 4-Motor Controller.

I used Phidget's Actionscript 3.0 API, which enabled me to easily communicate with the Red5 server that takes care of sending the visitor's input to one of the laptops in the car.

UPDATE
The campaign has ended, but to see some short video's visit the Skoda Octavia site and go to Octavia RC.

BMW Interactive Test Drive with UMap and live video / BMW Interactieve Proefrit

2008-09-24T08:59:00.000-07:00

I've just finished a project for the new BMW 3 Series. Visitors of the site can subscribe for an interactive test drive. During (dutch) working hours live video streams are being broadcasted from the cars using UMTS and Wowza media communication server. Also, GPS coordinates are being sent to trace the position of the cars. The positions of the two BMW's are constantly shown on an interactive map, made with the UMap component by www.afcomponents.com together with text messages that the test drivers send after their drive. People watching the live streams can also call the cars to talk to their current drivers.

WiiFlash and the UMap v1.0 component

2008-07-15T08:59:00.000-07:00

UMap is an ActionScript 3.0 Mapping API, released by afcomponents. The free component allows you to create maps with interactive data layers. When I was playing around with it, it suddenly ocurred to me that you can combine this with WiiFlash.

So here is a video that demonstrates just that :-).

What you need to make this work is:
- a wii remote controller
- a nunchuck controller
- the wiiflash server and api
- a bluetooth enabled computer

The video shows a couple of things:
- using the wii remote minus and plus buttons to zoom out and in.
- using the wii remote up, down, left and right buttons to pan the map.
- using the nunchuck joystick as your mouse (with a custom mouse cursor), including a CLICK event.
- using the pitch and roll of the nunchuck, while holding the z button, to pan in an alternative way.

Source files: WiiFlash_UMap.zip

UPDATE 16.07.08:
If you have a wiimote and nunchuck you can to try it online, here is the online version:

http://www.seedylifestyle.com/wiiflash_umap/WiiFlash_Umap.html

Make sure you download the latest WiiFlash server (0.4.1), because that one allows your wii controllers to send data to online swf's! It's a little buggy, so you may have to click Continue and then refresh the page once or a couple of times :-).

Download Windows version

Download Mac version (Alpha version, 30 Jun. 2008)

Papervision3D, WiiFlash and Phidgets session at FCNY

2008-06-10T08:59:00.000-07:00

I'll be leading a session at the very friendly group of FlashcodersNY in New York City tomorrow night, at their weekly meeting.

The topics will be WiiFlash, Phidgets and a little Papervision3D.

Starts at 7 p.m.

I'll post the source files after the session has taken place.

UPDATE 11.07.08
Consuelo Karoly has made a video of this presentation. You can see it here

And here are the sourcefiles :-)

ScaleTranslator: calculating corresponding scales

2008-05-13T08:59:00.000-07:00

Suppose you have a slider with a scale of -34 to 299. And suppose you want that scale to correspond relatively to another scale, for instance a scale of 20 to 455, which represents, let's say, the x position of a sprite.

I've been breaking my head several times before on how to calcultate things like this. So I took pen and paper and found out that the formula to calculate the x position corresponding to the slider value looks like this:

b= ((a - A1) * (B2 -B1)/(A2 - A1)) + B1;

Where b (a number in the output range) corresponds with a (a number in the input range), and

A1 is the minimum Number of the input scale
A2 is the maximum Number of the input scale
B1 is the minimum Number of the output scale
B2 is the maximum Number of the output scale

I've put it into a class so you can use it like this:

var resultNumber: ScaleTranslator= new ScaleTranslator(A1, A2, B1, B2, a);
trace("resultNumber.getResult() =" + resultNumber.getResult());

Source and examples: scaleTranslator.zip

UPDATE 7.1.09
I updated the ScaleTranslator class (and decided to change the name to Mapper, easier to type) so you can call a static Mapper.map() function and get the output by only using one line:
var resultNumber: Number = Mapper.map(A1, A2, B1, B2, a);
You can find the Mapper class here

WiiFlash with Papervision3D and Phidgets Servomotor

2008-04-06T08:59:00.003-07:00

A short video of using the Wiimote and WiiFlash to send data to a Papervision3D scene and at the same time to a servomotor.

To smoothen out the movement of the cube I used the code found here - UPDATE: link is being reported as unsafe, so i removed it, see source files for code - and I then used Tweener which makes it very smooth :-).

Source files: WiiFlash_PV3D_Phidgets.zip

Papervision3D and Phidgets

2008-04-06T08:59:00.002-07:00

Phidgets are a set of "plug and play" building blocks for USB sensing and control from your PC. Think of analog sensors, servomotors, LEDs et cetera. You can use Actionscript 3.0 (and several other languages) to develop applications.

In this video I show an example of using Phidgets and Papervision3D.

More info: www.phidgets.com
Source: PV3D_Phidgets.zip

Papervision3D Interactive Lines

2008-02-13T07:59:00.003-08:00

Here's an example I made of interactive LineMaterial in PV3D 2.0. This interactivity has just been added by Seb Lee-Delisle.

Mouse over the lines to see color, alpha and rotation changes.

Source: InteractiveLinesTest.as

Papervision3D lines and particles

2008-02-13T07:59:00.002-08:00

I have been playing some more with lines and particles in Papervision3D and came up with a little lightweight chopper.

It consists mainly of, you guessed it, lines and particles, except for the eye, which is MovieAssetMaterial. Don't know if this is a game, demo, experiment or test, but it sure was fun to build it.

You can see it here

Papervision3D Interactive MovieAssetParticleMaterial

2008-02-11T07:59:00.002-08:00

Today Seb Lee-Delisle commited two updates to the Papervison3D library, interactive Line3D and interactive particles. Moreover, particles have new material : MovieAssetParticleMaterial.

This is a litle demo I made with the last one. Mouse over the particles to see the interactivity.

Source: MovieAssetParticleMaterialTest.as

FullScreen Class

2008-02-10T07:59:00.000-08:00

Here's a class that lets you go fullscreen quite simple.

Create a MovieClip in your .fla with two frames ('on' and 'of 'mode') with

stop();

on the first frame. Remove it from the stage and in your library fill in 'FullScreenToggle' as the Class linkage.

Then instantiate this class from within your document class like this:

var fullscreen: FullScreen = new FullScreen(this.stage, 20, 400);

This works in the stand alone flash player or exe file. To make it work in the browsers too, change this in your html:

param name="allowFullScreen" value="true"
embed src="example.swf" allowFullScreen="true" ...
AC_FL_RunContent( ... "allowFullScreen", "true", ... )

My chopper demo is a working example.

Source: FullScreen.as