Winter Wonder Land Animation – I’m a little late

Originally inspired by a kickin’ real life Christmas display on YouTube, I’ve spent the last 2 months in the evenings and weekends creating this animation sync’d to “Wizards In Winter” by Trans-Siberian Orchestra:

If you have a newer computer, view the actual swf here (Use the number keys to change camera views)>>

Or view the fullsize 1000x500 Quicktime movie>>


Or just watch it on youTube:

[ original youTube video ]

Now you might wonder *why* I would spend so much time on this – right? Well, partially because I was forced to endure this lame version by Miller Lite every day in December -UGH!!

I finally snapped after the 100th time of having to watch this thing and got to work.

Now, the guys over at Swift3D came out with Papervision3D support and I wanted to do a project with Swift to see where the holes were and what it was really capable of doing. I’m here to say Swift3D is the real deal – it has powerful tools you’d never expect, and it gives you a ton of export/rendering options that every Flasher out there needs when doing 3D/2D work. So, with the exception of baking in shadows on the house’s texture, the entire scene was modeled in Swift3D.

The trees were all created with the lathe tool (which freakin’ rocks for stuff like this) and the star was a simple extrusion. The house, oddly enough, was from Google’s online library of free Sketchup models. I was able to convert it to 3DS and Swift3D imported it right into the scene. How cool is that?!?!

I then sat down to write out an animation engine I’d been meaning to try for a while. Basically, I created “Sequence Groups”, and played their “parts” on the computer keyboard with the music. When I was done with the particular section, I would dump an array out of the recorder, paste it into my code for the particular SequenceGroup and bam, the engine took care of the rest. I was seriously surprised at the accuracy I was able to get with this method – I was able to play 16th notes wiithout it dropping a single note and in my testing (even though this song doesn’t have any) 32nd notes worked at this tempo as well.

After some serious rounds of optimizing the crap out of this thing, it runs at 1000×500 on my Mac Book Pro in the mid 20’s using the 9.0.115 player. I sacrificed a few killer concepts I wanted to put in there like Fire coming out of the chimney, a snow globe dome and an Xwing pulling the scene through outter space to name a few I originally wanted to use the Effects branch to put in blurs and glows and try some DOF stuff, but there just wasn’t any room after over 5500 ploy’s and the size of the scene and animation…and music…and everything else

I really pushed to get this done for this weekends class in San Francisco – it turned out to be one of the coolest teaching tools I could have ever imagined. It’s got tons of tricks and optimization techniques as well as demo’s on communicating with your Papervision3D scene’s, materials and DisplayObject3D’s. So for all of you making it to the class, you’ll have the full source given to you and we’ll be covering how it was done and dig in with some hands on examples.

I’ll be posting the code for this project after the San Francisco class next week sometime.

I might add that the 9.0.115 player really gives this a boost. Usually in the mid 20’s with the FPS, and in the high teen’s with the Flash IDE player.

Here’s what it looked like before all the texture work was done:

Papervision3D: Accessing MovieClips used in materials

I’ve often been asked this question and it’s come up quite a few times on the PV3D list, so I thought I’d post about it just for archive sake if anything else.

Right now, in PV3D, you have the ability to use MovieClips/Sprites for Materials on 3D objects. The 2 materials you would use for this are MovieMaterial and MovieAssetMaterial (Asset means that it’s in the Flash IDE library rather than an instance on stage). When you create these materials, they have reference to a MovieClip/Sprite container.

Often times, you need to communicate with these MovieClips via ActionScript, and I’m going to show you how you can do this with a basic sample that uses a sub class that extends MovieClip, and then later we try to access that MovieClip with some strong typing.

First, let’s create a sub class that extends MovieClip and you would use that to assign to a MovieClip in the Flash IDE library:
[as]
package com.rockonflash.pv3d.materials
{
import flash.display.MovieClip;

public class SpecialSauce extends MovieClip
{
public function SpecialSauce()
{
// constructor
}

public function animate():void
{
gotoAndPlay(“animate”);
}
}
}[/as]

Next, we need to create a MovieAssetMaterial, and then create a reference to it so we can talk to it via ActionScript. First we’re going to call setupScene() and create a plane object that has scope in this class. When we call doAnimation(), we cast the material of the plane object first to make sure it’s a MovieAssetMaterial. This helps avoid any RTE’s obviously, but its necessary since Plane’s material property is set to MaterialObject3D. So, if you tried to access the “movie” property of plane.material, you’d get an compile error since plane.material is thought to be a MaterialObject3D.

In the next part of doAnimation(), we cast the movie property as SpecialSauce. This is for the compiler as well since we want to call a custom method called “animate” that doesn’t exist on MovieClip alone. If the cast is successful, mov.animate() will fire and bingo, you’re in business!
[as]
import com.rockonflash.pv3d.materials.SpecialSauce;

protected var plane:Plane;

public function setupScene():void
{
var mat:MovieAssetMaterial = new MovieAssetMaterial(“com.rockonflash.pv3d.materials.SpecialSauce”, true, true, true);
plane = new Plane(mat, 256, 256, 3, 3);
}

public function doAnimation():void
{
// cast as MovieAssetMaterial, then test for null
var mat:MovieAssetMaterial = plane.material as MovieAssetMaterial;
if( mat )
{
// cast as our sub class, then test for null
var mov:SpecialSauce = mat.movie as SpecialSauce;
if( mov )
{
// now you’re talking to the instance directly
mov.animate();
}
}
}[/as]

Now one last thing to note is the 4th argument on MovieAssetMaterial: unique:Boolean. If set to true, you will get a unique instance of the MovieAssetMaterial. You might think that when you create a MovieAssetMaterial, you’d be creating a unique instance, but in reality, you’re not. By default, Papervision3D re-uses instances of MovieAssetMaterials if they’ve already been created – UNLESS you tell it to create a unique instance. We do that to save on memory and in some cases speed.

hope this helps!

UPDATE - interactivity
So, now to take it a bit further, if you want to get Mouse interactivity going with your MovieClip (SpecialSauce), all you have to do is:

1. set your viewport object’s “interactive” property to true
2. set your material’s “interactive property to true
3. addEventListener to your objects inside of your class or to the class itself:

[as]protected var viewport::Viewport3D;
protected var plane:Plane;
public function setupScene():void
{
// forth argument is ‘interactive’
viewport = new Viewport3D(1200, 600, false, true, true, true);
var mat:MovieAssetMaterial = new MovieAssetMaterial(SpecialSauce, true, true, true);
mat.interactive = true;
mat.movie.addEventListener(MouseEvent.CLICK, handleClick);
plane = new Plane(mat, 256, 256, 3, 3);
}

public function handleClick(e:MouseEvent):void
{
trace(“clicked”);
}
[/as]

At this point, you should see ‘clicked’ in the trace output.

There you go!

Physics engine for 3D in Flash – WOW

No, it’s literally called “WOW” and that’s about what you find yourself saying when you see the demos for the first time!

Here’s the technical “what is it?” answer:
WOW-Engine is a free AS3 open source physics engine written by Seraf ( Jérôme Birembaut ) capable to handle positions in a 3D environment.

There are several demo’s and downloads at the site and demo’s as well as sample apps to help you get started with the engine.

This is one of my favorites on the demo’s: Cloth over 2 sphere’s (can you guess what the picture is??)

Anyway, BIG congrats to the WOW team on getting this out, it really looks outstanding!!

I’ll be covering using WOW with Papervision3D at the San Francisco classes Feb 2nd and 3rd

Papervision3D class in San Francisco -

I just posted some of the new things we’re throwing into the class for San Francisco over on PV3D’s blog:

* 2.0 (GreatWhite) training
* Un-released 2.0 component ( released to the class members only, includes new materials panel )
* New Sketchup native file support
* Swift3D Overview
* Swift3D giveaway (2 free copies and 15% discount code for class memebers)
* WOW Physics engine
* Shaders/Materials
* Effects
* Pixel3D/PixelModeler

Andy’s gonna be there as well, and it should be a great class

Pixel3D’s conforming to 3D models \m/

Andy’s just added a class that allows someone to create 3D Pixels that adopt the shape of a 3D model – this rocks. There’s also a argument in there for subdivision’s of faces so that even if your model is very simple, you can cover it with quite a bit more pixels.

For more info, check out Andy’s post

Minimal Components: Keith Peters style

I was just putting together a custom UI to record some animation stuff I’m doing on a “winter wonder land” project I meant to have ready for Christmas, but of course, I got anal and well…I’m late…as usual.

But be that as it may, I was just sitting there last night struggling on what I should do with the tool I needed to create. I’m using Flash IDE because I’m creating many MovieClips for materials used on 3D objects, but all the code is being done in FB3. So, when I add a “button”, of course, I have to turn of the “auto keep imports clean” feature (which I think rocks) and use import fl.controls.Button because I’m compiling with Flash IDE.

Yeah, I know we could argue about using the component kit for flex, but so far, I’ve had mixed results with using that. Plus, there’s alot of work done with layers and building out the movieclips…just makes more sense to stay in the flash IDE for now

anyway, then I read about Keith’s minimal component set – it couldn’t have been timed better. There’s probably other packages out there etc that I could use, but I like the way Keith usually thinks and does things

The one little feature I like is how he added the ability to send a reference to the click or change handler in the constructor as well as x/y position and parent container. If you’ve already done alot of as3, you’re all too familiar with creating the component, then addEventListener until your fingers fall off. It’s just a nice convenience for the small one-off’s you’ve got going for sure.

Creating NativeWindows in AIR and displaying Flex content in them

Thanks to Daniel Dura for event getting me on the right path to making this work!

In AIR, you can create new popup windows buy using the NativeWindow object. This gives you the ability to do something like a fullscreen projector from your application. The concept rocks, but in beta right now, it’s not fully implemented and there are some hacks you have to do to get your content to show up in the new NativeWindow.

When I first started trying to load my custom component, I couldn’t see a thing even after using Daniel’s suggestion of adding it to the main application’s display list. It seems that percentage values were being ignored and the size of the canvas being added was being set to 0×0 because of it. That made it invisible obviously.

So, I figured maybe if we wrapped it in another container, set that containers width/height, maybe that would light things up. That *did* help, but I was still tracing out the window size and it was showing up at 400×200, which was wrong since I’d called maximize() on the window. Naturally, I’m thinking there’s an event to let us know when it’s fullscreen, and there is of course:

[as]flash.events.NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGE [/as]

You have to wait for that to fire, so you can get the correct window size. You use that to set the size of your container canvas, and then the children’s percentage settings work as you’d expect. At this point, I added my custom component (SlideShowViewer) to the container, but NOT to the NativeWindow’s stage just yet.

Now, adding it to the main application’s display list will initialize the component to work correctly (be careful not to add it to the main applications stage, use application.addChild())
[as]
mx.core.Application.application.addChild(container);
mx.core.Application.application.removeChild(container);[/as]

Daniel had added it first to a hiddenCanvas on stage, but I didnt’ want something just sitting around for this purpose and this works just fine.

Finally, add container to the NativeWindow’s stage and all should be good.

In the constructor:
[as]public function SlideShowWindow(initOptions:NativeWindowInitOptions)
{
super(initOptions);
addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGE, handleDisplayChange);
addEventListener(Event.ACTIVATE, init);
}[/as]

[as]protected function handleDisplayChange(e:NativeWindowDisplayStateEvent):void
{
container.width = width;
container.height = height;

slideShowViewer = new SlideShowViewer();
container.addChild(slideShowViewer);

mx.core.Application.application.addChild(container);
mx.core.Application.application.removeChild(container);
stage.addChild(container);

//trace(“DISPLAY CHANGE”, this.width, this.height, slideShowViewer.width, slideShowViewer.height);
}[/as]