Citrus Engine چست؟

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

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

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

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

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

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

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

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

دانلود سورس : 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

در این مطلب به ایجاد چرخش افقی و یا همان filp horizontal با کمک گرفتن از کلاس Matrix می پردازیم و در این میان به توضیحی بر نحوه تعیین کردن مرکز چرخش یک شی به صورت پویا توسط کد اکشن اسکریپت ۳ نیز می پردازیم.

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

ابتدا کلاس های مورد نیاز را import می کنیم ، البته توجه داشته باشید در صورتی که کدها را در محیط های برنامه فلش و یا دیگر IDE های اکشن اسکریپت می نویسید در زمان نوشتن کد و در زمانی که توسط ( : ) نوع متغییر ها را مشخص می کنید به صورت خودکار کلاسه مورد نظر شما در ابتدای پروژه Import می شود و خط کد مربوطه به صورت خودکار در ابتدای پروژه شما قرار می گیرد. (البته توجه داشته باشید این امکان در نسخه های قدیمی برنامه های فوق الذکر وجود ندارد)

import flash.geom.Matrix;
import flash.geom.Point;
import flash.display.Graphics;
import flash.display.MovieClip;

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

آرگمان اصلی این تابع displayObject هست که شی مورد نظر شما را شامل می شود و آرگمان اختیاری بعدی که برای نمایش مرکز چرخش است که توسط کد ما به شی اعمال می شود در صورتی که این گزینه true باشد در مرکز چرخش شی ما یک دایره سیاه رنگ ایجاد می شود که نمایش دهنده مرکز چرخش کنونی است.

همان طور که در کد مشخص است این دایره یک MovieClip هست که دایره ای با استفاده از فرامین graphics و استفاده از متد drawCircle در آن ایجاد شده است و به محل مربوطه به مرکز چرخش تغییر مختصات داده شده است و به شی اصلی ما addChild شده است.

حال بهتر هست کمی در مورد Matrix ها توضیح داده شود تا با ذهنی باز تر به تحلیل کد بپردازیم:

یک ماتریس (matrix) دگرگونی شی یک ماتریس ۳ در ۳ با محتویات زیر می باشد.

در ماتریس های دگرگونی u ، v و w خواص ارائه قابلیت های اضافی است. کلاس ماتریس (matrix) تنها در فضای دو بعدی عمل می کند ، بنابر این همواره فرض می شود خصوصیت u و v مقدار ۰.۰ و خصوصیت w مقدار ۱.۰ می باشد. در نتیجه ماتریس ما به صورت زیر است :

شما می توانید ۶ خصوصیت دیگر را در ماتریس شی خود (a,b,c,d,tx,ty) را مقدار دهی کنید (set) و یا مقدار آن را دریافت کنید (get).

function flipHorizontal(displayObject:MovieClip , visiblePoint = true):void
{
	//دریافت متریکس کنونی شی و قرار دادن آن در یک متغیر
	var matrix:Matrix = displayObject.transform.matrix;

	trace(matrix.toString());//(a=1, b=0, c=0, d=1, tx=60.55, ty=207.5)
	//[ a  c  tx ]   =>   [ 1  0  60.55 ]
	//| b  d  ty |   =>   | 0  1  207.5 |
	//[ 0  0   1 ]   =>   [ 0  0   1    ]

	//مشخص کردن محل مرکز به صورت پویا
	var pointX:Number = displayObject.width / 2;
	var pointY:Number = displayObject.height / 2;

	//شعاع دایره مشخص کننده مرکز
	var pointRadius:Number = 5;

	var dspWidthDivide:Point = new Point(pointX,pointY);
	matrix.transformPoint(dspWidthDivide);

	if (visiblePoint)
	{

		//ایجاد دایره مربوطه به نمایش مرکز
		var point:MovieClip = new MovieClip();
		point.graphics.beginFill(0x000000);
		point.graphics.drawCircle(0 , 0 , pointRadius);
		point.graphics.endFill();
		//مختصات دهی دایره با توجه به مرکز تعیین شده;
		point.x = pointX - (pointRadius / 2);
		point.y = pointY - (pointRadius / 2);
		//افزودن دایره به شی مربوطه
		displayObject.addChild(point);
	}

	if (matrix.a > 0)
	{
		matrix.a = -1 * matrix.a;
		matrix.tx = displayObject.width + displayObject.x;
	}
	else
	{
		matrix.a = -1 * matrix.a;
		matrix.tx = displayObject.x - displayObject.width;
	}

	//اعمال ماتریکس جدید به شی مربوطه
	displayObject.transform.matrix = matrix;
}

//usuage
flipHorizontal(myMC1);
myMC1.rotation = 15;

حال ما برای چرخش افقی از ترکیب ماتریس دَوران و انعکاس استفاده می کنیم ، ابتدا مقدار مربوطه به ماتریس شی را گرفته (displayObject.transform.matrix) و در یک متغیر قرار می دهیم و حال می توانید همان طور که در بالا گفته شد به مقدارهای مربوطه به این شی دسترسی داشته باشیم و آنها را تغییر دهیم.

در مرحله بعد در کد زیر ماتریس دریافت شده را trace می کنیم تا از دریافت درست داده ها اطمینان حاصل کنیم. در کد برای درک بیشتر به صورت ماتریس هم توضیح داده شده است.

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

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

سپس متغیر dspWidthDivide را که یک point است را ایجاد می کنیم و مقدارهای دو متغییر pointX و pointY را به عنوان آرگمان های آن وارد می کنیم ، حال می توانیم توسط این متغیر و متد matrix.transforPoint مرکز چرخش را به مختصات مورد نظرمان به صورت پویا تغییر دهیم.

در بخش بعدی کد ،اقدام به ایجاد شی دایره برای مرکز و مختصات دهی آن می کنیم.

در مرحله بعدی که مرحله اصلی می باشد ابتدا مقدار a شی خود را چک می کنیم در صورتی که بزرگتر از صفر باشد tx را برابر با عرض شی به اضافه مختصات x شی می کنیم و در غیر این صورت مختصات x شی را منهای عرض شی می کنیم و در هر دو حالت a را برابر با a*-1 مقدار دهی می کنیم.

در آخر نیز به خصوصیت transform.matrix شی displayObject مان مقدار جدید متغیر matrix را اعمال می کنیم.

در پایان نیز برنامه را تست می کنیم ، myMC1 یک MovieClip هست که توسط تابع برای ایجاد چرخش افقی در آن انتخاب شده است و در آخر نیز برای متوجه شدن چرخش و مبنای چرخش توسط متد rotation چرخشی در شی ایجاد شده است تا با توجه به دایره مشکی متوجه چرخش بر مبنای مرکز چرخش شوید.

گاهی نیاز است که با فشردن کلید Enter بلافاصله بعد از تایپ متن در یک فیلد متنی، عملیات خاصی اجرا شود، اما با توجه به این که کلید Enter در فیلدهای متنی توسط Flash Player مدیریت می‌شود، استفاده از آن توسط KeyboardEvent در حالت عادی مقدور نمی‌باشد. در این مطلب نحوه مدیریت این کلید برای فیلدهای متنی آموزش داده می‌شود.

۱- یک پروژه Action Script 3.0 ایجاد کنید و به وسیله ابزار Text یک فیلد متنی ایجاد کنید.

۲- حالا کلاسه‌های مورد نیاز را Import کنید.

import flash.events.KeyboardEvent;
import flash.ui.Keyboard;

3- در ادامه یک Listener برای فیلد متنی ایجاد کنید و مقدار useCapture را برای آن true در نظر بگیرید تا مدیریت کلیدها را در اختیار بگیرید. (به جای my_textField نام فیلد متنی مورد نظرتان را بنویسید)

my_textField.addEventListener(KeyboardEvent.KEY_DOWN, onEnterDown, true);

4- در نهایت تابع onEnterDown را به صورت زیر تعریف کنید.

function onEnterDown(e:KeyboardEvent):void
{
	if (e.keyCode == Keyboard.ENTER || e.keyCode == Keyboard.NUMPAD_ENTER)
	{
		trace("Submit");
	}
}

در این تابع:

• به وسیله دستور if کلیدهای ENTER و NUMPAD_ENTER از سایر کلیدها متمایز می‌شود.
• بعد از فشردن کلیدهای Enter دستور trace اجرا می‌شود.

در این مطلب نحوه برقراری ارتباط بین Air و PHP به منظور Upload فایل روی Server آموزش داده می‌شود. ابتدا یک فرم مخصوص آپلود می‌سازیم، سپس کدهای مربوط به PHP را نوشته و فایل‌های مورد نیاز را روی Server قرار می‌دهیم. در نهایت کدهای مربوط به نرم افزار را در Flash اضافه می‌کنیم. برای آپلود فایل‌ها از FileReference، URLRequest و URLVariables استفاده می‌کنیم.

دانلود سورس : Source CS5.5.zip

1- برای شروع یک پروژه جدید Air ایجاد کنید.

۲- به کمک کامپوننت‌های Button , Text Input و به کمک ابزار Rectangle این فرم را بسازید.

۳- یک برنامه Editor باز کنید و این کدها را در آن بنویسید، سپس فایل را با نام uploader_script.php ذخیره کنید.

<?php $todayDate = $_POST['todayDate'];
$Name = $_POST['Name'];
$Email = $_POST['Email'];
$filename = $_FILES['Filedata']['name'];
$filetmpname = $_FILES['Filedata']['tmp_name'];
$fileType = $_FILES["Filedata"]["type"];
$fileSizeMB = ($_FILES["Filedata"]["size"] / 1024 / 1000);
move_uploaded_file($_FILES['Filedata']['tmp_name'], "images/".$filename);
$myFile = "logFile.txt";
$fh = fopen($myFile, ‘a’) or die("can’t open file");
$stringData = “\n\ntodayDate: $todayDate \n Name: $Name \n Email: $Email \n ssid: $ssid \n FileName: $filename \n TmpName: $filetmpname \n Type: $fileType \n Size: $fileSizeMB MegaBytes”;
fwrite($fh, $stringData);
fclose($fh);
?>

• در این کدها ابتدا اطلاعات با متد POST دریافت می‌شود.
• سپس فایل‌های آپلود شده به داخل فولدر images که در کنار همین فایل PHP باید بسازیم منتقل می‌شوند و نام اصلی فایل برای آن حفظ می‌شود.
• در ادامه اطلاعات مربوط به فایل در یک فایل متنی به نام logFile.txt ذخیره می‌شود.

۴- حالا فایل PHP را در Server خود آپلود کنید. در کنار این فایل یک فولدر به نام images و یک فایل متنی به نام logFile.txt ایجاد کنید و Permission آنها را ۷۷۷ قرار دهید.

۵- پنل Actions را برای فریم اول پروژه فلش فعال کنید.

۶- حالا باید کلاسه مورد نیاز را import کنید:

import flash.net.URLRequest;
import flash.net.FileFilter;
import flash.net.FileReference;
import flash.events.ProgressEvent;
import flash.events.Event;
import flash.net.URLRequestMethod;
import flash.net.URLVariables;

7- اطلاعات اولیه مربوط به دکمه‌ها و سایر قسمت‌هایی را که در فرم بالا قابل مشاهده هستند، به صورت زیر تعریف کنید:

upload_btn.enabled = false;
progressBar.width = 1;
uploadMsg.text = "Select a File …";

۸- متغیر URLRequest را که به آدرس فایل PHP بر روی Server متصل می‌شود، به صورت زیر تعریف کنید:

var URLrequest:URLRequest = new URLRequest("uploader_script.php");

9- در این آموزش در نظر داریم که کاربر فقط بتواند فایل عکس و متن را با برنامه آپلود کند، بنابراین فیلتر فایل‌ها را به صورت زیر تعریف می‌کنیم و هر دو نوع فیلتر را در یک آرایه قرار می‌دهیم:

var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png”);
var textTypes:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
var allTypes:Array = new Array(imageTypes, textTypes);

10- یک FileReference جدید می‌سازیم و Event Listener‌های مربوط به انتخاب موفق فایل توسط کاربر، کامل شدن آپلود و حین پیشرفت آپلود را برای آن به صورت زیر تعریف می‌کنیم:

var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, syncVariables);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
fileRef.addEventListener(ProgressEvent.PROGRESS, progressHandler);

11- حالا Event Listener‌های مربوط به کلیک روی دکمه‌ها را تعریف کنید.

browse_btn.addEventListener(MouseEvent.CLICK, browseBox);
upload_btn.addEventListener(MouseEvent.CLICK, uploadVars);

12- تابعی که بعد از کلیک روی دکمه Browse فراخوانی می‌شود، به صورت زیر تعریف می‌شود. بعد از کلیک روی این دکمه کاربر باید پنجره انتخاب فایل را با فیلترهایی که قبلا آماده شدند، ببیند.

function browseBox(event:MouseEvent):void
{
	fileRef.browse(allTypes);
}

13- تابعی که بعد از انتخاب موفق فایل توسط کاربر، فراخوانی می‌شود، به صورت زیر تعریف می‌شود. در این تابع ابتدا آدرس فایل در فیلد مربوطه نشان داده می‌شود. سپس دکمه آپلود فعال و ProgressBar آماده می‌شود، در ادامه اطلاعات مورد نیاز PHP به کمک URLVariables جمع آوری می‌شود و این اطلاعات توسط متد POST برای PHP آماده ارسال می‌شوند.

function syncVariables(event:Event):void
{
	fileDisplay_txt.text = "" + fileRef.name;
	upload_btn.enabled = true;
	progressBar.width = 1;
	var variables:URLVariables = new URLVariables();
	variables.todayDate = new Date();
	variables.Name = "IFLashLord";
	variables.Email = "test@gmail.com";
	URLrequest.method = URLRequestMethod.POST;
	URLrequest.data = variables;
}

14- حالا وقت آن رسیده است تابعی را تعریف کنیم که بعد از کلیک روی دکمه Upload فراخوانی می‌شود و اطلاعات را به PHP می‌فرستد. یکی از این اطلاعات، خود فایل انتخاب شده است که با دستور upload توسط FileReference ارسال می‌شود.

function uploadVars(event:MouseEvent):void
{
	uploadMsg.text = "Uploading …";
	fileRef.upload(URLrequest);
	upload_btn.enabled = false;
}

15- توابع مربوط به کامل شدن و حین پیشرفت آپلود به صورت زیر تعریف می‌شوند.

function completeHandler(event:Event):void
{
	uploadMsg.text = fileRef.name + " has been uploaded.";
	fileDisplay_txt.text = "";
}

function progressHandler(event:ProgressEvent):void
{
	progressBar.width = Math.ceil(241 * (event.bytesLoaded / event.bytesTotal));
}

در صورتی که نیاز داشتید می‌توانید این پروژه را به صورت swf و AS3 در کنار فایل PHP آپلود کنید. اما اگر قرار است این برنامه بر روی Desktop کار کند حتما باید از پروژه Air استفاده کنید.

در این مطلب نحوه جستجوی به ترتیب (مشابه Find Next) یک لغت در یک فیلد متنی و انتخاب این لغت آموزش داده می‌شود، به طوری که بعد از هر بار کلیک روی دکمه مربوط به Find Next لغت مورد نظر بعدی انتخاب می‌شود.

۱- ابتدا یک دکمه به نام find_next_btn، یک فیلد متنی به نام target_txt به عنوان فیلد متنی اصلی و یک فیلد متنی برای نوشتن کلمه مورد نظر جستجو به نام search_txt بسازید.

۲- ابتدا یک متغیر برای پیدا کردن اندیس بعدی و یک Event Listener برای دکمه Find Next می‌سازیم.

var i:Number = 0;
find_next_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);

3- حالا تابعی را که بعد از کلیک روی دکمه فراخوانی می‌شود، تعریف می‌کنیم.

function fl_MouseClickHandler(event:MouseEvent):void
{
	target_txt.alwaysShowSelection = true;
	i = target_txt.text.indexOf(search_txt.text,i) + search_txt.length;
	target_txt.setSelection(i - search_txt.length, i);
	if (target_txt.text.indexOf(search_txt.text,i) < 0)
	{
		i = 0;
	}
}

در این تابع:

• ابتدا با دستور alwaysShowSelection وضعیت نمایش ناحیه انتخاب شده را به صورت همیشه فعال تبدیل می‌کنیم تا حتی زمانی که Focus روی سایر اشیاست هم ناحیه انتخاب شده دیده شود.
• مقدار i را برای پیدا کردن لغت بعدی آماده می‌کنیم. برای این کار طول رشته لغت مورد نظر را به اندیس پیدا شده اضافه می‌کنیم.
• لغت مورد نظر را به کمک دستور setSelection روی target_txt نشان می‌دهیم.
• در صورتی که اندیس آخرین لغت هم پیدا شد، به کمک دستور if جستجو را از ابتدا شروع می‌کنیم. در این دستور فرض شده است که بعد از آخرین لغت پیدا شده، مقدار ۱- برای دستور indexOf برگردانده شود.

شاید تا به حال نیاز داشتید که یک پنجره را در گوشه‌های مانیتور به صورت Dock قرار دهید به طوری که نوار Taskbar در ویندوز برای شما مزاحمت ایجاد نکند. در این درس نحوه شناسایی محدوده‌های در دسترس مانیتور با کلاسه Screen آموزش داده می‌شود که می‌توانید در پروژه‌های Air از آن استفاده کنید.

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

۱- برنامه فلش را اجرا و یک پروژه Air ایجاد کنید.

۲- پنل Actions را باز کنید و کلاسه‌های مورد نیاز را Import کنید.

import flash.display.Screen;
import flash.events.Event;

۳- به وسیله کلاسه Screen می‌توانید رزولوشن مانیتور و محدوده‌های در دسترس را مشخص کنید. تفاوت رزولوشن و محدوده در دسترس در شکل زیر آمده است.

۴- حالا یک متغیر از نوع Screen ایجاد کنید. با توجه به این که برخی از کاربران از دو یا چند مانیتور استفاده می‌کنند یکی از ویژگی‌های کلاسه Screen این است که می‌توانید مانیتور مورد نظر خود را انتخاب کنید. در صورتی که هدف انتخاب مانیتور اصلی باشد می‌توانید از کد Screen.mainScreen که در زیر آمده است، استفاده کنید.

var screen:Screen = Screen.mainScreen;

۵- درصورتیکه نیاز داشتید از سایر مانیتورها استفاده کنید، این کد را به جای کد قبل قرار دهید. توجه کنید که داخل براکت باید اندیس مانیتور را قرار دهید که اندیس صفر برای مانیتور اصلی است.

var screen:Screen = Screen.screens[1];

۶- برای استفاده از متغیر screen می‌توانید از کد‌های زیر استفاده کنید.

// گوشه راست رزولوشن:
screen.bounds.right;

// گوشه راست دردسترس:
screen.visibleBounds.right;

// گوشه چپ رزولوشن:
screen.bounds.left;

// گوشه چپ در دسترس:
screen.visibleBounds.left;

// گوشه بالای رزولوشن:
screen.bounds.top;

// گوشه بالای دردسترس:
screen.visibleBounds.top;

// گوشه پایین رزولوشن:
screen.bounds.bottom;

// گوشه پایین در دسترس:
screen.visibleBounds.bottom;

۷- برای پیدا کردن طول و عرض رزولوشن و محدوده دردسترس هم می‌توانید از کدهای زیر استفاده کنید.

// طول و عرض رزولوشن:
screen.bounds.width;
screen.bounds.height;

// طول و عرض دردسترس:
screen.visibleBounds.width;
screen.visibleBounds.height;

برای مشاهده استفاده کاربردی از این کلاسه فایل source.zip را دانلود کنید.

+ منبع

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

بخش هفتم – انجماد (ثابت کردن) اشیاء و آزاد کردن اشیاء

برای بهینه سازی کد خود ، سعی کنید همیشه ازثابت کردن (Freeze) و آزاد کردن (Unfreeze) اشیاء استفاده کنید. این موارد برای همه اشیاء مهم هستند ، اما به صورت ویژه برای Display Object ها مهم هستند. حتی اگر شی نمایشی (Display Object) مدت زیادی در لیست نمایشی (Display List) نباشد و در انتظار جمع آوری زباله (Garbage collection) باشد ، این اشیاء می توانند هنوز حافظه و  CPU را درگیر خود کنند.

برای مثال ، ما می توانید با استفاده از Event.ENTER_FRAME رویدادی کیبورد را کنترل کنید ، در نتیجه شما امکان freeze کردن و unfreeze کردن را با رویداد های Event.REMOVE_FROM_STAGE و Event.ADDED_TO_STAGE در اختیار دارید.

مثال زیر نمونه این کار را در قالب Movie Clip ی که در حال پخش در stage هست و با کنترلر کیبورد در تعامل می باشد ، را مشاهده می کنید :

// تعریف رویداد های کیبورد

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyIsDown);

stage.addEventListener(KeyboardEvent.KEY_UP, keyIsUp);

// ساخت یک شی برای ذخیره کردن کلید تعیین شده

var keys:Dictionary = new Dictionary(true);

function keyIsDown(e:KeyboardEvent):void
{

	// به یاد داشتن کلیدی که فشرده شده است

	keys[e.keyCode] = true;

	if (e.keyCode == Keyboard.LEFT || e.keyCode == Keyboard.RIGHT)
	{

		runningBoy.play();

	}

}

function keyIsUp(e:KeyboardEvent):void
{

	// به یاد داشتن کلیدی که بعد از فشرده شدن رها شده است

	keys[e.keyCode] = false;

	for each (var value:Boolean in keys)
	{

		if (value)
		{
			return;
		}
	}

	runningBoy.stop();

}

runningBoy.addEventListener(Event.ENTER_FRAME, handleMovement);

runningBoy.stop();

var currentState:Number = runningBoy.scaleX;

var speed:Number = 15;

function handleMovement(e:Event):void
{

	if (keys[Keyboard.RIGHT])
	{

		e.currentTarget.x +=  speed;

		e.currentTarget.scaleX = currentState;

	}
	else if (keys[Keyboard.LEFT])
	{

		e.currentTarget.x -=  speed;

		e.currentTarget.scaleX =  -  currentState;

	}

}

زمانی که روی دکمه مربوطه به حذف با نام  removeBtn کلیک شود ، Movie Clip از لیست نمایش (Display List) حذف می شود:

// نمایش یا حذف مووی کلیپ توسط رویداد های دکمه های مربوطه

showBtn.addEventListener(MouseEvent.CLICK,showIt);

removeBtn.addEventListener(MouseEvent.CLICK,removeIt);

function showIt(e:MouseEvent):void
{

	addChild(runningBoy);

}

function removeIt(e:MouseEvent):void
{

	// حذف مووی کلیپ در صورتی موجود بودن

	if (contains(runningBoy))
	{
		removeChild(runningBoy);
	}

}

زمانی که Movie Clip از لیست نمایش حذف می شود ، Movie Clip هنوز رویداد Event.ENTER_FRAME را ارسال می کند. Movie Clip اجرا می شود ولی رندر (Render) نمی شود. برای ایجاد دستگیره به این وضعیت به صورت درست ، می بایست رویداد های دیگری را برای حذف تعریف کنیم ، برای پیش گیری از فشاری که این مساله به CPU وارد می آورد :

// Listen to Event.ADDED_TO_STAGE and Event.REMOVED_FROM_STAGE

runningBoy.addEventListener(Event.ADDED_TO_STAGE,activate);

runningBoy.addEventListener(Event.REMOVED_FROM_STAGE,deactivate);

function activate(e:Event):void
{

	// باز نشانی همه چیز

	e.currentTarget.addEventListener(Event.ENTER_FRAME,handleMovement);

}

function deactivate(e:Event):void
{

	//فریز کردین مووی کلیپ برای داشتن کمترین مصرف از سی پی یو در حالتی که مووی کلیپ حذف شده است

	e.currentTarget.removeEventListener(Event.ENTER_FRAME,handleMovement);

	e.currentTarget.stop();

}

زمانی که دوباره روی دکمه showBtn کلیک می شود ، Movie Clip باز نشانی می شود و رویداد Event.ENTER_FRAME دوباره به آن داده می شود ، و کیبورد به صورت درست باز هم امکان کنترل Movie Clip را دارد.

نکته : اگر شی نمایشی از لیست نمایش حذف شده است ،به مرجع آن مقدار null (تهی) بدهید تا اطمینان داشته باشید که شی freeze شده است. اگر جمع آورنده زباله (garbage collector) اجرا نشود ، شی همچنان به مصرف حافظه و پردازش CPU ادامه می دهد، حتی اگر شی نمایش داده نشود.

برای اطمینان از این که شی کمترین مصرف حافظه و پردازش CPU را دارد ، می بایست زمانی که شی از لیست نمایش حذف می شود ، کاملا freeze شده باشد.

از نسخه ۱۰ فلش پلیر ، در صورتی که پخش کننده اصلی در فریم ها به فریم خالی برسد ، شی نمایشی به صورت خودکار freeze می شود، حتی اگر شما هیچ کاری برای انجماد (freeze) کردن اشیاء انجام ندهید.

مفهوم انجماد در هنگام بارگزاری از دور(یا خارج) توسط کلاس Loader نیز مهم می باشد. زمانی که از کلاس Loader توسط فلش پلیر ۹ استفاده می کنید ، نیاز هست که به صورت دستی محتوا را در زمانی که رویداد Event.UNLOAD توسط شی LoaderInfo ارسال می شود freeze کنید. هر شی ی می بایست به صورت دستی freeze شود ، که کار سخت و بیهوده می باشد.

فلش پلیر ۱۰ متدی جدیدی برای کلاس Loader با نام unloadAndStop() معرفی کرده است. که این متد به شما این امکان را می دهد که فایل swf در زمان unload به صورت خودکار تمامی اشیاء بارگزاری شده را  freeze کند و فلش پلیر را مجبور به اجرای جمع آورنده زباله (garbage collection) بعد از عمل freeze کند.

در کد زیر یک فایل SWF توسط متد unload() بعد از بارگزاری شدن unload می شود ، که نیاز به پردازش بیشتر و freeze دستی دارد :

var loader:Loader = new Loader();

loader.load( new URLRequest ( "content.swf" ) );

addChild( loader );

stage.addEventListener( MouseEvent.CLICK, unloadSWF );

function unloadSWF( e:MouseEvent ):void
{

	// Unload the SWF file with no automatic object deactivation

	// All deactivation must be processed manually

	loader.unload();

}

بهترین راه استفاده از متد unloadAndStop() ، که یک دستگیره بومی برای اجبار جمع آوری زباله در روند اجرا ایجاد می کند ، می باشد:

var loader:Loader = new Loader();

loader.load( new URLRequest ( "content.swf" ) );

addChild( loader );

stage.addEventListener( MouseEvent.CLICK, unloadSWF );

function unloadSWF( e:MouseEvent ):void
{

	// Unload the SWF file with automatic object deactivation

	// All deactivation is handled automatically

	loader.unloadAndStop();

}

در زیر به فهرستی از مواردی که unloadAndStop آنها را برای فایل های swf بارگزاری شده آماده می کند را مشاهده می کنید :

* ایست کردن تمامی MovieClip ها
* ایست کردن تمامی صداهای در حال پخش و Stream (پخش در جریان)
* ایست و حذف همه تایمر (Timer) های استفاده شده
* حذف همه شنونده های رویداد عمومی ، برای enterFrame , exitFrame , frameconstructed , activeate , deactivate
* حدف همه شنونده های مربوطه به  stage که توسط فرزند (child) ایجاده شده است
* بستن همه NetConnection ها و NetStream ها (Video.attachNetStream/attachCamera(0) – Microphone.setLoopback(0))
* حدف فونت های AS3 از جدول فونت های عمومی
* ایست ؛ socket ها ، xmlsocket ها ،دانلودهای filerefrence ، و دیگر اشاء مربوطه به دانلود (grandchildren (سطح نوه والد) ) و…
* آزاد کردن bitmap های در ارتباط با cacheAsBitmap و filterها و…

موفق و پیروز باشید.

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

بخش ششم – unloadAndStop در فلش پلیر ۱۰

متد unloadAndStop در پاسخ به چالش های پیش روی توسعه دهندگان اکشن اسکریپت برای توقف محتوای swf بارگزاری شده و حذف آن از حافظه (Memory) ، به اکشن اسکریپت در فلش پلیر ۱۰ افزوده شد.

البته این مورد افزوده شده را نمی توان مانند گلوله ای جادویی برای حل همه مشکلاتی که در این زمینه وجود دارد دانست! ، برای روشن شدن بیشتر توضیح می دهیم که این مورد چه کاری انجام می دهد ، در مرحله اول این متد تلاش می کند محتوای بارگزاری شده را برای جمع آوری آماده کند ، و در مرحله بعد به جمع آورنده زباله (Garbage Collector) که می بایست عملیات جمع آوری زباله را انجام دهد ارجاع می شود. شما می توانید از مرحله دوم (که همان جمع آوری زباله gc می باشد)  با دادن مقدار false به عنوان آرگمان اول متد ، جلوگیری به عمل آورید.

با استفاده از این متد دریافت فایل swf باقی مانده در حافظه ساده می باشد ، اما انجام این کار به صورت تصادفی خیلی دشوار تر می باشد.

در زیر به فهرستی از مواردی که unloadAndStop آنها را برای فایل های swf بارگزاری شده آماده می کند را مشاهده می کنید :

* ایست کردن تمامی MovieClip ها
* ایست کردن تمامی صداهای در حال پخش و Stream (پخش در جریان)
* ایست و حذف همه تایمر (Timer) های استفاده شده
* حذف همه شنونده های رویداد عمومی ، برای enterFrame , exitFrame , frameconstructed , activeate , deactivate
* حدف همه شنونده های مربوطه به  stage که توسط فرزند (child) ایجاده شده است
* بستن همه NetConnection ها و NetStream ها (Video.attachNetStream/attachCamera(0) – Microphone.setLoopback(0))
* حدف فونت های AS3 از جدول فونت های عمومی
* ایست ؛ socket ها ، xmlsocket ها ،دانلودهای filerefrence ، و دیگر اشاء مربوطه به دانلود (grandchildren (سطح نوه والد) ) و…
* آزاد کردن bitmap های در ارتباط با cacheAsBitmap و filterها و…

تذکر : تمامی موارد بالا به صورت بازگشتی اجرا می شوند ، به طوری که این موارد به هر یک از فرزندان تو در تو (nested) و فایل های swf بارگزاری شده در آن ها ، نیز اعمال می شود.

حال به مثالی در این زمینه می پردازیم :

var loader:Loader = new Loader();

loader.load( new URLRequest ( "sample_content.swf" ) );

addChild( loader );

stage.addEventListener( MouseEvent.CLICK, unloadSWF );

function unloadSWF( e:MouseEvent ):void
{
	//unloadAndStop استفاده از متد
	loader.unloadAndStop();
}

در کد بالا ابتدا یک شی Loader ساخته می شود و فایل نمونه آزمایشی ما را با نام sample_content.swf را بارگزاری می کند و سپس شی به DisplayObject افزوده (addChild) می شود.

در مرحله بعد با رویدادی که برای کلیک موس در stage در این مثال ایجاد می کنیم در زمان کلیک تابع unloadSWF را فراخوانی می کنیم

در این تابع با استفاده از متد unloadAndStop عمل unload را انجام می دهیم.

موفق و پیروز باشید.

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

بخش دوم – استفاده دوباره از Object ها

راه دیگر برای بهینه سازی حافظه (memory) استفاده دوباره از اشیاء و اجتناب از ساختن دوباره و استفاده از آنها در هر زمان ممکن ، می باشد. می بایست تا جایی که می شود از ساختن دوباره object ها برای استفاده اجتناب نمود.

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

const MAX_NUM:int = 18;

const LINE_WIDTH:int = 30;
const LINE_HEIGHT:int = 400;

const COLOR:uint = 0xCCCCCC;

var myBitmapData:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false,COLOR);//200 , 200 , true);
var myBitmap:Bitmap;

var area:Rectangle;
for (var i:int = 0; i < MAX_NUM; i++)
{

	//نمونه روش غلط - از کد زیر استفاده نکنید

	area = new Rectangle(i*LINE_WIDTH,0,LINE_WIDTH,LINE_HEIGHT);

	myBitmapData.fillRect(area,Math.random()*COLOR);
	myBitmap = new Bitmap(myBitmapData);
	addChild(myBitmap);

}

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

به روشی که در کد زیر استفاده شده است دقت کنید :

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

const MAX_NUM:int = 18;

const LINE_WIDTH:int = 30;
const LINE_HEIGHT:int = 400;

const COLOR:uint = 0xCCCCCC;

var myBitmapData:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false,COLOR);
var myBitmap:Bitmap;

// ساخت شی خارج از حلقه
var area:Rectangle = new Rectangle(0,0,LINE_WIDTH,LINE_HEIGHT);

for (var i:int = 0; i < MAX_NUM; i++)
{

	//تغییر مختصات به صورت مجزا
	area.x = i * LINE_WIDTH;

	myBitmapData.fillRect(area,Math.random()*COLOR);

}

myBitmap = new Bitmap(myBitmapData);
addChild(myBitmap);

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

-

مثال قبلی شی مربوطه ، تاثیر نسبتا کمی در استفاده از حافظه داشت ، در مثال بعدی با استفاده از شی BitmapData  تعداد زیادی مربع توسط یک حلقه ایجاد می شود

کد زیر مربع هایی را به حالت موزاییک به صفحه اضافه می کند :

var myImage:BitmapData;

var myContainer:Bitmap;

const MAX_NUM:int = 300;

for (var i:int = 0; i< MAX_NUM; i++)
{

	// ساخت بیت مپ ۲۰ در ۲۰ پیکسل که شفافیت پس زمینه در آن غیر فعال شده است
	myImage = new BitmapData(20,20,false,0xF0D062);

	// ساخت یک نگه دارند برای هر مورد به صورت مجزا

	myContainer = new Bitmap(myImage);

	// افزودن به لیست نمایش - Display List

	addChild(myContainer);

	// موقعیت دهی هر نگه دارنده

	myContainer.x = (myContainer.width + 8 ) * Math.round(i % 20);

	myContainer.y = (myContainer.height + 8 ) * int(i / 20);

}

در نسخه بهینه سازی شده کد بالا (که در زیر قابل مشاهده است) یک BitmapData ایجاد می شود و برای چندین بار برای هر Bitmap استفاده می شود و نتیجه مشابه مورد قبل نیز خواهیم داشت، البته با اشغال مقدار کمتری از حافظه.

// ساخت بیت مپ ۲۰ در ۲۰ پیکسل که شفافیت پس زمینه در آن غیر فعال شده است
var myImage:BitmapData = new BitmapData(20,20,false,0xF0D062);

var myContainer:Bitmap;

const MAX_NUM:int = 300;

for (var i:int = 0; i< MAX_NUM; i++)
{

	//ساخت یک نگه دارنده که به بیت مپ کلاس تعریف شده ارجاع می شود

	myContainer = new Bitmap(myImage);
	// افزودن به لیست نمایش - Display List
	addChild(myContainer);
	// موقعیت دهی هر نگه دارنده
	myContainer.x = (myContainer.width + 8 ) * Math.round(i % 20);

	myContainer.y = (myContainer.height + 8 ) * int(i / 20);

}

در این مورد با بهینه سازی انجام شده نزدیک به ۶۵۰ تا ۷۰۰ کیلوبایت در حافظه (memory) فلش بهینه سازی انجام شده است که مقدار قابل توجهی می باشد به خصوص برای برنامه هایی که برای گوشی ها و دستگاه هایی به غیر کامپیوتر ها آماده می شود.

روش دست یابی به مقدار حافظه مصرفی در فلش:

از کد ساده زیر استفاده کنید در در پنجره خروجی output مقدار حافظه مصرفی را مشاهده کنید.

trace(Number( System.totalMemory / 1024 / 1024 ).toFixed( 2 ), "Mb");

نکته :

کد زیر که در نمونه اول ذکر شده است برای تولید یک رنگ تصادفی استفاده می شود در واقع مقدار یک رنگ که به عنوان ثابت در ابتدا تعریف شدن در فرمان random ضرب می شود که حاصل آن یک رنگ اتفاقی می باشد.

Math.random()*COLOR;

موفق و پیروز باشید.