خانه » مالتی مدیا » ادوبی فلش » Display List و اکشن اسکریپت ۳

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

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);

 

Print Friendly, PDF & Email
تگ ها :
پیوند مطلب قبلی
پیوند مطلب بعدی

درباره بهروز پولادرگ

متولد : ۵ مرداد سال ۱۳۶۷ ، حرفه : ادوبی فلش ، برنامه نویسی و طراحی وب ، طراحی گرافیک ، مالتی مدیا ، نرم افزار های تحت وب

12 نظر

  1. مطلب جامع و کاملی بود .
    با اینکه قضیه خیلی ساده به نظر میرسه بسیار در فلش کاربردی است .

  2. سلام مدت ها بود به سایتتون سر نزده بودم مطالب کاربردی اضافه کرده اید. خیلی ممنون و متشکر. یک سوال در مورد این مطلب چه فرقی بین depth و عمق در display list وجود دارد؟
    در ضمن یادم می آید قبلا یک توضیح کامل در مورد seek bar داده بودید ولی من هرچه جستجو کردم پیدا نکردم امکان دارد آن مطلب را دوباره در سایت قرار دهید.
    و یک سوال دیگر آیاچگونه می توان یک slid showبسازیم که عکس ها را به صورت رندم از بیرون لود کند در ضمن transition ها را هم خودمان کنترل کنیم. من چندین نمونه در اینترنت دیده ام که با کد XMLساخته شده بود ولی امکان تنظیم transition ها وجود نداشت.
    در ضمن اگر تا بحال با افتر افکت کار کرده اید چند سوال در مورد آن دارم اگر جواب دهید ممنون می شوم
    اولا فرق آن با فلش (البته موارد مشترک بین آن ها)
    دوما آیا می توان در افتر حرکتی را طوری تنظیم کرد که بی نهایت بار تکرار شود (مفهومی شبیه movie clip در فلش)
    سوم این که آیا راهی وجود ندارد که افکت ها و نتایج کارمان در افتر را در فلش استفاده کنیم.(به جز استفاده از ساختار FLV)

    • سلام و ممنون برای توجه شما….

      یک سوال در مورد این مطلب چه فرقی بین depth و عمق در display list وجود دارد؟

      خیر ، در واقع depth به معنای عمق می باشد

      توضیح کامل در مورد seek bar داده بودید….

      بله در این آدرس می تونید مشاهده نمایید – در اکشن اسکریپت ۳ وتفاوتها با اکشن اسکریپت ۲

      چگونه می توان یک slid showبسازیم که عکس ها را به صورت رندم از بیرون لود کند

      به صورت رندوم یک عدد بر رمبنای تعداد تصاویر در XML ایجاد می کنیم Math.random()*num و بعد از عدد برای دریافت اطلاعات بخش استفاده می کنیم.

      …امکان تنظیم transition ها وجود نداشت..

      این امکان رو به راحتی می تونید خودتون به پروژه اضافه کنید ولی اگه پروژه کاملا بر مبنای اکشن باشه شاید کار تون یه مقدار سخت بشه…

      در ضمن اگر تا بحال با افتر افکت کار کرده اید چند سوال در مورد آن دارم اگر جواب دهید ممنون می شوم
      اولا فرق آن با فلش (البته موارد مشترک بین آن ها)

      این دو برای دو کار متفاوت می باشند و در واقع ابزار کمکی برای هم می باشند افتر افکت برای کار بر روی ویدو و در نهایت خروجی ویدئویی می باشد که البته امکاناتی بسیار زیاد افکت ها و امکانات محورهای سه بعدی ( در حل کم ) و … داره که می تونه ابزاری قوی برای کمک به فلش هم باشه و جای مقایسه بین این دو وجود نداره هر کدام رو برای کاری ساختند///

      دوما آیا می توان در افتر حرکتی را طوری تنظیم کرد که بی نهایت بار تکرار شود (مفهومی شبیه movie clip در فلش)

      اصولا چون خروجی شما ویدویی می باشد خیر..

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

      فلش فرمت های متفاوتی را پیشتیبانی می کند که می توانید از آنها استفاده کنید ولی FLV به دلیل امکان استفاده از Alpha مرسوم تر می باشد.

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

  3. سلام
    خسته نباشِد
    یه سوال داشتم. من یه عکس رو به صورت داینامیک به یه مووی کلیپ اضافه میکنم با
    as3
    ولی یه مشکل دارم.وقتی که به فریم بعدی میرم و دوباره به فریم قبلی بر میگردم، اون عکس ناپدید شده و دیده نمیشه
    مشکل از کجاست

    • سلام
      شما می بایست با کمک گرفتن از متد

      addFrameScript(4,frameFunction); 
      

      فریم ها از صفر شروع می شوند و برای فریم یک می بایست ۰ را قرار دهید و برای ۵ عدد ۴ که در نمونه هست

      و کد خود را در تابع frameFunction قرار دهید

      با این کار کد شما به صورت داینامیک در فریمی که می خواهید نمایش داده می شود

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

  4. ممنون از پاسختون.
    خیلی لطف کردی 🙂

  5. سلام بهروز خان
    من یه مشکل دام که بخواطرش اینترنت رو زیرو رو کردم ولی!!!
    من می‌خوام شی من با هر مووی کلیپی که برخورد کرد نام اون موویی کلیپ رو بدست بیارم
    تابع hittest میشناسم
    ولی مشکل این جاست که چجوری نام مووی کلیپ رو بدست بیارم
    کد زیر رو پیدا کردم ولی تو خط اولش از main ایراد میگیره

    setChildIndex(main,numChildren-1);                                    
    for (var i:int;i<this.numChildren-1;i++) {                                  
     if(main.hitTestObject(this.getChildAt(i)))   trace(this.getChildAt(i).name);                                                   
    }
    

    دیگه آخرین امید شمایی
    درضمن اکشن ۳
    ممنون

ارسال جواب

آدرس رایانامه شما منتشر نخواهد شد.فیلد های اجباری علامت گزاری شده اند *

*

رفتن به بالای صفحه