در این مطلب به یک برنامه ساده در فلش می پردازیم که به راحتی با موس بتوانید خطوط مورد نظرتان را طراحی نمایید ، این مطلب به انجام این کار با استفاده از فلش و اکشن اسکریپت ۳ می پردازیم.

دانلود سورس : draw_line_with_mouse_iflashlord.zip

در ابتدا کلاس های مورد نیاز را وارد می کنیم (البته توجه داشته باشید این کار به صورت خودکار توسط نسخه های جدید فلش انجام می شود و دلیل ذکر این موارد برای اشاره به کلاس های مورد استفاده در مطلب آموزشی می باشد)

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

در مرحله بعد یک Sprite ایجاد می کنیم ، این DisplayObject مخزنی برای ذخیره محتوا طراحی شده توسط موس می باشد.

var _sprite:Sprite= new Sprite();

حال این Sprite را addChild می کنیم و در ابتدا محیطی که می خواهیم در آن طراحی انجام شود را ایجاد می کنیم برای این کار از drawRect برای طراحی یک مستطیل استفاده می کنیم.

_sprite.graphics.beginFill(0xF0F0F0);
_sprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
_sprite.graphics.endFill();

برای این که این بخش مشخص باشد ما رنگ F0F0F0 را قرار دادیم شما می توانید هر کد رنگی که مورد نظرتان باشد را وارد نمایید. و در این مثال برای به دست آوردن طول و عرض صفحه استیج از stage.stageHeight و  stage.stageWidth استفاده شده است و برای مختصات شروع ایجاد طرح از ۰ و ۰ که مختصات x و y نقطه شروع می باشد استفاده شده است.
در ضمن endFill برای پایان دادن به یک مقدار دهی مثلا رنگ به شی مستطیل تعریف شده ما می باشد.

حال می بایست رویدادهای مربوطه به فشردن کلیک چپ موس (MOUSE_DOWN) و رها کردن آن را (MOUSE_UP) تعریف می کنیم و به Sprite تعریف شده اعمال می کنیم.

_sprite.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
_sprite.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

حال تابع مربوطه به فشرده شدن موس را تعریف می کنیم در این تابع ما توسط متد lineStyle از graphics مربوطه به شی نمایشی Sprite ابتدا قالب بندی خط را تعیین می کنیم ، و توسط متد moveTo مختصات اولیه را مختصات کنونی موس قرار می دهیم .
حال زمان آن رسیده که رویدادی جدید تعریف کنیم تا در زمان حرکت موس تابع MouseMove را فراخوانی کند ، این تابع وظیفه کشیدن خط را بر عهده دارد.

function MouseDown(e:MouseEvent):void
{
_sprite.graphics.lineStyle(1, 0, 1);
_sprite.graphics.moveTo(mouseX, mouseY);
_sprite.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

تابع MouseMove با استفاده از متد lineTo در هر زمان که موس حرکت کند خطی به نقطه مختصات کنونی موس طراحی می کند. آرگمان اول lineTo مربوطه به مختصات x و آرگمان دوم مربوطه به مختصات y می باشد که در این مثال برای مقدار x از mouseX و y از mouseY که مقدارهای مربوطه به مختصات کنونی موس می باشند استفاده شده است .

function MouseMove(e:MouseEvent):void
{
_sprite.graphics.lineTo(mouseX, mouseY);
}

حال می بایست توسط رویدادی که برای رها کردن کلیک تعیین کردیم در زمان رها کردن کلیک رویداد مربوطه به طراحی در حال حرکت موس و در واقع فراخوانی MouseMove را حذف کنیم.

function MouseUp(e:MouseEvent):void
{
_sprite.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

سورس کد کامل برنامه به صورت یکجا :

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

var _sprite:Sprite= new Sprite();
addChild(_sprite);
_sprite.graphics.beginFill(0xF0F0F0);
_sprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
_sprite.graphics.endFill();

_sprite.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
_sprite.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

function MouseDown(e:MouseEvent):void
{
	_sprite.graphics.lineStyle(1, 0, 1);
	_sprite.graphics.moveTo(mouseX, mouseY);
	_sprite.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

function MouseUp(e:MouseEvent):void
{
	_sprite.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
function MouseMove(e:MouseEvent):void
{
	_sprite.graphics.lineTo(mouseX, mouseY);
}

و بهتر است کمی کدمان را (از نظر رویدادها) بهینه تر نیز کنیم :

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

var _sprite:Sprite= new Sprite();
addChild(_sprite);
_sprite.graphics.beginFill(0xF0F0F0);
_sprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
_sprite.graphics.endFill();

_sprite.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown , false , 0 , true);
_sprite.addEventListener(MouseEvent.MOUSE_UP, MouseUp , false , 0 , true);

function MouseDown(e:MouseEvent):void
{
	_sprite.graphics.lineStyle(1, 0, 1);
	_sprite.graphics.moveTo(mouseX, mouseY);
	_sprite.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove , false , 0 , true);
}

function MouseUp(e:MouseEvent):void
{
	_sprite.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
function MouseMove(e:MouseEvent):void
{
	_sprite.graphics.lineTo(mouseX, mouseY);
}

حال می تونیم برنامه رو تست کنیم ، با فشردن کلیک چپ و حرکت موس می توانید خطوط مورد نظر خودتان را طراحی کنید.

دانلود سورس : draw_line_with_mouse_iflashlord.zip

در این مطلب به تمام صفحه کردن یا همان fullscreen کردن در اکشن اسکریپت ۳ می پردازیم و دکمه ای را ایجاد می کنیم که با کلیک بر روی آن فلش ما به حالت تمام صفحه رفته و با کلیک مجدد به حالت عادی باز گردد.

دانلود سورس پروژه : fullscreen_as3_iflashlord.zip

برای این کار می بایست از متد displayState مربوط به Stage استفاده کنیم و به آن مقدار دهی نماییم ؛ در حالت عادی مقدار روی normal تنظیم شده است برای تمام صفحه شدن ما مقدار را روی fullScreen قرار می دهیم با این کار فلش به حالت تمام صفحه می رود.

ما به جای مقدار رشته ای می توانیم از ثابت های StageDisplayState استفاده نماییم ، برای normal از StageDisplayState.NORMAL و برای fullScreen از StageDisplayState.FULL_SCREEN استفاده می کنیم. البته شما در استفاده هر دو نوع آزاد هستید.

در ابتدا کلاس های مورد نیاز را import می کنیم :

//وارد کردن کلاس های مورد نیاز
import flash.events.MouseEvent;
import flash.display.Stage;
import flash.display.StageDisplayState;
import flash.display.StageScaleMode;

در مرحله بعد دکمه ای ایجاد می کنیم ، برای این کار در این نمونه از یک MovieClip استفاده می کنیم که ۲ فریم دارد و در فریم اول متن تمام صفحه و در فریم دوم متن حالت عادی را قرار می دهیم، این کار برای این است که در هر زمان بتوانیم عملکرد دکمه را به کاربر نشان دهیم. شما می توانید از نمادهای گرافیکی نیز برای این کار استفاده کنید.

حال رویداد CLICK را برای زمان کلیک کردن روی کمه فعال می کنیم

//ایجاد رویداد کلیک برای دکمه
fullscreen_btn.addEventListener(MouseEvent.CLICK , switchFullScreen , false , 0 , true);

و توسط متد buttonMode ما به MovieClip مان حالت دکمه می دهیم

//ایجاد حالت دکمه ای برای مووی کلیپ
fullscreen_btn.buttonMode =true;

حال تابع switchFullScreen را تعریف می کنیم و درون آن یک if قرار می دهیم تا در زمانی که فلش ما در حالت عادی بود به با کلیک به حالت تمام صفحه برود و زمانی که در حال تمام صفحه بود با کلیک به حالت عادی برود

function switchFullScreen(e:MouseEvent)
{
	if (stage.displayState == StageDisplayState.NORMAL)
	{
		//مقدار دهی تمام صفحه
		stage.displayState = StageDisplayState.FULL_SCREEN;
		//نمایش حالت عادی برای دکمه
		fullscreen_btn.gotoAndStop(2);
	}
	else
	{
		//مقدار دهی حالت نرمال
		stage.displayState = StageDisplayState.NORMAL;
		//نمایش تمام صفحه برای دکمه
		fullscreen_btn.gotoAndStop(1);
	}
}

حال اگر دقت کرده باشید در حالت تمام صفحه پروژه شما نسبت به طول و عرض مانیتور شما کشیده می شود در صورتی که بخواهید جلوی این کشیدگی را بگیرید می بایست از متد stage.scaleMode استفاده کنید و آن را بر روی StageDisplayState.NO_SCALE قرار دهید :

function switchFullScreen(e:MouseEvent)
{
	if (stage.displayState == StageDisplayState.NORMAL)
	{
		//مقدار دهی تمام صفحه
		stage.displayState = StageDisplayState.FULL_SCREEN;
		//برای حفظ ساختار بعد از تمام صفحه شدن - در صورت نیاز
		stage.scaleMode = StageScaleMode.NO_SCALE;
		//نمایش حالت عادی برای دکمه
		fullscreen_btn.gotoAndStop(2);
	}
	else
	{
		//مقدار دهی حالت نرمال
		stage.displayState = StageDisplayState.NORMAL;
		//نمایش تمام صفحه برای دکمه
		fullscreen_btn.gotoAndStop(1);
	}
}

نکته برای استفاده در مرورگرها :

اگر قصد دارید مثلا وبسایت فلش شما در مرورگر نیز امکان تمام صفحه شدن را داشته باشد می بایست یک بخش به تگ Object مربوطه به کد HTML صفحه خود اضافه کنید ، این بخش کد برای تگ Object به این صورت می باشد :

<param name="allowFullScreen" value="true" />

و در صورتی که از تگ Embed (توصیه نمی شود) استفاده می کنید به این صورت :

<embed ... allowfullscreen="true" />

سه نقطه (…) مربوطه به بخش ها و پارامترهایی دیگری می باشد که در کد قرار داده نشده است.

حال می توانید پروژه خود را توسط فایل HTML آن تست نمایید ، برای ایجاد خودکار فایل HTML کلید F12 را بفشارید و البته به یاد داشته باشید فایل ایجاد شده را ویرایش کرده و خط کد مربوطه به allowfullscreen را به پارامترهای کد صفحه اضافه کنید

نمونه ای برای بهتر متوجه شدن محل اضافه کردن کد :

...
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="allowScriptAccess" value="sameDomain" />
<!--محل افزودن کد-->
<param name="allowFullScreen" value="true" />
...

سه نقطه (…) مربوطه به بخش ها و پارامترهایی دیگری می باشد که در کد قرار داده نشده است.

البته توجه داشته باشید که محل قرار گرفتن پارامتر بالاتر و یا پایین تر از دیگر پارامترها مهم نیست.

کد نهایی پروژه :

//وارد کردن کلاس های مورد نیاز
import flash.events.MouseEvent;
import flash.display.Stage;
import flash.display.StageDisplayState;
import flash.display.StageScaleMode;

//ایجاد رویداد کلیک برای دکمه
fullscreen_btn.addEventListener(MouseEvent.CLICK , switchFullScreen , false , 0 , true);
//ایجاد حالت دکمه ای برای مووی کلیپ
fullscreen_btn.buttonMode =true;

function switchFullScreen(e:MouseEvent)
{
	if (stage.displayState == StageDisplayState.NORMAL)
	{
		//مقدار دهی تمام صفحه
		stage.displayState = StageDisplayState.FULL_SCREEN;
		//برای حفظ ساختار بعد از تمام صفحه شدن - در صورت نیاز
		stage.scaleMode = StageScaleMode.NO_SCALE;
		//نمایش حالت عادی برای دکمه
		fullscreen_btn.gotoAndStop(2);
	}
	else
	{
		//مقدار دهی حالت نرمال
		stage.displayState = StageDisplayState.NORMAL;
		//نمایش تمام صفحه برای دکمه
		fullscreen_btn.gotoAndStop(1);
	}
}

دانلود سورس پروژه : fullscreen_as3_iflashlord.zip

در این مطلب می خواهیم به روشی ساده برای اعمال افکت blur به یک شی از نوع BitmapData بپردازیم. توجه داشته باشید این نوع اعمال افکت با افکت ها و Filterهای معمول فلش متفاوت هست و بر روی خود BitmapData اعمال می شود و نه بر روی MovieClip ی که تصویری در آن قرار دارد.

دانلود سورس : blur_effect_bitmapdata_iflashlord.zip 

یک پروژه جدید در نرم افزار ادوبی فلش ایجاد نمایید و یک تصویر را وارد برنامه کنید (Ctrl+R) در این مثال ما از تصویر زیر استفاده کرده ایم.

و کلاس های مورد نیاز را import می کنیم :

import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.geom.Rectangle;
import flash.geom.Point;

در مرحله بعد تابعی با نام blurApply ایجاد می کنیم و آرگمان آن را bmd و از نوع BitmapData قرار می دهیم.

function blurApply(bmd:BitmapData):BitmapData
{
	var effectBlur:BlurFilter = new BlurFilter(4,4,3);
	var rect:Rectangle = new Rectangle(0,0,bmd.width ,bmd.height );
	var point:Point = new Point(0,0);

	bmd.applyFilter(bmd , rect , point , effectBlur);

	return bmd;
}

در این تابع ابتدا یک متغیر با نام effectBlur می سازیم و نوع آن را BlurFilter قرار می دهیم و یک نمونه از کلاس BlurFilter را ایجاد می کنیم ، آرگمان های ورودی این کلاس سه مورد می باشد که دو مورد اول برای ایجاد افکت blur در طول و عرض می باشد و مورد سوم مربوطه به کیفیت این افکت که بر روی شی ما اعمال می شود.

در خط بعد ما یک متغیر از نوع Rectangle با نام rect ایجاد می کنیم ایم متغیر در واقع وظیفه مشخص کردن محدوده ای می باشد که قرار است افکت بر روی آن اعمال شود به همین دلیل دو مقدار اولیه که x, y می باشند و محل شروع را مشخص می کنند با ۰ و ۰ مقدار دهی شده اند و دو مقدار بعدی که مربوطه به عرض و طول می باشند با عرض و طول BitmapData که آرگمان ورودی این تابع می باشد مقدار دهی شده اند.

در خط بعد یک Point نیز با مقدار ۰,۰ ایجاد می کنیم که مشخص کننده گوشه سمت چپ و بالایی شی می باشد. به جای این بخش می توانیم از rect.topLeft نیز استفاده کنیم.

در خط بعد توسط applyFilter اقدام به اعمال افکت بر روی شی خود می نماییم، این متد مربوطه به BitmapData می باشد و آرگمان های ورودی آن به ترتیب مربوطه به شی BitmapData و محدوده مشخص کننده ، point و افکت تعریف شده ، می باشد.

تغییرات مورد نظر ما در این تابع بر روی bmd انجام شده است ، حال bmd را به عنوان مقدار بازگشتی تابع در خط آخر تابع return می کنیم.

تا این مرحله تابع مورد نظر ما ایجاد شد ، حال به نحوه استفاده آن می پردازیم. تصویری که در ابتدا در پروژه وارد کردیم را از stage حذف می کنیم به بخش Library می رویم و AS Linkage آن را با  MyPic مقدار دهی می کنیم.

حال یک متغیر با نام myPic و از نوع MyPic ایجاد می کنیم و آن را با یک نمونه از MyPic مقدار دهی می کنیم.

var myPic:MyPic = new MyPic();//دریافت تصویر از کتابخانه

سپس یک متغیر با نام bit می سازیم و آن را از نوع کلاس Bitmap قرار می دهیم و یک نمونه از کلاس Bitmap را به آن نسبت می دهیم در آرگمان اول مربوطه با کلاس Bitmap مقدار myPic را وارد می کنیم.

var bit:Bitmap = new Bitmap(myPic);

در مرحله بعد نیز خصوصیت BitmapData مربوطه به متغیر bit را توسط تابع ایجاد شده مقدار دهی می کنیم.

bit.bitmapData = blurApply(bit.bitmapData);
addChild(bit);

و در آخر نیز bit را توسط addChild به شی نمایشی (DisplayObject) اضافه می کنیم تا در صفحه نمایش داده شود.

نتیجه به این شکل خواهد بود :

حال اگر در تابع در بخش rect که مربوطه به محدوده ای می باشد که افکت بر روی آن اعمال می شود ، مقدارهای عرض و طول را تقسیم بر ۲ کنیم در واقع افکت بر روی یک چهارم تصویر اعمال می شود.

function blurApply(bmd:BitmapData):BitmapData
{
	var effectBlur:BlurFilter = new BlurFilter(4,4,3);
	var rect:Rectangle = new Rectangle(0,0,bmd.width/2 ,bmd.height/2 );
	var point:Point = new Point(0,0);

	bmd.applyFilter(bmd , rect , point , effectBlur);

	return bmd;
}

و نتیجه خروجی به این شکل خواهد بود :

شما این امکان را دارید که با مقدار دهی دو آرگمان اول rectangle در بخش نمایشی تصویر جا به جایی ایجاد کنید و توسط مقدار دهی دو آرگمان point مختصات محل نمایش بخشی که افکت بر روی آن اعمال شده را تغییر دهید.

در پایان تمام کدهایی که برای این پروژه نیاز می باشد را در زیر قرار می دهیم:

import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.geom.Rectangle;
import flash.geom.Point;

function blurApply(bmd:BitmapData):BitmapData
{
	var effectBlur:BlurFilter = new BlurFilter(4,4,3);
	var rect:Rectangle = new Rectangle(0,0,bmd.width ,bmd.height);
	var point:Point = new Point(0,0);

	bmd.applyFilter(bmd , rect , point , effectBlur);

	return bmd;
}

var myPic:MyPic = new MyPic();//دریافت تصویر از کتابخانه
var bit:Bitmap = new Bitmap(myPic);

bit.bitmapData = blurApply(bit.bitmapData);
addChild(bit);

دانلود سورس : blur_effect_bitmapdata_iflashlord.zip 

در این مطلب به ساخت StyleSheet داخلی (INTERNAL) در اکشن اسکریپت ۳ می پردازیم ، این موارد برای زمانی که شما نیازی به فایل CSS خارجی نداشته باشید و بخواهید از فرامین قالب بندی CSS درون اکشن اسکریپت استفاده کنید، برای این کار از کلاس StyleSheet استفاده می کنیم.

در ابتدا ما کلاس مورد نیاز را import می کنیم

import flash.text.StyleSheet;

در مرحله بعد متغییر css را تعریف می کنیم و نوع آن را StyleSheet قرار می دهیم و یک نمونه از کلاس StyleSheet را به عنوان مقدار آن قرار می دهیم.

var css:StyleSheet = new StyleSheet();
css.setStyle("p", {color: "#FF0000"});

example_txt.styleSheet = css;
example_txt.text = "<p>iflashlord.com</p> sample text!"

سپس با استفاده از متد setStyle فرامین مربوطه به css را مقدار دهی می کنیم ، در این مثال به تگ پاراگراف در HTML می باشد که با (p) مشخص می شود ، خصوصیت color که مربوطه به رنگ می باشد به آن نسبت داده شده است. توجه نمایید مقدارهای هر تگ یا کلاس یا شناسه در CSS به صورت یک Object به عنوان آرگمان دوم متد setStyle مقدار دهی می شود. آرگمان اول نیز به صورت رشته متنی (String) می باشد و مربوطه به نام تگ (به طور مثال p) نام کلاس (به طور مثال .test ) و نام شناسه (به طور مثال #test ) و… می باشد.

در مرحله بعد متغیر css را به عنوان متد styleSheet مربوطه به تکست فیلد مقدار دهی می کنیم.

و در مرحله آخر محتوای متنی HTML خود را به فیلد متنی نسبت می دهیم و نتیجه را مشاهده می کنیم ، طبق کد بالا می بایست متن iflashlord.com به صورت قرمز (FF0000) چاپ شود و باقی متون با رنگ پیش فرض تکست فیلد.

با کمک این کد می توانید قالب بندی مربوطه به بخش های مختلف را توسط کدهای اکشن اسکریپت و css با دستی بازتر انجام دهید.

اگر با اکشن اسکریپت ۲ کار کرده باشید حتما می دانید ،برای درخواست های بازکردن لینک ها و آدرس های وب و درخواست های وب از فرمان getURL استفاده می شود. البته این تابع به این شکل دیگر در اکشن اسکریپت ۳ پشتیبانی نمی شود. در این مطلب می خواهیم این تابع را با همان نام قدیمی و آرگمان های قدیمی برای اکشن اسکریپت ۳ آماده کنیم.

ابتدا کلاس های مورد نیاز را import می کنیم

import flash.net.URLRequest;
import flash.net.navigateToURL;

در مرحله بعد ما تابعی با همان نام (getURL) تعریف می کنیم و آرگمان ها را نیز به همان صورت معرفی می کنیم ، آرگمان اول در getURL مربوطه به آدرس (URL) و آرگمان دوم target که به نوع باز شدن مربوطه می شد.

function getURL(url:String, target:String = null)
{
	try
	{
		navigateToURL(new URLRequest(url), target);
	}
	catch (error:Error)
	{
		trace("[getURL] "+error);
	}
}

در نهایت بخش اصلی کد ما که آن را درون try می نویسیم تا بتوانیم خطای احتمالی آن را catch کنیم. در این بخش طبق استاندارد جدید اکشن اسکرپیت ۳ برای بازکردن لینک ها از کلاس های navigateToURL و URLRequest استفاده می کنیم. که نقش URLRequest مشخص کردن محتوای متنی به عنوان درخواست URL می باشد و نقش navigateToURL باز کردن پیوند (link) طبق آرگمان های ورودی می باشد.

حال می توانید با سرعت بیشتر و مثل تابع getURL درخواست های مربوطه به پیوند های خودتان را اجرا نمایید.

Citrus Engine چست؟

یک موتور بازی سازی با درجه حرفه ای ، قابل گسترش ، و با کیفیت صنعتی برای ساخت بازی فلش می باشد ، این موتور بر اساس شیوه های مدرن برنامه نویسی فلش ساخته شده است و تمرکز آن در کمک به شما برای ساخت یک بازی بسیار جذاب می باشد. برای اطلاعات بیشتر به این صفحه مراجعه کنید.

این موتور در گذشته با قیمتی حدود ۴۰۰ دلار در اختیار کاربران و توسعه دهندگان قرار می گرفته است که خوشبختانه هم اکنون به صورت رایگان و اوپن سورس می باشد.

کاربرد اصلی این موتور برای ساخت بازی های پلاتفورمر می باشد ، برای هسته این موتور از زبان اکشن اسکریپت ۳ استفاده شده است که بخش تحلیل فیزیکی آن نیز توسط box2d کنترل می شود ، نمونه ای از این دست بازی ها را می توانید در صفحه اول وب سایت Citrus Engine ببنید.

در ضمن این موتور با یک نرم افزار برای ساخت مرحله کار ساخت مراحل بازی را ساده و ساده تر می کند ، این نرم افزار توسط ادوبی ایر ایجاد شده است ، پیشنهاد می کنم این برنامه را هم حتما تست نمایید.

نکته مهم در مورد استفاده از موتورهای بازی سازی ، نیاز داشتن به دانش کمتر در مورد بازی سازی و برنامه نویسی می باشد که می تواند گروه زیادی را وارد دنیای جذاب بازی سازی در فلش نماید..

فکر می کنم هم اکنون وقت آن باشد که شما هم با این موتور بیشتر آشنا شوید و آن را محکی بزنید.

وب سایت رسمی Citrus Engine

تابعی که ما در این مطلب اقدام به ساخت آن می کنیم ، یک محتوای متنی را دریافت می کند و تمامی http:// و https:// های موجود دار آن را حذف می کند و در صورتی که آرگمان دوم آن که stripWWW می باشد برابر با true قرار داده شود تمامی www ها را نیز حذف می کند ، به طور پیش فرض ما این آرگمان را در تابعی که کد آن در زیر قرار داده شده است false قرار داده ایم.

برای بهتر متوجه شدن نتیجه این تابع به این مثال توجه کنید ، متن ورود ما که به عنوان آرگمان string در تابع تعریف شده است :

آخرین پروژه های اجرا شده را می توانید در http://www.iflashlord.com ببینید

متنی که بعد از استفاده این مقدار در تابع به عنوان آرگمان اول ، خروجی داده می شود به صورت زیر خواهد بود:

آخرین پروژه های اجرا شده را می توانید در www.iflashlord.com ببینید

و در صورتی که آرگمان دوم true باشد :

آخرین پروژه های اجرا شده را می توانید در iflashlord.com ببینید

حال به کد تابع می پردازیم:

function stripHttp(string:String, stripWWW:Boolean = false):String
{
	var s:String = string;
	var regexp:RegExp = new RegExp(! stripWWW ? "https*:\/\/":"https*:\/\/(www\.)*","ig");
	return s.replace(regexp, "");
}

بعد از تعریف تابع و آرگمان های آن ، یک متغییر برای ذخیره سازی کپی از متن ورودی در آن با نام s می سازیم ، سپس با کمک گرفتن از عبارات با قائده و تابع RegExp متغیر regexp را تعریف می کنیم ، این متغیر در واقع اشاره گری به تمامی http:// و https:// و www ها می باشد (در این مثال) و با استفاده از آن برای متد replace مربوطه به string ها و جا به جا کردن این مقادیر با مقدار “” که نشان گر مقدار پوچ می باشد ،این مقادیر را از رشته متنی خود حذف می کنیم

در نهایت رشته متنی نهایی که محتوای بازگشتی s.replace می باشد را توسط return بازگشت می دهیم.

برای استفاده از این تابع به شکل زیر اقدام می کنیم :

trace (stripHttp("آخرین پروژه های اجرا شده را می توانید در http://www.iflashlord.com ببینید" , true));
//آخرین پروژه های اجرا شده را می توانید در iflashlord.com ببینید

trace (stripHttp("آخرین پروژه های اجرا شده را می توانید در http://www.iflashlord.com ببینید" , false));
//آخرین پروژه های اجرا شده را می توانید در www.iflashlord.com ببینید

در این مطلب اقدام به ایجاد تابعی در اکشن اسکریپت ۳ می کنیم که بتوانم توسط آن به صورت اتفاقی true یا false را بازگشت دهیم.

برای این کار ما ابتدا بعد از تعریف نام تابع که در این مثال randomBoolean هستند و بعد از () ها توسط علامت ( : ) نوع خروجی بازگشتی تابع را Boolean مشخص می کنیم.

سپس با کمک گرفتم از متد random مربوطه به کلاس Math و ایجاد شرط توسط علامت بزرگتر مساوی و استفاده از خروجی رندوم دریافت شده ، به مقدار true یا false اتفاقی برای بازگشت دادن دسترسی پیدا می کنیم.

حال به کد مربوطه توجه نمایید:

function randomBoolean():Boolean
{
	return Math.random() >= 0.5;
}
//تست خروجی
trace(randomBoolean());

در این تابع وقتی Math.random() اجرا می شود یک عدد رندوم بین ۰ تا ۱ خروجی می دهد در صورتی که این عدد بزرگتر و یا مساوی ۰.۵ باشد برنامه true را return می کند و در غیر این صورت false را بازگشت می دهد.

کلاس TransitionManager در بسته fl.transitions تعریف شده و برای شبیه سازی جلوه‌های بصری نمایش و مخفی سازی اسلایدها مورد استفاده قرار می‌گیرد.
نوع جلوه‌های بصری این کلاس که  ۱۰ مورد هستند (Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, Zoom)، مشابه effect های نمایشی موجود در برنامه Microsoft PowerPoint است.

برای استفاده از جلوه‌های نمایشی کلاس TransitionManager لازم است که شی جدیدی از نوع کلاس آن تعریف نموده و DisplayObject مورد نظر را به عنوان پارامتر ورودی به ان ارسال نماییم. سپس از متد startTransition استفاده کرده و نوع جلوه ی مذکور را به همراه پارامترهای آن مشخص می‌کنیم.

حال در ادامه به نمونه ای از هر یک از effect های مربوطه به Transition می پردازیم :

توجه نمایید در تمامی مثال های زیر my_mc به MovieClip ی مربوطه می باشد که افکت مربوطه روی آن اعمال می شود.

 Blinds:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Blinds, direction:Transition.OUT, duration:3, easing:None.easeOut, numStrips:50, dimension:1});
}

 Fade:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fade, direction:Transition.OUT, duration:3, easing:Strong.easeOut});
}

 Fly:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.OUT, duration:3, easing:Strong.easeOut, startPoint:7});
}

 Iris:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Iris, direction:Transition.OUT, duration:3, easing:Strong.easeOut, startPoint:1, shape:Iris.CIRCLE});
}

 Photo:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Photo, direction:Transition.OUT, duration:3, easing:Strong.easeOut});
}

 PixelDissolve:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:PixelDissolve, direction:Transition.OUT, duration:3, easing:None.easeOut, xSections:35, ySections:35});

 Rotate:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Rotate, direction:Transition.OUT, duration:3, easing:None.easeOut, ccw:false, degrees:720});

 Squeeze:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Squeeze, direction:Transition.OUT, duration:3, easing:None.easeOut, dimension:1});

 Wipe:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Wipe, direction:Transition.OUT, duration:3, easing:Strong.easeOut, startPoint:1});

 Zoom:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Zoom, direction:Transition.OUT, duration:3, easing:Strong.easeOut});

و در نهایت یک نمونه ترکیبی

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Zoom, direction:Transition.IN, duration:7, easing:Strong.easeOut});
myTM.startTransition({type:Rotate, direction:Transition.IN, duration:7.5, easing:Bounce.easeOut});
myTM.startTransition({type:PixelDissolve, direction:Transition.IN, duration:5, easing:Strong.easeOut});
myTM.startTransition({type:Fly, direction:Transition.IN, duration:4, easing:Strong.easeOut});

در این مطلب به چگونگی تشخیص نوع مرورگر اینترنتی و سیستم عامل کاربر توسط اکشن اسکریپت ۳ می پردازیم.

دانلود سورس : external_interface_source_iflashlord

ما در این مطلب با استفاده از TextField و با کمک گرفتم از کلاس ExtenalInterface اطلاعات مربوطه به کاربر را دریافت و خروجی swf فلش نمایش می دهیم. توسط دریافت مقدار userAgent مربوطه به navigator و کمی جستجو در محتوای متنی خروجی آن می توانیم به نام مرورگر اینترنتی مورد استفاده پی ببریم.

برای شروع یک سند فلش با سایز ۴۰۰ در ۲۰۰ پیکسل و فریم ریت ۲۴fps ایجاد می کنیم.

package
{
	import flash.display.Sprite;
	import flash.external.ExternalInterface;
	import flash.events.MouseEvent;
	import fl.transitions.Tween;
	public class Main extends Sprite
	{
		private var userAgent:String;
		public function Main():void
		{
			more.addEventListener(MouseEvent.MOUSE_UP, showFull);
			browserTxt.text = getUserAgent();
			letterpress.text = getUserAgent();
		}

		private function getUserAgent():String
		{
			userAgent = ExternalInterface.call("window.navigator.userAgent.toString");

			var browser:String;
			if (userAgent.indexOf("Safari") != -1)
			{
				browser = "Safari";
			}
			else if (userAgent.indexOf("Firefox") != -1)
			{
				browser = "Firefox";
			}
			if (userAgent.indexOf("Chrome") != -1)
			{
				browser = "Chrome";
			}
			return browser;
		}
		private function showFull(e:MouseEvent):void
		{
			info.fullInfo.text = userAgent;
			var tween:Tween = new Tween(info,"y",null,info.y,180,0.5,true);
		}
	}
}

در کد بالا توسط ExternalInterface و متد call محتوای مربوطه به User Agent به صورت یک رشته متنی دریافت می شود و با استفاده از متد indexOf در آن جستجو می شود و در نتیجه نام مروگر دریافت می شود ؛ در این روش محتوای User Agent جستجو می شود اگر نام مرورگر هایی که در نظر گرفته ایم در محتوای بازگشتی وجود داشته باشد ،نام مرورگر در صفحه نمایش داده می شود. و توسط دکمه more که در پروژه قرار داده شده است نیز در بخش پایینی پروژه محتوای کلی مربوطه به User Agent در فیلد متنی info با انیمیتی که توسط Tween به آن اعمال می شود ،به نمایش گذاشته می شود.

به یاد داشته باشید که نام class را در فیلد مربوطه به Class در بخش Publish مربوطه به پانل Properties وارد نمایید. در تصویر زیر بخش مربوطه نمایش داده شده است.

شما می توانید با استفاده از این اطلاعات با توجه به نوع مرورگر کاربر تغییرات احتمالی مورد نیاز را در پروژه خود که برای هر مرورگر و یا مرورگر خاصی نیاز دارید ، اعمال نمایید و برنامه ای پویا و هوشمند توسط فلش ایجاد نمایید.

دانلود سورس : external_interface_source_iflashlord