دروس دورة الفـــــلاش برنامج Macromedia Flash 8

درس فلاش1:تعريف بالواجهة +اضافات



افتح البرنامج



ثم اختر التالي



***********

سنتعرف بداية على واجهة البرنامج ...كما في الصورة




مسرح العمل او stage

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

قد يكون حجم المسرح كبير بحيث لا يمكنك رؤية جميع مافيه
ولكن بالضغط على ctrl+2 يمكنك رؤية الاشكال جميعها المضافة الى المساحة البيضاء

ولمعرفة كيفية تغيير بعض الخصائص المهمة تابع الصورة



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





لتنزيل مشغل الفلاش من هنــا
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

نكمل اليوم لنتعرف على اساسيات الرسم في برنامج الفلاش
يشمل ذلك عدة محاور ..ستلاحظها مع التطبيق^_^

بداية سنتعرف على بعض الادوات المهمة في الرسم


نبدأ اولا بالتعرف على اداة selection tool


تعطي هذه الاداة حرية تامة في الرسم لاحظ الصورة


يمكنك نقل الشكل من مكان لآخر وذلك بتحديده وسحبه بالماوس..او باستخدام ازرار الكيبورد (اسهم الحركة).
لتسريع الحركة اضغط على احد ازرار الحركة مع shift او ctrl .

لرسم شكل نجمي او مضلع اختر التالي:


وعدل الخصائص


هنا رسمت نجمة ومضلع


يمكنك تعديل خصائص اللون والحد الخارجي بعد الرسم
وذلك بتحديد الجزء المراد ثم تغيير لونه.
او يمكنك اختيار اداة
لتصغير حجم أي شكل (تصغير وتكبير).

ولرسم شكل بدون حد اختر التالي من صندوق الخصائص


الان باستخدام اداة رسم خط سنرسم شكل سيارة


والان لتلوين السيارة اختر هذه الاداة
واختر اللون اللي يعجبك..ثم اضغط على الشكل لتلوينه



الان سنستخدم اداة pentool لرسم شكل مثلث


لاحظ انه تم تعبئة الشكل باللون دون استخدام اداة التعبئة

ملاحظات مهمة:

لمسح الشكل بالكامل قم بتحيده ثم اضغط delete
او ان اردت مسح شيء بسيط يمكنك استخدام اداة الممحاة
للتراجع عن اي خطوة اضغط ctrl+z
لنسخ الشكل اضغطctrl+c
للصق الشكل اضغط ctrl+v
للصق الشكل في نفس المكان اضغط shift+ctrl+v
لقص الشكل قم بتحديده ثم اضغط ctrl+x

تابعونا في الدرس التالي....اساسيات الرسم في برنامج الفلاش 2
قريبــــــــا^_^




درس فلاش 3:أساسيات الرسم في برنامج الفلاش

وقد تم شرح عدة ادوات مهمة في الرسم

والان نكمل معكم باقي الادوات

لرسم شكل رباعي بزوايا دائرية


تفيد هذه الطريقة في رسم الازرار والكثير من الامور

**********

لرسم مثلث تابع الصورة


طبعا عند تحديد الزاوية اضغط على delete حتى تمسح ويبقى 3 زوايا فقط للمثلث

*********
نتعرف على اداة التحديد الحر

*********

اداة القلم للرسم الحر


*********

وهنا نتعرف على اداة الفرشاة


تتيح لك الخيارات عدة امور
حيث يمكنك الرسم خلف الشكل بالفرشاة
او امامه.....او بداخله (ما عليك الا ان تختار الخيار الذي يناسبك تصميمك^_^)
********

الان نتعرف على انواع الالوان المستخدمة في برنامج الفلاش
وهذا الموضوع مهم جدا.. جدا

Solid لون عادي متجانس
None بدون لون
Linear تدرج لوني
Radial تدرج لوني دائري
Bitmap تعبئة الشكل بصورة محفوظة


**********

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

بقي امر التدريبات(واجب بيتي)^_^

1-ارسم سيارة ولونها بلون solid
2-ارسم شكل وردة ولونها باستخدام التدرج اللوني الدائري
3-ارسم شكل مربع كبير وقم بتعبئته بصورة
4-ارسم نجمة بدون حد خارجي
5-ارسم مضلع وقم بتلوينه باستخدام الفرشاة(تعبئة داخلية


درس فلاش4:الكتابة العربية في برنامج الفلاش

نكمل واياكم دروسنا في برنامج الفلاش
واليوم مع الدرس الرابع....

كيف تكتب باللغة العربية في البرنامج؟

********

بداية ..لكتابة اي نص توجه الى صندوق الادوات واختر الاداة


ستلاحظ ان خصائص الاداة موجودة في الاسفل


تمكنك الخصائص من اختيار نوع الخط وحجمه ولونه ....

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

لتنزيل البرنامج من هنا
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

واجهة البرنامج بعد التنزيل


شرح البرنامج

خروج : للخروج من البرنامج
تجديد : لمسح ما تم كتابته والبدء من جديد
خطوط المعالم W1 MCS
لاختيار الخطوط التي تبداء بـ w1
خطوط W2 ALW
لاختيار الخطوط التي تبداء بـ W2
وتستخدم لبرنامج الفلاش ام اكس 2004
خطوط W3 AYM
لاختيار الخطوط التي تبداء بـ W3
وعددها ما يقارب 60 خط
وتستخدم لبرنامج الفلاش ام اكس ( 6 )
المختصرة W4
لاختيار الخطوط التي تبداء بـ W4
وعددها خمسة خطوط


الان كل ما علينا هو اختيار نوع الخطوط المطلوب وليكن W3 AYM
نكتب ما نريده في المنطقة السفلية ذات اللون الازرق الفاتح ( سماوي )
وسيظهر الناتج او النص بعد التحويل في المنطقه العلوية ذات اللون الازرق غامق ( كحلي )

الان كل ماعليك فعله هو نسخ النص ثم التوجه الى برنامج الفلاش
اضغط ctrl+v وسيظهر النص العربي



لتغيير لون النص والتحكم فيه قم بتحديده ثم عدل الخصائص كما تشاء

اتمنى يكون الشرح واضح

درس فلاش5:أنواع الحركة في برنامج الفلاش

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

تنقسم الحركة الى اربع انواع:
Frame by frame
Motion tween
Shape tween
Guide motion

سنبدا الدرس ان شاء الله بتطبيقه على شكل دائرة(ارسم دائرة كما تعلمت سابقا)

لتطبيق حركة frame by frame تابع معي:

قبل ان ترسم الشكل ستلاحظ ان اول فريم في خط الزمن يحمل دائرة بيضاء كدليل على وجود فريم فارغ



وبعد رسم الشكل في اللير لاحظ ان الدائرة اصبحت سوداء



الان عند فريم 10 اضغط F6 وذلك لنسخ اللير....ثم قم بتحريك الشكل باستخدام اسهم الحركة (كما ذكرنا سابقا)
الى اليمين.......بنفس الطريقة عند فريم 20 اضغط F6 وقم بتحريك الشكل لاسفل......وبعد ذلك توجه الى فريم 30 واضغط F6 وقم بتحريك الشكل لليسار

لاحظ شكل خط الزمن كالتالي:



لمعاينة الحركة بعد الانتهاء اضغط ctrl+enter

ستلاحظ ان الحركة ينقصها المرونة...وان الشكل يتحرك بشكل غير انسيابي...

(هذه الحركة يمكن تطبيقها في كثير في الامور)

امثلة عليها:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

التطبيق الثاني
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

التطبيق الثالث

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

بعض الملاحظات المهمة:
لنسخ فريم اضغط F6 كما فعلنا سابقا
لمد فريمات او اضافة فريمات فارغة اضغط F5
لاضافة key frame فارغ اضغط F7

للتراجع عن أي خطوة اضغط ctrl+z
لاضافة صورة الى مسرح العمل اختر file <import< import to library




ستلاحظ ان الصورة التي اخترتها تم وضعها في library
لوضع الصورة في مسرح العمل اضغط عليها واسحبها بالماوس الى المسرح



اذا اردت وضع الصورة مباشرة في مسرح العمل اختر import to stage

اتمنى يكون الدرس واضح للجميع ....

وكتطبيق (واجب بيتي)
قم بتصميم البوم مكون من 5 صور باستخدام حركة frame by frame
وقم بحفظ العمل


اي استفسارات... نحنا جاهزين

نلقاكم ان شاء الله في الدرس القادم
(درس فلاش 6:انواع الحركة 2)

درس فلاش6:أنواع الحركة في برنامج الفلاش2

تعرفنا في الدروس السابقة على نوع واحد من انواع الحركة التي ذكرناها سابقا
واليوم سنكمل معكم ونتعرف على النوع الثاني وهو Shape tween

لتطبيق الحركة والتعرف على خطواتها تابع معي:

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




1- اختر to stage اولا
2-امر توسيط

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



الان اذهب الى خط الزمن وعند فريم 10 اضغط F6 ثم اختر هذه الاداة

يمكنك الان مد الشكل افقيا ...ثم غير لونه



بنفس الطريقة عند فريم 20 اضغط F6 واختر نفس الاداة ومد الشكل راسيا ثم غير لونه



الان عند فريم 30 اضغط F6 وقم بتحريك الشكل بحيث يصبح حجمه بكامل الصفحة وغير لونه^_^



لاحظ شكل خط الزمن :



ملاحظة:
اذا توقفنا هنا واختبرنا الحركة Ctrl+Enter ستلاحظ ان نوع الحركة frame by frame
ولكن لاضافة حركة shape tween قم بتحديد الفريمات من بداية الحركة الى النهاية


انظر الى صندوق الخصائص في الاسفل واختر Shape



لاحظ تغير شكل خط الزمن



اختبر الحركة وستلاحظ الفرق ^_^

لمشاهدة التطبيق اضغط هنا

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

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

اذا اردت ان تطيل مدة أي فريم ...مثلا ان تطول المدة عند فريم 30
قم بتحديد الفريم واضغط F5 عدة مرات الى ان تصل فريم 40

اذا اردت ان تتوقف الحركة عند فريم 30 ..
اضغط على الفريم باليمين واختر action


ثم اختر الامر التالي



عند اختبار الحركة ستلاحظ ان العرض توقف عند فريم 30


تطبيقات على حركة shape tween توضح الحركة

شكل متغير (دائرة _مربع _مثلث_نجمة)

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

نص متغير
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


درس فلاش7:انواع الحركة في برنامج الفلاش3

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

سنطبق الدرس على كرة ثلاثية الابعاد
ارسم دائرة ..ولونها ..

ننتقل الى خط الزمن.......
عند فريم 10 اضغط F6 وذلك لنسخ اللير....ثم قم بتحريك الشكل باستخدام اسهم الحركة (كما ذكرنا سابقا)
الى اليمين.......بنفس الطريقة عند فريم 20 اضغط F6 وقم بتحريك الشكل لاسفل......وبعد ذلك توجه الى فريم 30 واضغط F6 وقم بتحريك الشكل لليسار
لاحظ شكل خط الزمن



قم بتحديد الفريمات من بداية الحركة الى النهاية واختر التالي:


لاحظ خط الزمن تغير لونه الى اللون الازرق الفانح ليدل على وجود motion tween
بينما shape tween يتغير لونه الى الاخضر الفاتح


لمعاينة الحركة اضغط ctrl+enter
لمشاهدة التطبيق من هنا
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

عند تطبيق هذا النوع من الحركة تتحول الاشكال الى symbol من نوع graphic
فاذا اردنا تحويل شكل الى نوع graphic قم بتحديد الشكل واضغط F8



انواع symbols :
1-movie clip: شكل متحرك
2-button: لاضافة زر
3-graphic
سنتعرف على الانواع الاخرى اثناء التطبيقات^_^

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


اختر لير جديد وارسم فيه دائرة


لاحظ الشكل


الان سنطبق الحركة على الدائرة ...عند فريم 10 اضغط F6 ستلاحظ ان شكل الخط اختفى من الصورة
ولمعالجة ذلك ..فعل لير الخط المائل وعند فريم 10 اضغط F5 ستلاحظ ان الخط المائل ظهر من جديد

الان نعود للير الدائرة عند فريم 10 قم بتحريك الدائرة الى ان تصل نهاية الخط المائل ..ثم قم بتحديد الفريمات التابعة للير الدائرة واضغط باليمين واختر creat motion tween



لمشاهدة التطبيق اضغط هنا
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

ملاحظات:
اذا اردت تسريع الحركة للشكل اضغط عند أي فريم في لير الدائرة ..وانظر الى الخصائص في الاسفل



لتسريع الحركة قم بتغيير قيمة Ease الى قيمة سالبة مثلا -50
لتبطيء الحركة للشكل قم بتغيير قيمة Ease الى قيمة موجبة مثلا 50

ولاحظ الفرق .....^_^

تطبيقات أخرى على الحركة:

اشكال عشوائية متحركة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وهذا تطبيق مباشر على الدرس


درس فلاش8:تحريك الشكل على مسار معين

نكمل في هذا الدرس ..لنتعرف على النوع الرابع وهو تحريك الشكل على مسار معين .. حركة motion guide

هذه الحركة مهمة جدا وسهلة ..وسنطبقها على دائرة^_^

اولا: ارسم دائرة كما تعلمنا سابقا
ثانيا : اضف لير motion guide


ثالثا:سنرسم المسار وليكن خط متعرج باستخدام اداة القلم
سيظهر الشكل التالي


رابعا: عند لير الدائرة ..اضغط عند فريم 20 ..F6
وقم بتطبيق حركة motion tween



عند فريم 1 اجعل الدائرة في بداية المسار المتعرج
عند فريم 20 اجعل الدائرة في نهاية المسار المتعرج

الان قم باختبار الحركة..ctrl+enter
ستلاحظ ان المسار المتعرج لم يظهر في العرض وانما تحركت الدائرة على المسار دون ان يظهر

التطبيق هنا

يمكنك رسم أي شكل واي مسار تريده..(دائري او مربع او أي شكل آخر بنفس الخطوات السابقة)

اذا اردت ان يظهر المسار اثناء العرض:
قم باضافة لير جديد فوق لير الguide motion واضغط ctrl+c على لير الguide motion ثم اضغط ctrl+shift+v على اللير الجديد
وذلك للصق المسار بنفس المكان في اللير الجديد.



تطبيق الحركة على مسار دائري ظاهر

درس فلاش 9:تعرف على الماسك Mask وتطبيقاته
سنتعرف في هذا الدرس على تطبيق حركة جديدة وجميلة باستخدام امر Mask

سنطبق الدرس على تصميم فلاشي بسيط جدا يوضح الآلية

اولا: قمت باستيراد صورة للخلفية الى المكتبة ..وسحبتها الى مسرح العمل
سيمثل هذا اللير خلفية للتصميم

ثانيا: اضف لير جديد واكتب فيه ما تشاء
ثالثا :اضف لير ثالث وارسم فيه شكل ..( مستطيل مثلا)^_^



راح نشتغل على لير الشكل المستطيل اللي رسمناه...
عند فريم 30 اضغط F6 ..عند بداية الحركة (فريم 1) ضع المستطيل في اقصى اليسار
عند فريم 30 قم بتحريك المستطيل الى اقصى اليمين

ولا تنسى ان تضغط f6 عند فريم 30 لكل من لير الخلفية والنص

نعود الى لير المستطيل ..اضغط باليمين واختر CREATE MOTION TWEEN


واخيرا لتطبيق الماسك اضغط باليمين على لير الشكل المستطيل واختر امر mask



بعد الانتهاء ستلاحظ التالي:



اختبر الحركة ctrl+enter
ستلاحظ ان الشكل قد اختفى اثناء العرض
وظهر النص بحركة جميلة ..^_^

التطبيق هنا
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

يستخدم الماسك في عمل تاثير اللمعة على الاشكال والنصوص
وهذا مثال فيه تأثير مزدوج للماسك
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]