The Old Frog Pond Tutorial (In 3.0)

Several years ago I co-authored in New Masters Of Flash Volume 3, and wrote a tutorial for it which extensively covered illustrating in Flash then bringing the graphics to life with code… adding the interactive layer.
It crossed my mind that I could port it to Actionscript 3.0 for fun! I really loved making it. The original Frog Pond was part of an unreleased portion of BlueSuburbia. BlueSuburbia is 100% vector art, and, as was the case with all the graphics in BlueSuburbia, it was drawn in Flash. The original tutorial (found in the book) is still an excellent walkthrough for how to approach creating graphics in Flash. Doing so is something I enjoy a lot because it saves a lot of time.
So here it is. The Frog Pond 3.0.


[swfobj src=”” height=”600″ width=”550″]
Click Here for full screen!

It’s got some fun tricks in it. Like making a cursor that follows the mouse with friction and rotation pointing in the direction of the mouse movement.
Like so…

//rotating follow mouse function
function mouseRotFunc(event:Event) {
	var clip:MovieClip = MovieClip(event.currentTarget);
	//check how far the movie clip is from the cursor
	//with a little friction added
	var disX:Number = (mouseX-clip.x)/6;
	var disY:Number = (mouseY-clip.y)/6;
	//calculate the angle in radians then convert 
	//it to degrees (plus 90)
	//so that the movie clip rotates
	var myRads:Number = Math.atan2(disY, disX);
    var myDegs:Number = Math.round(myRads*180/Math.PI)+90;
	//apply all of the above
	clip.x += disX
	clip.y += disY
    clip.rotation = myDegs;

You can also get the old (ActionScript 2.0/1.0) version here.

Fun stuff!

I’m a big fan of vector art. I think it animates beautifully, and is a pleasure to look at. I love the clean, smooth, cartoon style lines. Get good at it and you can add an amazing amount of detail to it. That’s when it truly shines! You can see your own science fiction, fantasy, rich environments, or other works of art come to life with however much scalable complexity you want. I never get tired of that concept.

…In the end, there’s nothing like talking to an artificial intelligence stuck in some giant machine animated with scrap metal, steam, valves, and many robot arms.
Like so…

Go ahead. You can talk to the bellow example!
Just turn it ON first. :)
[swfobj src=”” height=”500″ width=”800″]
Click here for full screen!

For a tutorial on how to set up your own ALICE Chatbot (Program E), and how to create/program the Flash front end, click here!