Blowing Through Lines

Stumbled across this Quick Look plugin the other day while learning Objective-C, and while it previewed and code colored my .h and .m files, it was a bit disappointing that it didn’t work on .as files.

So not quite as simple as adding .as to the info.plist—what I’ve done is add public.archive.applesingle to the list of UTI types. This is a bit of a hack, because Adobe doesn’t export a profile UTI with .as files. So if they do start doing that someday, this may cause problems, but in the meantime, it’s the simplest way to get quicklook working for .as files.

Download Quick Look with ActionScript Plugin

I don’t know where the capitalization came from, but it’s such a simple API for anyone who’s happy with AS3 (is there anyone who isn’t?) that FIVe3D worth the challenging finger-work. I made this demo in about 3 hours total, it draws bitmaps, and adds them to Sprite3Ds, and mimicks what we’ve been working on for 2 months in Papervision3D (I’ll definitly have a link to that when its fully launched).

For a great many simpler 3D applications, I think FIVe3D is the way-to-go, but Papervision3D still does have an edge in speed (when properly optimized that is) if dealing with more then 20 or so planes.

One quirk of FIVe3D that I initially didn’t get, was that the order of my addChild statements determines what shows up on top of what, not the Z value of the sprite, so included with this source is a handy depth sorter loop, that will work with any 53D setup.

FIVe3D Test Source

Also modified it a little so that height and width could be stored in the sprite3D class, i know bad me, but until i get my head around Mathieu’s version of Matrix3D. That ugly blinking plane on the right side is actually a series of bitmapDatas, that are playing back (like cached animation) that I learned from John Grden a few weeks ago. I’m working on my own version of a class to automatically create bmp animations from a timeline swf, unless his goes open source…

Finally had an excuse to make some connected springs, ala the Visual Thesaurus. This was the last of the tests before realizing that the project would be simpler.

Double-click a dot to add a child dot, or click and drag any dot to move it.

Some code will be on the way in a bit.

Update

Last edited by nilloc on Wednesday, April 1, 2009

Oh yeah, this is kinda late (my how the last 7 months flew by), but here’s the actual project in action:
Lil’ Wayne’s World

Oh yeah and here’s the source for the simple spring example above (AS2):
blowingthroughlinescom_spring_physics

This was part of a Rock’em Sock’em Robot game& 8212;for an internal sales project no less! At any rate the budget was good, but the timeline was a little tight, and I was still getting my head around AS3 and the new Flash 9 features.

So I had this idea:

I’m working with a bunch of designer’s who are really good with illustrator, and keyframe animating, but don’t have the time to animate all the movements (each head, body, upper arm x2 lower arm x2, legs, hands, feet… well you get the idea). So I needed a way to reduce the number of animations that the designers would be needed for, but also not create too many Tweeners or other hard coded animation solutions. I really needed bones, but those don’t seem to be arriving for a while, so the next best thing was automatically animated elbows (and knees). Fortunately for me the illustrator I was working with designed the robot’s arms and legs with even length upper and lower lengths so I could do some trig and get this:

1
2
3
4

var theta:Number = Math.acos((distance/2)/limbL)*180/Math.PI;
 
this.limb.rotation =  baseRotation - theta;
this.omoLimb.rotation = theta * 2;

Click and drag the hand or foot to see the automagic joint rotation

AS3 Joint class source file

Right now it’s limited to even length bones, but my little brother with the physics and math degrees, says he has a better equation, so as soon as I have time I’ll update the classes. A public SVN repository is in the works too, stay tuned.

So a reader asked how to implement our accordion script using XML to populate it, and I think the results aren’t half bad. I’m not sure what he meant by a cervical shaped accordion though… Circular maybe? hopefully?

source files for the xml’d accordion

private function init()
{
	var request:URLRequest = new URLRequest("wp-content/xml/images.xml");
	loader = new URLLoader(request);
	loader.addEventListener(Event.COMPLETE, loadComplete);
}
 
private function loadComplete(evt:Event)
{
	data = XML(evt.target.data);
	trace(data.panel.length());
 
	accord = new accordion(500, 400, data.panel.length(), 20);
 
	for(var i:int=0; i < data.panel.length(); i++)
	{
		var panel:MovieClip = new NavPanel(data.panel[i].name);
		var contents:MovieClip = new ImgHolder(data.panel[i].img);
		accord.addPanel(panel, contents);
	}
	addChild(accord);
	accord.openPanel(1);
}

<?xml version="1.0" encoding="UTF-8"?>
<panels>
	<panel>
		<name>panel one</name>
		<img>img/1905143678_218d1aa13a.jpg</img>
	</panel>
	<panel>
		<name>panel zwei</name>
		<img>img/1904306625_fa9cf2cd33.jpg</img>
	</panel>
	<panel>
		<name>panel tre</name>
		<img>img/1904436509_2266d2daf2.jpg</img>
	</panel>
	<panel>
		<name>panel quattre</name>
		<img>img/1904437975_441fec52af.jpg</img>
	</panel>
</panels>