Sunday, 28 September 2014

Events, Listeners and Handlers

So.. Its been quite a pause with what we have learnt so far. Lets proceed!

This topic is about the how Flash interprets every action that the user makes inside a frame (Sprite/MovieClip). Actions that happen within the frame are called events (as the name says). Since we are talking about communicating with the user, we gotta listen to the user about what the user does and we gotta handle the every user actions appropriately. I hope I have covered the context!

Now, lets get into theory.

Event: Events are actions that happens when the user performs something with the keyboard or mouse within the sprite

Listeners: Listeners are subscribers of events. These listeners will be linked to the objects within the sprite and whenever the event occurs, the listener will get notified of the events

Handlers: Handlers are functions that handles the action that has to be performed in occurance of a particular event

Below is an example of event, listener and handler


addEventListener(MouseEvent.MOUSE_DOWN, onSpritePress);

where 'MouseEvent' is the event, 'MOUSE_DOWN' is the listener and 'onSpritePress' is the handler

Additionally, if you no longer need to listen to an object (if you do not want any action to be performed on an object even is any event is occurred in the object), you can remove the event listeners as well, like below


removeEventListener(MouseEvent.MOUSE_DOWN, onSpritePress);

Alright, thats enough theory. Time to make our hands dirty!


package {
 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 import flash.events.MouseEvent;

 public class EventDemo extends Sprite {
  private var eventSprite:Sprite;
  public function EventDemo() {
   init();
  }
  private function init():void {
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align=StageAlign.TOP_LEFT;
   
   eventSprite = new Sprite();
   addChild(eventSprite);
   eventSprite.graphics.beginFill(0xff0000);
   eventSprite.graphics.drawCircle(0, 0, 100);
   eventSprite.graphics.endFill();
   eventSprite.x = stage.stageWidth / 2;
   eventSprite.y = stage.stageHeight / 2;
   eventSprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
   eventSprite.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
  }
  private function onMouseDown(event:MouseEvent):void {
   trace("mouse down");
  }
  private function onMouseUp(event:MouseEvent):void {
   trace("mouse up");
  }
 }
}

As you would see, when you run it; the console gets updated with the lines 'mouse down' and 'mouse up' whenever the mouse is clicked within the red ball!

Note: If you do not get the above mentioned message in the console, don worry, the flash player that you use might have probably been downgraded. Trust me, its no big deal. We have that covered in the upcoming lessons :-)


Read more ...

Friday, 11 July 2014

Animating with code

Now, that we know how to create a simple circle on the stage, let’s try moving it around. But before that, let’s get to know something about how does the Flash Player interprets our code.

Alright, in my introduction post, I have already made a gossip about this, however, lets see that in detail now. Any animation movie that you create in Flash has to have a looping mechanism. Let’s see how a basic movie worked earlier. As I said, you would have a list of images and you would be displaying each image sequentially within a specified time frame. Something like below.

Now, when you get into shapes or symbols in Flash IDE, it doesn’t create images, rather it stores properties of the object in each frame. For eg, if you are moving a ball from one end of the screen to another. The Flash IDE will have multiple frames with the ball’s position incremented/decremented in each frame. The first frame would have the ball's placed in the left corner and the next frame would have the ball placed slightly after the left corner and so on. Flash reads the data in each of these frame and creates the stage as per the data provided. Something like below.

But, when you are talking about dynamic animation, the flow would look more like below.

Well, thats how ActionScript code gets interpreted by Flash Builder. All it takes is just 1 frame and re-position objects within the frame based on what we code.

I hope that was useful :-)


Read more ...

Scaling in AS3

This time, its about a technical problem which has to be thought from a developers perspective! Let's face it first.

Now, that we have our circle created, try to resize the browser. You have given the attributes of the circle as 100, however you would notice that the size of the circle varies each time the browser is resized. Noticed?

Yeah! that is a property of AS3, which has a pre-defined screen size and if the screen size is more/less than the default, it automatically resizes/renders its boundaries with respect to the actual size of the browser, unless handled explicitly.

This can be handled explicitly by stopping the scaling mode of the stage (the parent class (or) just imagine a state in real ;-) ) to scale automatically with respect to browser resizing.

Now, try this one, run it and resize the browser.


package
{
 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 
 public class Initialize_Test extends Sprite
 {
  public function Initialize_Test()
  {
   graphics.beginFill(0xff0000);
   graphics.drawEllipse(100, 100, 100, 100);
   graphics.endFill();
   
   //code to stop auto rendering
   stage.align = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;
  }
 }
}

See the difference? Well, thatz how we handle resizing in AS3. More coming up!


Read more ...

Setting up AS3

Alright. As I said earlier, lets fill in something in the empty space this time.

With reference to my previous post, we gotta start with the document class to create our SWF file. So, lets draw a simple circle in the empty space this time. Shall we?

Just go to the 'Initialize_Test' class that we have already created as part of ‘Classes and OOP’ and paste the below code.


package
{
 import flash.display.Sprite;
 
 public class Initialize_Test extends Sprite
 {
 public function Initialize_Test()
 {
 graphics.beginFill(0xff0000);
 graphics.drawEllipse(100, 100, 100, 100);
 graphics.endFill();
 }
 }
}

Click on run and check if you get a red circle in the SWF file output. There we go with something on the blank space ;-)

You should be seeing the below pic created by yourselves.

Fortunately, there is nothing much to understand in this code. I have just used few of the drawing commands to draw the circle. Lets get into details of that very soon!


Read more ...

Tuesday, 8 July 2014

The document class

So now we have had enough to begin I would say! Lets proceed to the next, hopefully the last portion before we start fillin up something in the blank space that we already have created in 'Classes and OOP'. Shall we?

It's called the document class. Basically the main class of your program/tool/application/whatever. It's the class which starts your program and as I said earlier, we gotta extend either the Sprite/MovieClip classes in order to create our SWF file.

So, how does it works?

The very reason for programming in AS3 is basically, creating a SWF file with the things we need. Like creating a motion picture (like .gif) by ourselves. And not to forget the best part, its user interactive!

To answer the question, the Sprite/MovieClip classes creates the SWF file. Fair enough? After all, no one wants the user to be interactive with nothing! ;-) Would we?

Let's create our document class now. Here we go!


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

Well, this is a basic template class which extends the Sprite class with a constructor. I have given only one line of code in the constructor and that is because, its a practice of a good developer ;-) (Not to have too many lines of code in a constructor). I know the page is still empty. Let's fill in the space in the next post. Trust me!


Read more ...

Saturday, 5 July 2014

The Movieclip/Sprite Class

Altight! That was quite a pause. Now moving on. This time it's about the main classes that drives your animation in AS3 (ActionScript Version 3). Yeah, as the heading says, they are the ones. It's the Movieclip and Sprite classes. So far, with what I 've learnt; you gotta end up extending one of these classes in any animation that you create in AS3, meaning you simply can't create an animation in AS3 without these classes. As simple as that!

The Sprite class is a template to create your own diagrams and control it's properties and behaviours and so does the MovieClip class except the fact that you cannot create a movie clip rather you can only use an existing movie clip and play with its properties. In other words Sprite is almost similar to a Movieclip but without a timeline.

Well, that's the way I put it in simple terms. And that being said, every property associated with either of these classes can be obtained and applied in any of your classes just by extending the classes you need!

I know that's just theory :-) but don worry, we will get into practicals real soon!!

Read more ...

Monday, 16 June 2014

Inheritance in ActionScript

Not a big deal, though, I wouldn't wanna skip this. Inheritance is a concept of extending the properties and methods of one class to another using the keyword extend. Again, it is as how java works. The child class can have its own methods and properties and can use the properties and methods of the parent as well, provided the members of the parent class (properties and methods) are declared non-private. Just on a lighter note; it is possible to override the behaviors of a parent class within the child.

Atleast, that is what I know! Since most of the classes that we are gonna use will follow inheritance, I am not gonna spend much time explaining this. However, if you wish to know more about inheritance, grandfather's (GOOGLE) always thr!! ;-)

Read more ...