More Flash Inteview Questions

Q11. Can you read a remotely placed sound file? Where will you store the location of the sound file?
Ans: Yes, the server will store the location of the sound file, and will send it to the client whenever required.

Q12. How do you use Tweening?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2011/01/tweening-part-i.html

Q13. How do you use drag and drop in action script?
Ans: The following piece of code starts the drag for myMC display object when mouse is clicked over it, and stops the drag when the mouse is released up.

    myMC.addEventListener(MouseEvent:CLICK, onMouseClick, false, 0 , true);
    myMC.addEventListener(MouseEvent:MOUSE_UP, onMouseClick, false, 0 , true);

    function onMouseClick(e:MouseEvent)
    {
        startDrag(this);
    }
   
    function onMouseUp(e:MouseEvent)
    {
        stopDrag();
    }

Q14. What is the use of preloader? How can you create one?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2011/01/creating-your-own-flash-preloader.html

Q15. What are the different design patterns available in flash?
Ans: 

    1) Factory Method Pattern
    2) Singleton Pattern
    3) Decorator Pattern
    4) Adapter Pattern
    5) Command Pattern
    6) Observer Pattern
    7) Strategy Pattern
    8) Template Method Pattern
    9) State Pattern
    10) ModelViewController Pattern
    11) Symmetric Proxy Pattern
    12) Composite pattern
   

Q16. What is the purpose of bitmap caching?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2010/12/when-does-it-make-sense-to-use-bitmap.html

Q17. Which ActionScript method should be used to bring a component from the library to the stage?
Ans: attachMovie

Q18. Describe Event Flow in flash.
Ans: The event flow is conceptually divided into three parts.
    1) Capture phase: This phase comprises all of the nodes from the Stage to the parent of the target node.
    2) Target phase: This phase consists solely of the target node.
    3) Bubbling phase: This phase comprises the nodes encountered on the return trip from the parent of the target node back to the Stage.

Q19. How do you create pop-up window in flash?
Ans: The following piece of code opens up a new window on the click of "myMC" display object.

    myMC.addEventListener(MouseEvent:CLICK, onMouseClick, false, 0 , true);

    function onMouseClick(e:MouseEvent):void {
            ExternalInterface.call("window.open", "http://bashwithflash.blogspot.com/", "win", "width=500,height=500");
        }

Q20. Explain the difference between Stream Sound and Event Sound.
Ans: Refer to the post: http://bashwithflash.blogspot.com/2010/12/sound-bound.html

Flash Interview Questions

This post mainly deals with the most popular flash interview questions that we come across now. Hope it fulfills the purpose.

Q1. What is the default frame rate?
Ans: The default frame rate is 24 frames per second (fps) for the new versions. In previous versions of Flash, the default frame rate is 12 fps.

Q2. From which version of Adobe flash player, you see the compatibility of AS 3.0?
Ans: Flash Player Version 9

Q3. How many types of symbols can be there in any flash application? Name them.
Ans: 3, namely, Button, Movieclip and Graphic.

Q4. How does the it affect the frame rates of a swf file when it is loaded into another?
Ans: The new swf file takes the frame rate of the parent swf file and runs with that.

Q5. How can you change the frame rate with the help of code, with and without using the stage property?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2011/09/frames-and-frame-rates.html

Q6. Why do we need to embed fonts to a dynamic text field?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2010/12/dynamic-text-look-and-feel.html

Q7. How are _root and _level different?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2011/08/root-and-level.html

Q8. How are _root and parent different?
Ans: "_root" is the main timeline of the currently active movie. "parent" is the container movie of the currently active movie clip.

Q9. Write a code sample to draw line between the given two points?
Ans: We use the "lineTo(x,y)" API. Here is the example code:

    var mc:Sprite = new Sprite();
    mc.x = 50;
    mc.y = 50;
    this.addChild(mc);
    mc.graphics.lineTo(100,100);

This sample code defines a movie clip at (50,50), and draws a line from this point to (100,100). Now line is the mc. We can further draw more lines to other points also.

Q10. How do you add listener to a particular display object? What are the arguments that you need to pass to the listener?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2011/01/capturing-events-in-flash-as3-part-ii.html


Apart from the above questions, OOP concepts are also asked. The candidate might also be asked to make a small flash application.

Readers are most welcome to make any correction to the answers they think is wrong. Also keep adding the questions too.

*More questions to follow soon in the next post.

Mathematics And Flash - Part I : Drawing Parabolas

Working with BUTTONS in Flash

Buttons are a very common element of any application. Be it an e-game, an online submission form, or even a page navigator, usually the buttons control the flow of the application. This post mainly deals with creation of button, and a hands-on example of it.

Why do we need buttons in our application?
Buttons are mainly "event dispatchers". A dispatched event always has some purpose and so does the click of a button. Some action is always associated with a button click. Let us take a very common example. All of us use google search engine very often. After typing our search words, we either press "Enter" key or press the "Search" button. What does this button do? The button notifies the engine that the search entries are done, so perform the next action, that is, output those results which match with our search keywords. So, button dispatches a click event here. Click event is one of the mouse events (that we have already discussed in one of our previous posts).

Steps to create a simple button:

1. Open flash IDE (CS3/CS4 or whatever is the latest version that we are using)
2. Select a text tool and write some text on the stage.

3. Right click on the text, select "Convert to Symbol"

4. Select Button from the drop-down and give some name to the symbol.

5. Give some instance name to this symbol.

6. Double click on this newly created button. You would observer that there are 4 frames in it namely "Up", "Over", "Down" and "Hit". These are default fields for any button. As the name suggests, all of them are button states. Notice that only the "Up" frame has some content in it.

7. Click on "Over" frame, press F6 key. A keyframe gets created with the content same as the "Up" frame. Change the text to distinguish between the two frames.

8. Similarly, create a keyframe in the "Down" state and keep a different text with a different color there.

9. The last frame "Hit" defines the hit area of the button which is sensitive to the mouse click, or the area of the button which we want to respond to any click.

10. Publish the file and you see a simple button, in hovered, hit, and released states. Your file, when published, would replicate the following:

Once your button is created, you can associate multiple mouse events to it (as buttons actions are mostly mouse sensitive). The mouse events are already discussed in one of the earlier posts : Capturing Events in Flash : Part II - Creating Event Handlers

Frames and Frame Rates

Frames and animations are very closely related. All the animations happen in frames, or frames make the animation happen. Let us understand it like this:

I am sure all of us have watched at-least one cartoon movie. Cartoon movies have been there for like decades. Even before the time when the technological concept for animation was known to us, people have been watching them. Cartoon movies are full of animation, hence they are also called animated movies. But how were they made in those years? Animated movies were made on frames, not the flash frames, but the transparent sheets that we put under the projector machine and view on the screen. The artists use to sketch the cartoon frames on those transparent sheets, which were projected on big screens. All the movements of the cartoon characters were captured in those frames. The projector used to run the bundle of frames so fast, that it looked like a perfect animation.

Flash makes the life easy, as we can easily change any graphic image as we need. Each of these graphics are kept in successive frames, and once the file is run, we see an animation on our computer screens. The clarity of animation depends a lot on the frame rate at which we run it.

What is a Frame?
A frame, in a timeline, is the snapshot or drawing of the currently worked on instructions executed by the flash player. A frame can contain any flash symbol, it can contain action script code, and can even have a label name for the user's convenience.

There is something called Key frame. A key frame is any drawing that defines smooth transition between 2 points. The main use of key frames comes into picture with tweening effects (as explained in the older posts). If not tweening, then key frames with different pictures/graphics in a single row of a timeline can bring out a good animation.

What shall be the number of frames for a good animation?
To create an illusion of a motion we need to have a transition of the moving object from one point to another. It all depends on the intermediate frames, that how jerky or how smooth the transition happens. Usually, more number of intermediate frames give a smooth transition effect, as even the minute changes of the motion are depicted in each frame picture. This is true when we do not consider the frame rate for our animations (which is explained in the next section of this post).

Frame Rates
The frame rate determines how many frames are played per second. This value is measured in frames per second, commonly referred to as, fps. This is calculated with the formula below:

                      Frames Per Second    =    Number of Frames
                                                               -----------------------
                                                                   Time in Seconds

The higher the fps value, faster is the animation played. Low values of fps usually cause slow and jerky animations. The frame rate solely depends on the kind of animation that we make. Keeping a higher frame rate for complex image animations makes the computer to do much work as compared to the work with lower frame rate. High frame rate for simple content doesn't cause any problems usually.

In earlier versions of flash the default fps rate was 12, but in the recent versions it is 24. Means 24 frames are played in every 1 second.

Modifying the fps values with the help of UI and programmatically

The most common way to set our own fps value is by changing the value in the Properties panel and making it global for our entire application. Check the screenshot below:

 

As already mentioned earlier, the fps value in the latest version of flash have been kept 24, which is quite good to work with.

There may be a case when you might want to change the fps value dynamically or when you application is running. With AS 3.0 programming, we can easily access the frame rate. This is how the fps value is accessed in AS 3.0

                                             stage.frameRate

Stage property can be accessed from anywhere, hence we can change the fps value whenever we want to.

                                            stage.frameRate = 30;

We have a very common flash interview question, which talks about frame rates of our swf files.

The question says, that we have 2 swf files, A and B. A has frame rate of 20 and B has 30. B is loaded into A. How will it affect the frame rate of B.

The answer is very simple and obvious. Since B is loaded into A, A becomes the parent movie clip for B. So the global fps value for A now becomes the fps value for B as well. Hence B will also run at the same rate as A does, which is 20. This means, the file B will run at a slower rate in A, as compared to when running alone. If the fps values are reversed for A and B, and then B is loaded into A, then B would run at a faster rate (30 fps). So it all depends on the frame rate of the parent swf file.

However, it is very well possible to play the movie clip inside the parent movie clip retaining it's own frame rate. This can be achieved programmatically. Take an example, we have a parent movie clip which runs at 24 fps, there is another movie clip, B, which runs at 8 fps. When B is loaded into A, we want that B should run at it's own frame rate. We use a simple logic here. Divide the fps of A by fps of B. We get '3'. So, when A runs 3 frames, B should run 1 frame. Check the following piece of code:

                   frame_count = 0;

                   bMovie.stop( ); 

                  onEnterFrame = function( )

                  {

                               frame_count++;

                               if (frame_count >= 3 && bMovie._currentframe < bMovie._totalframes)

                              {

                                                bMovie._currentframe++;

                                                bMovie.gotoAndStop(bMovie._currentframe);

                                                frame_count = 0;

                              }

                  }

                  stop( );

 

With the encounter of every new frame of the main movie, A, the counter "frame_count" will increment by 1. When the count reaches 3, the next frame of B is played.

Difference between a Graphic and a MovieClip

Any flash symbol can be either of the following:

1. Button
2. Movie Clip
3. Graphic

Button will be part of later posts. This post mainly deals with movie clip and graphics. First let us understand the two.

Both movie clips and graphics can be used to create animations. However, there are many differences between them. A graphic is a static object but movie clips can be dynamically worked upon. Only movie clips can have instances and instance names. Consequently they can be uniquely identified using the code. Whenever any movie clip is accessed, a copy of it is created from the flash library and the animation is performed over it. This copy so created could be blurred, slightly distorted, skewed, or can have multiple differences from the original movie clip, but only during run-time. This is just to cut down the computer memory usage by keeping the size of the swf file small.



Lets analyze the first statement, that both these symbols can contain animations.
In a movie clip, the animation is done on and by the graphics only. Here, all the parts of any animating body can be controlled independently, as they are part of separate timelines and also because we can have timeslines inside the main timesline of the movieclip. But for the graphics, all the animations happen in a single timeline. This makes the graphics less dynamic.


In other words,

The timeline of a Graphic Symbol instance is dependent on the timeline of the movie the instance is placed in.
The timeline of a Movie Clip instance is independent of the timeline of the movie the instance is placed in.

 Let us try a fun example.

Put any graphic image in the first frame of the main timeline. Place this image with slight variation in the successive frames for, say, 25 frames. If you publish this file, you would see some animation running through frame 1-25. Try deleting 10 frames from this, and the animation runs through only first 15 frames. If we delete all other frames except the first, and then publish the file, we see a static image, with no animation. In all the above cases, the animation runs in loop, from 1st frame to the last, and then back to first frame.

Suppose we convert any symbol to a movie clip, no matter, how many frames we add or subtract from the main timeline, the movie clip runs in loop in its own time line.

Tic-Tac-Toe

Cows & Bulls

_root and _level

Often we get confused between the usage of _root and _level. The two are however very different from each other._root is the main timeline of the currently active swf file/movie clip whereas the _level defines the active order of the swf file. A swf file which loads a flash application is automatically treated as _level0. _root now refers to the main timeline of the _level0. Suppose the application loads another swf file, this would be addressed as _level1. When _level1 is in use, the _root will change from main timeline of _level0 to the main timeline of _level1.

Generalizing:  If a movie clip that contains _root is loaded into another movie clip, _root refers to the main timeline of the loading movie clip, and not the timeline that contains _root.

Any swf file can be loaded at any level. See an example below:

loadMovieNum("test.swf", 5);

The above code loads the "test" swf file at level 5. If we wish to

"_level" is accessed like any other movie. If we wish to stop the playhead of the main timeline of the swf file, we can add the following code:

_level5.stop()

 If we wish to execute data inside any particular frame (say frame 7), we can use the following chunk of code.

_level5.gotoAndStop(7)

 _root can be used similarly as follows: 

_root.stop() stops the Timeline of the level containing the currently executing script 

There is something what we call as _lockroot. _lockroot is used whenever we want to ensure that _root refers to the main timeline of the loaded movieclip even if another movieclip is also loaded. Setting this property to "true" does the required job.

myMovieClip._lockroot = true;

Where myMovieClip is the one to which _root should refer even if any other movieclip is loaded.

The concept of both _root and _level is absent in action script 3.0.

Tweening: Part - I

Tweening word is the formation from the words "in between". As suggested by the meaning, tweening has something to do with whatever motion is happening "in between" 2 states. For example, a ball drops from 10th floor of a building to the ground. So here, whatever motion the ball has "in between" the 10th floor and the ground constitutes the tweening effect.

We can make use of the tweening effect in 2 ways:

1. Using time lines
2. Using code / action script

To add the tween motion using the timeline, add the first state of the object in the first frame. The state could be any property, like, color, dimensions, x-y co-ordinates etc. Leave 18 frames in between, and add a key frame to the 20th frame. Add second state of the same object (change any of the above mentioned properties). Right click on the timeline anywhere between the first and the 20th frame. There will be an option to add tween effect. Select that, and you will find the the tween motion is added to your timeline. Press enter while in the first frame, you will see how the tween effect comes out in the time line.

Tweening can be added using action script as well. The tween class is not included in the flash movie by default. It needs to be imported as follows:

import fl.transitions.Tween;
import fl.transitions.easing.*;

Tween class is to add tween motion to the desired object. Lets check what does "easing" do. "Easing" refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. The fl.transitions.easing package provides many easing methods that contain equations for this acceleration and deceleration, which change the easing animation accordingly.

Another class TweenEvent can be imported as follows (though not mandatory)

import fl.transitions.TweenEvent;

This class besically contains a few events, like, MOTION_CHANGE, MOTION-FINISH, MOTION_START, etc etc. Such events can be fired to handle any other changes as per the requirements. This will be explained in the next post.

Now let us see how tweening class is used. Check out the syntax below:

var myTween:Tween = new Tween(object, "property", EasingType, begin, end, duration, useSeconds);

The parameters mentioned above are mandatory to be specified whenever the Tween class is instantiated. Each of them is explained as follows:

1. object - This is the instance name of the object which will be animated or on which tween is applied. Example: myMovie, myTxt
2. property - This is the name of the property which will be animated, it must be specified as a string (in double quotes). Example: "alpha", "scaleX", "scaleY", "x", "y".
3. EasingType - The easing type will determine how the tween animation will flow so that it looks natural and real. Examples: Strong.EaseIn, Elastic.EaseOut, Back.EaseInOut.
4. begin - This is the position from which the animation will start, it must be specified as a number.
5. end - This is the position at which the animation will stop, it must be specified at as a number.
6. duration - This is the period for which the animation will run, the default unit for it is frames, however, the unit can be set in seconds if you set the next parameter as true.
7. useSeconds - Set this parameter to true if you want to the duration to be measured in seconds instead of frames

For example:

var myTween:Tween = new Tween(myMovie, "x", Strong.easeOut, 25, 100, 10, true);

In the above script, observe the third parameter, Strong.easeOut. This is a function which has a property easeOut. Like "Strong" we have 5 more functions, each of them described as follows:

1. Regular: the motion speed will gradually increase or decrease in speed as specified by the easing method.
2. Bounce: the motion will bounce back a few steps when it reaches the end position before settling at it.
3. Back: the motion will go beyond the end position before bouncing back into it.
4. Elastic: a mixture of Bounce and Back effects combined.
5. Strong: a more emphasized Regular effect.
6. None: no easing, the motion will not speed up.

Each of these functions must be then be configured using one of the easing methods to determine at which part of the tween it shall apply the effect, i.e. at the start of it, the end of it, both, or none:

1. easeIn: - The tween effect is applied to the start of the animation.
2. easeOut: - The tween effect is applied to the end of the animation.
3. easeInOut: - the tween effect is applied to the start and end of the animation.
4. easeNone: - no tweening effect is applied, to be used with the None tween function.

Creating your own Flash Preloader

We see preloaders in many flash applications these days. An animation, a video, or a movie, or even a game, start mostly with a preloader now. Once the preloader is shown, only then the actual animation starts playing.

What is a Preloader ?

A preloader is a horizontal bar that keeps scaling up and the intensity of the scale depends on the loaded bytes of the file. When the files are loaded completely, the bar reaches its maximum length. The intensity of the bar load-scale is calculated as per the following formula:

                          load-scale = (bytes loaded) / (total no of bytes)

How to create a simple Preloader ?

Step 1: Create a horizontal bar, and convert it into a movie clip.

Step 2: Give an instance name, say, loadMC.

Step 3: Create a dynamic text field, in the same layer (though not mandatory).

Step 4: Give instance name to this text field as well, say, loadTxt

Step 5: Create another layer for the code / script.

Step 6: Put a stop( ) to the first frame, and then add an event listener, ENTER_FRAME, so that the code is executed as soon as the first frame is encountered, and because there is no other frame, the code would keep on executing. Then the files-load percentage is calculated by the above formula, which is displayed in the dynamic text field.

Step 7: Once this is done, press Ctrl+enter. You will get the swf file, displaying the complete horizontal bar and displaying "100%" text below it. Now press Ctrl+enter again, and then the actual preloader function is observed. If not, then go to the "view" options in the swf window and select the download speed according to your requirements and convinience.

Capturing Events in Flash : Part III - Creating Custom Events

The way we use the in-built events in action script, similarly we can create our own events and handle them at our own requirements. The only extra thing that needs to be done is the creation of class which will hold our user-defined or custom events.

However, there are few things to be noted in case of custom events. For the in-built event handling, we have a class called "clone( )". As by the name, its clear that it is something to do with a "copy". Basically, clone( ) function creates a copy of the event instance with all the properties associated to it. This is handled implicitly for the pre-defined events. But for the custom events, we need to override this function to our custom event class. This will help duplicate the custom event instance with all the custom properties associated to it.

Why do we need clone( ) function ?

With clone( ) function, the new event object includes all the properties of the original event. Hence, if the event is re-dispatched, then it takes the properties of the already dispatched same event. If you do not set all the properties that you add in your event subclass, those properties will not have the correct values when listeners handle the re-dispatched event.

We can pass arguments as well to these custom events, which also should be cloned.

Another function that needs to be written explicitly for a custom event class is "toString( )". It returns a string containing all the properties of the current instance. This is also to be overridden in the custom event class.
  
Now, let us assume we want to dispatch an event on completion of some animation, event name say "ANIMATION_COMPLETE". We will add an event listener to the movie clip, and will dispatch the event from the last frame, after which the event is handled accordingly.

Check out the code sample below:

package 
{  
         import flash.events.Event;  
         public class CustomEventDemo extends Event  
         {  
                    public var customProperty:String = "";   
                    public var customArgs:*;

                    public static const ANIMATION_COMPLETE:String = "AnimationComplete";
 
                    public function CustomEventDemo(custom:String, custArg:*=null, type:String, bubbles:Boolean = false, cancelable:Boolean = false)  
                   {  
                                // call the constructor of the extended class  
                                 super(type, bubbles, cancelable);  
 
                                // set the customProperty property  
                                customProperty = custom;   

                                // set the customArgs arguments
                                customArgs = custArg;
                   }   

                   public function get args():*
                   {
                                return customArgs;
                   }
 
                   override public function clone():Event  
                   {  
                                return new CustomEventDemo(customProperty, args, type, bubbles, cancelable);  
                   }   

                   override public function toString():String
                   {
                                return formatToString("CustomEventDemo", "args", "type", "bubbles", "cancelable", "eventPhase");
                   }
 
         }  
 
}

Implementing MVC Architecture in AS3

MVC stands for Model View Controller. Each of these is an important component for any game development. Their roles are explained as follows:

1.Model: It manages the behavior of any application. It tells how the complete data is structured. It responds to any request made about the game state, mostly by the view.
2.View: It is the display of the information or data to the user.
3.Controller: It interprets the inputs from the user, informs the model to change it, making the view to display the changes accordingly.

In short, the Controller interprets the input, processes it in the Model, and gives the output to the View.


                                                  Input --> Processing --> Output
                                                  Controller --> Model --> View

Take an simple example of a calculator. Calculator is an electronic device that we use in our day to day life. Suppose we want to perform addition operation of 2 numbers. Let us see how the MVC architecture applies here.

First Number Input --> Press the number key of the View --> Input goes to the controller --> controller updates it in model --> the pressed number key is displayed by the view
Operation Input --> Press the "+" key of the View --> Input captured by the controller --> controller updates the model
Second Number Input --> Press the number key of the View --> Input goes to the controller, addition operation is performed --> controller updates the second input and the final output in the model --> the pressed number key is displayed by the view
Result --> Press the "=" key of the View --> Input captured by the controller --> view displays the result as stored in the model

With an MVC architecture, it becomes very easy to write the code in an organized way, and it can then be easily understood by the others as well.

Using MVC in AS3 programming.
Again taking a simple example, capturing data on pressing the keys from the keyboard and priting it in view.

Model will store the data (pressed key) and will be used to retrieve the same.
Hence this will have 2 functions (setter and getter). Model Interface, IModel.as, is written as follows:
package
{
         import flash.events.*;
         public interface IModel
        {
                  function setKeyId(key:uint):void
                  function getKeyId( ):uint
         }
}

The Model.as file becomes:

package
{
         import flash.events.*;
         public class Model implements IModel
        {
                 private var lastKeyId:uint = 0;
                 public function setKeyId(key:uint):void
                {
                         this.lastKeyId = key;
                         dispatchEvent(new Event(Event.CHANGE)); // dispatch event
                }

                 public function getKeyId( ):uint
                {
                         return lastKeyId;
                }
        }
}

All the keyboard events are handled in the Controller. Controller Interface will have just one function to capture the keyboard event:

package
{
         import flash.events.*;
         public interface IController
        {
                  function keyPressHandler(event:KeyboardEvent):void
        }
}

The Controller.as files implements the IController interface:

package
{
         import flash.events.*;
         public class Controller implements IController
        {
                  private var model:IModel;
                  public function Controller(aModel:IModel)
                  {
                             this.model = aModel;
                  }
                 
                 public function keyPressHandler(event:KeyboardEvent):void
                 {
                             model.setKeyId(event.charCode); // change model
                 }
        }
}

The View.as file provides the view to the user, wherein he selects the keyboard key to be pressed, and when the key is presses, View class is useful again to print the key id on the screen.

package
{
         import flash.events.*;
         import flash.display.*;

         public class View
         {
                  private var model:IModel;
                  private var controller:IController;
                  public function View(aModel:IModel, oController:IController,target:Stage)
                  {
                            this.model = aModel;
                            this.controller = oController;

                            // register to receive notifications from the model
                            model.addEventListener(Event.CHANGE, this.update);

                            // register to receive key press notifications from the stage
                            target.addEventListener(KeyboardEvent.KEY_DOWN, this.onKeyPress);

                   }

                  private function update(event:Event):void
                  {
                           // get data from model and update view
                           trace(model.getKeyId( ));
                  }

                  private function onKeyPress(event:KeyboardEvent):void
                  {
                          // delegate to the controller (strategy) to handle it
                          controller.keyPressHandler(event);
                   }
          }
}

And finally, the MainClass.as, where all the class instance are created is :

package
{
         import flash.display.*;
         import flash.events.*;
         public class Main extends Sprite
         {
                  public function Main( )
                  {
                           var model:IModel = new Model( );
                           var controller:IController = new Controller(model);
                           var view:View = new View(model, controller, this.stage);
                  }
         }
}

Let us examine how this complete MVC program work.

MainClass.as class creates the instances of the model, view and the controller classes, which implement the functions of their respective interfaces. The keyboard keys are in the user's view. So, if any key is presses, the event is captured in view and handled in the controller class. The controller updates the model about the key pressed. After which the model dispatches CHANGE event, which signifies that keyboard captured value has been changed (with respect to the previous pressed key value). This event is handled in the view and the keyboard value is displayed to the user on his screen.

References: http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/actionscript/pdfs/ora_as3_design_patterns_ch12.pdf

Capturing Events in Flash : Part II - Creating Event Handlers

We have already seen few common event classes, let us now try to create a handler for them.
Let us suppose, we have a movieclip, simpleBtn (already present in the respective fla file), we will add a mouse event to it.

this.simplBtn.addEventListener(MouseEvent.CLICK, onClick, false, 0, true);

If you would observe, "addEventListener" takes 5 arguments.

Argument 1: The type of event to capture (in this case its the mouse click event)
Argument 2: The follow up function on dispatching the mouse click event (in this case it is onClick)

The first two arguments are mandatory to be written, whereas the third, fourth, and fifth are optional.

Argument 3: It determines whether the listener works in the capture phase or the target and bubbling phases. If it is set to true, the listener processes the event only during the capture phase and not in the target or bubbling phase. If it is false, the listener processes the event only during the target or bubbling phase.
Argument 4: It is an integer that sets the priority of the listener. Because a single object can use multiple listeners for the same event, it is sometimes useful to specify the order in which the similar listeners are executed. The default value for the priority parameter is 0
Argument 5: It determines whether the reference to the listener is strong or weak. A strong reference (the default as "false") prevents your listener from being garbage-collected. A weak reference does not.

Adding arguments to the function called, when the event is dispatched:

Suppose we want to display a text at simpleTxt, the value of which is passed inside the event listener:

                 this.simplBtn.addEventListener(MouseEvent.CLICK,
                           function(e : MouseEvent) : void
                          {
                                    onClick(e, "button clicked!")
                          },
               false , 0 , false);

               function onClick(e : MouseEvent, str:String) : void
               {
                          this.simpleTxt.text = str;
               }

Hence, the complete code for creating a simple event handler, can be written as follows:

package com{   

           import flash.events.MouseEvent;  

           public class CreatingEventHandler extends Event  
           {      
                      public function CreatingEventHandler()
                      {
                                  init();
                      }

                     private function init():void
                     {
                                  this.simplBtn.addEventListener(MouseEvent.CLICK,
                                  function(e : MouseEvent) : void
                                  {
                                               onClick(e, "button clicked!")
                                  },
                                  false , 0 , false);
                      }

                      private function onClick(e : MouseEvent, str:String) : void
                      {
                                  this.simpleTxt.text = str;
                      }
          }
}

Capturing Events in Flash : Part I - In-Built Events

What is an Event?An event is any specific change/occurrence while the flash application is running. This event can be a caused by any external device, or by completion of a particular step internally by the movie. Following are few in-built event classes in AS3

1.  Event
2.  KeyboardEvent
3.  MouseEvent

Every event has a target associated with it, such that the event occurs on any change done to that particular target.

For example, if we click any button, then that button is the target of that MouseEevent.

Further, every target has a type and name associated with it.

The event target type can be captured as any Button, Movieclip or any other object.
The event target name is the name of the object instance as given in the "fla".

AS3 library provides many in-built events. It is difficult to cover them all in one-go, so let us check the most important ones, that we use in our day-to-day applications.

Mouse Events: Available at flash.events.MouseEvent
10 different operations can be done using the mouse, namely:

1.  CLICK --> associated with any mouse click (down + up) on any object
2.  DOUBLE_CLICK --> associated with any double mouse click (down + up) on any object
3.  MOUSE_DOWN --> associated with any mouse click (down) on any object
4.  MOUSE_MOVE --> associated with any mouse move on any object
5.  MOUSE_OUT --> associated with any mouse out (away from) on any object
6.  MOUSE_OVER --> associated with any mouse kept over on any object
7.  MOUSE_UP --> associated with any mouse click (down + up) on any object
8.  MOUSE_WHEEL --> associated with any mouse scroll on any object
9.  ROLL_OUT --> associated with any mouse out on any particular child of an object
10. ROLL_OVER --> associated with any mouse over on any particular child of an object

KeyBoard Events: Available at flash.events.KeyboardEvent
2 different operations can be done using the keyboard, namely:

1.  KEY_UP --> associated with the released pressed key.
2.  KEY_DOWN --> associated with the pressed key.

Other Events: Available at flash.events.Event
Commonly used events are as follows:
1.  ACTIVATE --> Dispatched when Flash Player or application gains operating system focus and becomes active
2.  ADDED --> Dispatched when the listening displayobject is added to another display object (whether or not in placed in stage
3.  ADDED_TO_STAGE --> Dispatched when the listening displayobject is added to the stage (timeline)
4.  CANCEL --> Dispatched when a file upload or download is canceled through the file-browsing dialog box by the user
5.  CHANGE --> Dispatched when children of any object deal with updating themselves
6.  CLOSE --> Dispatched when the socket connection is closed
7.  COMPLETE --> Dispatched when swf data has loaded successfully
8.  CONNECT --> Dispatched when the socket connection is established
9.  DEACTIVATE --> Dispatched when Flash Player loses operating system focus and is becoming inactive.
10. ENTER_FRAME --> Dispatched every time the playhead enters a new frame and is tied to the frame rate being run by the Flash Player
11. FULLSCREEN --> Dispatched when full-screen mode is turned on or off
12. ID3 --> Dispatched by a Sound object when ID3 data is available for an MP3 sound
13. INIT --> Dispatched when the properties and methods of a loaded SWF file are accessible
14. MOUSE_LEAVE --> Dispatched if you release the mouse button outside the stage
15. OPEN --> Dispatched when an upload or download operation starts
16. REMOVED --> Dispatched whenever a display object is removed from the display list
17. REMOVED_FROM_STAGE --> Dispatched whenever a display object is removed from the stage
18. RENDER --> Dispatched just before the screen is rendered, giving all listening objects the chance to update
19. RESIZE --> Dispatched when the flash window is re-sized, and the parent object handles the re-sizing of all its children
20. SCROLL --> Dispatched whenever any area/field is scrolled (mostly used with text areas)
21. SELECT --> Dispatched when the user selects one or more files to upload from the file-browsing dialog box
22. SOUND_COMPLETE -->Dispatched when the sound finishes playing
23. TAB_CHILDREN_CHANGE --> Dispatched when the value of the object's tabChildren flag changes
24. TAB_ENABLED_CHANGE --> Dispatched when the object's tabEnabled flag changes
25. TAB_INDEX_CHANGE --> Dispatched when the value of the object's tabIndex property changes
26. UNLOAD --> Dispatched when any movie is unloaded

Playing With Colors!

We have studied about colors in the 10th standard physics. There are 3 basic or primary colors, Red(R), Green(G),  Blue(B). Any other color, or a secondary color, is just a combination of these colors, taking single, any two or all three at a time. We have a few common color formations as follows:

R+G ==> Yellow
G+B ==> Cyan
B+R ==> Magenta
R+G+B ==> White

In a rainbow, out of the 7 colors, 3 are primary, and the rest are secondary. Any colored thing that we see, has its own RGB component, and its color visibility depends on the intensity of each component.

Like, if we observe any image by enlarging it, we would find numerous pixels. Apparently, an image is the result of pixel-clustering. Every pixel has it's own RGB component, which provides a color to that pixel. That is how we see the image in various colors.

Flash provides a good option to change the color of any object both at the time of compilation, as well as run-time. Changing the object color at compile-time can be done by using the Flash CS3/ CS4, the same way we do it in Microsoft-Paint. For run time color effects, we have "ColorMatrixFilter", an in-built class in AS3. The constructor of this class takes an array as its argument. The array has 20 elements in it for a 4X5 color transform.

The first five elements of the array are worked upon to calculate the "Red Result" of the pixel, next 5 gives the "Green Result", then next 5 gives the "Blue Result" and finally, the last 5 give the "Alpha Result" of the object. For instance:

Let the array be:
a = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0];

or

a = [1,0,0,0,0, 0,1,0,0,0, 0,0,1,0,0, 0,0,0,1,0];

or

a = [1,0,0,0,0,   /* Red */
     0,1,0,0,0,   /* Green */
     0,0,1,0,0,   /* Blue */
     0,0,0,1,0];  /* Alpha Transparency */

All the above 3 notations of color matrix are the same. For each color value in the array, a value of 1 is equal to 100% value being sent to the output.

If sR, sG, sB, sA are the respective red, green, blue and alpha components of each pixel, then "Red Result", "Green Result", "Blue Result" and "Alpha Result" are calculated as follows:

redResult   = (a[0]  * sR) + (a[1]  * sG) + (a[2]  * sB) + (a[3]  * sA) + a[4]
greenResult = (a[5]  * sR) + (a[6]  * sG) + (a[7]  * sB) + (a[8]  * sA) + a[9]
blueResult  = (a[10] * sR) + (a[11] * sG) + (a[12] * sB) + (a[13] * sA) + a[14]
alphaResult = (a[15] * sR) + (a[16] * sG) + (a[17] * sB) + (a[18] * sA) + a[19]

All the 4th elements of each row in the above matrix, can have values between 0.0 to 1.0 (0.0 for no visibility and 1.0 for maximum visibility).

a[4], a[9], a[14] and a[19] are the offset values. As we already know, that any color-effect has a range of 0-255 (0 gives no color effect and 255 gives maximum color effect), so an offset, between -255 and 255, can optionally be added to each result.

Adding more fun to the matrix:

Suppose, we want all the green values in the pixels, to show the red color effect, the resultant matrix would be of like:

a = [1,0,0,0,0,   /* Red */
     1,0,0,0,0,   /* Green */
     0,0,1,0,0,   /* Blue */
     0,0,0,1,0];  /* Alpha Transparency */

The brightness of the image is increased on adding the offset value between 0 to 255, and can be decreased the same way by using offset values between -255 to 0. For example:

Matrix for a more bright image:
[1,0,0,0,25,  /* Red */
 0,1,0,0,25,   /* Green */
 0,0,1,0,25,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

Matrix for a less bright image:

[1,0,0,0,-25,  /* Red */
 0,1,0,0,-25,   /* Green */
 0,0,1,0,-25,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

Like this, we can give multiple color and brightness effects to any image or object.