Thursday, March 22, 2012

Tweening in AS3

I have started developing small apps over the past couple of weeks using AS3. To my surprise, it is a lot simpler than I thought it would be. This is mainly because Flash 5.5 offers the tools needed to export applications to Android or Apple devices. Luckily, all I have to do is adjust my publish settings and I practically have an application made! One of the biggest issues that I've seen with exporting my old Flash movies to my tablet is the animations. My keyframed animations really bogged down my tablet's performance (the program also crashed a couple of times too). So, I decided to read up on this issue. Upon reading up on the topic, I realized that I was treating my tablet device like a computer. You cannot do this when developing apps. Mobile devices and tablets, simply don't have the same processing power as a computer. So, I had to remove my keyframed animations and use code instead.

Now, I am very accustomed to using keyframe animation, but I was open to coding my animations as well. I extensively used the Republic of Code site to find out more information about the Tween class. A tween is basically an increase or decrease of a property over a set time period. This change over time creates the animation.Once I replaced all my animations in my timeline, I then republished my movie and loaded it onto my tablet. It worked out successfully.

Here's a brief look at what I did:



This is the code that I used to achieve the animation. It's pretty short and to the point:
stop();
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

//Creates a new variable to change the transparancy of the movie clip.
var myTween:Tween = new Tween(AnimationName, "alpha", Strong.easeIn, 1, 0, 2, true);

//Creates another variable to have the movie clip move off screen.
var myTween2:Tween = new Tween(AnimationName, "x", Strong.easeOut, AnimationName.x,AnimationName.x-350, 5, true);
By the way, I'm using the same methods for my final project that focuses on building ethical competence. I was tempted to post the animations that I've created for this project here, but I decided to hold off for now. I'm not quite done with it and I think you'll really enjoy it.  In any case, I hope to be able to use this technique to for all of my projects so that they can be accessible on practically any device.

1 comment:

  1. Dee again...

    That's simple and cool! Have you ever looked at Codebaby. It's a simulation software...not sure if it's free but it makes some pretty cool simulations. I wish I had time to play with these things. I haven't touched simulations since Dr. Smith's class and that darn gazebo! lol!

    ReplyDelete