Archive for the 'CS3' Category

Automatic Bending Joints in As3 (Simple Bones)

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:

?View Code ACTIONSCRIPT
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;

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
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.

Accordion Meets XML

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?

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

source files for the xml’d accordion

?View Code ACTIONSCRIPT
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>

Flash Input Text Bug

The other day I was throwing an email form together really quickly, and decided to lay it out on the stage. So added 4 input fields, for name, email, subject, and message, and used those names as the instance names. then i put some labels in them, since i was planning on doing some nice ON_FOCUS text relacement. but before going much farther i needed to check to see if the alignment was right, and tested the movie.
At which point I quite unexpectedly got this error:

Error: Error #2078: The name property of a Timeline-placed object cannot be modified.
	at flash.display::DisplayObject/set name()
	at flash.display::Sprite/flash.display:Sprite::constructChildren()
	at flash.display::Sprite$iinit()
	at flash.display::MovieClip$iinit()

And I hadn’t even imported the form class I had used a dozen times before…

(more…)

Animator Class Enhancement

I don’t know how much exploration of the Animator class many people have done out there, but a current project seemed like a good place to experiment with it. I’m pretty impressed with Adobe’s implementation of it—though I’m far more impressed with the capabilities of E4X XML tools that make it possible—but some things are less then ready for prime-time.

Basically, flashes Animator.play()

Example

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

How it works

This Assumes the code is on frame 1 of the main timeline.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import fl.events.*;
import fl.motion.*;
 
//stage.frameRate = fps;
//trace(stage.frameRate);
stop();
 
 
/*************  this is the speed controller (or delay controller) *************/
var player:Timer = new Timer(33,30); // "33"/1000th of a second is pretty much 30 fps and the animation is "30" frames long
	player.addEventListener(TimerEvent.TIMER, playAnimator);
	player.start();
 
function playAnimator(e:TimerEvent)
{
	if(e.currentTarget.currentCount < 30){
		ner_animator.time = e.currentTarget.currentCount;
	}else{
		ner_animator.stop();
		ner_animator.rewind();
		player.reset();
		player.start();
	}
}
 
/************* speed controlled animator (taken straight from the clipboard but with the Animator.play() removed *************/
var ner_xml:XML = <motion duration="30" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
	<source>
		<source frameRate="10" x="95" y="114" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" instanceName="ner" symbolName="Symbol 1">
			<dimensions>
				<geom:Rectangle left="0" top="0" width="42" height="42"/>
			</dimensions>
			<transformationPoint>
				<geom:Point x="0.5" y="0.5"/>
			</transformationPoint>
		</source>
	</source>
 
	<keyframe index="0" tweenSnap="true" tweenSync="true">
		<tweens>
			<simpleEase ease="0"/>
		</tweens>
	</keyframe>
 
	<keyframe index="29" tweenSync="true" x="253"/>
</motion>;
 
var ner_animator:Animator = new Animator(ner_xml, ner);
//ner_animator.play(); // removed because we play it with the new player function

So as you can see, it’s just replacing whatever the built in play() function does (likely some kind of onEnterFrame event) with a Timer driven, and thus framerate independent animation. Which allows old slow computers to keep things moving more like the Tween or Tweener class, frames will be skipped to keep the timing more or less on track (as much as possible).

I’m planning on releasing an class that extends the Animator class built into flash—or possibly building a new one from scratch—that will include this speed feature as well as other enhancements I’ve required in the last project (also coming soon).