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

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

برای بهینه سازی کد خود ، سعی کنید همیشه ازثابت کردن (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ها و…

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

Display List چیست ؟
Display List لیستی از تمامی اجزاء که دون فلش هستند ، همه چیز هایی که دیده می شوند ، همان کارهایی که می توانید توی نرم افزار فلش انجام بدید و سطوح بالا و پایین بودن اشاء رو مشخص کنید و حذف کنید و…
در این مقاله بیشتر به .addChild() و .removeChild() پرداخته می شود.

استفاده ابتدایی از Display List :
ساده ترین استفاده از Display List افزودن یک شی به صفحه و حذف آن می باشد که به ترتیب توسط متدهای .addChild() و .removeChild() انجام می شود.

یک مثال ساده برای استفاده addChild

var myText:TextField = new TextField();
myText.text = "Hello IFLashLord!";
addChild(myText);

در کد بالا ابتدا یک شی از نوع TextField ایجاد کردیم و سپس مقدار Hello IFLashLord! رو به اون دادیم ، تا اینجای کار هیچ تغییری در فلش ایجاد نمی کند و تمامی این موارد می بایست توسط addChild به Display List و یا لیست اشاء نمایشی فلش افزوده شود ، آرگمان وردی addChild مقدار نام شی مورد نظر ما می باشد.

حال فرض می کنیم می خواهیم این شی رو حذف کنیم به صورت زیر از removeChild استفاده می کنیم :

removeChild(myText);

سلسله مراتب در Display List :

اگر شما چندین بار از addChild استفاده کنید متوجه می شود که اشاء ی که به صفحه افزوده می شوند دارای سلسله مراتبی هستند و در هر بار افزودن در سطح های مختلفی قرار می گیرند، که باعث ایجاد پوشش و دیده نشدن بخشی از اشایی قبلی نیز می شود ، برای روشن تر شدن این موضوع به مثال زیر دقت نمایید :

در این مثال ما سه شی که در کتابخانه فلش قبلا ایجاد کرده ایم را فراخوانی می کنیم و به Display List اضافه می کنیم :

var myTriangle:TriangleShape = new TriangleShape();
var myCircle:CircleShape = new CircleShape();
var myStar:StarShape = new StarShape();
addChild(myTriangle);
addChild(myCircle);
addChild(myStar);

ما برای افزودن هر شی یک باز از addChild استفاده می کنیم، به این نکته توجه داشته باشید که ترتیب استفاده از addChild در ترتیب قرار گیری سطوح نقش مستقیم دارد و تعیین کننده آن می باشد
این مثال را با چند بار جا به جا کردن addChild ها انجام بدهید تا این موضوع برایتان روشن شود.

توجه داشته باشید TriangleShape و CircleShape و StarShape جزو کلاس های ثابت نرم لفزار فلش نیستند و شما خودتان می بایست اونها رو بسازید و درون کتابخانه فلش نام گزاری کنید تا بتوان آنها را درون اکشن اسکریپت فرا خوانی کرد ، شما می توانید از هر شکلی برای ایجاد آنها به دلخواه خود استفاده کنید.

استفاده از متد addChildAt و امکان افزودن شی در سطحی خواص :

برخلاف addChild متد addChildAt دارای دو آرگمان ورودی می باشد که به صورت زیر استفاده می شود.

ساختار کلی addChildAt :

addChildAt(myObject,indexNumber);

myObject : نام شی مورد نظر برای افرودن
indexNumber : سطحی که می خواهید شی شما در آن افزوده شود (مقداری عددی ، شروع از صفر)

به عنوان مثال ما سه شی ایجاد می کنیم و دو عدد از آنها را به صورت معمول با استفاده از addChild به صفحه اضافه می کنیم :

var myTriangle:TriangleShape = new TriangleShape();
var myCircle:CircleShape = new CircleShape();
var myStar:StarShape = new StarShape();
addChild(myTriangle);
addChild(myCircle);

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

var myTriangle:TriangleShape = new TriangleShape();
var myCircle:CircleShape = new CircleShape();
var myStar:StarShape = new StarShape();
addChild(myTriangle);
addChild(myCircle);
addChildAt(myStar,0);

در بخش addChildAt(myStar,0); ما شی myStar و یا همان ستاره را در سطح ۰ افزودیم این کار باعث افزوده شدن در پایین ترین سطح می شود
حال اگر باز هم شی دیگر را به سط ۰ اضافه کنیم باعث می شود به پایین تر ین سطح برود و دیگر سطوح نیز به صورت خودکار تغییر کند

در این نسخه از اکشن اسکریپت بر خلاف نسخه های قبلی که صرف نظر از تعداد سطوح امکان مقدار دهی به سطح ها وحود داشت ، اگر شما به طور مثال در کد بالا مقدار سطح را ۱۰ وارد نمایید با پیغام خطا رو به رو خواهید شد ، زیرا این مقدار خارج از Display List می باشد ، می بایست سطح خالی برای افزوده شدن وجود داشته باشد.

حذف کردن اشاء با استفاده از متد removeChildAt()

حال به موضوع حذف اشاء از Display List می رسیم ، برای این کار از متد removeChildAt() استفاده می شه ، البته برای حذف بر اساس سطح در این روش شما با دادن عدد سطح مورد نظر شی ی که در آن موجود می باشد را حذف می کنید (عمل حذف کردن در پروژه ها کاربرد بسیاری دارد که البته انشاء الله در مبحث های آینده به فواید و استفاده آن خواهیم پرداخت)مثالی از استفاده این روش :

var myTriangle:TriangleShape = new TriangleShape();
var myCircle:CircleShape = new CircleShape();
var myStar:StarShape = new StarShape();
addChild(myTriangle);
addChild(myCircle);
addChild(myStar);
removeChildAt(1);

توجه داشته باشید شما فقط می توانید عددی وارد نمایید که شی آن موجود باشد . نکته مهم دیگر آن است که با حذف سطح شی شماره ۱ کد سطح های جا به جا می شود.در این مثال این موضوع به این مفهوم می باشد که myStar در اندیس ۱ قرار می گیرد و اندیس (index) مربوط به ۲ دیگر موجود نمی باشد.تصویری برای نمایش نتیجه اجرای کد بالا :

جا به جایی اندیس اشیاء در Display List

شما توسط متد swapChildren می توانید اشایی که قبلا به Display List افزوده اید را جا به جا کنید این متد دو آرگمان دارد که با نام اشایی که می خواهید جا به جا شود مقدار دهی می شود ، این عمل جابا به جایی بدون تاثیر بر دیگر اشائ انجام می شود و فقط دو شی را جا به جا می کند ، در زیر به مثال در این مورد می پردازیم :

var myTriangle:TriangleShape = new TriangleShape();
var myCircle:CircleShape = new CircleShape();
var myStar:StarShape = new StarShape();
addChild(myTriangle);
addChild(myCircle);
addChild(myStar);
swapChildren(myStar, myCircle);

در کد بالا جای myStar با myCircle عوض می شود (در واقع جای ستاره با دایره ) که نتیجه را می توانید با مشاهده تصویر زیر بهتر درک نمایید :

دیگر موارد مورد نیاز در DisplayList دارای متد و روش های بسیاری بوده که اشاره دقیق آنها را به آینده و در مثال های کاربردی توضیح خواهیم داد در زیر به تعدادی از متد که کاربرد زیادی دارند می پردازیم ، البته با توجه به نام آنها به راحتی نوع کار آنها قابل فهم خواهد بود….

1. .getChildIndex(objectName) – با استفاده از این متد می توانید به کد اندیس index یک شی دسترسی پیدا کنید که objectName نام شی یا همان instance name شی مورد نظر شما می باشد ، با این کار می توانید به شی مورد نظر اشاره کنید و روی آن عملیات های مورد نظر خود را انجام دهید..
2. .getChildAt(indexPosition) – با این روش می توانید به یک شی که فقط اندیس آن را می دانید اشاره کنید و روی آن عملیات های مورد نظر خود را انجام دهید.
3. .numChildren – با این خاصیت شما می توانید به تعداد اشاء موجود در DisplayList دسترسی پیدا کنید.

توضیحات پایانی :

باید به این نکته توجه داشته باشید که فقط Display Object ها را می توان به DisplayList افروز و این به این معنی می باشد که اشاء از نوع movieClips, Sprites, TextFields, Videos, Bitmaps, و… را می توان به DisplayList اضافه نمود و شما نمی توانید اشاء غیر قابل نمایش (غیر بصری) مثلا یه مقدار و یا یک عدد را به تنهای به Display List اصافه کنید.بعضی از Display Object ها نیز از نوع Display Object Containers هستند و این به این معنی م باشد که درون این اشاء نیز شما می توانید شی جدیدی اضافه نمایید برای مثال MovieClips , Sprites ها…در زیر به مثالی اشاره می کنیم که در آن ابتدا یک MovieClip ایجاد می کنیم و بعد دو فیلد متنی تعریف می کنیم و این دو فیلد را درون MovieClip خود اضافه می کنیم (توسط addChild) و در مرحله بعد به این فیلد مقدار دهی می کنیم و در آخر MovieClip را به Display List اضافه می کنیم ، این کار بعث می شود که MovieClipی شامل دو فیلد متنی به صفحه اضافه شود ، به مثال دقت نمایید :

var container_mc:MovieClip = new MovieClip();
var text1_txt:TextField = new TextField();
var text2_txt:TextField = new TextField();
container_mc.addChild(text1_txt);
container_mc.addChild(text2_txt);
text1_txt.text = "This text field will not appear on the screen-IFLashlord";
text2_txt.text = "Except if we add its container to the main timeline display list-IFLashlord";
addChild(container_mc);