Coded Creativity

Important READ!!!

noreply@blogger.com (Anand Varma) — Wed, 28 Jul 2010 04:43:00 +0000

CodedCreativity has been moved to flashbuff.blogspot.com

kindly cooperate and visit flashbuff.blogspot.com here on

-inconvenience regretted

Manipulating Objects in Flash AS3

noreply@blogger.com (Anand Varma) — Wed, 14 Jul 2010 06:25:00 +0000

This is a basic tutorial that aims at teaching those who are new to Flash, ways to move objects (MovieClips,Buttons etc.) on the Stage and throws light on the various properties of movieclips and buttons and the ways to manipulate them...

Let's start off by creating a new Flash file (Ctrl+N). Now add/create a movie clip onto the stage of the main movie. I have imported this image (Ctrl+R) onto the stage and converted it into a movieclip (F8).

This should be the Object that we will be manipulating with the help of actionscript. Now we need to give this movieclip an instance name so that we can refer to it while writing our code. To do so, fire up the properties window/pane (Ctrl+F3) and set the instance name to "myObj_mc".

Now we will add buttons onto the stage which will control the movement and properties like transparency (alpha). Add 4 buttons to move the Object in the four directions respectively to act as controls to move the movieclip around and add another button to control transparency as show below.

Now change the instance names of the button with the left arrow to "left_btn", right arrow button to "right_btn", up arrow button to "up_btn", down arrow button to "down_btn" and the button that says transparent to "alpha_btn".
Once we are done with this, we can proceed to the actionscript part.

Code ::

up_btn.addEventListener(MouseEvent.MOUSE_DOWN,up_fn);
down_btn.addEventListener(MouseEvent.MOUSE_DOWN,down_fn);
left_btn.addEventListener(MouseEvent.MOUSE_DOWN,left_fn);
right_btn.addEventListener(MouseEvent.MOUSE_DOWN,right_fn);

alpha_btn.addEventListener(MouseEvent.MOUSE_DOWN,alpha_fn);

function up_fn(e:MouseEvent)
{   myObj_mc.y-=10;
    // this is equivalent to: myObj_mc.y=myObj_mc.y-10; }

function down_fn(e:MouseEvent)
{   myObj_mc.y+=10;
    }

function left_fn(e:MouseEvent)
{   myObj_mc.x-=10;
    }

function right_fn(e:MouseEvent)
{   myObj_mc.x+=10;
    }

function alpha_fn(e:MouseEvent)
{   myObj_mc.alpha=0.5;
    }

Code description ::

up_btn.addEventListener(MouseEvent.MOUSE_DOWN,up_fn);
down_btn.addEventListener(MouseEvent.MOUSE_DOWN,down_fn);
left_btn.addEventListener(MouseEvent.MOUSE_DOWN,left_fn);
right_btn.addEventListener(MouseEvent.MOUSE_DOWN,right_fn);

alpha_btn.addEventListener(MouseEvent.MOUSE_DOWN,alpha_fn);

In these first few lines, we are creating eventListeners to detect events from the event stream and when a "MOUSE_DOWN" event is detected, it calls the corresponding functions wherein we define how it should react to such an event.
MOUSE_DOWN is a subset of class MouseEvent and when the event is recorded, it calls the corresponding function with arguments as a MouseEvent...

function up_fn(e:MouseEvent)
{   myObj_mc.y-=10;
   // this is equivalent to: myObj_mc.y=myObj_mc.y-10; }

function down_fn(e:MouseEvent)
{   myObj_mc.y+=10;
    }

function left_fn(e:MouseEvent)
{   myObj_mc.x-=10;

}

function right_fn(e:MouseEvent)
{   myObj_mc.x+=10;
    }

function alpha_fn(e:MouseEvent)
{   myObj_mc.alpha=0.5; //sets transparency to half
    }

In the above code, "x" "y" and "alpha" marked in green, are properties of movielips that define the placement along X-axis , along Y-axis and the transparency respectively.
When we say myObj_mc.y-=10; This means that we are moving the movieclip by 10pixels, upwards. Similarly, the movements along other directions are written in the other functions and the transparency is set to half when the corresponding button is pressed (refer alpha_fn function).

Note:: The origin is considered to be at the top-left corner and as we move right, x-coordinate increases and as we move down, y-coordinate increases.
And alpha (transparency) takes values from 0-1, 0 corresponding to full transparency and 1 corresponding to no transparency.

The functions defined are that the event listeners would call on recording a mouse event. We are defining functions with a parameters "e" which is a MouseEvent Object, this is because when an eventListener calls the functions, it sends the MouseEvent as an argument and if we don't define parameter "e", flash would detect an Argument Mismatch Error.

To download the source files, clik here (movement.fla).

This tutorial can be extended to buttons and graphics too as they carry almost the same properties.
In case of doubts or any problems faced while trying out this tutorial, feel free to leave a comment below.

Nokia Point & Find follows the trail laid by Google Goggles

noreply@blogger.com (Anand Varma) — Sun, 11 Jul 2010 18:47:00 +0000

For those of you who havent heard of either Google goggles or Nokia Point and Find, these are both augmented-reality projects being developed by Google and Nokia Europe respectively, which aim to bring smart image recognition features to smartphone users. What this means is that users can point their smart phones to any object and the phone wold identify it and provide relevant content.

Google Goggles ::

Google initially started the Google Goggles project at Googlelabs to deploy the application targeting their new mobile operating system, Android which they expect to launch to other OS's like Symbian in the near future.
Though it is still under the beta pahse, it can be downloaded from the googleLabs website and currently features recognition of landmarks, text, posters, logos and barcodes.
Apart from identifying these, the application also populates relevant content and links from it's vast online database.
One can scan a barcode and get Product Information and also the best buy price around your location by parsing your GPS data.
It's text recognition can help tourists understand foreign language and can also double up as a virtual guide with its landmark recognition feature.
It can also parse text from off cards and save them as contacts.
GoogleLabs seem pretty ambitious with their project and wish to extend the recognition capabilities to virtually every object possible in the near futue.
http://www.google.com/mobile/goggles/

Nokia Point & find ::
Seeing the great fortitude of possibilities that such an application can provide it's users, Nokia has set a foot forward and started the development of Nokia Point and Find.
Like Google Goggles, Nokia Point and Find is still in it's beta version and hence offers limited functionality. As of now its ability to detect objects is limited to detecting Movie Posters and provides relevant information and lets users book tickets online.
Nokia Point and Find also promises to recognize barcodes and monuments in the future. But as it is in it's beta phases, the recognition accuracy is below par and has a long way to go.
http://europe.nokia.com/services-and-apps/nokia-point-and-find

Conclusion ::
Both the Applications have a lot of potential and we can expect to see a full release in about a year or so with reasonable detection success and as more people start using them, their image recognition algorithms can learn and result in better detection and with user submitted data, the database can get very accurate over time.
At this point of time, Google Goggles is miles ahead and Nokia has to do a lot of coping up to prove their mettle and please their loyal users.

At this point of time all we can say is that augmented reality has a lot to achieve but then it sure will find a place in our day to day lives...

Introduction to Buttons & Events in Flash (AS3)

noreply@blogger.com (Anand Varma) — Sun, 11 Jul 2010 17:15:00 +0000

Buttons are objects categorized as Symbols and are used to enhance user interaction. Their timeline consists of four frames or states namely Up, Over, Down, Hit which are respectively the frame to display when the button is inactive, when the user brings his mouse over it, when the user clicks it and the area in which the button should accept mouse events...

Creating a Button ::
To create a new button, select "New Symbol" from the insert menu or use the keyboard shortcut, Ctrl+F8 and choose Button as the type for the new symbol.
Select the Up frame and draw on the stage, in a way you would like the button when idle.
Now right click the Over frame and select "Insert KeyFrame" this should create a duplicate of the Up frame which you can edit or you could select "Insert Blank KeyFrame" if you wish to edit from scratch either way, make the Over frame reflect how you would like the button to look when the mouse moves over.
Similarly, edit the Down frame and the Hit frame.
Note that the Hit frame is not essential for the button to function but then it's advised you use it to define the button area. This can be done by drawing a shape in the hit frame to reflect the buttons area of effect.

Now that we are done with creating our button, we need to write some actionscript to tell the button how it need to react to Mouse Events (when a mouse moves over, mouse button is pressed, etc.).

Before we do that,we need to move back to the main stage by clicking on the Scene1 link toward the top right corner of the window as show...

Now open the library (Ctrl+L) where the button we just created is listed and drag it and drop it on the stage of the main movie. This should create an instance of the button.
Open the properties window (Ctrl+F3) and select the button on the stage. In the properties pane, change the instance name to "my_btn".

Now Select the first frame from the timeline, right click and select "Actions" this should open the actions pane where you will need to put the following code.

Code ::

my_btn.addEventListener(MouseEvent.CLICK,handleClick);

function handleClick(e:MouseEvent)
{
trace("my_btn was clicked !!!");
// code to be executed on click here
}

Code Description ::

my_btn.addEventListener(MouseEvent.CLICK,handleClick);

In this line, we are assigning an Event Listener to the button (instance name : "my_btn") to listen to the Events Stream and call the function "handleClick" when a MouseEvent, "CLICK" is registered.

In simple words, the function is called when the user clicks the button we put on the stage.

Syntax for initializing an eventHandler :: Object.addEventListener(Event,function_name);

function handleClick(e:MouseEvent)
{
trace("my_btn was clicked !!!");
// code to be executed on click here
}

Here, we are defining a function by name handleClick which will be called when a mouse click event is registered.
Here a parameter variable, "e" of the type MouseEvent is set because the eventHandler function passes an event variable as arguments and the function needs to accept it though we dont use it in the code.

Now that you have a basic idea about using buttons and listening to events, you can extend your knowledge to different events and also edit the basic handleClick function in this tutorial and extend it for more complex operations.

Introduction to Animation in Flash :: Timeline and Tweening.

noreply@blogger.com (Anand Varma) — Sun, 11 Jul 2010 07:00:00 +0000

The first thing that we should we familiar with when making animations in flash is the timeline. By the end of this tutorial, you will be familiar with frames, key-frames and the timeline and will be able to create animations of objects using Tweening...

The TimeLine ::
The timeline is that area where you will be working with layers and frames to alter the movies contents or to animate them.
It also contains info like fps, current frame and length of the movie...

Frames and KeyFrames ::
Keyframes are those frames that define the initial and final postitions of an object in an animation and the frames inbetween are filled by fillers known as frame. A keyframe is marked by a circle (frame 1 in picture) and frames are marked by rectangles...

Tweening :: (in Flash Cs4 and later)
Tweening is a technique employed in animation where intermediate frames are developed inbetween two KeyFrames to create a smooth animation, giving the appearance of the first keyframe evolving into the other.

To create our tweening animation, first launch Flash and create a new file (Ctrl+N) and select ActionScript3 from the list. This should open a new flash movie with a white stage. Now move the mouse over to the timeline and select the first frame as shown in the above picture. Now import an image that you would like to animate onto the stage. To do so select import to stage from the menu (File>Import>Import to stage) or use the shortcut Ctrl+R and select an image.

This should bring the image onto the stage. Select the image and convert it into a graphic symbol (Ctrl+F8). Nowright click on the and select "Create Motion Tween" this should create some frames for the animation as shown...

Now select the last frame and move the image in the direction you want it to move this should show a green trail if done correctly, as show in the image... Now test the movie and you should see your object animate and move. In case you want the animation to last longer or shoter, you can drag the last keyframe to the right or to the left respectively to reduce the movie time...
Now that you know how to tween postition, you can try out tweening other properties like transparency, scale, rotation or even combinations of any to create animations...This can be achieved by setting initial properties in keyframe 1 and final properties in keyframe 24.

For a more detailed description on tweening, try the article:Intro to Animation by kirupa.com

Nut and Bolts of Flash: Symbols- MovieClips, Buttons, Graphics

noreply@blogger.com (Anand Varma) — Sun, 11 Jul 2010 05:54:00 +0000

Before we start creating Flash content, we need to know the nuts and bolts that go into making these... In this article you will learn about some of the most commonly used objects (Symbols) and their properties. Even these Symbols are objects and hence are defined by a class with properties and functions specific to each...

Button Symbol ::
Button symbols are used to create interactive buttons. Button symbols are made up of four key-frames, also known as states and are related to user interaction and are labeled Up, Over, Down and Hit .
The Up state defines the button when the button is inactive, Over state when the mouse moves over it, Down state when the mouse button is pressed down on the button, Hit state defines the hit-area of the button or the effective button area.

MovieClip Symbol ::
Movie Clips are actual movies within a movie. These are used for animations that run independent of the main movie's Timeline. These are similar to actual flash movies and can contain Actions.

Graphic Synmol ::
Graphic Symbols are mainly used for static images that need to be re-used in a movie. They cannot contain actions or sounds. These do not play independent of the main timeline and hence playing animations through graphic symbols and syncing them would be a hassle.

You can get your hands-on by creating your own symbol. To do so, select Symbol from the insert menu (Insert > Symbol) or use the shortcut, Ctrl+F8
and the window that opens, select the symbol you wish to create.
In case of any confusion regarding timelines and frames, try this article.. Flash TimeLine

Implementing Custom Classes in AS3

noreply@blogger.com (Anand Varma) — Sat, 10 Jul 2010 12:13:00 +0000

Now that we know how to create classes in AS3, we can now learn to implement these custom classes written by us into objects in the flash movie.
Before continuing, it is highly recommended you go through the article, Getting Started with ActionScript 3.0 to learn how to create your own classes.

The custom class ::
To start off, we will need an actionscript class. You could use the sample greeter class provided below or you could use any other class you have at hand.
Copy the code below, open Flash and create a new ActionScript 3.0 class and paste the code and save the file as "greeter.as"

Sample greeter Class ::

package {

public class greeter

{

    private var my_name:String;



    public function greeter()

    {

        }



    public function init_name(n:String)

    {    my_name=n;

        trace("Initialized Name!")

        }



    public function hello()

    {    trace("Welcome "+my_name+".");

        }

    }

}

Creating Objects from our class ::

Now that we are done writing the actionscript class, we can start with Flash.
Open Flash and create a new file (Ctrl+N) and select ActionScript 3.0 from the list. This should open a blank Flash movie with a white stage.
Now before we start working, save the movie (Ctrl+S) and choose a file name of your choice and make sure you save it along with the actionscript file in the same directory.

Now select the first keyframe, right click and select Actions from the context menu... This should open the actions window, a miniature version of the one which you would have seen while writing your class.
This is where the code goes...

Code ::

var n1:greeter=new greeter();
n1.init_name("Anand");
n1.hello();

var n2:greeter=new greeter();
n2.init_name("Dimitri");
n2.hello();

Code Description ::

var n1:greeter=new greeter();

This line of code creates a new object with an instance name "n1", in this case an object of class greeter.

As soon as an instance of the object is created, the constructor function is called and instances of variables and functions are created, specific to each instance.

n1.init_name("Anand");

Here, we are calling the "init_name" function from the n1 instance of the greeter object with arguments "Anand".

n1.hello();

This calls the hello function of the n1 instance of greeter object.

Similarly, in the next few lines, a new instance of the object greeter, "n2" is created and functions are called from this instance.

Now that we are done with the code, we can test the movie.
To do so, press Ctrl+Enter and you can see the output generated by the trace function in the output window...

In case of any existing confusion about objects and classes, this schematic should help you better understand them...

Incase you face any problems or if you have any sujjestions, feel free to leave a comment.

Getting Started with ActionScript 3.0

noreply@blogger.com (Anand Varma) — Sat, 10 Jul 2010 04:45:00 +0000

Before we begin with ActionScript, we should know that As3 is an object oriendted programming language (OOP) and thus it's highly sujjested you go through the Introduction of OOP article before continuing...

A quick Summary of OOP ::
In the oop model, pieces of code are considered objects and each such object is properly defined by a class with variables and functions specific to the object. Such discrete pieces of code can be easily reused and allows for encapsulation.

Creating you first class and package
A package is a collection of classes, more like a folder with all the classes needed for the project.
And classes are pieces of code that define functions and variables specific to an object.
lets not get into the details now and start with our first class which defines a Ball Object.

Open Flash and choose to create a new file (Ctrl+N) and select ActionScriptFile and write the code as shown below and save it as Ball.as

Note:: A package name is also the relative path to the class with respect to the flash files. So in this case if you intent to save your flash files in the C:\ Drive, the the actionscript file (Ball.as) sholud be saved in C:\mypackage\as3\

Code::

package mypackage.as3 {

class Ball

{

import flash.display.*;

var x:Number;

var y;Number;

function Ball(){

// some initialization code here

trace("Object Successfully created");

}

public function changeSize(){

// code to change size here

}

private function secret(){

// some code, whose functionality you wish to hide

}

}

}

Code Description ::

package mypackage.as3

in this line, we are defining a package, which acts as a repository of all our classes written for the specific application.

class Ball{
import flash.display.*;

in the first line, we are defining our class which contains properties and functions of any Ball object that we use in our program. And the second line imports all classes from the display package so that they could be used in our class.

var x:Number;

var y:Number;

Now we are creating two variables x and y which will exist for every instance of the ball object which we create in the future.

here "var" keyword indicates that we are creating a new variable of name "x" and ":Number" tells it what type of variable it is. In this case, a number.

Syntax for Creating a new Variable :: var variableName:variableType;

function Ball(){

// some initialization code here

trace("Object Successfully created");

}

Here, we are defining a constructor. A constructor is a special function which is executed as soon as an instance of an object is created. It is distinguished from other functions as it has the same name as the class.

The trace function is one that is heavily used for debugging in flash. This function prints the arguments passed into an output window. In this case, it prints "Object Successfully created".

public function changeSize(){

// code to change size here

}

Here, we are defining a normal function by the name changeSize. The function type is set to public (access modifier) which means that it can be accessed from outside the class too.

AcessModifiers can be prefixed to classes, functions and any kind of variables.

private function secret(){

// some code, whose functionality you wish to hide

}

Here, we are defining another function, only this time, the access modifier set to private which means it can only be called from inside the class.

Syntax for Defining a function :: function functionName(parameters-here){ }

This is just the actionscript class for an object, Ball. You will not be able to see the output as we have'nt created any instance of the ball object yet. And even if you feel a little intimidated by all the jargon and complexity of OOP, i can best assure you you can still go ahead as one can develop applications without using classes too...

Read the acticle, Implementing Custom classes to know how to implement classes and custom objects into Flash.

Introduction to ActionScript

noreply@blogger.com (Anand Varma) — Sat, 10 Jul 2010 04:43:00 +0000

ActionScript is an open source scripting language, developed by Adobe to be used with it's authoring software, Flash to create rich interactive applications for the web, targeting the Flash Player platform.

It is a implementation of the ECMA script and hence shares major similarities in syntax with the ever so popular Javascript.

What was started to merely move sprites on the stage of a Flash movie, ActionScript and Flash saw a great deal of evolution and have incorporated a great deal of functionality over time and have proved their mettle when it comes to creating rich and interactive content for the web.

ActionScript 3.0

Following the takeover of Macromedia, Adobe had acquired the trademarks for Flash and Actionscript. To hold the loyalty of Flash developers, Adobe worked a great deal on developing the Flash authoring tool and the ActionScript language and made major changes to the core functions and classes and also introduced some very new classes for native touch support and some other new technologies.
A year later,along with Flash Player 9, Adobe released a newer variant of ActionScript which was completely re-written and a whole new framework was developed from scratch for it to run on ( the Action Script Virtual machine 2 (or) ASVM2 ). This meant that flash content written with AS3 (Actionscript 3) would run upto 10 times faster than any legacy ActionScript code. AS3 also introduced Object Oriented Programming(OOP) which allowed for re-usability of code and better management of code. Since so many major changes were made, flash movies using AS3 would not be backward compatible and to support this, a great acceptance of the flash player was shown after release.

Migrating to ActionScript 3.0 (Pros and Cons)
ActionScript 3 brought along with it tremendous amount of changes and people had mixed opinions on the newer variant and were hesitant to shift to AS3 considering the steep learning curve associated with it.
But on the other hand it had brought in vast functionality which was previously unavailable. The libraries had grown two-fold and not to mention the new ASVM2 framework and GPU accelration for media rich rich content which allowed for a faster and smoother experience of content at the end-user.
The pros had definitely out-weighed the cons and developers were seen slowly migrating to AS3.

Conclusion

Adobe has firmly grounded its roots into the web industry with it's roster of popular software solutions for web design and with the new additions of Flash into its roster adds a cap to its feather.
Sure ActionScript3 comes with a steep learning curve but then the results are totally worth it if you are interested in programming rich internet Applications or web design. Though it might seem frightening in the begenning, you will definitely get a hang of it in some time and considering the vast community support available thorught forums and websites dedicated to AS3, it would just make life simpler.
Considering the fact that Flash Player is one of the most accepted plug-in with about 99% of the computers enjoying its capabilities and the fact that user experience is taking higher priority, Flash is here to stay.

Subscribe to the RSS feed and stay updated with the latest tutorials and news on flash...

Hello World !

noreply@blogger.com (Anand Varma) — Fri, 09 Jul 2010 06:30:00 +0000

hello World