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.

Me... Posing?

 The other day I was reading a previous post. Someone suggested that I create a character using the pictures of myself in Poser. I decided to take on the challenge! I attempted to create a model in the past before, but it really never came out the way I wanted it to. Keep in mind, you can create a model that looks similar to you using one of two methods. The first method involves taking a front and side shot of yourself. You then place (or map) the images over a model and then manipulate the face by manipulating constraints in Poser. The second approach involves solely manipulating a model in Poser.

I ended up taking the "easy way out" so to speak by just manipulating the face. I think that this method is easier  than the other method. The following are a few reasons why I don't really care for the first method: 1) your images have to have good lighting, 2) you have to adjust the skin color of the model to match the face, 3) your image has to be a certain size or it will look too big or small on the model, and 4) you have to have a direct front and side picture; if you're off then your picture then it will reflect on the face.Of course I'm not saying that you shouldn't try the face mapping method. It takes time and patience to achieve a desired result Here's a little example of what this face mapping approach looks like in Poser if you're curious:

Moving on, I started by choosing and adding a model to my scene. I then selected the model's face and changed constraints on the figure. I had to frequently look at a reference picture to compare. I then added lights to the scene. I even added glasses on my face.

You're probably wondering what's going on with the hair?! Well, I was about to add hair on my figure when my program crashed on me. I had to restart from my last save--which didn't make me happy. Maybe there is a glitch in the program, but every time I tried to add new hair or change the materials, Poser crashed.Instead of starting over, I did what anyone would do...keep going. I decided to add a generic hair prop into the scene. It's not a perfect match, but I think I look okay with shorter hair, what do you think ;)?

 

Image Pan in Flash (AS3)

Well this week I'm finally moving away from 3D so I can discuss some interesting Flash techniques. As you already may know, you can create almost anything in Flash. It is an authoring tool that can be used to create websites, animations, and interactive applications. At my job, I  work a lot in Flash building educational simulations. In a previous project of mine, I had to develop an interactive simulations of the inside of one of the radar shelters. Before beginning any of the actual coding, I had to decide how I would capture the learners attention. So, I decided to give the learners the option of panning around the picture of shelter.  It would not only look interesting, but it would also simulate a person actually going inside the shelter and looking around. Below is a brief example of what the end product is:



Now, I had a few ideas on how I would approach the problem: 1) I could apply a mask over the picture so that a portion of the picture would show at a time, or 2) I could have the image move as the mouse moved; this way the picture would always stay in the main view of the stage. I tried both methods and I would have to say the second method works the best. The first method requires more steps, whereas the second method requires a few lines of code.

I was inspired by this code that I found in the actionscript forum. However, this particular post only focused on as2; my code needed to be in as3. So I took the basis of the code and I changed it around so that it will work for my project. You're probably wondering how to actually set everything up in Flash. The following paragraphs list the steps that I took to reach my end result. Keep in mind, this isn't the best way of achieving this, but it is one way:


Step 1: Import a picture (or create a vector graphic) that is larger than your stage size. For instance, my image is 800x1066 and my stage size is 480x800.

Step 2: Convert your image into a MovieClip and name your MovieClip in the properties panel. For my project, I named it MovieClipName, but you can name it whatever you want.

Step 3: Align you picture to the top left of your stage. Use the Align tab for precision.

Step 4: On a new layer, copy and paste the following in actions panel:

var myTimer:Timer = new Timer(100); // 1 second

//Add the timer event
myTimer.addEventListener(TimerEvent.TIMER, CheckMouse); 
function CheckMouse(event:TimerEvent):void{

//Specify your MCs X and Y position as the mouse moves
MovieClipName.x = (stage.mouseX / stage.stageWidth) * ( MovieClipName.width - stage.stageWidth) * -1;
MovieClipName.y = (stage.mouseY / stage.stageHeight) * ( MovieClipName.height - stage.stageHeight) * -1;
    }

//Starts timer
myTimer.start();

Step 5: Publish your document (CTRL+enter)


You should now have a panning image (it takes a few minutes to load). Be creative, you can do quite a lot with this technique.