Archive for the ‘ AS3 ’ Category

Xray – Yes it does AS3 :)

Well, for a while now, people have been asking me about using Xray with ActionScript3, so I thought I’d clear up the confusion with one post about it.

Yes – there is a version for AS3.  That’s the good news.  The bad news is, it doesn’t have all the bells and whistles that AS2 version had.  It DOES do introspection of your objects at runtime with a snapshot, and the logger is as strong as ever.  There’s also a Flex specific Xray class that works rather well.

The nice thing is, the logger and Xray work the same in either the Flash IDE, pure ActionScript project, Flex application or Air application.  It doesn’t have an AS3 component yet, but it works very easily with a couple lines of code just the same way.

Let’s take a look at doing 2 things: 1)  setting up an Xray instance for introspection and 2) just using the logger.

Xray Instance

To create an instance of Xray, you simply add the import to your class, then create an instance:

import com.blitzagency.xray.inspector.Xray;

// later in your property declarations:

public var xray:Xray = new Xray();

addChild(Xray);  // you have to add it to the stage in a pure ActionScript application or Flash IDE app – thanks Dave!

// for you Flex users – it works for Flex2 or Flex3 or Air

import com.blitzagency.xray.inspector.flex.Flex2Xray;

public var xray:Flex2Xray = new Flex2Xray();

Yay me!  we’re done and you can use the Flex Xray interface to take a look at your application.

Xray’s Logger

Xray’s logger has the same log levels that most do these days: debug, info, warn, error and fatal.  To create an instance of the Xray logger, you simply add the import, then create an instance like so:

import com.blitzagency.xray.logger.XrayLog;

// later in your property declarations:

public var log:XrayLog = new XrayLog();

// later, when you want to log something:

log.debug(“StringMessage”, object [, object, object...]);

log.info(“StringMessage”, object [, object, object...]);

log.warn(“StringMessage”, object [, object, object...]);

log.error(“StringMessage”, object [, object, object...]);

log.fatal(“StringMessage”, object [, object, object...]);

You pass a string message as the first argument, then send as many objects as you like after that.  The output is nice in that it includes a time stamp as well as the class and line number that made the log call:

(2793) com.electricsheepcompany.aspen.spaces::SpaceCreator/handleGroupLoaded()[/Users/NeoRiley/Documents/Infrared5/clients/clientName/source/johnBranch/src/1.0_jgrden/src/main/flex/com/clientName/clientAppName/spaces/SpaceCreator.as:102
GroupTest: group load complete

As you can see, you get the calling Class fine and line number. Nice huh?

Where do I get the code?!?

Glad you asked!  It’s hosted on Google code and you can check it out with any SVN client at this URL:

http://osflash-xray.googlecode.com/svn/trunk/

And the snazy Xray Interface app??

You can download the SWF based Xray app here

The future of Xray?

As usual, I’m sure Xray’s development will be driven by need on projects and by people who request features.  If anyone cries loud enough, I’m sure I’ll do what I can.  As I come to need more features that AS2 used to support, I’ll get around to implementing them.  But for now, it works well in AS3, and does what I need it to do, which is introspection and the ability to modify properties at runtime to see what’s going on with the application.  Much of my work these days is being a consultant on new gigs every couple of months and Xray really helps me cut through the felgercarb in mere sentons.

Also, there’s XrayViewer by Marc Hughes

Marc’s the one that did the work on the filter component for Xray’s log output, and came up with a really VERY cool AIR app that lets you load a SWF and inspect it ;)

http://rogue-development.com/xrayviewer.html

Scrolling automatically to the bottom of a textarea control in Flex

This is more for archive sake, but this did the trick ;)

http://butterfliesandbugs.wordpress.com/2007/08/20/scrolling-to-the-bottom-of-a-container-or-textarea-automatically/

The real trick is doing it in the valueCommit handler, not the change handler (which is where I tried originally)

microsoft: Did they have a hand in it? I’ll say…probably.

I was just heading over to Hank’s article on the situation with EcmaScript 4.0. The short of it is: it’s been drop kicked for good, leaving Adobe with decisions to make. As you read, Adobe had put alot into being standards compliant with AS3 and for obvious good reasons. The speculation is, however, that microsoft has had something to do with it’s death. As I read through Hank’s observations, I have to say, it seems pretty obvious, but I’m sure there are other factors. When you consider Silverfish (microsoft’s attempt at being a flash competitor), this makes almost too much sense.

One of the replies to the post suggested that Adobe seriously consider adopting haXe. I have to say, I see some real reason behind that at this point. Its already open source and has a great community behind it.

What’s interesting to note is that, when Nicolas emailed the open source flash list and introduced the concept of haXe (over updating MTASC to be AS3 compatible – thus creating his own language), I *got* the concept and even understood his reasoning, but didn’t necessarily feel like this would happen like it did (ie: es4 being tossed out). I literally thought it was a standard, but apparently, I wasn’t paying attention. Looks like Nicolas was a bit of a visionary I’d say, and now we’re actually living out what he suggested could happen.

And dood, that’s some serious apples right there – write your own language?? are you kidding me? And there’s only 2 people I’ve ever told on this blog who have big apples :)

Anyway, some interesting developments for sure are coming down the road – it’ll be very interesting to see what pans out. Personally, I’d love to see haXe adopted and basically hand microsoft their ass later on. Who am I kidding anyway, WHATEVER Adobe does to call microsoft’s move, I think i’ll be right there to support em’.

What’s even funnier is: it seems that both microsoft AND apple have it in for Adobe and Flash – what the hell gives with Apple and iPhone/iTouch not supporting Flash? The funny part is that Job’s used to be the leader of an underdog with ideals that matched his gear, and now he’s showing signs (and getting reactions btw) of the company he sought to dethrone (yes, that would be microsoft). Remember this ad? He might soon find himself as “the man behind the glasses”

PS> if you’ve been emailing me or im’ing me, and I haven’t replied, it’s because I finally contracted pneumonia – Dr says “you have a touch of it” – whatever that means. I feel like crap. But this got me mad enough to sit up in bed and say something

BaywoodGallery – a little somethin’ for my parents

You know it’s pretty sad when your parents have to beg. But it’s shameful when they’re begging you for work you do on a daily, if not a nightly basis!

So, since they’re heading out to do a show in California in a week, I had to get something out there. I’d intended to just throw up another iTunes coverflow app, but I just couldn’t bring myself to do it. Then I thought that doing a triple carousel viewer would be cool, but thought it would be 3x’s as bad as all the other carousel 3D gallerys that keep hitting the web. Don’t get me wrong, it’s a fine way to present gallery’s, I just wanted to do something that was interesting and possibly different.

I’d had this idea to do an “outer gallery” for a while, so this was the perfect time to flush it out a bit. The concept is that instead of being an “inside gallery” that you walk through, this is an “outer gallery” that conforms to the way you might rotate it around for the best view. You’ll notice that the paintings have a particular rotation that would indicate the best viewing angle. As you rotate around, other paintings and pictures are revealed and are already in the rotation you’re currently at.

One thing that makes this work is that Z rotation never happens. You can invert the model for sure, but it never “rolls” on the Z axis, and that keeps the model at angles that make sense as you rotate around. It’s not a “new” way, it’s really very close to how 3D studio Max or Maya handle the free rotation – just without the ability to roll :)

But because of limiting that Z roll, the model never gets to a rotation that’s completely out of control or upside down and controlling it with the mouse seems pretty intuitive to even the lowest end users I’ve tested with (you know, graphic artists, and lead singers). I’m just kidding, I love graphic artists.

It’s not perfect, and I would like to clean up a few things. I’d really like to flush out this concept further, but I’m pretty happy with how it turned out initially. All told, it’s 3340 polygons and runs pretty smoothly. The biggest hurdle was creating an intuitive structure for this and then dealing with planes sitting over the top of the center model and fixing sorting issues. What keeps this demo running smoothly is the fact that I don’t have to rely on some run-time tessellation. Because of that, I have much more head room in terms of # of poly’s in the scene.

Papervision3D – fixes to VirtualMouse, Interactivity and using UIComponents

First off, I’ll just say that this kind of work is enough to cause you to go barking mad. Just set yer hair on fire and start running the halls naked now.

I’ll start off by archiving what I found, then go into “best practices” on how to create a plane using a movieclip that has UIComponents in it.

Findings:

  • VirtualMouse has a weird issue when stage quality is set to anything other than LOW and you use coordinate conversion on the values passed in. When set to LOW, it works as expected, but when set to any other setting, the UIComponents only lit up when you moused over the label of a component, not the drawn area and the basic movieclip I had in my test with rollover events didn’t even fire. Only when I moved the movieclip to 0,0, then did getObjectsUnderPoint did it work perfectly under all quality settings. Oye – I don’t know why I’m afraid. But in testing in a pure flash IDE test, quality settings didn’t cause any issues with getObjectsUnderPoint() – so, it’s obviously a VirtualMouse issue.
  • When you have a scrollRect defined on a movieclip, getObjectsUnderPoint() does not return any values IF you move the movieclip THEN call getObjectsUnderPoint. Only AFTER the displayList is updated does it work with the movieclip moved. That kinda sucked for what I had to accomplish with PV3D unfortunately. But fortunately, a new feature JUST implemented by Carlos makes this a non issue altogether. I know, you’re asking, why in the WORLD would you be doing such a thing, but it’ll make sense later on as I explain how to use UIComponents with movies used for materials.
  • You might think that if a movieclip/sprite is invisible (visible = false), that it’s not being rendered and therefore, you’re saving on the CPU – this maybe true to a certain extent of course, but if you right click and show redraw regions in the flash player, you can clearly see that if there ARE any visual changes like an animation or rollover state in your movieclip/sprite, you’ll see a redraw region show up right where the animation/visual change is taking place. Now, I’m not at all sure what this means in terms of how much processing is taken up because of it, but it IS causing the flash player to consider that are for SOME type of work.

Now, on to why I’m actually writing this post: How to use UIComponents in materials used on 3D objects with Papervision3D.

Initially, we have to realize what’s happening with UIComponents and what the initial problems are. The UIComponents are, when first added to a movieclip have a certain size, but it’s not the expected/anticipated size you might see when you add them to the Flash IDE stage at design time. What you see is a nice rendered component at design time, but at runtime, if you have *not* added the components to the displayList, you won’t see anything but the component labels, and they’ll be a size you didn’t anticipate.

This is simply because they don’t initialize until ADDED_TO_STAGE event is fired and the Stage property is set. So, for Papervision3D, this poses some problems right off the bat, since we don’t really want the movie clip and components sitting on stage AND wrapped around our 3D object. This means we have to use MovieMaterial and add the movieclip to the stage. Oh, and by the way, there’s another issue – timing. You *can* create movieclip, put it on stage, then create the MovieMaterial and just go on down the list, but there will be the possibility that the user would see this until the components are initialized AND another render has taken place AND the material is told to update:

One thing you’ll notice in this screenshot is that there is a black are at the bottom and the original movieclip is squished. That’s because the original size of the components is much different than after their initialized. In the screen grab below, I’ve put all of the Flash IDE UIComponents on stage and drawn a green bounding box before they intialize and a white bounding box after they initialize. You can see that their sizes change quite drastically and because my checkbox and radiobutton are at the bottom of the movieclip material, the dimensions of the movieclip are thrown off:

You can see in the pic above that checkbox and radiobutton are much taller than their final render and that textArea really never reflects what you visually see. I’m not sure what’s causing it’s size to remain that way, but it is. And the progressbar, slider and color picker don’t have any visual assets until their initialized as you can see.

Ok so what’s the solution to all these issues?!?! I’ll just step down the list in order, post the code and you can play ;)

  • Create your movie clip and then move it off stage where it can’t be seen. In the code below, I move it to -10000. I did some speed tests and it turns out that just simply setting x/y values is faster than using coordinate conversion methods. So, virtualMouse will move your movie to 0,0, then get the objects it needs, then move it back to it’s original location. Since this executes between frame renders, it doesn’t impact the displayList and you never see it happen.
  • Create a method like parseComponents() below. The idea is that you go through all of your components, addEventListeners to when they’re added to stage, THEN when they’re all added, create the MovieMaterial and Plane objects.

[as]

// import UIComponent:
import fl.core.UIComponent;

// later…

var cls:Class = getDefinitionByName(“Mc”) as Class;
movie = new cls() as Sprite;
movie.x = movie.y = -10000;

parseComponents();
addChild(movie);

protected function parseComponents():void
{
uiCounter = 0;
for( var i:int = 0; i<movie.numChildren; i++)
{
var mc:DisplayObject = DisplayObject(movie.getChildAt(i));
if( mc is UIComponent )
{
mc.addEventListener(Event.ADDED_TO_STAGE, handleComponentReady, false, 0, true);
uiCounter++;
}
}
trace(uiCounter);
}

protected function handleComponentReady(e:Event):void
{
var uiComponent:UIComponent = UIComponent(e.currentTarget);
uiComponent.removeEventListener(Event.ADDED_TO_STAGE, handleComponentReady);
uiCounter–;
if( uiCounter == 0 ) createPlane();
}
[/as]

NOTE: if you’re working in FlexBuilder or Eclipse, you’ll need to add the fl classes so that you can add the UIComponent import

  • Now, after we’re sure all components are loaded, create the MovieMaterial and apply it to your 3D object and pass one more NEW argument: Rectangle:

[as]
protected function createPlane():void
{
movieMat = new MovieMaterial( movie, false, true, false, new Rectangle(0,0,256,256) );
movieMat.oneSide = false;
movieMat.setQuality(StageQuality.HIGH, stage, true);
movieMat.interactive = true;
movieMat.smooth = true;

plane = new Plane(movieMat,256,256,6,6);
plane.yaw(-20);
view.scene.addChild(plane);
}[/as]

Now, one extra cool thing to note here is, that the checkbox and radiobutton are STILL to low and actually cause a hairline black area to be drawn on the material. So, to be even MORE dogmatic about making sure our material stays the same dimensions, you can now pass in a rectangle object to the MovieMaterial. The great thing about this is, it’s used that the time the bitmapData object is created from the source movieclip. Soooooooooooo the scrollRect issue I mentioned earlier is no longer an issue, and you don’t have to incure that cost on your movieclip just for the sake of making sure the UIComponents don’t have inappropriate relations with your dimensions :)

[kml_flashembed movie="http://www.rockonflash.com/demos/pv3d/ComponentMaterialTest.swf" width="550" height="400"/]

Get the source

Final code:
[as]
package
{
import fl.core.UIComponent;

import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageQuality;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.utils.getDefinitionByName;

import org.papervision3d.cameras.CameraType;
import org.papervision3d.materials.MovieAssetMaterial;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
import org.papervision3d.view.stats.StatsView;

public class ComponentMaterialTest extends Sprite
{
public var mc :MovieClip;

public var view :BasicView = new BasicView(0,0, true, true, CameraType.FREE);
public var plane :Plane;
public var mat :MovieAssetMaterial;
public var movieMat :MovieMaterial;
public var movie :Sprite;
public var uiCounter :Number = 0;

public function ComponentMaterialTest()
{
super();
addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
}

protected function init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
stage.quality = StageQuality.MEDIUM;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

var cls:Class = getDefinitionByName(“Mc”) as Class;
movie = new cls() as Sprite;
movie.x = movie.y = -10000;

parseComponents();
addChild(movie);

view.camera.zoom = 1;
view.camera.focus = 1100;

addChild(view);
addChild(new StatsView(view.renderer));
addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
}

protected function createPlane():void
{
movieMat = new MovieMaterial( movie, false, true, false, new Rectangle(0,0,256,256) );
movieMat.oneSide = false;
movieMat.setQuality(StageQuality.HIGH, stage, true);
movieMat.interactive = true;
movieMat.smooth = true;

plane = new Plane(movieMat,256,256,6,6);
plane.yaw(30);
view.scene.addChild(plane);
}

protected function loop(e:Event):void
{
view.singleRender();
}

protected function handleComponentReady(e:Event):void
{
var uiComponent:UIComponent = UIComponent(e.currentTarget);
uiComponent.removeEventListener(Event.ADDED_TO_STAGE, handleComponentReady);
uiCounter–;
if( uiCounter == 0 ) createPlane();
}

protected function parseComponents():void
{
uiCounter = 0;
for( var i:int = 0; i<movie.numChildren; i++)
{
var mc:DisplayObject = DisplayObject(movie.getChildAt(i));
if( mc is UIComponent )
{
mc.addEventListener(Event.ADDED_TO_STAGE, handleComponentReady, false, 0, true);
uiCounter++;
}
}
trace(uiCounter);
}
}
}
[/as]

Online Papervision3D courses – Optimization techniques

*UPDATE*
Apparently adobe scheduled maintenance this saturday during the scheduled time for the course (which blows tremendously -they could have asked if anyone was doing something during those hours) I guess it could be argued that no time is a good time, but I’d argue back that midnight would be 90% better option I’m willing to bet… Just sayin’

Anyway, we ARE going to reschedule it asap (like in the next week or 2), and RMI is extending the viewable recording of the session to 2 months for the inconvenience to the students. Sorry for the hassle guys

I’m sorry I’m late on announcing this, I’ve been super busy with this current client and trying to get everything else done for the course has just consumed all motor skills and brain cells ;(

I’m taking a break from traveling for a while, so RMI has set me up with some on-line course time and this weekend (saturday), I’m going to pouring over the Winterwonder Land application and talking about optimization techniques for Papervision and the flash Player in general.

In the course files, I’m including nearly all the demo’s I used for the classes I taught in person as well as the source for Winterwonder Land’s animation engine etc.

If you’re interested, you can sign up over at RMI’s site:

http://www.richmediainstitute.com/node/142

Hope to see you there!

Well, Go3D is official – We need base 3D classes that all engines can use

What turned out to be just something to finally scratch a strict typing itch i’d had with tweening has no become and full blown side project. Not only did Moses get me started, but Graeme Asher and John Lindquist fueled the fire as well. Graeme’s been working on Tween3DCamera and John’s been helping me add some other properties like scale/scaleX/scaleY/scaleZ to the property types as well as a small refactor.

If you’ve tried Go3D lately, you’ll notice that I had put static property methods (yeah kinda weird name, but that’s what they do ) in Go3D.as, but have now moved them to Value.as in the properties directory. It seemed to make alot more sense with what their function was, and Go3D.as has been deleted for now since it serves no purpose.

check out the project here:
http://code.google.com/p/goplayground/wiki/JohnGrden

svn:

http://goplayground.googlecode.com/svn/trunk/JohnGrden/GO3D

One thing I added just today was the ability to pass a tweenTarget for a 3D object. If you look at the code samples below, you can now just pass a target and it’s position and rotation will be used to tween to. You can also use constants to just tween to position or just rotation. You can also pass custom properties for it to use with the target. The swf demo I’ve posted in the playground basically tells the Cylinder object to use the properties of the orange sphere.

[kml_flashembed movie="http://www.rockonflash.com/papervision3d/Go3D/sphereAnimation/SphereAnimationsGo3D.swf" width="500" height="400"/]

[as]
protected function tweenAll(e:Event=null):void
{
resettargetObject();
tween = new Tween3D(targetObject, [Value.tweenTarget(middleObject)], duration, Easing.easeOutElastic);
tween.start();
}

protected function tweenXYZ(e:Event=null):void
{
resettargetObject();
tween = new Tween3D(targetObject, [Value.tweenTarget(middleObject, Value.XYZ)], duration, Easing.easeOutElastic);
tween.start();
}

protected function tweenCustom(e:Event=null):void
{
resettargetObject();
tween = new Tween3D(targetObject, [Value.tweenTarget(middleObject, [Value.X, Value.Y])], duration, Easing.easeOutElastic);
tween.start();
}

protected function tweenRandom(e:Event=null):void
{
tween = new Tween3D(targetObject, [Value.x(getRandom()), Value.y(getRandom()*.5), Value.z(getRandom())], duration, Easing.easeOutElastic);
tween.start();
}
[/as]

Value.tweenTarget() returns an array of Go3DProperty objects that Tween3D expects to get to do the tween. It’s basically a convenient, yet strictly typed way of doing things. I’d say we’re having as much fun as untyped objects at this point – Even more probably ;)

Note:
I’ll be teaching on Go3D at the Toronto class in 2 weeks, and if you haven’t signed up yet, I seriously suggest getting out there asap – seats are filling up

Now, the reason I say we need base 3D classes for all 3D engines to use is because in a situation where I want to open this up for Sandy3D or Away3D or any other 3D engine that uses x/y/z/rotationX/Y/Z/scaleX/Y/Z, I’d have to write specific classes tailored to their api and object types.

We need to have one set of common 3D classes that define the atom level of a 3D object with the main 10 properties:

x, y, z, rotationX/Y/Z, scale, scaleX/Y/Z

So, I’m going to be starting such an effort and see how that pans out ;) It makes too much sense especially when you consider any project that has to work with a 3D engine, but isn’t integrated with the code base. ASCollada being one, and Go3D being another.

I’d love to hear people’s thoughts on this matter.

Follow

Get every new post delivered to your Inbox.

Join 793 other followers