In this Flash tutorial you will learn how to create a dynamic draggable mask in Actionscript 3.0.
in AS3 the mask property is used, which looks like “img_container.mask = maskObject”. The “img_container” is the object which gets masked, and the “maskObject” is the actual mask itself.
Dynamic mask in Actionscript 3
Step 1:
Open an Actionscript 3.0 file.
Import the image you wish to use as your masked background by selecting File > Import > Import to Stage.
Step 2:
Select your image and convert it into a symbol by pressing F8. Give your image an appropriate name, check movie clip and click ok. Then select your movie clip and give it the instance name: img_container.
Step 3:
On the timeline insert a new layer called “Action”,abd paste the code below:
//
function applyMask(){
var maskObject:Sprite = new Sprite();
maskObject.graphics.beginFill(0xFF0000);
maskObject.graphics.drawRoundRect(img_container.x, img_container.y, img_container.width, img_container.height, 10);
addChild(maskObject);
img_container.mask = maskObject;
}
applyMask();
Thursday, December 24, 2009
Friday, December 18, 2009
Change text color at runtime
if you want to change your text color at run-time then use textColor property of the TextField.
Here is the sample code: (if your TextFiel's instance name is "txtArea")
txtArea.textColor = 0x66CC66;
now your text became green color. ;)
Here is the sample code: (if your TextFiel's instance name is "txtArea")
txtArea.textColor = 0x66CC66;
now your text became green color. ;)
Double click in AS 3.0
//function for calculating is click is double click or single click:
stage.addEventListener(MouseEvent.CLICK, checkDoubleClick);
var mClick:Boolean = false;
var timer;
var timer2;
//
function checkDoubleClick(e:*) {
if (! mClick) {
timer = getTimer()/1000;
mClick = true;
} else {
timer2 = getTimer()/1000;
}
//if it is a double click
if ((timer2-timer)<.20) {
trace("double click");
} else {
timer = getTimer()/1000;
trace("single click");
}
}
stage.addEventListener(MouseEvent.CLICK, checkDoubleClick);
var mClick:Boolean = false;
var timer;
var timer2;
//
function checkDoubleClick(e:*) {
if (! mClick) {
timer = getTimer()/1000;
mClick = true;
} else {
timer2 = getTimer()/1000;
}
//if it is a double click
if ((timer2-timer)<.20) {
trace("double click");
} else {
timer = getTimer()/1000;
trace("single click");
}
}
Draw rectangle with mouse
// draw rectangle using mouse move
var isDrag:Boolean = false;
var _point:Point;
const rect:Graphics = graphics;
//
stage.addEventListener(MouseEvent.MOUSE_DOWN, startRect);
stage.addEventListener(MouseEvent.MOUSE_UP, completeRect);
//
function startRect(e:MouseEvent):void{
if(!isDrag){
rect.clear();
_point = new Point(e.stageX, e.stageY);
isDrag = true;
stage.addEventListener(MouseEvent.MOUSE_MOVE, showDrag);
}
}
//
function completeRect(e:MouseEvent):void{
if(isDrag){
isDrag = false;
stage.removeEventListener(MouseEvent.MOUSE_MOVE, showDrag);
rect.lineStyle(2,0x000000);
rect.beginFill(0xFF0000, 1);
rect.drawRect(_point.x, _point.y, e.stageX - _point.x, e.stageY - _point.y);
}
}
//
function showDrag(e:MouseEvent):void{
rect.clear();
rect.lineStyle(2, 0x000000);
rect.drawRect(_point.x, _point.y, e.stageX - _point.x, e.stageY - _point.y);
}
var isDrag:Boolean = false;
var _point:Point;
const rect:Graphics = graphics;
//
stage.addEventListener(MouseEvent.MOUSE_DOWN, startRect);
stage.addEventListener(MouseEvent.MOUSE_UP, completeRect);
//
function startRect(e:MouseEvent):void{
if(!isDrag){
rect.clear();
_point = new Point(e.stageX, e.stageY);
isDrag = true;
stage.addEventListener(MouseEvent.MOUSE_MOVE, showDrag);
}
}
//
function completeRect(e:MouseEvent):void{
if(isDrag){
isDrag = false;
stage.removeEventListener(MouseEvent.MOUSE_MOVE, showDrag);
rect.lineStyle(2,0x000000);
rect.beginFill(0xFF0000, 1);
rect.drawRect(_point.x, _point.y, e.stageX - _point.x, e.stageY - _point.y);
}
}
//
function showDrag(e:MouseEvent):void{
rect.clear();
rect.lineStyle(2, 0x000000);
rect.drawRect(_point.x, _point.y, e.stageX - _point.x, e.stageY - _point.y);
}
Thursday, December 17, 2009
Drag objects within bounded area in AS3
Dragging MovieClip objects within bounded area in AS3
Step 1) Create a movieClip and give instance name “bound_rect”. We consider the position of the background “bound_rect”. We also consider its dimensions, and your draggable movieclip's dimensions as well here.
Step 2) Create another moiveClip and give instance name “image_container” it’s your draggable movieclip. Import an image into it, It does not matter how big it is.
Give them both proper instance names to work with the code below:
var imgWidth:Number = image_container.width;
var imgHeight:Number = image_container.height;
var rectWidth:Number = bound_rect.width;
var rectHeight:Number = bound_rect.height;
var rectX:Number = bound_rect.x;
var rectY:Number = bound_rect.y;
var boundWidth = rectWidth - imgWidth;
var boundHeight = rectHeight - imgHeight;
var boundsRect:Rectangle = new Rectangle(rectX, rectY, boundWidth, boundHeight);
//
image_container.addEventListener(MouseEvent.MOUSE_DOWN, DragItem);
image_container.addEventListener(MouseEvent.MOUSE_UP, DropItem);
//
function DragItem (event:MouseEvent) {
image_container.startDrag(false, boundsRect);
}
//
function DropItem (event:MouseEvent) {
image_container.stopDrag();
}
Step 1) Create a movieClip and give instance name “bound_rect”. We consider the position of the background “bound_rect”. We also consider its dimensions, and your draggable movieclip's dimensions as well here.
Step 2) Create another moiveClip and give instance name “image_container” it’s your draggable movieclip. Import an image into it, It does not matter how big it is.
Give them both proper instance names to work with the code below:
var imgWidth:Number = image_container.width;
var imgHeight:Number = image_container.height;
var rectWidth:Number = bound_rect.width;
var rectHeight:Number = bound_rect.height;
var rectX:Number = bound_rect.x;
var rectY:Number = bound_rect.y;
var boundWidth = rectWidth - imgWidth;
var boundHeight = rectHeight - imgHeight;
var boundsRect:Rectangle = new Rectangle(rectX, rectY, boundWidth, boundHeight);
//
image_container.addEventListener(MouseEvent.MOUSE_DOWN, DragItem);
image_container.addEventListener(MouseEvent.MOUSE_UP, DropItem);
//
function DragItem (event:MouseEvent) {
image_container.startDrag(false, boundsRect);
}
//
function DropItem (event:MouseEvent) {
image_container.stopDrag();
}
Zoom effect in flash
//Zoom MovieClip using Tween in AS 3.0
import fl.transitions.Tween;
import fl.transitions.easing.*;
var _time_duration:Number=2;
var _startX:Number=mc.scaleX;
var _startY:Number=mc.scaleY;
var _zoomX:Number=_startX+3;
var _zoomY:Number=_startY+3;
var __zoomX = new Tween(mc,"scaleX",Regular.easeOut,_startX,_zoomX,_time_duration,true);
var __zoomY = new Tween(mc,"scaleY",Regular.easeOut,_startX,_zoomY,_time_duration,true);
import fl.transitions.Tween;
import fl.transitions.easing.*;
var _time_duration:Number=2;
var _startX:Number=mc.scaleX;
var _startY:Number=mc.scaleY;
var _zoomX:Number=_startX+3;
var _zoomY:Number=_startY+3;
var __zoomX = new Tween(mc,"scaleX",Regular.easeOut,_startX,_zoomX,_time_duration,true);
var __zoomY = new Tween(mc,"scaleY",Regular.easeOut,_startX,_zoomY,_time_duration,true);
use Tween in Flash
change the position of the MovieClip using Tween in AS 3.0
import fl.transitions.Tween;
import fl.transitions.easing.*;
var _time_duration:Number=2;
var _startX:Number=0;
var _startY:Number=0;
var _endX:Number=500;
var _endY:Number=300;
var __tweenX = new Tween(mc,"x",Regular.easeOut,_startX,_endX,_time_duration,true);
var __tweenY = new Tween(mc,"y",Regular.easeOut,_startX,_endY,_time_duration,true);
import fl.transitions.Tween;
import fl.transitions.easing.*;
var _time_duration:Number=2;
var _startX:Number=0;
var _startY:Number=0;
var _endX:Number=500;
var _endY:Number=300;
var __tweenX = new Tween(mc,"x",Regular.easeOut,_startX,_endX,_time_duration,true);
var __tweenY = new Tween(mc,"y",Regular.easeOut,_startX,_endY,_time_duration,true);
change the color of your MovieClip
if you want to change the color of your MovieClip in flash
sample code:
//in as2.0
var colorTransform:Color = new Color("mc");
colorTransform.setRGB(0xFF00FF);
// in as3.0
var colorTransform:ColorTransform = mc.transform.colorTransform;
colorTransform.color = 0xFF00FF;
mc.transform.colorTransform = colorTransform;
after using this code your MovieClip will be changed in pink color. :)
sample code:
//in as2.0
var colorTransform:Color = new Color("mc");
colorTransform.setRGB(0xFF00FF);
// in as3.0
var colorTransform:ColorTransform = mc.transform.colorTransform;
colorTransform.color = 0xFF00FF;
mc.transform.colorTransform = colorTransform;
after using this code your MovieClip will be changed in pink color. :)
Display a number with a fixed number of digits after the decimal point in AS 3.0
if you want to display a number with a fixed number of digits after the decimal point in AS 3.0
Sample code:
var num:Number = 12.65869;
var fix_num = num.toFixed(2);
trace("num:"+num);
trace("fix_num:"+fix_num);
//output will be:
num:12.65869
fix_num:12.65
Sample code:
var num:Number = 12.65869;
var fix_num = num.toFixed(2);
trace("num:"+num);
trace("fix_num:"+fix_num);
//output will be:
num:12.65869
fix_num:12.65
Preloader in AS 2.0 / Preloader in flash
If you want to place a Preloader in a frame before the actual Flash application or in a previous Scene, this is a really simple. In this tutorial I will show you the basic code for a preloader.
Step 1) First off all, create a new actionscript 2.0 file.
Step 2) Now we will create our preloader ‘graphic’ ,so create a movie clip and set instance name “preloader_mc”.
Step 3) Select a layer and draw a box(only boundary) on “preloader_mc” at the first frame, press F6 at 100 frame.
Step 4) Select another layer and draw a box and set it the left side where your boundary box is started on “preloader_mc” at the first frame.
Step 6) create tween and animate to your box at 100 frame.
Step 7) On “preloader_mc” at 1st frame and 100 frame write
Stop();
Step 8) Place “preloader_mc” on to the stage.
Step 9) write code at 1st frame on stage and then place your flash application on 2nd frame.
stop();
onEnterFrame = function () {
if (_root.getBytesLoaded() == _root.getBytesTotal()) {
delete onEnterFrame;
_root.play();
}
else
{
var frame = Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)
preloader_mc.loading.gotoAndStop(frame);
}
};
Hit CTRL + Enter to watch your preloader in action. Remember you will not see anything happen unless you simulate a download, and of course have something for the flash to load!
Step 1) First off all, create a new actionscript 2.0 file.
Step 2) Now we will create our preloader ‘graphic’ ,so create a movie clip and set instance name “preloader_mc”.
Step 3) Select a layer and draw a box(only boundary) on “preloader_mc” at the first frame, press F6 at 100 frame.
Step 4) Select another layer and draw a box and set it the left side where your boundary box is started on “preloader_mc” at the first frame.
Step 6) create tween and animate to your box at 100 frame.
Step 7) On “preloader_mc” at 1st frame and 100 frame write
Stop();
Step 8) Place “preloader_mc” on to the stage.
Step 9) write code at 1st frame on stage and then place your flash application on 2nd frame.
stop();
onEnterFrame = function () {
if (_root.getBytesLoaded() == _root.getBytesTotal()) {
delete onEnterFrame;
_root.play();
}
else
{
var frame = Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)
preloader_mc.loading.gotoAndStop(frame);
}
};
Hit CTRL + Enter to watch your preloader in action. Remember you will not see anything happen unless you simulate a download, and of course have something for the flash to load!
Friday, December 4, 2009
Pimp Your Car
Hey guys now time to pimp your dream car...
Here is a chance to dress up and improve the fashion sense.Its a simple drag n drop game. simply drag an item and place at the car.
Thursday, December 3, 2009
PICTURE MATCHING GAME
Subscribe to:
Posts (Atom)