فى هذا الدرس سوف تتعرف على كيف يتم تلوين الاشكال ( اشخاص – حيوانات- … ) فى الفلاش  باستخدام الاكشن سكريبت 3 حيث أن كثير من المبرمجين والمصممين المهتمون بانتاج برامج تعليمية وبرامج خاصة للاطفال يريدون أن يتيحوا الفرصة لهؤلاء المستخدمون فى تلوين صور للحيوانات .

الخطوة الأولى

قم بفتح ملف فلاش جديد وسميه color مثلاُ . والان قم بتصميم الرسم الذى ترغب فى تلوينه بالاكشن سكريبت بحيث يصبح كما بالشكل التالى او اى شكل تفضله .

( لقد وجدت هذه الرسمه على النت كما انك سوف تجد فى المرفقات ملف باسم color1.fla )

الخطوه الثانية

قم بتحاويل الرسمة التى صممتها فى الخطوة السابقة الى لقطة فيليمة وليكن اسمها outline_mc .

الخطوة الثالثة

اذهب الى مكتبة الفلاش library ثم كليك يمين على لقطة الفيلمية outline_mc ثم اختار Duplicate سوف يظهر لك مربع حوار قم بتغير الاسم من خلاله ثم قم بسحبها من الـ library  على ساحة العمل واعطى لها اسم وليكن  color_mc  فى لوحة الخصائص قم بالضغط عليها لكى تحررها ثم حاول أن تقوم بتقسيم الرسمة الى اجزاء وتحويلها الى لقطة فيليمية حتى يسهل تلوين كل جزء الى حدة  كما بالشكل

(يجب بعد تقسيم الشكل المراد تلوينه الا يكون عبارة عن اجزاء متبعثرة  شاهد الملف color2.fla  فى المرفقات)

الخطوة الرابعة

الأن قم بتصميم لوحة الالوان التى ترغب فى عرضها على المستخدم لتلوين الشكل ثم ضعها على ساحة العمل واعطى لها اسم وليكن color_mc ( لقد قمت فى هذا المثال بتصميم لوحة بسيطة عبارة عن لقطة فيليمة تتكون من مجموعة من الأزرار كل زر يحتوى على لون معين كما بالشكل ) ثم ضع لوحة الالوان التى صممتها على ساحة العمل واجعل اسمها pallet_mc وكل زر فى لوحة الالوان اعطى له اسم فى لوحة الخصائص .

( شاهد ملف color3.fla )

الخطوة الخامسة

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

الخطوة السادسة

  • قم بانشاء شفافية جديده وغير اسمها الى actionscript افتح لوحة الاكشن سكريبت او اضغط على F9 سوف نقوم الان باستيراد فئة class التى نحتاجها فى هذا البرنامج
import fl.motion.Color;

وهذه الفئة ممتدة من ColorTransform class  وبها نستطيع أن نغير من لون اللقطة الفيلمية من خلال الدالة الخاصة بها وهى setTint function .

  • الاعلان عن متغير bluetint وهو الذى سوف يقوم بحفظ قيمة اللون الذى سوف يحدده المستخدم من لوحة الالوان وهو نظير للفئة Color class .
var blueTint:Color = new Color();
  • سوف نقوم باضافة احداث لازرار الالوان  الموجودة فى لوحة الالوان
pallet_mc.white_btn.addEventListener(MouseEvent.CLICK, whiteColor);
pallet_mc.gray_btn.addEventListener(MouseEvent.CLICK, grayColor);
pallet_mc.magenta_btn.addEventListener(MouseEvent.CLICK, magentaColor);
pallet_mc.cyan_btn.addEventListener(MouseEvent.CLICK, cyanColor);
pallet_mc.blue_btn.addEventListener(MouseEvent.CLICK, blueColor);
pallet_mc.green_btn.addEventListener(MouseEvent.CLICK, greenColor);
pallet_mc.purpal_btn.addEventListener(MouseEvent.CLICK, purpalColor);
pallet_mc.red_btn.addEventListener(MouseEvent.CLICK, redColor);
pallet_mc.yellow_btn.addEventListener(MouseEvent.CLICK, yellowColor);
pallet_mc.brown_btn.addEventListener(MouseEvent.CLICK, brownColor);
pallet_mc.orange_btn.addEventListener(MouseEvent.CLICK, orangeColor);
pallet_mc.black_btn.addEventListener(MouseEvent.CLICK, blackColor);
  • الان سوف نقوم باضافة الدوال الخاصة بمعالجة الاحداث للازرار الموجودة فى لوحة الالوان وسوف اقوم بشرح كود واحد فقط حيث انهم متشابهين
function whiteColor(e:MouseEvent):void
{
 blueTint.setTint(0xffffff,1);
 currentColor_mc.transform.colorTransform = blueTint;
}

فى هذا الكود سوف نقوم بتعين الدالة setTint الخاصة بالمتغير blueTint  وهى تتكون من جزئين كما ترى الجزء الأول هو اللون المطلوب تعينه وهو اللون الأبيض هنا (هو عبارة عن قيمة اللون يسبقها 0x )  الجزء الثانى من دالة setTint  هو درجة الشفافية للون وهى تترواح من صفر الى واحد.

الجزء الثاتى من الكود السابق وهى جعل اللقطة الفيلمية التى توضح اللون الحالى الذى اختاره المستخدم يتغير لونه حسب اختيار المستخدم  وذلك بتعين المتغير blueTint لهذه اللقطة الفيلمية .

function grayColor(e:MouseEvent):void
{
 blueTint.setTint(0x999999,1);
 currentColor_mc.transform.colorTransform = blueTint;
}
function magentaColor(e:MouseEvent):void
{
 blueTint.setTint(0xEC008C,1);
 currentColor_mc.transform.colorTransform = blueTint;
}
function cyanColor(e:MouseEvent):void
{
 blueTint.setTint(0x00ccff,1);
 currentColor_mc.transform.colorTransform = blueTint;
}
function blueColor(e:MouseEvent):void
{
 blueTint.setTint(0x0000ff,1);
 currentColor_mc.transform.colorTransform = blueTint;
}
function greenColor(e:MouseEvent):void
{
 blueTint.setTint(0x009900,1);
 currentColor_mc.transform.colorTransform = blueTint;
}
function purpalColor(e:MouseEvent):void
{
 blueTint.setTint(0x5c2d91,1);
 currentColor_mc.transform.colorTransform = blueTint;
}
function redColor(e:MouseEvent):void
{
 blueTint.setTint(0xff0000,1);
 currentColor_mc.transform.colorTransform = blueTint;
}
function yellowColor(e:MouseEvent):void
{
 blueTint.setTint(0xffff00,1);
 currentColor_mc.transform.colorTransform = blueTint;
}
function brownColor(e:MouseEvent):void
{
 blueTint.setTint(0x603e22,1);
 currentColor_mc.transform.colorTransform = blueTint;
}
function orangeColor(e:MouseEvent):void
{
 blueTint.setTint(0xf7941d,1);
 currentColor_mc.transform.colorTransform = blueTint;
}
function blackColor(e:MouseEvent):void
{
 blueTint.setTint(0x000000,1);
 currentColor_mc.transform.colorTransform = blueTint;
}
  • الان سوف نقوم باضافة حدث للقطة الفيلمية التى تريد تلوينها color_mc
color_mc.addEventListener(MouseEvent.CLICK, changeColor);
  • فى هذه الخطوة سوف تقوم بكتابة معالجة الحدث الضغط على color_mc بحيث عند الضغط على اللقطة الفيلمية color_mc ياتى الينا الفلاش باللقطة الفيلمية المحددة (التىتمثل اجزاء من الرسم داخل اللقطة الفيلمية الحالية color_mc )
function changeColor(evt:MouseEvent):void {
 evt.target.transform.colorTransform = blueTint;
}

سوف تلاحظ فى الكود السابق اننى استخدمت evt.target وهى هنا تمثل جزء من الاجزء التى بداخل اللقطة الفيلمية color_mc اى تعود باللقطة الفيلمية التى تم الضغط عليها بالفعل (حتى اذا كانت متواجدة داخل اكثر من لقطة فيلمية )

وسوف نقوم بتعين المتغير blueTint الخاص باللون لجعله يمثل لون اللقطة الفيلمية التى تم الضغط عليها .