attachMovie in Actionscript 3.0

You might have been wondering where attachMovie is gone in Actionscript 3.0, well no need to look for it because it's gone. In Actionscript 3.0 you will have to use another way to attachMovie clips on the stage at runtime, I am going to tell you all about it in that little tutorial.

Tutorial The default way

When you create a movie clip in an AS3 Flash file and select "export for actionscript you will notice that the Class and Base class are automatically filled up (see picture below), what does that mean in the AS3 world?

Flash automatically fills the Class name field with the name you gave to your movie clip, square in our case. Also since it is a movie clip that we are creating it automatically fills the Base class field with flash.display.MovieClip.

You don't need to worry about the Base class, that means that your movie clip is going to inherit of all the properties and methods assigned to the MovieClip class. In AS2.0 this was happening in the background but you just did not know about it.

More importantly you can also see that the class square has automatically been assigned to the movie clip, this is an important bit, it means that the compiler will be automatically looking for square.as (a physical class that you actually created) in the directory where your Flash file resides, if it can't find it it will create a default one for you. You don't need to create a square class if you have nothing to put in it.

Ok, our movie clip is now sitting in the library, we now need to create the code that will attach it on the stage, this is what we are doing below:

var mySquare:square = new square(); addChild(mySquare);

As simple as that, we create an instance of the square class (that will automatically be created by Flash or that you created yourself) using the new keyword and then we use the magic word addChild with the name of the square instance we just created. Notice that we are not using any linkage id anymore when we use addChild but instead we are using the name of the instance of the class.

That's it if you run your file you will now see that your movie clip is attached to the the top left corner of the stage.

Create your own class

If you want to create a little class for your square, it is easy, got in FILE > NEW and in the window select ACTIONSCRIPT FILE

Now you can create your class, a very simple square class could be like the one below:

package { import flash.display.MovieClip; public class square extends MovieCp{ public function square(){ trace("hello I am an instance of the square class"); } } }

Save the actionscript file as square.as in the directory where your FLA resides and here you go, Flash will now use that class instead of a default one.

Hopefully this little tutorial will be helpful for you :)

Read more...

Creating a Motion Tween

What exactly is a motion tween? First, let's imagine that you place a box on the table. Now, imagine, that after 10 seconds, the box suddenly disappears and magically appears again a few inches to the right of where it had been originally. Pretty strange isn't it?

Well, if you could rewind your past minute and watch it again, what will you see? You will see the box suddenly disappear and appear again in a different position with no cohesion or "animation" in the 10 seconds that elapsed. Here is where motion tweening comes in. With motion tweening, instead of the square disappearing and reappearing, you will instead see the square slowly moving itself to its new position - no disappearing acts at all! A motion tween, simply put, fills in the missing sequences between a starting position and the ending positions to create a full animation.

This tutorial will explain how to create a motion tween in Flash MX 2004, and hopefully you will understand more about motion tweens.

Learn How to Tween:
First, launch Flash MX 2004. Once the program loads, you should see a new, blank area called your workspace. If you do not see anything resembling a white box, create a new animation by going to File | Flash Document. There, you should be all set!
 
Now, click on the Rectangle tool from the set of icons on the left. The Rectangle tool icon looks like the following image:

Learn How to Tween:

• First, launch Flash MX 2004. Once the program loads, you should see a new, blank area called your workspace. If you do not see anything resembling a white box, create a new animation by going to File | Flash Document. There, you should be all set!
• 
  Now, click on the Rectangle tool from the set of icons on the left. The Rectangle tool icon looks like the following image:

• Once you have clicked the Rectangle tool icon, go to your drawing area, and draw a square by clicking your mouse and dragging - then releasing once you have a square. Try to ensure that your square is close to or hugging the left edge of your white drawing area:

• After the square has been drawn, take a peek at your timeline. Your timeline is the large area toward the top with numbers and small, vertical boxes. Notice, that at Frame 1, there appears a solid dot:

• The solid dot signifies that something substantial exists on that frame - Frame 1. In our case, the "something substantial" is the square you created! Now, look a little to your right and find the number 20. Right click directly at the box under the number label 20 and select "Insert Keyframe":

• Once you select Insert Keyframe, you will see another black dot appear in Frame 20. Don't worry - that's a good thing! Now, make sure you select the keyframe on Frame 20 by clicking it with your mouse pointer.

• With the keyframe selected, go down to your square again. Notice that your entire square is also selected. Now, press your Right arrow (on the keyboard) a few times to make it move a few centimeters from the right-most edge of your movie area:

• Now, with your mouse pointer, click on Frame 1 of your movie in the timeline. Notice where the square is! It is on the left. Without hesitation, now click on Frame 20. Notice that the square is to the right. Click anywhere else on Frame 10, and notice the square finds its way back to its original, left position.

• Enough of me chattering, It's time to motion tween! Click on Frame 1 and highlight all the frames between Frame 1 and Frame 20. While all the frames are highlighted, right click and select "Create Motion Tween:"

• If everything worked out well, your highlighted frames will take on a purplish color with a large arrow leading from Frame 1 to Frame 20. Click anywhere on the timeline, and notice that you can "track" the square's position through its 20 frame journey.

• Go to File | Save to save the animation. From there, go to File | Publish Preview | HTML. You should see your square gradually moving from the left toward the right.
  
  
  
  
  

Read more...