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

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

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

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

و الحزم الخاصة لها

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

و اضافتها الى المسرح

_______________________________

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

1. flash.display.DisplayObject

 flash.display.InteractiveObject(TextField, SimpleButton) .2

3. (flash.display.DisplayObjectContainer (Loader, Sprite , Stage

من بين هذه الكلاسات, هناك كلاسات يمكننا أن ننشئ منها  كائنات (كما رأينا في الجزء السابق عن طريق الكلمة 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: هذه الكلاس تخص النصوص الثابتة, التي تُنشئ عن طريق برنامج الفلاش بشكل يدوي.

         

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) و كيفية تغييره ..الخ