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.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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>

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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…

Solution

The Flash IDE has some reserved instance names stored in it that will give you immediate warnings when you try to use them (try entering name txt) name isn’t one of the reserved words, but—at least for input text fields—it should be.
Seems like they could have saved users some time and frustration by reserving that word in the IDE so that it can’t be entered.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Basically, flashes Animator.play()

Example

How it works

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

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).

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.