Orbital Challenge: Solution!

The Orbital Challenge was a big hit. Thanks so much for all the submissions. Take a look inside to see the solution and find out if you are the random winner!

The Challenge

See the Solution in Action

GreenSock’s CirclePath2D to the Rescue

A lot of you super smart people opted to use brilliant math and trigonometry. Others actually got this to work fairly well with timeline animation or a mix and match of basic TweenLite tweens.

By using GreenSock’s CirclePath2D, people of all skills will be able to bang out complex animations in no time. The challenge was 90% based off of code that was pasted from the online documentation.

Here is a little description of CirclePath2D from the docs:

A CirclePath2D defines a circular path on which a PathFollower can be placed, making it simple to tween objects along a circle or oval (make an oval by altering the width/height/scaleX/scaleY properties). A PathFollower’s position along the path is described using its progress property, a value between 0 and 1 where 0 is at the beginning of the path, 0.5 is in the middle, and 1 is at the very end of the path. So to tween a PathFollower along the path, you can simply tween its progress property. To tween ALL of the followers on the path at once, you can tween the CirclePath2D’s progress property. PathFollowers automatically wrap so that if the progress value exceeds 1 or drops below 0, it shows up on the other end of the path.

Since CirclePath2D extends the Shape class, you can add an instance to the display list to see a line representation of the path drawn which can be helpful especially during the production phase. Use lineStyle() to adjust the color, thickness, and other attributes of the line that is drawn (or set the CirclePath2D’s visible property to false or don’t add it to the display list if you don’t want to see the line at all). You can also adjust all of its properties like radius, scaleX, scaleY, rotation, width, height, x, and y. That means you can tween those values as well to achieve very dynamic, complex effects with ease.

AS3 Code

You can paste this code into any FLA with access to the GreenSock library

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import com.greensock.motionPaths.*;
import flash.display.Shape;
import flash.events.MouseEvent;

TweenPlugin.activate([CirclePath2DPlugin]);
//only needed once in your swf, and only if you plan to use the CirclePath2D tweening feature for convenience;

//generate a circle
var myShape:Shape = createCircle(16,0x9EFB00);

//create a circle motion path at coordinates x:275, y:175 with a radius of 125
var circle:CirclePath2D = new CirclePath2D(275,175,125);

TweenMax.to(circle, 0, {tint:0xff0000});

TweenMax.to(circle, 4, {scaleX:.2, scaleY:.2, repeat:-1, yoyo:true, ease:Linear.easeNone});

//show the path visually by adding it to the display list (optional)
this.addChild(circle);

var circleTween:TweenMax = TweenMax.to(myShape, 4, {
circlePath2D:{path:circle, startAngle:0, endAngle:360, direction:Direction.COUNTER_CLOCKWISE},
ease:Linear.easeNone, onComplete:playAgain, onReverseComplete:playAgain});

function playAgain() {

	circleTween.currentProgress = int(circleTween.reversed);
	circleTween.resume();

	//the above 2 lines written out long-hand

/*if(circleTween.reversed){
	circleTween.currentProgress = 1;
	}else{
	circleTween.currentProgress = 0;
	}
	circleTween.resume();*/

}

function createCircle(size:Number, color:uint=0xFF0000):Shape {
	var s:Shape = new Shape();
	s.graphics.beginFill(color, 1);
	s.graphics.drawCircle(0, 0, size);
	s.graphics.endFill();
	this.addChild(s);
	return s;
}

stage.addEventListener(MouseEvent.CLICK, reverseTween);

function reverseTween(e:MouseEvent):void {
	circleTween.reversed = ! circleTween.reversed;
	circleTween.resume();
}

Winners

First To Submit: Jan Jorissen
Here is his tutorial that I featured in the video: Drawing a Perfect Circle with the curveTo() Function. Jan is a master AS3 developer, check out his blog for lots of groovy techniques.

Random Winner: Adrian Parr

Thanks everyone for submitting. It was a lot of fun seeing all the different ways you solved this challenge.

Download Source Files Shown in Video

SNORKL-tv_OribitalChallenge_CS4

Official Docs for MotionPaths Package.

-Carl