Animation basics of ActionScript 3.0-1

Author: egoldy nature: Translation Views: 23289 published at: 13:23:14

Statement: This article is the ActionScript of the unpublished Keith Peters.
3.0 making things move Chinese sample chapter. The second chapter in the book. Webstudio will provide forum Forum support when publishing the Chinese version. Please indicate the source for reprinting. Thank you!

Content of this Chapter 
1. animation Basics
2. sprites)
3. Class and Object-Oriented Programming (OOP)
4. User Interaction

If the first chapter is an animation overview with a somewhat philosophical significance, this chapter is a series of technical overview about the ActionScript animation, especially the ActionScript 3.0 (as 3 ). This chapter covers animation loops, video editing and sprites, and interaction with users. Most of what it provides is what you need. It is used to understand the ActionScript Technology in the following book.
2.1 animation Basics 
Before starting, let's take a quick look at the content described in Chapter 1.
An animation is generated by a frame, and each frame stores several different dynamic images.
Each frame of a frame-by-frame or tween animation contains a description of an image or a pair of images.
A dynamic animation contains an initial description of an image and a rule for changing the first frame of description.
Most of the content in this book focuses on the rules of dynamic animation. It provides a technical list to change the image description to get realistic animation results. In this chapter, you will understand how to initialize the architecture, how to apply rules on each frame, and how to integrate them. You can create a large number of application examples.

2.2 about The ActionScript version 

The original version of this book was published shortly after the release of Flash 8. Although I was impressed that it was designed as the ActionScript 2 syntax, I decided to avoid many obscure OOP theories as much as possible. However, there are actually a lot of code that can be directly placed in the time line for use. The results show that there are some confusions of ActionScript 1 and 2.
However, in the second version of this book, I decided to create a Flash 9, as3 video in at least three ways based on Flash 9 and as 3.

Flash CS3 IDE (Flash CS3 user environment)
Flex builder 2
Free flex/as 3 command line compiler and flex 2 software development kit (Flex 2 SDK ).

In this Flash CS3 IDE, writing as 3 on the time line is still possible. At least three as files are required for the other two methods. To maintain consistency, I decided to discard the timeline. All examples in this book will be presented using the as Class 3.
In this chapter, I will show you how to set up the as 3 project in every development environment (Flash CS3, flex builder 2, and free SDK we just mentioned. In the rest of this book, only the appropriate class code will be listed, and it can work in all three development environments.
When necessary, when describing a simple concept, I may give a small piece of code to demonstrate the idea. Although it is not fully explicit, it can be imagined as a code snippet to be inserted into the class architecture listed in this chapter.
The classes provided in this book are an important part of the examples in the book. I will discuss them soon and make some in-depth discussions. However, this book is not an in-depth OOP reference book. The class content is only necessary and basic for you to create, run, and complete examples in this book.

2.3 categories and OOP 

I suppose some readers do not know the term "Class" or "Object Oriented", but some may have been using classes for many years in ActionScript (or other languages. To avoid missing anyone, I will try my best to cover all the basic content. As 2 OOP veterans may also need to skip this section, because there are quite a few changes in as 3.
If you think you are not familiar with the class at all, you may be wrong. If you have written any code in flash, you will have the opportunity to access some classes. A class refers to the class type of an object. Movieclip is a class that points to --- you may have guessed --- movie clips ). Text fields, video clips, buttons, strings, and numbers all have corresponding classes.
Generally, a class has two relationships: attributes (data or information) and behaviors (actions, or what they can do ). An attribute is essentially a variable that stores information related to a class. Its behavior is equivalent to a function. When a function is a part of a class, we usually call it a method.

2.3.1 A basic class 

If you have been using flash for some time, you know that you can create a Component symbol in the library, and then create instances of several component symbols on the stage. Similar to the relationship between component symbols and instances, a class is a template, and an object (which can also be understood as an instance) is a manifestation of a specified class. You can write a simple class as follows:

package  {public  class  MyClass  {public  var  myProperty:Number  =  100;public  function  myMethod()  {trace("I  am  here");}}} 

Let's analyze the code. First, for the old as 2 class, there are some new things: Package declaration. A package is a group of related classes. I will discuss package further later, but most examples in this book are not just package ). You also need to include the package keyword and braces as in the example. This is also called the default package)
The next part is the definition of the class itself. Here is another change relative to your past: the class now has an access modifier. An access modifier is a word that indicates which code is accessible. Public means that this class can be accessed by any code outside the class. In all examples in this book, classes will be public ). If you want to learn more about as 3, you may have classes that do not have a public modifier and multiple classes in the same class file, however, this content is beyond the scope of this book.
You can see that the class has a name, myclass, which is followed by another pair of braces that open and close at the end of the class.
There are only two parts in the class: a variable named myproperty and a function named mymethod. These will become the attributes and methods of any class instance you have created. Again, for attributes and methods, the public modifier means that any code other than this object can access this property and call this method. If the attributes and methods you create are only used by the class itself, you can mark them as private, which prevents access to any code outside the class. As 3 also includes the internal (internal) and protected (protected) modifiers. The internal (internal) attribute of a class can only be accessed and protected by other classes in the same package) attribute means that it is only visible to the subclass of this class (this is very similar to the private attribute in as2 ).
Still fuzzy? One more thing is that I have filtered out a large part of the complex content, and many of the content I have described is not all used in this book. Most examples in the book use very small classes. Once you see the execution process of some classes, you will understand the meaning.
A class is written and saved as an external text file. It is named with the same name as the class name and is suffixed with. As, for example, myclass.. You can write class files in Flash CS3 IDE, flex builder 2, your favorite code editor, or any other text editor.
If you are using Flash CS3 IDE, you also need to create a FLA file. If you use the default package, the class file you created must be in the same directory as the FLA file. If you use a package architecture, the root directory of the package architecture should be the same as your Fla. In addition, you can save your class elsewhere and add the path to your class path. The class path is just a simple list of path levels. When you specify a class name in your code, flash will search for the class with the name you specified in those directories. In addition, in the example of this book, you will use the default package directly, and you need to ensure that the class and the FLA file are always together.

2.3.2 package) 

Package is used to organize classes. The package is constructed based on the directory location and the nested hierarchy. Each name in the package corresponds to a real directory name, which are separated by dots. For example, you have a class named utils in the following directory: COM/friendsofed/makingthingsmove /. (It is usually the package path that converts the domain name. This ensures that the package is unique .) This class will point to com. friendsofed. makingthingmove. utils.
In as 2, you need to use the complete package name to declare the class, as shown below:

class  com.friendsofed.makingthingsmove.Utils  {} 

In as3, some of the package code is used to declare the package, and some of the class code is used to declare the class, as follows:

package  com.friendsofed.makingthingsmove  {public  class  Utils  {}} 

2.3.4 Constructor 
You can set a constructor for your class. It is a method with the same name as the class. When a class instance is created, this method is automatically called. You can pass parameters to the constructor as follows.
First, create a class.

package  {public  class  MyClass  {public  function  MyClass(arg:String)  {trace("constructed");trace("you  passed  "  +  arg);}}} 

Assume that you are working in Flash CS3 IDE and creating a class instance on the time line is as follows:

var  myInstance:MyClass  =  new  MyClass("hello"); 

When testing the video, it traces "constructe" and "You passed hello ". If you are using Flex builder 2 or a free SDK, remember what I said here first. You will have a lot of practices later.

2.3.5 inheritance 

One class can inherit from, or expand, and the other class. This means that it can obtain all the attributes and methods of another class (unless the attributes or methods are marked as private )). Subclass (inherited class) can add additional attributes and methods, or change some content in the parent class (Extended class. It creates two separate classes (in the two separated. As files) as follows:

package  {public  class  MyBaseClass  {public  function  sayHello():void{trace("Hello  from  MyBaseClass");}}} 

package  {public  class  MySubClass  extends  MyBaseClass  {public  function  sayGoodbye():void  {trace("Goodbye  from  MySubClass");}}} 

Remember that each class must be kept in its own file. The file name is added with the. As suffix to the class name, because you have a mybaseclass. As file and a mysubclass. As file. If you are using Flash CS3 IDE, create a new file and save the two classes in the same directory. Now, create two class instances in time to see what will happen:

var  base:MyBaseClass  =  new  MyBaseClass();base.sayHello();var  sub:MySubClass  =  new  MySubClass();sub.sayHello();sub.sayGoodbye(); 

There is nothing surprising about the first instance. But note that the second instance has a sayhello method, and mysubclass has not defined the sayhello method. However, this class inherits from mybaseclass. You also need to note that it adds a new method saygoodbye, and the basic class (mybaseclass) does not have this method.
Next, assume that you want to change the existing methods in the base class from the subclass. In As2, you just need to redefine it. In as3, you must use the override keyword to overwrite the definition.

package  {public  class  MySubClass  extends  MyBaseClass  {override  public  function  sayHello():void  {trace("Hola  from  MySubClass");}public  function  sayGoodbye():void  {trace("Goodbye  from  MySubClass");}}}

Note that sayhello, when called from mysubclass, there is now a brand new information, because the original method has been overwritten. In practice, the private method cannot be overwritten because it only allows internal access to the class.

2.3.6 video editing/sprite subclass 

You may or may never write a class, and then extend it when writing another class. However, if you use as3 and leave timeline aside for anything, you will expand the movieclip or Sprite class. The movieclip class is a template for all the attributes and methods of the Event code. The attributes and methods of the Event code are part of the video editing object. You may be familiar with the attributes it contains, such as the position of x and y in the clip, its scaling, and so on, many attributes have changed slightly in as3. As3 is also added to the sprite class. In most cases, you can think of a Sprite as a video clip without a timeline. In most cases
When you only use code to control objects, instead of using time series and frames, the sprite class is suitable for use.
If the class you write extends movieclip or Sprite, It inherits all the attributes and Methods inherent in the object. You can add the specified method or attribute to the created object. For example, suppose you want to create a space ship object for a game. You may want it to contain some images. There is a position on the screen, moving back and forth, rotating, listening to enterframe events for animation, listening to keyboard and mouse events for interaction. All these things can be done by video clips and Sprite, so they should inherit one of them. Then you can add custom attributes such as speed, fuel, damage level, and custom behaviors such as falling, collision, shooting, and self-destruction. This class starts to look like this at the time of writing:

package  {import  flash.display.Sprite;public  class  SpaceShip  extends  Sprite  {private  var  speed:Number  =  0;private  var  damage:Number  =  0;private  var  fuel:Number  =  1000;public  function  takeOff():void  {//  .  .  .}public  function  crash():void  {//  .  .  .  }public  function  shoot():void  {//  .  .  .  }public  function  selfDestruct():void  {//  .  .  .  }}} 

Note that you must first import the sprite class, which exists in the Flash. Display package. If you decide to extend the movieclip class, you also need to import the movieclip class from the flash. display. movieclip package.

2.3.7 create your document class (document class) 

Now you have enough information about the class to write a really useful class. I have mentioned several times how to import classes when creating SWF-based as3. This is because a new concept, document class, is introduced in as3 ). Basically, a document class is a class that extends sprite or movieclip and serves as the main class of your SWF. When SWF is loaded, the constructor of this class will be called. It will be the entry point for what you want to make a video, such as creating additional video clips, creating charts, preloading materials, and so on.
If you are writing code using Flash CS3 IDE, you are free to choose whether to use document class. You can write code only on the time line. However, if you are using Flex builder 2 or a free flex SDK, they do not have a timeline for coding. The only method is to place your code in the class. In those tools, everything is centered around the powerful document class, without which there will be no SWF.

The basic structure of the document class mentioned above is as follows:

package  {import  flash.display.Sprite;public  class  Example  extends  Sprite  {public  function  Example()  {init();}private  function  init():void  {//  sample  code  goes  here}}} 

If you are studying this chapter step by step, there seems to be no new things for you, but you already have all the classes here. I use the default package and then import and extend the sprite class. The constructor has only one line of code. It calls the init method. It is of course a good way to put all your code into the constructor. This method is also considered the best habit to limit the number of code in the constructor. So I turn it into a method. In this book, if I give you a small code snippet for testing, you need to insert the code snippet into the correct init method in the class described. When the film is compiled and running, the constructor will call the init method and your code will be run.

What you need to do now is to link your document class to the SWF you are about to create.