إعـــــــلان

**admin admin** · 08-03-2015, 07:27 PM

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

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

**admin admin** · 08-03-2015, 07:27 PM

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

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

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

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

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

__________________________

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

لكل كائن من نوع 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 azizsoft** · 08-03-2015, 08:29 PM

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

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

**خادم المسلمين خادم المسلمين** · 08-03-2015, 09:03 PM

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

**أبو فارس أبو فارس** · 09-03-2015, 05:17 PM

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

**أبو يوسف أبو يوسف** · 10-03-2015, 08:04 PM

:teslam:

جزاك الله خيرا اخانا أبا همام

وبارك الله فيك

**خادم المسلمين خادم المسلمين** · 20-07-2015, 12:14 PM

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

إعـــــــلان

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

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

تعليق

تعليق

تعليق

تعليق

تعليق

تعليق

تعليق

مواضيع تهمك