شرح الأكشن سكربت 3 الجزء الثالث: قائمة العرض (Display List)

[abohmam]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

نتابع معا شرح الأكشن اسكربت

شرح الأكشن سكربت 3 الجزء الثالث: قائمة العرض (Display List)

تعلم AS3 - جزء3 [ display list] - الدرس 1 [الكلاسات الجرافيكية]

مرحبا بكم في هذا الجزء الجديد من دورة تعلم الاكشن سكربت 3

العنوان (display list (liste d'affichage

http://1.bp.blogspot.com/-ss_NL3Pyg2U/VF9ySmPkZhI/AAAAAAAAASs/wbBaj3wwjKY/s1600/displayList.png

___________________________

في الجزء الثاني تكلمنا عن الكلاسات و خصائصها

كيفية انشائها, و وضها في حزم خاصة (packages) و تعرفنا على الكثير من المفاهيم المهمة

في هذا الدرس سنرى أنواعا جديدة من الكلاسات و هي الكلاسات الجرافيكية


الكلاسات الجرافيكية :

هي كلاسات جاهزة في الفلاش , طريقة انشائها كما سبق و رأينا في الجزء السابق
إلاّ أنّها مرئية و نعني بهذا ان هذه الكائنات هي رسومات جرافيكية قد تكون أيقونات أو أشكال هندسية أو أزرار
يراها المستخدم على الشاشة.

في الأكشن سكربت 3, كل الكلاسات الجرافيكية مخزّنة في ثلاث حزم (packages) مخلفة و هي:

flash.display
flash.media
flash.text

اليكم هذه الشجرة عن كيفية انشائها حيث كل كلاس في الاسفل ترث من الكلاس في الأعلى

http://4.bp.blogspot.com/-Mz62HOOKQh8/VF906lpssWI/AAAAAAAAAS0/LxTTcyOWv1c/s1600/displayobject_subclasses.png

في هذا الشكل نرى كل الكلاسات الجرافيكية التي يمكننا استعمالها في برمجتنا بالأكشن سكربت 3

لماذا كل هذا العدد الكبير من الكلاسات الجرافيكية؟

في النسخ السابقة من الاكشن سكربت كانت هناك أربع كلاسات جرافيكية فقط و هي :

MovieClip , Button , TextField, BitmapData

و لكن الاكشن سكربت 3 يهتم كثيرا بتبسيط و تخفيف البرامج لكي لا يستهلك الكثير من الموارد
(الذاكرة المركزية مثلا)

كمثال بيسيط
في النسخة السابقة الكائن الوحيد الذي يمكننا من رسم شكل بسيط كان من نوع MovieClip
و هذا يعني ان هذا الكائن يملك كل خصائص و دوال ال MovieClip و التي تحمل في الذاكرة المركزية
إلاّ أنّنا لا نحتاجها جميعا وهذا يعني ان كل تلك المعلومات المخزنة في الذاكرة غير ضرورية
فكل ما نحتاجه هو رسم بسيط نضعه في الشاشة
في الاكشن سكربت 3 للقيام نفس الشئ يمكننا استعمال الكلاس Shape الأكثر خفة

_____________________________


في الجزء الثاني في درس التوريث قلنا أن كل كلاس بنت تدعى (subclass) ترث من الكلاس الام (super class)
مثلا dog يرث من animal
نقول أن كل كائن نوع dog هو كائن من نوع animal
يعني كل dog هو animal

في الأكشن سكربت 3 هناك ثلاث أنواع من الكائنات الجرافيكية

1. flash.display.DisplayObject

في الشكل السابق نرى أن كل الكلاسات الجرافيكية ترث من الكلاس DisplayObject
( flash.display.DisplayObject)

اذن كل كائن جرافيكي يعرض على الشاشة هو من نوع DisplayObject (الازرار, النصوص, الأنيمشن ..الخ)
فهذه الكلاس تحتوي على كل الخصائص الخاصة بالكائن الجرافيكي كالموقع في الشاشة (position)
الزاوية (rotation)..الخ

2. flash.display.InteractiveObject

نبقى دائما في الشكل السابق حيث نلاحظ أن هناك ثلاث كلاسات ترث من الكلاس InteractiveObject
و نقصد ب interactive التفاعل
يعني أن كل كائن من نوع InteractiveObject هو كائن يتفاعل مع ما يقوم به المستخدم كالضغط على الماوس او لوحة المفاتيح

3.flash.display.DisplayObjectContainer

الكائنات من نوع DisplayObjectContainer يمكنها أن تحتوي على كائنات جرافيكية أخرى
و الذي تسمى بالكائن الابن (Child)
اذن كل الكلاسات التي ترث من هذه الكلاس تدعى ب" حاويات الكائنات الجرافيكية"

___________________________

خلاصة:
-يجب علينا استعمال الكلاس الأكثر خفّة (حسب احتياجنا).
-الكلاسات الجرافيكية موجودة في ثلاث حزم (packages) و هي
flash.display , flash.media, flash.text.

__________________________


Display List :

(هذه المعلومات قد تكون صعبة الفهم في البداية لكن سيتم شرحها بالصور و بالتفصيل)

عندما نقوم بتشغيل برنامجنا الفلاشي (عن طريق قارئ الفلاش flash player)
يقوم هذا الاخير بانشاء كائنين (DisplayObject) / حتى لو كان البرنامج فارغا /
الاول و هو Stage و هو الذي سيحتوي على كل الكائنات الجرافيكية (الجذر)
و الثاني هو المشهد الرئيسيالكائنMainTimeline لملف SWF .

اذن Stage يحوي MainTimeline.
عند اضافة اي كائن (زر أو رسم أو أنمي ...الخ) في المسرح الرئيسي, ستكون هذه الكائنات أبناء ال MainTimeline
و يمكن لتلك الكائنات ان تحتوي -أي تكون أب- لكائنات اخرى ....الخ

هذه الشجرة (hierarchy) تسمى ب Display List


http://4.bp.blogspot.com/-z8aOm8FHZIs/VGDYrufrdQI/AAAAAAAAATE/LI5AaKdfSeA/s1600/1279160975117.png

__________________________

تطبيق:

لكي نتأكد من صحة هذا, نقوم بانشاء مشروع ActionScript3 فارغ

http://2.bp.blogspot.com/-i4s8aG-kDGQ/VA5h9mAukPI/AAAAAAAAAM8/hoQtj3qblPM/s1600/1.gif

ثم نكتب هذا الكود


trace(this); // MainTimeline
trace(this.parent); // Stage


السطر الاول, الكلمة this تعني المشهد الرئيسي الذي كتبنا فيه الكود و هو كما نرى MainTimeline
أب المشهد الرئيسي كما سبق و رأينا هو Stage و هو الجذر في الشجرة السابقة

لمعرفة عدد أطفال أي كائن من نوع DisplayObjectContainer نستعمل الخاصية numChildren.

____________________

numChildren :

هذه الخاصية مهمة تمكننا من معرفة عدد أطفال أي كائن جرافيكي من نوع DisplayObjectContainer
يعني (Loader, Sprite, Stage)

فلننشئ مشروع اكشن سكربت 3 فارغ و نكتب ما يلي

trace(this.numChildren); // 0
trace(stage.numChildren); // 1

السطر الاول سيكتب لنا 0 لان المشروع فارغ و لا يوجد أي كائن في المسرح الرئيسي
اذا ليس هناك أي طفل لل MainTimeline

أما السطر الثاني فيكتب لنا 1 فكما نعلم ان Stage يملك طفلا و هو mainTimeline

اذا أضفنا زرا ما على المسرح الرئيسي فالسطر الاول لن يبقى 0 بل يصبح 1
يعني ان ال MainTimeline يملك طفلا واحدا (وهو الزر)
السطر الثاني يبقى 1 أيضا ف Stage له طفل مباشر واحد و هو MainTimeline

الشجرة تصبح هكذا


Stage
|
MainTimeline
|
SimpleButton
________________________

في الدرس القادم سنرى كيفية انشاء كائنات (instance) من الكلاسات الجرافيكية
عن طريق الأشكن سكربت 3 و اظهارها على الشاشة

[abohmam]

تعلم AS3 - جزء3 [ display list] - الدرس 2 - [انشاء كائن جرافيكي ]

السلام عليكم و رحمة الله

مرحبا بكم في هذا الجزء الجديد من دورة تعلم الاكشن سكربت3

في الدرس السابق رأينا عدة مفاهيم مهمة عن الكلاسات الجرافيكية و أنواعها و الحزم الخاصة لها

في هذا الدرس سنرى كيفية انشاء كائنات (instance) الخاصة بتلك الكلاسات واضافتها الى المسرح

http://4.bp.blogspot.com/-XW-OSZ2WAtw/VGI0rkNZQwI/AAAAAAAAATY/kwLcra0X0pI/s1600/aa.png
_________________________


في الدرس السابق قلنا أن هناك ثلاث أنواع من الكائنات الجرافيكية و هي
1. flash.display.DisplayObject
flash.display.InteractiveObject(TextField, SimpleButton) .2
3. (flash.display.DisplayObjectContainer (Loader, Sprite , Stage

https://1.bp.blogspot.com/-Mz62HOOKQh8/VF906lpssWI/AAAAAAAAAS4/r5dlNkhTASg/s400/displayobject_subclasses.png

من بين هذه الكلاسات, هناك كلاسات يمكننا أن ننشئ منها كائنات (كما رأينا في الجزء السابق عن طريق الكلمة new)
و هناك كلاسات أخرى (تدعى abstract classes) حيث لا يمكننا أن نرث منها و لا انشاء instance لها
_________________________

الكلاسات التي يمكننا انشاء كائنات منها:

1. الكلاسات الموجودة في الحزمة flash.display

Bitmap و BitmapData: (سنراها في جزء لاحق) .
Shape: تعتبر هذه الكلاس أساس كل محتوى vector (الرسومات الفكتورية) , و هي مرتبطة مع API الخاص بالرسم بفضل الخاصية graphics.
SimpleButton: هذه الكلاس تمكننا من انشاء الأزرار بصفة ديناميكية, (هذا لم يكن ممكنا في النسخ السابقة من الاكشن سكربت ) .
Loader: هذه الكلاس تسيّر تحميل أي محتوى جرافيكي خارجي (تحميل ملف swf , png, gif, jpg ..الخ).
Sprite: هذه الكلاس هي MovieClip مخفّف.
MovieClip: هي الكلاس الجرافيكية الاكثر غنا , غنية بالخصائص و الدوال, و هي مرتبطة بالانيمشن.

2. الكلاسات الموجودة في الحزمة flash.media

Video: هذه الكلاس تهتم بعرض تدفقات الفيديو القادمة عن طريق كامرا (webCam) أو سرفر للبث الحي أو ملفات الفيديو من نوع MP4, FLV, ...الخ


3. الكلاسات الموجودة في الحزمة flash.text
TextField: تسيير النصوص يتم عن طريق الكلاس TextField.



الكلاسات التي لا يمكن انشاء كائنات منها:

مجودة في الحزمة flash.display

AVM1Movie: عندما نقوم بتعميل ملف SWF مبرمج بالاكشن سكربت 1 أو 2 داخل مشروع أكشن سكربت 3, قارئ الفلاش يضع
الانيمشن الخاص بالنسخ السابقة داخل كائن AVM1Movie, اذن لا يمكننا انشاء كائن من هذا النوع عن طريق البرمجة.
InteractiveObject: هذه الكلاس مختصة في التعامل مع سلوك المستدخم كالضغط على الماوس أو لوحة المفاتيح مثلا.
MorphShape: يمكننا برنامج الفلاش من صنع (interpolation) للأشكال, تلك الاشكال تكون من نوع MorphShape التي ينشئها الفلاش
أوتوماتيكيا (فقط الفلاش من يستطيع انشاء كائنات من هذا النوع)
StaticText: هذه الكلاس تخص النصوص الثابتة, التي تُنشئ عن طريق برنامج الفلاش بشكل يدوي.

http://2.bp.blogspot.com/-QtQM734DAJ8/VGI9gO6VM-I/AAAAAAAAATk/UKw5WwVXE5g/s1600/capture1.jpg

Stage: و هو الحاوي الأساسي لكل الكائنات الجرافيكية.
_________________________

لانشاء كائن خاص بكلاس معين نستعمل الطريقة التي رأيناها في الجزاء الثاني الخاص بالكلاس
يعني عن طريق الكلمة الدلالية new .

مثلا هذا الكود لانشاء كائن من نوع MovieClip

var myMc : MovieClip = new MovieClip();

بنفس الطريقة اذا أردنا ادخال حقل للنصوص بشكل ديناميكي

var myText : TextField = new TextField();
myText.text = "Hello as3arabic";

(الخاصية text في كائن TextField تخص النص المكتوب بداخله)

________________________

نبقى مع الكود الثاني

import flash.text.TextField;
var myText : TextField = new TextField();
myText.text = "Hello as3arabic";


بفضل هذا الكود, يقوم الكمبيوتر بانشاء كائن من نوع TextField و يضعه في مكان ما داخل الذاكرة المركزية
إلاّ أنه لن يُعرض على الشاشة (أي أننا لم نُضفه بعد الى قائمة display list)

اذا جربنا هذا الكود و قمنا بتشغيل البرنامج سنرى ان المشهد يبقى فارغا و لا هناك لنص مكتوب فيه Hello as3arabic.

______________________

إظهار الكائن الجرافيكي على الشاشة:

عند انشاء كائن جرافيكي عن طريق new
هذا الاخير لن يظهر مباشرة على الشاشة
فهو مخزن فقط داخل الذاكرة المركزية
في هذه الحالة يسمى ب كائن جرافيكي خارج قائمة العرض
لاضافته الى قائمة نستعمل احدى الدالتين الموجودتين داخل الكلاس DisplayObjectContainer
وهي: addChild أو addChildAt.

___________________________________________

الدالة addChild :

هذا هو كود الدالة

public function addChild(child:DisplayObject): DisplayObject

هذه الدالة تستقبل مدخلا واحدا من نوع DisplayObject.
لاضافة كائن جرافيكي الى قائمة العرض (display list) يجب علينا أن نضيفه داخل كائن من نوع DisplayObjectContainer
موجود في القائمة. نقول ان الكائن الجديد هو ابن الكائن الذي يحتويه .

نعود الى المثال السابق:

var myText : TextField = new TextField();


myText.text = "Hello as3arabic";
addChild( myText );


جربنا هذا الكود سنجد النص Hello as3arabic ظاهرا على الشاشة.
حيث تم اضافة الكائن myText الى ال MainTimeline
اذن قائمة العرض الجديدة (الشجرة) أصبحث هكذا

Stage
|
MainTimeline
|
(myText : TextField)

__________________

من أهم مميزات الدالة addChild في الاكشن سكربت 3 هو تغيير الحاوي بسهولة
ففي النسخ السابقة اذا انشأنا كائنا B داخل كائن A
(يعني B ابن A)
ثم اذا أردنا أن نستبدل الاب A بكائن اخر C
فيجب علينا حذف الكائن B تماما
قم اعادة انشاء كائن مماثل له
و اخيرا وضعه داخل الكائن C
ليصبح C أب الكائن B.

في الأكشن سكربت 3 بمجرد استدعاء الدالة addChild لاضافة كائن جديد الى قائمة العرض
في حالة ما كان هذا الاخير موجودا في القائمة
سيتم اوتوماتيكيا حذف الكائن من مكانه الاصلي
و ادخاله داخل كائن DisplayObjectContainer الذي قام باستدعاء الدالة addChild.

مثال


import flash.display.MovieClip;
import flash.display.Sprite;

var myClip : MovieClip = new MovieClip(); // انشاء كائن موفي كليب فارغ

//MainTimeline اضافته الى قائمة العرض ; هو الان ابن مباشر ل
addChild(myClip);

trace( numChildren ); //1

var mySprite : Sprite = new Sprite(); // انشاء كائن سبرايت فارغ

//MainTimeline اضافته الى قائمة العرض ; هو الان ابن مباشر ل
addChild( mySprite );

trace( numChildren); // 2

mySprite.addChild( myClip );

trace(numChildren); //1
trace(mySprite.numChildren); //1


في هذا الكود أنشأنا كائنين
الاول من نوع MovieClip و الثاني من نوع Sprite
قمنا باضافة الكائن الاول الى قائمة العرض كابن ل MainTimeline
لهذا أظهرت لنا( trace (numChildren القيمة 1
ثم أضفنا الكائن الثاني بنفس الطريقة فأظهرت لنا 2
أي ان MainTimeline يحتوى على طفلين

فأصبحت الشجرة هكذا

Stage
|
MainTimeline
\/
myClip mySprite

ثم استعملنا هذا الكود
mySprite.addChild( myClip );

تم حذف الكائن myClip من MainTimeline و وضعه داخل الكائن mySprite


Stage
|
MainTimeline
|
mySprite
|
myClip

اذن اصبح لل MainTimeline طفلا واحدا بدلا من 2
و mySprite أيضا كما يبينه الشكل


لمستعملي النسخة الثانية من الاكشن سكربت
لا يوجد دالة مشابهة لـ duplicateMovieClip في الاكشن سكرب 3

_______________________

في الدرس القادم سنتعمق أكثر في هذا المجال و نرى كيف يتم ترتيب الكائنات داخل القائمة و كيفية الدخول اليها
و سنتعرف أيضا على معنى العمق (depth) و كيفية تغييره ..الخ

[abohmam]

تعلم AS3 - جزء3 [ display list] - الدرس 3 - [قائمة الأطفال الدخلية لكائن جرافيكي]

السلام عليكم و رحمة الله

مرحبا بكم في هذا الجزء الجديد من دورة تعلم الاكشن سكربت3

في الدرس السابق رأينا طريقة انشاء كائن جرافيكي عن طريق الكلمة new
و قلنا أنه سيكون مخزّن في الذاكرة المركزية و لن يظهر على الشاشة إلاّ بعد استعداء الدالة addChild
فنقول ان الكائن الجديد ابن الكائن الذي يحتويه

https://4.bp.blogspot.com/-z8aOm8FHZIs/VGDYrufrdQI/AAAAAAAAATI/I031PHkg7eA/s400/1279160975117.png

__________________________


قائمة الأطفال الدخلية لكائن جرافيكي:

لكل كائن من نوع DisplayObjectContainer
قائمة أطفال موجودة داخل جدول. حيث أن كل أندكس (خانة) نجد طفلا (كائن جرافيكي).
هذا الجدول (وكما رأينا في درس الجداول ) يبدأ من الصفر (الخانة الاولى = الاندكس 0 )
اخر كائن في الجدول (الذي يملك اكبر أندكس) يظهر على الشاشة فوق الكائنات الأخرى (سنراه لاحقا)


مثال
لدينا كائن من نوع MovieClip يحتوي على كائن من نوع Shape
و كائنين من نوع Sprite
(الكلاسات MovieClip , Spriteترث من الكلاس DisplayObjectContainer اذن هي كائنات من هذا النوع
بينما الكلاس Shape ترث من الكلاس DisplayObject)


var myMc : MovieClip = new MovieClip();
addChild(myMc);

var myShape : Shape = new Shape();
myMc.addChild(myShape);

for(var i:int = 0; i<2 ; i++)
{
var mySp:Sprite = new Sprite();
myMc.addChild(mySp);
}

trace( myMc.numChildren); // 3


في هذا الكود أنشأنا كائنا من نوع MovieClip و وضعناه داخل ال MainTimeline
اذا هذا الكائن الان موجود داخل الجدول الداخلي الخاص بقائمة أطفال MainTimeline
داخل الحلقة التكرارية ننشئ كائنات من نوع Sprite و نضيفها داخل الكائن myMc
اذا تلك الكائنات الان موجودة داخل الجدول الخاص بقائمة اطفال الكائن myMc

في درس الجداول كنا نستعمل الخاصية length لمعرفة طول الجدول
لكن لمعرفة طول الجدول (عدد أطفال) الخاص بقائمة الاطفال نستعمل الخاصية numChildren

اذن يمكن تمثيل الشجرة هكذا

Stage
|
MainTimeline
|
DisplayObjectContainer (MovieClip)
|
[ DisplayObject , DisplayObjectContainer , DisplayObjectContainer ]
index 0 ................................ index 1 ....................................... index 2


الدالة addChild تشبه الدالة push التي رأيناها في درس الجداول
فهي تضيف كائن جرافيكي الى جدول الأطفال
حيث تقوم بإضافته في اخر القائمة و هذا يعني انه في الشاشة سيظهر فوق كل الكائنات الجرافيكية .
و لكن هناك طريقة أخرى لإضافة الكائن في index من اختيارنا نحن المبرمجون
و هذا عن طريق الدالة addChildAt
_______________________

الدالة addChildAt:

كود الدالة
public function addChildAt(Child : DisplayObject, index : int) :DisplayObject


الدالة addChildAt تقبل مدخلا ثانيا و هو index و الذي سنضع فيه الكائن من نوع DisplayObject
داخل قائمة الأطفال الخاصة بكائن اخر من نوع DisplayObjectContainer

اليكم هذا المثال

var mc : MovieClip = new MovieClip();
addChild(mc);

var mySprite : Sprite = new Sprite();
addChildAt(mySprite, 0);

في السطر الثاني من الكود يتم اضافة الكائن mc الى قائمة الاطفال الجرافيكية الخاصة ب MainTimeline
الكائن mc يملك الاندس 0 حاليا
ثم أنشأنا كائنا من نوع Sprite
و أضفناه عن طريق الدالة addChildAt الى قائمة اطفال ال MainTimeline
الكائن sprite لن يأخذ الأندكس 1 لأننا لم نضفه عن طريق الدالة addChild
و انما سيأخذ الاندكس 0 بينما الكائن الاول (mc) سينتقل الى الاندكس 1 (لن يُحذف و إنما ينتقل الى أنكس اخر)


قبل استعمال الدالة addChildAt يجب التأكد من أن الاندكس الذي نريد وضع الكائن فيه موجود
فلو عدنا الى الكود السابق
addChildAt(mySprite, 0 )

يمكن وضع الكائن الحالي في الاندكس 0 (كأول طفل)
لو غيرنا القيمة 0 الى 1 تبقى صحيحة
لأن ال MainTimeline يملك طفلا (و هو mc من نوع MovieClip) في الاندكس 0
و هذا ما يعني أن الطفل الجديد يمكن أن يحمل الاندكس 1

لكن لو جرّبنا هذا الكود


var mc : MovieClip = new MovieClip();
addChild(mc);

var mySprite : Sprite = new Sprite();
addChildAt(mySprite, 5);


سنتحصل على رسالة خطأ من نوع RangeError
و هذا راجع الى أن الاندكس الذي نريد أن نضع فيه الطفل الجديد خارج المجال.

لتصحيح هذا الخطأ يجب أن تكون قيمة الأندكس للطفل الجديد أصغل من أو تساوي numChildren الخاص ب DisplayObjectContainer
و أكبر من أو يساوي 0

______________________

في الدرس القادم سنرى مختلف الطرق التي تمكننا من الدخول الى طفل ما موجود في القائمة لكي نُجري عليه
مختلف العمليات (كتغيير موقعه في الشاشة, أو زاويته ..الخ)

[azizsoft]

بسم الله الرحمن الرحيم

جزاكم الله خيرا أستاذ أبو همام ونفع بكم
شروحات نافعة :abc_022:

[خادم المسلمين]

شكرا جزيلا والشكر موصول لصاحب المدونة الرائعة
http://as3arabic.blogspot.com/p/blog-page_11.html

[أبو فارس]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبو يوسف]

:teslam:

جزاك الله خيرا اخانا أبا همام :abc_152: وبارك الله فيك

[خادم المسلمين]

موضوع اشمل ويثبت لفترة