Mouse Event and Drawing API : A simple colorful application.

Events are responsibility for to do certain things. There are many Events inside AS 3. Like Mouse Event, Keyboard Event, Timer Event, Text Event and so many others.

Preview:



In this post we will do some experiment with Mouse Event. Because this Event is very simple and straightforward. When we use our mouse there are many parameters are associate with it, Like, CLICK, MOUSE_OVER, MOUSE_OUT, MOUSE_DOWN, MOUSE_UP and so many others. If you want more information about Event, then feel free to visit this link.

Before move ahead, I will give you the details of our project setup, so, you will get the same result at the end.

Create a folder any where in your hard drive, name it what ever you want. Then launch the flash SDK and create two files, one is Flash File (Action script 3.0) and another is ActionScript File.

After create the file save both file inside the folder, which one you created few minutes back. I am giving the flash file name "event" and for the class file name "EventTest". Feel free to give more descriptive name for your project. Open the "event" flash file, then go to the property area and the publish section, you will find out similar like this,

You can see a field called class, enter there your class file name. My class file name is EventTest, if your file name is something different enter the same name here.

Now open the class file called EventTest and enter the following code -

package {

import flash.display.Sprite;
import flash.events.MouseEvent;

public class EventTest extends Sprite {

public function EventTest() {
stage.addEventListener(MouseEvent.CLICK, onClick);
}

private function onClick(evt:MouseEvent):void {

var _color:uint = Math.random() * 0xFFFFFF;
var _xPos:Number = Math.random() * stage.stageWidth - 10;
var _yPos:Number = Math.random() * stage.stageHeight - 10;
var _radius:Number = Math.random() * 75 - 25;

var _myShape:Sprite = new Sprite();
_myShape.graphics.beginFill(_color);
_myShape.graphics.drawCircle(_xPos, _yPos, _radius);
_myShape.graphics.endFill();
addChild(_myShape);

}

}
}

Feel free to download the source file for your reference.

A cool animated christmas card design using particle effect.

Few days back when I am watching a video tutorials about the particle systems inside action script 3. this Christmas card design came in my mind. So I thought let's apply the technique and create a cool design. For this design I used illustrator for background and mountain illustration and rest all animated thing are using AS3.
It's cool.

Animated circle using if condition.

The conditional statement allows you to test a condition and execute a block of code if that condition exists, or execute an alternative block of code if the condition does not exist.

In this post, I will show you how to create a moving ball animation (and it should not exit the stage area) using the if condition. This technique you will get useful when you are creating game.

Final Preview:


Create a new Action script 3 document(width-475, height-250) from the flash welcome screen. After creating the new file. Open the action panel from window menu. You can use the shortcut key F9 from your keyboard. In side your action panel copy and paste the following code and test the movie, you will find out some animated circle.

Action script code:

import flash.display.Sprite;

var myArray:Array=[];
var xVel:Number=5;
var yVel:Number=5;
var myBall:Sprite;

for (var i:Number = 0; i < 75; i++) { myBall = new Sprite(); myBall.graphics.beginFill(Math.random() * 0xffffff, 1); myBall.graphics.drawCircle(0, 0, 2 + Math.random() * 20); myBall.graphics.endFill(); myBall.x= 100 + (Math.random()*(stage.stageWidth-200)); myBall.y= 100 + (Math.random()*(stage.stageHeight-200)); addChild(myBall); var ballObj:Object = new Object(); ballObj.ball=myBall; ballObj.xVal=2+Math.random()*8; ballObj.yVal=2+Math.random()*8; myArray.push(ballObj); } this.addEventListener(Event.ENTER_FRAME, onEnter); function onEnter(event:Event):void { for (var i:Number = 0; i < myArray.length; i++) { myArray[i].ball.x+=myArray[i].xVal; myArray[i].ball.y+=myArray[i].yVal; if (myArray[i].ball.x>=stage.stageWidth-myArray[i].ball.width/2||myArray[i].ball.x<0+myArray[i].ball.width/2) { myArray[i].xVal=- myArray[i].xVal; } if (myArray[i].ball.y>=stage.stageHeight-myArray[i].ball.height/2||myArray[i].ball.y<0+myArray[i].ball.height/2) {
myArray[i].yVal=- myArray[i].yVal;
}
}
}

Simple puzzle game using hitTestObject.

Flash is not only for the creating animation. Using flash, developer can create game for any plat form like desktop, mobile, iPhone and even though for android. Creating flash game is not too much hard, if you are having solid knowledge of oops(object oriented programming) concept. Action script 3.0 is purely object oriented and It is very much similar to java script language.

In this post I will show you how to create a simple puzzle game using AS 3.0 inbuilt method call hitTestObject. For this Game I am using the external action script. The Drag game is my document class and the DragDrop class I am using to drag the puzzle piece. I am sharing the source code. Fell free to change your way and have fun.



DragGame class (document class) -

package classes{
import flash.display.Sprite;
import classes.DragDrop;
import TL;
import TM;
import TR;
import BL;
import BM;
import BR;
import endSlide;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.utils.Timer;
import flash.events.TimerEvent;
import classes.blinkText;
import fl.transitions.Tween;
import fl.transitions.easing.*;

public class DragGame extends Sprite {
private var tl:TL;
private var tm:TM;
private var tr:TR;
private var bl:BL;
private var bm:BM;
private var br:BR;
private var messageSlide:endSlide;
public var slideTween:Tween;

private var totalPieces:Number;
public var currentPieces:Number;

public function DragGame() {
totalPieces = 6;
currentPieces = 0;
createPuzzlePiece();
}

public function createPuzzlePiece():void {
tl = new TL();
addChild(tl);
randomPosition(tl);
tl.targetPiece = tlt_mc;
tl.addEventListener(MouseEvent.MOUSE_UP, checkTarget);

tm = new TM();
addChild(tm);
randomPosition(tm);
tm.targetPiece = tmt_mc;
tm.addEventListener(MouseEvent.MOUSE_UP, checkTarget);

tr = new TR();
addChild(tr);
randomPosition(tr);
tr.targetPiece = trt_mc;
tr.addEventListener(MouseEvent.MOUSE_UP, checkTarget);

bl = new BL();
addChild(bl);
randomPosition(bl);
bl.targetPiece = blt_mc;
bl.addEventListener(MouseEvent.MOUSE_UP, checkTarget);

bm = new BM();
addChild(bm);
randomPosition(bm);
bm.targetPiece = bmt_mc;
bm.addEventListener(MouseEvent.MOUSE_UP, checkTarget);

br = new BR();
addChild(br);
randomPosition(br);
br.targetPiece = brt_mc;
br.addEventListener(MouseEvent.MOUSE_UP, checkTarget);
}
private function checkTarget(event:MouseEvent):void {
if(event.currentTarget.hitTestObject(event.currentTarget.targetPiece)) {
currentPieces++;
event.currentTarget.x = event.currentTarget.targetPiece.x;
event.currentTarget.y = event.currentTarget.targetPiece.y;
event.currentTarget.removeEvent();
if (currentPieces == totalPieces) {
  //trace("you win the game");
messageSlide = new endSlide();
addChild(messageSlide);
//messageSlide.alpha = .75;
slideTween = new Tween(messageSlide,"y",Elastic.easeOut,-300,0,2,true);
}
}
else {
event.currentTarget.x = event.currentTarget.origX;
event.currentTarget.y = event.currentTarget.origY;
}

}
public function randomPosition(puzzlePiece:*):void {
puzzlePiece.x = Math.round(Math.random() * (190 - puzzlePiece.width));
puzzlePiece.y = Math.round(Math.random() * (275 - puzzlePiece.height));
puzzlePiece.origX = puzzlePiece.x;
puzzlePiece.origY = puzzlePiece.y;
}
}

}

DragDrop class -
package classes{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.DropShadowFilter;

public class DragDrop extends Sprite {

public var targetPiece:*;
public var origX:Number;
public var origY:Number;

public function DragDrop() {
origX = this.x;
origY = this.y;

this.addEventListener(MouseEvent.MOUSE_DOWN, dragPuzzle);
this.addEventListener(MouseEvent.MOUSE_UP, dropPuzzle);
this.buttonMode = true;

}
public function dragPuzzle(event:MouseEvent):void {
//trace("drag");
this.startDrag();
this.parent.addChild(this);
this.filters = [new DropShadowFilter(10, 45, 0x000000, 1, 5, 5, 1, 1)];
}
public function dropPuzzle(event:MouseEvent):void {
//trace("drop");
this.stopDrag();
this.filters = [];
}
public function removeEvent():void {
this.removeEventListener(MouseEvent.MOUSE_DOWN, dragPuzzle);
this.removeEventListener(MouseEvent.MOUSE_UP, dropPuzzle);
this.buttonMode = false;
}

}

}

Wish you a very happy Diwali.

Diwali is a festival of Lights. On the precious moment of Diwali I wish you Happy Diwali and I pray that you get all your endeavors fulfilled as well as you get lots of gifts and sweets this Diwali.

Animated background for your movie project.

Flash is not only for the web. Using flash you can create application for broadcast and for third screen like mobile, iPhone and android. In this post I will show you some of the animated background which and all I was created during my learning time. For this animation I am not use any action script. Animation is timeline base.
If you want to see the story boarding for the animated back ground, then feel free to click this link. Click here to see the story boarding.
A city side animated scene :

A rainy day evening :

A scene from mountain :

A scene from river side :

A full moon day evening :


Final animation from my you Tube channel:

A simple photo gallery using Array and looping functionality.

Creating a slide-show is best practice for learn Array,
condition and looping structure. If you are familiar with all those
then you can do so many thing, inside action script.

This project is very straight-forward. I am creating a series of thumbnail images for the click event and another series of large image to display to the main content area. Very beginning I am hiding all the large images using a property called visible. And I am storing all the thumb images and the large images instance name inside two array called "imageArray" and "thumbArray". And I am looping inside the array using for loop statement.

This is a very simple example, If you are having little bit of AS 3.0 knowledge.
So, Hope you will get this post helpful. Feel free to copy the code for your experiment and have fun.
Example:


Source sode :

import flash.events.MouseEvent;

var imageArray:Array = [one_mc,two_mc,three_mc,four_mc,five_mc,six_mc,seven_mc];
var thumbArray:Array = [thumbOne_mc, thumbTwo_mc, thumbThree_mc, thumbFour_mc, thumbFive_mc,
thumbSix_mc, thumbSeven_mc];

//This for loop is for the mouse event.
//If you are repeating one type of function again and again, then
//loop structure is the right choice. So, you can easily itirate each of then very easily.

for (var i:Number = 0; i < thumbArray.length; i++) {
thumbArray[i].addEventListener(MouseEvent.ROLL_OVER, onOver);
thumbArray[i].addEventListener(MouseEvent.ROLL_OUT, onOut);
thumbArray[i].addEventListener(MouseEvent.CLICK, onClick);
thumbArray[i].mouseChildren = false;
}

function onOver(evt:MouseEvent):void {
evt.target.gotoAndPlay("rollOver");
evt.target.buttonMode = true;
}

function onOut(evt:MouseEvent):void {
evt.target.gotoAndPlay("rollOut");
}

function onClick(evt:MouseEvent):void {

clearPhotos();

var count:Number = thumbArray.length;
var index:Number;

for (var i:Number = 0; i < count; i++) {
if (evt.target.name == thumbArray[i].name) {
index = i;
}
}
imageArray[index].visible = true;
}

//This function is to clear all photo, when the movie will start.
function clearPhotos():void {
one_mc.visible = false;
two_mc.visible = false;
three_mc.visible = false;
four_mc.visible = false;
five_mc.visible = false;
six_mc.visible = false;
seven_mc.visible = false;
}
clearPhotos();