تويت
مهم جدا أخي الكريم أن تفتح برنامج الفلاش لنتابع الشرح معا ولتستوعب ما سنعرضه حول طرق التعامل مع الرسومات عن طريق اكشن سكريبت 3
قبل ان نتابع لاحظ الصورة وضحت فيها احداثيات النقطة في مسرح العمل وتتطلب كل نقطة بداية احداثي x و احداثي y مثلا اضفنا اطار مستطيل بلون
أحمر في النقطة 100 اكس و300 واي لما انت تحب تغير مثلا مكان الاطار الى اليمين تغير الاحداثيين لتصبح 300 = اكس و300= واي .
فهم هذه الجزئية هي التي تساعدك على استيعاب كامل الموضوع يعني انك تصبح قادر على اضافة اي شكل عن طريق الاكشن في اي مكان محدد
نمر الان الى الشرح وسنحاول كالعادة التبسيط الميسر والموجز .
الرسم في فلاش يكون دائما داخل كائن من نوع Shape أو MovieClip التابعين لكلاس ِGraphic Class
1/ رسم الخطوط المستقيمة
لنرسم في فلاش يجب أولا وقبل شىء انشاء كائن من كلاس Shape ليكون بمثابة الحاوي للرسوم التي سنضيفها داخله
(يمكن ان تنسخ الكود تلو الاخر بالترتيب وتتطبق على الفلاش لاستعياب الدرس )
اذن سنقوم بانشاء هذا الكائن من نوع shape
كود:
var my_shape:Shape = new Shape();
كود:
addChild(my_shape);
lineStyle() وتتطلب 3 قيم 1سمك الخط 2ولونه 3ودرجة الشفافية
moveTo() تتطلب نقطة بداية x و y
lineTo() تتطلب نقطة نهاية x و y
اذن سنبدأ بتحديد خط بسمك 1 بكسل ولون احمر وشفافية كاملة 1
كود:
my_shape.graphics.lineStyle(1, 0xFF0000, 1);
كود:
my_shape.graphics.moveTo(50, 50);
كود:
my_shape.graphics.lineTo(100, 50);
[HTML]
var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
[/HTML]
بتجربة العمل ستلاحظ الشكل التالي
لما تحب اضافة سطر اخر يمكن ان تضيف تحت هذا الكود الامرين التاليين وتقدر تكررهم كيف ما تحب فقط غير الاحداثيات
وتقدر ايضا تغير في حجم سمك الخط ولونه والسفافية
كود:
my_shape.graphics.moveTo(100, 100); my_shape.graphics.lineTo(200, 100);
[HTML]
var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
my_shape.graphics.lineTo(100, 100);
my_shape.graphics.lineTo(50, 100);
my_shape.graphics.lineTo(50, 50);
[/HTML]
2/ رسم المنحنيات :
تكون وجوبا عن طريق اضافة الدالة curveTo() وتاخذ 4 قيم ( x و y عبارة عن نقطة تحكم في المنحنى و x وy نقطة النهاية
لاحظ في هذا الكود رسمنا خط منحني يشيه شكل نصف دائرة وعكسناه من الاسفل فاصبح يشبه العين
[HTML]
var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.moveTo(0, 50);
my_shape.graphics.curveTo(25, 0, 50, 50);
my_shape.graphics.curveTo(25, 100, 0, 50);
[/HTML]
لو تجرب قليلا في القيمة مثلا 25 والقيمة 0 وهي نقطة التحكم تلاحظ ان الشكل تغير وهكذا تستطيع ترسم اي شكل في اي مكان
لو طبعا تمكنت من معرفة الاحداثيات وهي سهلة جدا
عندما ترسم مربع او دائرة بالخطوط التي ذكرناها سابقا وتريد اضافة ملىء لوني لها الدالة beginFill() هي المسؤولة عن ذلك وتسقبل معاملين بين القوسين الاول رمز اللون والثاني نسبة الشفافية ويجب ان يكون الكود مباشرة بعد السطر الاول الخاص بانشاء الخط يعني قبل رسم الشكل ويفضل دائما في اخر الكود اضافة الدالة المسؤولة عن انهاء الملىء اللوني وهي endFill() تفاديا لاي اخطاء الكود التالي يوضح الامر
[HTML]
var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(2, 0xFF0000, 1);
my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
my_shape.graphics.lineTo(100, 100);
my_shape.graphics.lineTo(50, 100);
my_shape.graphics.lineTo(50, 50);
my_shape.graphics.endFill();
[/HTML]
لاحظ أن كود الاطار my_shape.graphics.lineStyle يمكن تغيير لون قيمه اللون0xFF0000 وسمك الخط 2 والشفافية 1
وحذفه ان شئت ليبقى المربع بدون اطار .
حذف اي رسم يتم بواسطه الأمر
كود:
my_shape.graphics.clear();
لما تضغط يحذف الرسم .... تغير لون تغير اطار تكبر حجم .....
3/ رسم المربعات والدوائر :
توفر اكشن سكريب دوال مميزة لرسم المربعات والدوائر وهاته الدوال هي
drawRect() رسم مربع او مستطيل
drawRoundRect() رسم مربع او مستطيل بزوايا منحنية
drawCircle() رسم دائرة
drawRect() تتطلب نقطة البداية x و y والطول والعرض drawRect(x, y, width, height);
لاحظ سنضيف الى المسرح مستطيل بلون اسود مع اطار بلون احمر يبدا من النقطة 50 - 50 وبطول 300 بكسل و 100 عرض
[HTML]
var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.drawRect(50, 50, 300, 100);
my_shape.graphics.endFill();
[/HTML]
drawRoundRect() تتطلب قيم نقطة البداية x و y والطول والعرض وقيمتي انحناء الزاوية (x, y, width, height, ellipse_width, ellipse_height)
القيمة الاخيرة ellipse_height اختيارية يعني يمكن الاستغناء عنها والكود الآخير يوضح الأمر
[HTML]
var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.drawRoundRect(50, 50, 300, 100, 25);
my_shape.graphics.endFill();
[/HTML]
يمكن أن تجرب تغير قيم السمك واللون ودرجة انحناء الزاوية الأخير وتلاحظ تغير شكل الزر او المستطيل.
لاحظ الان على سبيل المثال سنقوم بانشاء مربع بالاحداثيات والخصائص المذكورة يكون في الزاوية 0 0
احذف كل الاكواد السابقة واضف هذا الكود
[HTML]
var sprite1:Sprite = new Sprite();
sprite1.graphics.lineStyle (2,0x000000);
sprite1.graphics.beginFill (0xCCCCCC);
sprite1.graphics.drawRect (0,0,200,200);
addChild(sprite1);
[/HTML]
سنضيف مربع ثاني بنفس اللون بجانبه يكون يكون بالاحداثي اكس 300 وواي 50 ويكون بزوايا منحنية بقيمة قدرها 30
انسخه والصقه تحت الكود السابق
[HTML]
var sprite2:Sprite = new Sprite();
sprite2.graphics.lineStyle(2,0x000000);
sprite2.graphics.beginFill(0xCCCCCC);
sprite2.graphics.drawRoundRect(0,0,200,200,30);
sprite2.x = 300;
sprite2.y = 50;
addChild(sprite2);
[/HTML]
الان سنضيف كائن ثالث عبارة عن دائرة بلون اسود وعوض اضافتها للمسرح سنضيفها داخل الكائن sprite2
انسخ والصق تحت الكودين اعلاه
[HTML]
var sprite3:Sprite = new Sprite();
sprite3.graphics.lineStyle(2,0x000000);
sprite3.graphics.beginFill(0x333333);
sprite3.graphics.drawCircle (0,0,25);
sprite3.x = 100;
sprite3.y = 100;
sprite2.addChild(sprite3);
[/HTML]
ولنضيف مثلا تفاعل المستخدم مع الماوس يكفي أن ان نضيف حدث استماع من نوع كليك
[HTML]
sprite1.addEventListener(MouseEvent.CLICK, clickSprite);
sprite2.addEventListener(MouseEvent.CLICK, clickSprite);
function clickSprite(event:MouseEvent) {
event.currentTarget.addChild(sprite3);
}
[/HTML]
قمنا هنا باستعمال دالة event.currentTarget الجاهزة في البرنامج ليصبح كل كائن هو المستجيب للحدث عند النقر عليه
وجرب الضغط وسط اي مربع ستجد ان الدائرة تنتقل بين المربعين .
drawCircle() تتعلق برسم دائرة وتاخذ البارامتر التالي (x, y, radius)
بالنسبة للدائرة احداثي x واحداثي y هو مركز وسط الدائرة وradius هوقطر الدائرة يعني حجمها
الكود التالي يضيف لنا دائرة بالخصائص والاحداثيات المذكورة افسخ الاكواد السابقة واضف الكود التالي
[HTML]
var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.drawCircle(150, 150, 25);
my_shape.graphics.endFill();
[/HTML]
اضافة هاته الاشكال يتم التفاعل معها ايضا عن طريق لوحة المفاتيح ويمكن اضافة حركية عليها وتكرار واضافة الكتابة عليها وووو ... الكثير
ان شاء الله نقدم لها شرح .
الملف المفتوح في المرفقات فيه أكواد رسم بعض الاشكال عبر احداثيات محددة اطلع عليه لمزيد الفهم وفيه دالة الشكل
البيضاوي لم أتعرض لها .
أرجو أن أكون قد حققت الفائدة
وبارك الله فيك
.. لك مني أجمل تحية .
تعليق