Display List و اکشن اسکریپت ۳

بهروز پولادرگ — Wed, 25 Nov 2009 19:32:54 +0000

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

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

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

var myText:TextField = new TextField();
myText.text = “Hello PCSEVEN!”;
addChild(myText);

در کد بالا ابتدا یک شی از نوع TextField ایجاد کردیم و سپس مقدار Hello PCSEVEN! رو به اون دادیم ، تا اینجای کار هیچ تغییری در فلش ایجاد نمی کند و تمامی این موارد می بایست توسط 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 DisplayList دارای متد و روش های بسیاری بوده که اشاره دقیق آنها را به آینده و در مثال های کاربردی توضیح خواهیم داد در زیر به تعدادی از متد که کاربرد زیادی دارند می پردازیم ، البته با توجه به نام آنها به راحتی نوع کار آنها قابل فهم خواهد بود….

.getChildIndex(objectName) – با استفاده از این متد می توانید به کد اندیس index یک شی دسترسی پیدا کنید که objectName نام شی یا همان instance name شی مورد نظر شما می باشد ، با این کار می توانید به شی مورد نظر اشاره کنید و روی آن عملیات های مورد نظر خود را انجام دهید..
.getChildAt(indexPosition) – با این روش می توانید به یک شی که فقط اندیس آن را می دانید اشاره کنید و روی آن عملیات های مورد نظر خود را انجام دهید.
.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-PCSEVEN”;

text2_txt.text = “Except if we add its container to the main timeline display list-PCSEVEN”;

addChild(container_mc);

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

پادشاه فلش » MovieClip

Display List و اکشن اسکریپت ۳