طريقه عمل ساعه بعقارب بالفلاش

[color=#990000]البرنامج المستخدم: Flash MX

المهارات المطلوبة:

-اساسيات الفلاش
-خلفية بسيطة عن الاكشن سكريبت

الجزء الأول _ تصميم الإطار الخارجي :

ارسم دائرة بالمواصفات التالية :

لون الاطار - strock - ذهبي
لون التعبئة تدريج خطي بين اللونين الابيض والرمادي الفاتح #cccccc

لاحظ ترتيب الالوان كما هو موضح في الـ color mixer

بعد ذلك .. وبواسطة اداة الـ fill transform غير مساحة التعبئة ودورانها بالشكل الذي تريده او كما هو مبين في الشكل التالي:

بنفس الخطوات السابقة , ارسم دائرة اخرى بحيث تكون اصغر من السابقة , و تأكد من ان مركز الدائرتين متطابق وذلك من خلال نافذة
الخواص property inspector

لا تنسى ان تقوم بنسخ الجزء الداخلي فقط _من دون الاطار _ لهذه
الدائرة ولصقها بعيدا للإستخدام لاحقا .

لون الاطار كما هو .. و لون التعبئة بنفس الطريقة السابقة مع اختلاف الالوان, هذه المرة تدريج بين الرمادي #cccccc ولون رمادي
داكن وليكن #999999

استخدم اداة الـ fill transform للحصول على نتيجة كما في الشكل و يجب مراعاة ان تكون الزواية متعامدة مع زاوية الدائرة الخارجية

نحتاج ايضاً الى دائرة ثالثة صغيرة , في هذه المرة لا نحتاج الى الاطار , يمكنك مسحه عن طريق تحديد الاطار ثم delete

يكون لون التعبئة حسب رغبتك , بالنسبة لي اخترت اللون الوردي والرمادي والابيض والتدريج الخطي.
ضع هذه الدائرة في الداخل مع مراعاة تطابق مركزها مع الدائرتين الخارجيتين
استخدم امر الـ fill transform للتحكم في التعبئة مع مراعاة ان تكون زاوية الدوران مطابق
للدائرة التي في المنتصف _ الظل يطابق الظل والضوء يطابق الضوء _ ومتعامد مع الدائرة الخارجية .

لاحظ الشكل التالي وستفهم المقصود جيدا

والسبب في ذلك هو الحصول على شكل مجسم يبين العمق _التجويف_ الذي في
الداخل.

الان حصلنا على الجسم الاساسي للساعة .

اعمل تجميع للشكل grouping بواسطة الضغط على ctrl +G او من خلال القائمة modify

بعد ذلك حول الشكل الى رمز symbol من النوع graphic

عمل غطاء زجاجي شفاف:

اذهب الى النسخة التي عملتها سابقا من الدائرة التي في الوسط و حولها الى symbol من النوع graphic

اختر الوان التعبئة المناسبة _ درجات اللون الازرق _

اختر القيمة 10% لدرجة الـ alpha

الان اصبح لديك جسم الساعة و الغطاء الزجاجي ,بإمكانك وضع الغطاء الان في مكانه المناسب.

ملاحظة:
*بمجرد تحويل الاشكال الى رموز يتم حفظها تلقائيا في المكتبة ,و من المفضل دائما أن تحول كل العناصر التي تنفذها الى رموز Symbols

الآن قم بمسح كل ما رسمته تمهيدا لعمل الاجزاء المتبقية.

هذا هو الجزء الدرس الاول من الموضوع و يليه الدرس الثاني للاكمال.

[/size]

[img:7e8c]http://rahma.arabhood.com/richedit/cliparts/0099[1].gif[/img:7e8c]

الجزء الثاني

في الجزء الاول قمنا بعمل الاطار (جسم الساعة) وايضا الغطاء الزجاجي.
لو فتحت المكتبة سوف تجد رمزين يفضل ان تقوم بتسميتهما بأسماء تدل عليهما.
مثل,الاول body والثاني cover ليسهل التعامل معها.

سنقوم برسم الخلفية:
-ارسم مربع على امتداد ساحة العمل وقم بتلوينه بالشكل الذي يناسبك
-حوله الى رمز symbol من النوع graphic وسمه bg
-سيتم اضافته الى المكتبة تلقائيا.
-امسح ما قمت بعمله تمهيدا للخطوة التالية .

عمل العقارب:

عقرب الساعات:

1- افتح موفي كليب جديد كالتالي .. insert .. new

symbol ثم اختر movie clip وسمه hrs بواسطة اداة رسم المستطيل .. غير الخيار الخاص بزوايا المستطيل الى 5 لتحصل على زوايا منحنية
2- ارسم شكل عقرب الساعات كما تريد واختر الوان التعبئة المناسبة لك ثم قم بإزالة الحدود.

3- افتح نافذة align

4- قم بمحاذاة الشكل بحيث تكون نقطة الارتكاز في منتصف الحافة السفلية كما هو موضح في الصورة التالية < ولاحظ وجود علامة + في الاسفل ( انظر الى
الشكل السابق).

لماذا؟ لأن العقرب يدور حول هذا المحور ولو لم نفعل هذا لحصلنا على نتيجة خاطئة كأن يدور حول نقطة المنتصف كما لو كان مروحة !! او بشكل اخر لا نريده .

عقرب الدقائق:

-تسهيلا للعمل ,فقط انسخ عقرب الساعات ثم افتح موفي كليب جديد سمه mnt والصق عقرب الساعات فيه و بواسطة اداة free transform غير الطول .

-كرر الخطوات 3 و 4 كما هي في عقرب الساعات.

عقرب الثواني:

1- افتح موفي كليب جديد وسمة scnd
2- ارسم مستطيلا وقم بتلوينه بلون مغاير عن الساعات والدقائق
3- كرر الخطوات 3 و 4 كما في عقرب الساعات
4- ارسم دائرة صغيرة حول مركز الدوران من نفس اللون, لتحصل في النهاية على الشكل التالي :

اصبح لديك الان في المكتبة 3 movei clip جديدة بالاضافة الى الثلاثة graphics السابقة :

للخروج من نافذة الموفي كليب وللعودة الى ساحة العمل الرئيسية اضغط على scenc 1

ادراج العناصر الى ساحة العمل وانشاء الطبقات:

الان لديك مساحة عمل بيضاء, ولديك 6 عناصر في المكتبة نريد وضعها لتكوين الشكل النهائي للساعة.

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

بما انه لدينا 6 عناصر او رموز symbols فنحن نحتاج لإنشاء 6 طبقات ,ايضا نحتاج لطبقة سابعة لوضع كود الأكشن سكريبت, وطبقة ثامنة للأرقام وأي كتابة
سوف نضعها لاحقا .

الخطوات:

1 - انشيء ثمانية طبقات بالترتيب التالي :

action لكود الاكشن سكريبت
cover للغطاء الزجاجي
text للأرقام والنصوص
scnd لعقرب الثواني
mnt لعقرب الدقائق
hrs لعقرب الساعات
body لإطار الساعة
bg للخلفية

2- اختر كل طبقة وضع فيها العنصر الخاص بها ,ابتداءا من الأسفل للأعلى , ابدأ اولا بطبقة الخلفية واضع فيها المستطيل الذي عملته سابقا وهكذا .
اترك طبقة الأكشن والـ text كما هي فارغة.

3 - تأكد من ان مركز جميع العناصر متطابق من خلال الـx والـ y في نافذة الخواص properties غير في القيم اذا لزم الامر .

عندما تصل الى هذه الخطوة سيكون لديك المنظر التالي :

[img:7e8c]http://rahma.arabhood.com/richedit/cliparts/017[1].gif[/img:7e8c]

الجزء الثالث

[color:7e8c=#0000cc:7e8c]الأكشن سكريبت

في الجزئين الماضيين تمكنت من عمل ساعة ولكنها ثابتة وبلا شك فإنك تريد ان تحصل على ساعة حقيقية تظهر لك الوقت الفعلي . في هذا الجزء سوف نقوم بذلك حسب الخطوات التالية :

1- قم بقفل جميع الطبقات بإسثناء الطبقة الخاصة بعقرب الثواني scnd
2- اختر عقرب الثواني بواسطة اداة الاختيار "السهم" ومن نافذة الخواص properties الخاصة بالموفي كليب scnd قم بتسمية الإنستانس instance بالاسم "scnd"
3- كرر الخطوتين السابقتين مع كل من الدقائق والساعات .. ولكن قم بتسمية الانستانس "mnt" و "hrs" على الترتيب.

كل نسخة "instance" تمثل موفي كليب على ساحة العمل يجب ان يكون لها اسم فريد لكي يتم التعرف عليها عند استخدام الأكشن سكريبت.

4- اختر عقرب الثواني , افتح نافذة الأكشن , ثم اكتب الكود التالي :

onClipEvent(enterFrame){
setProperty(this, _rotation, _root.scnd);
}

وأليك شرح لعمل الكود :
في كل مرة يصل مؤشر الفلاش الى الفريم الذي يحتوي على" عقرب الثواني"
يتم تغيير زاوية الدوران بمقدار معين .. ولتنفيذ ذلك نستخدم الدالة setProperty وبين قوسين نحدد العنصر المراد منحه الخاصية , واستعملنا this لأن الكود ملحق بالعنصر وليس في الفريم . ثم بعد ذلك حددنا الخاصية وهي الدوران _rotation . وبعد ذلك حددنا القيمة وهي عبارة عن متغير variable موجود في خط الزمن الرئيسي _root ويحمل الاسم scnd (هذا المتغير لم نقم بإنشاءه بعد ) يأخذ هذا المتغيير قيمته بواسطة الدالة getSeconds() كما سنرى لاحقا .

5- كرر الخطوة رقم 4 مع كل من عقرب الدقائق والساعات . ويجب مراعاة تغيير اسم المتغير بدلا من _root.scnd الى _root.mnt بالنسبة للدقائق . و _root.hrs بالنسبة للساعات

الان بقي علينا كتابة الكود الرئيسي

6- اختر طبقة الاكشن واعمل key frame في الفريم رقم 1 .ثم key frame اخر في الفريم الثاني .

7- اختر الـفريم الاول واكتب الكود التالي :

time = new Date();
hrs = time.getHours();
mnt = time.getMinutes();
scnd = time.getSeconds();
if (hrs>12) {
hrs = hrs-12;
}

if (hrs<1) {
hrs = 12;
}
hrs = hrs*30+int(mnt/2);
mnt = mnt*6+int(scnd/10);
scnd = scnd*6;

واذا كانت لديك خلفية عن البرمجة لن تجد صعوبة في فهم طريقة عمل الكود

ولكي يعمل البرنامج بشكل مستمر ..
نذهب الى الفريم الثاني في طبقة الأكشن ونضع هذا الامر :

gotoAndPlay(1);

ملاحظة هامة:
لكي تضمن تواجد جميع العناصر عندما يتتقل الفلاش الى الفريم الثاني في الأكشن يجب عليك ان تقوم بإضافة فريم ثاني لكل طبقة .

الان ..في كل مرة يذهب مؤشر الفلاش الى الفريم الأول .. يتم الحصول على الوقت بواسطة الكود الموجود في الفريم .. وبما ان الوقت يتغير باستمرار فأن الكود الموجود على كل موفي كليب يقوم بتغيير زاوية دوران كل عقرب بحسب القيمة الجديدة .. ويستمر العمل بشكل حلقة لا نهائية .

الان بإمكانك عمل طبقة جديدة تحت الطبقة cover ووضع الارقام بالشكل الذي تريده.

[img:7e8c]http://rahma.arabhood.com/richedit/cliparts/0077[1].gif[/img:7e8c]

[/size]

الف شكر لك اخى الكريم

» طريقه عمل باس ورد بالفلاش
» طريقه عمل ورده متحركه بالفلاش
» طريقه التعامل مع الشييب تويين بالفلاش
» القران الكريم كاملا بالفلاش
» درس عمل الامواج بالفلاش