ألعاب فلاش

ألعاب تثقيفية ترفيهية لعب وتحميل

برنامج الفلاش وأدواته

تحميل برامج الفلاش

دروس فلاش

دروس الفلاش, شرح بالصور والفيديو

قوالب فلاشية

قوالب فلاشية Templates

ملفات مفتوحة

ملفات فلاش فمتوحة المصدر Open source

Flash Blog » المرحلة الثانية, دروس فلاش

شرح طريقة عمل زر فلاشي تفاعلي بطريقة جديدة ( كيفية تصميم زر فلاشي )

شرح طريقة عمل زر فلاشي  جميل بطريقة جديدة ( كيفية تصميم زر فلاشي )

كالعادة نتيجة الدرس أولا حتى يسهل الفهم ( الأزرار Buttons لم يتم إعطائهم أي أمر لتنفيذه)


لنفترض أننا نريد عمل (أو تصميم ) واجهة فلاشية او موقع فلاشي , بحيث لدينا رأس الواجهة (الهيدر Header) ومجموعة أزرار أسفل الهيدر


واجهة فلاشية

في المشهد سنضع صورة الهيدر في طبقة مستقلة (طبعا هناك طرق عديدة وليس بالضرورة أن يكون الهيدر او الشعار صورة ثابته ) ثم نضيف طبقة نرسم  فيها إطار مستطيل بدون حدود(تلوين متدرج)

button-15


لرسم إطار بدون بشكل عام  نحدد لون الخط والتعبئة هكذا

button-15


بعد رسم الإطار نقوم بتحويله لزر عبر الظغط على F8

button-15

ثم نظغط OK بعد منح الزر الفلاشي إسما معينا ( الإسم ليس ضروري وإنما للتميز بين الأزرار في حال كثرتها في العمل الواحد)

button-15

فيصبح شكل الإطار هكذا بعد تحويله لزر

button-15

>>> الآن أصبح لدينا زر متدرج اللون, لإضافة التأثيرات عليه سنقوم بالظغط عليه مرتين Double Click وسننتقل إلى نافذة تحرير الزر

حيث سنلاحظ أن الزر هنا لا يعدو على أن يكون الإطار الأول الذي رسمناه في البداية وبذلك , نستطيع تلوين الإطار _الزر بلون مختلف وحتى إعطائه شكل مختلف في كل من الحالات التالية

button-15

up  الزر في حالته العادية (المستقرة)
Over عند التأشير على الزر
Down  عند الظغط على الزر
Hit عند إبعاد المؤشر (cursor) على الزر

في هذا الدرس سنشتغل عليه في الحالتين الأولتين


button-15


سنترك الإطار – الزر كما هو في الإطار الأول, وننتقل للإطار الثاني, حيث نقوم بالظغط عليه ثم نظغط F8 لتحويله لـ Movie Clip

button-15

الآن نظغط مرتين على (الإطار) الموفي كليب فننتقل لنافذة التحرير الخاصة به

button-15

ملاحظة :  كنا نشتغل على نافذة المشهد Scene ثم إنتقلنا لنافذة تحرير الزر والآن إنتقلنا لنافذة تحير الموفي كليب الخاص بالزر.. وكأن الأمر مستويات عمودية فوق بعض.


في نافذة تحرير الموفي كليب سنقوم بإضافة طبقة جديدة , في الطبقة الجديدة سنرسم إطار بنفس مقاسات الزر الذي نعمل عليه (من البداية) ونضعه فوقه مباشرة  ( طريقة أسهل لفعل ذلك: نقوم بتحديد الإطار – الزر ثم ننسخه Ctrl+C ثم ننتقل للطبقة الجديدة و نلصقه مباشرة فوق الإطار – الزر الأصلي)

button-15

نقوم بتمديد طبقة الإطار- الزر إلى الإطار رقم 4

button-15


نعود للإطار الأول من طبقة الإطار -الزر النسخة التي أعطيتها إسم ( نسخة عن الزر الأول)

نقوم بتحديد الإطار ونفتح نافذة الألوان Color ونغير ألوان التدرج

button-15

الآن بعد تغيير لون الزر – الإطار النسخة سنقوم بتعديل شكل الإطار- الزر النسخة ولفعل ذلك بطريقة أكثر دقة من الأحسن زيادة دقة رؤية ساحة العملbutton-15

نحدد أداه تغيير الشكل (تكبير وتدوير)  التي بدورها تضم 4 خيارات, لتغيير الشكل عن طريق الإمالة, تكبير او تصغير مع المحافظة على النسبة بين الطول والعرض , تغيير

الشكل عبر التحكم في رؤوس الزوايا , تغيير الشكل عبر نقط عديدة

button-15

سنختار الخيار الأخير ونقوم بتغيير شكل الإطار _ الزر النسخة ليغطي الإطار – الزر الأصلي جزئيا فقط , أي ليصبح بهذا الشكل

button-15


الآن نقوم بإدراج إطار مفتاحي  KeyFrame جديد في طبقة الإطار – الزر النسخة

button-15


ثم نقوم بتغيير شكله بنفس الطريقة بحيث يغطي مساحة اكبر من الإطار – الزر الأصلي

button-15

ثم نضيف إطار مفتاحيا ثالثا ونقوم بنفس العملية وكذلك عند إطافة الإطار المفتاحي الرابع الذي سعطيه أمر التوقف Stop

button-15

قمنا بكل هذه التغييرات على شكل الإطار – الزر النسخة  للحصول على هذا حركة إنسدال

لم أذكر خطوة كتابة كلمة “الرئيسية” فوق الزر لأن الأمر بسيط , ففي نافذة تحرير الزر
نقوم بإضافة طبقة جديدة, بحيث نكتب في إطارها الأول كلمة “الرئيسية” فوق الإطار – الزر مباشرة
وفي الإطار الثاني نعيد كتابتها لكن بلون آخر وبإزاحة للأسفل (حوالي 1px )
mot_index

نتيجة الدرس : الزر الفلاش ( أتمنى ما تكونوا نسيتوا أن هدف الدرس هو تصميم زر فلاشي ❗ )




ذات علاقة

عدد التعليقات المطروحة في الموضوع 2 »

  • النجمة الذهبية كتب :

    جزاكم الله خير

    توقيــــع » النجمة الذهبية
  • amn كتب :

    لدي مشكلة عندي عدة ملفات فلاشية (لفلاش 9) واريد ان ان تكون ملف فلاشي واحد بس بالمشاهد في الفلاش يعني اعمل بدل الملف الفلاشي سكان وكلها في فلاش واحد اتمنى الرد

    توقيــــع » amn

شارك بتعليقاتك !

أضف تعليقك أدناه ، أو رابط دائم من موقعك.. يمكنك أيضا الأشتراك في هذه التعليقات من خلال الخلاصات

ليبقى موقعنا نظيف من رسائل السبام.

تستطيع أستخدام هذه الأكواد في تعليقاتك :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>