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 ...

Saturday, 14 June 2014

Classes and OOP

So.. What are classes and what is OOP?

To give you a simple definition, Classes are templates/blueprints which has properties of itself and behaviors.

Properties are the variables declared within the class and behaviors are the functions/methods within the class. You will get the idea behind this when you create one.

OOP (Object Oriented Programming) is a programming technique where the code is written with reference to objects (instances). Object based programming technique in other words.

Java experts would find this easy to grab and I know its kinda crazy definition for them to agree; fortunately, this is my understanding :-)

Alright, without wasting any more time in theory, lets move on to practicals. Creation of our first class in Flash Builder.

Now, open Flash Builder and create a new ActionScript project

Give a project name for our new project. I ‘m gonna name it ‘Initialize_Test’. Just leave the rest of the options to default and click on Finish. Lets get into the details of the options later.

Sometime Flash Builder prompts the user to switch to the Flash Perspective view. Just click on ok, if prompted.

Your project will automatically be created with the default files. Before starting to write the code, we would need to add the wmode parameter in the ‘index.template.html’ file which will be present in the template-html folder. WMODE is a parameter which is passed to the < embed > tag in the html page that we are gonna create. This parameter has to be set to ‘direct’, meaning we are going to bypass the browser and perform our actions within the animation though the animation that we create is embedded in the browser. Simply put; the best way to access animation files within a browser.

Now, open the Initialize_Test.as file and paste the below code


package
{
 import flash.display.Sprite;
 public class Initialize_Test extends Sprite
 {
 public var myProperty:Number = 100;
  public function Initialize_Test()
  {

  }
 }
}

Click on Run

You should now see a blank html web page. Like Below

Right click anywhere on the page and you should be able to see the version of Flash Player you have already installed. Don’t worry about the blank page. We have lot more comin up to fill in the space.

Alright, lets quickly run over the code that we have written. The first line which states 'package'. Packages are mainly used to organize classes and are structured based on directories in which they are placed. Naming of packages can be the way you like, however, going with the folder names is a good practice. For eg, if you have a class with name 'Test' within the folders com/ericstanley, the suggested package name would be 'com.ericstanley.Test'. But as I said, its your choice, just make sure you name it unique across the project.

The next highlight being the keyword 'import'. This is used to import other packages/classes within your project. As simple as that. But the best part is that Flash Builder does this automatically. Well, understanding gets simpler these days :-)

The next piece of code which we are yet to talk about is the 'Constructors' which is the function that we have created 'Initialize_Test()'. Any function name which is as similar to the class name is called a constructor. A constructor is called every time a class is initialized, meaning, the code written within a constructor is executed every time an instance of a class is created. You don't have to call it explicitly.

And the last piece of code which we are gonna look on is the access modifiers. See the word 'public'? Well, that is it. A public class is accessible by any other class outside of it. If, the methods and properties in the class need to be accessible only by the class itself, declare it 'private' and the last modifier being 'protected', and this means the class is accessible within the same package and the ones that derives the class.

Well, I have to read this couple of times to understand :-)

Read more ...

Basics of Animation

Having known about what Action Script is, lets move on to few basics of animation this time!

Though, I have already spoke about this in my introduction post, I ‘m just gonna re-iterate (in a different way this time). This time ‘ma gonna call pictures as frames. From now on, lets call pictures as frames. Animation is all about creating frames and moving these frames across the screen as necessary.

We are going to use one of Adobe’s script only tool for our animation this time. Its named Flash Builder. So, before we start coding, lets go ahead and download the free trial version of Flash Builder from Adobe’s download site. Here.

You might have to create an Adobe ID first to proceed with your download. Also, download and install the latest version of flash player in your machine from here. Just to make sure we don run into unknown issues at a later point in time.

With this tool, we are gonna create frames and control its motion using codes. As simple as that.

As I referred frames as pictures earlier, and have highlighted the word create, you can interpret this as creation of pictures. Clear? I hope so..


Read more ...

Introduction to ActionScript

Hi thr! Time to learn 1 more scripting language; hopefully the necessary one in the near future. Shall we?

So, before we begin, let me tell you what is it that yr gonna get by reading this post. Well, as the caption says.. its the introduction. I am writing this blog just to make sure that I haven’t forgotten what I ‘ve learnt today (Wednesday, June 11, 2014). Well, that says it all I hope!. Honestly, I am new to ActionScript and I am writing this blog, just to share what I ‘ve learnt ;-)

Alright, lets proceed! Facts first.

Fact 1: Do you believe that I am writing this blog about ActionScript after 8 years of its creation. If not, believe it now. It was introduced as the new feature of Flash 5 in 2005 (I don’t know that until I started this blog)

Fact 2: ActionScript is a programming language!!

There, with the facts being said, the probe that strikes every mind, is that why would I need to learn this when I already knew enough? How is this gonna improve my geek personality in any ways?

Lets address the common question first. Difference between develop and design?

Now, if you say you are a developer, ask yourselves the question ‘Are you a designer?’ and if you are a designer ask the relevant one for which you would call a ‘NO’ as an answer. And if you say ‘YES’ for both the questions, just tryin drawing a simple picture of what you like (without seeing it; and just by your imagination) and try creating the same picture by programming. I guarantee, you would fail in one of these unless you are an expert in both.

Well, experts can leave now ;-)

I guess you might now get a feel of what will you be learning in this blog. Thatz right. We are just gonna get trained in both design and development using ActionScript which is what it is created for.

Lets begin with animation (Quite a nice topic to start.. for me.. I like it..)

What is animation?

Technically, animation is defined as the movement of an object from one place to another with respect to time. Unfortunately, movement might not be the right term. Lets see why.

Who do we call a thief? (Courtesy – Tamil Comedian Vivek)

Option 1: The one who steals

Option 2: The one who gets caught

Practically, option 1 would be the right solution, however technically, its the latter that becomes true. This gives animation a different type of perspective. I would define it as making the user believe in the movement of an object, even if its not (ILLUSION). Let me say why.

The reason is pretty simple. You cannot move an object within a computer literally. Hard to believe, unfortunately true. Remember the good old days of running the films using a sequence of static pictures. Well thatz wat animation is all about. This time its not pictures and we are gonna handle the sequence using programming. The language used to accomplish this is what we are gonna learn now.


Read more ...