الدرس الأول العام للمبتدئين في الرسم والتحريك (الجزء الأول), درس عام يشمل معظم أدوات الرسم وعملية التحريك خاص للمبتدئين

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

هذا
هو المثال الذي سوف نقوم بعمله :

والملف المفتوح لهذا الدرس موجود في المرفقات.

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



الخطوة الأولى: إنشاء مستند فلاش جديد (Create a New
Flash CS3 Document)

- نفتح برنامج الفلاش، سوف ترى
صفحة الترحيب (Welcome Screen)
وبها ثلاثة أقسام علوية :



1- إفتح أخر الملفات التي كنت تعمل عليها(open
a Recent Item)
هنا سوف تجد قائمة بأحدث أو آخر الملفات التي
كنت تعمل عليها.

2- إنشاء مستند جديد (Creat New)

هنا ستجد مستندات متنوعة تستطيع البداء منها ، وهي خالية من أي شيء
طبعا.وهذا هو القسم الذي نريده.

3- إنشاء من نموذج أو قالب جاهز(Creat
from Template)
هنا ستجد قوالب جاهزة مثل قوالب لبنرات
دعائية أو قوالب لأجهز هاتف أو قوالب لعمل أسئلة مسابقة وغيرها.





طبعا
إذا أردت أن لا تظهر لك هذه الصفحة مرة أخرى ما عليك إلا أن تعمل صح في
المربع الصغير أسفل الزاوية اليسرى في الصفحة نفسها
أما الجملة(Don't
show again ).

- نضغط الآن على مستند فلاش (أكشن سكربت 3)
يعني (Flash File (ActionScript 3.0)) القسم الثاني في
صفحة الترحيب.




- تم
إنشاء مستند جديد.



- نحفظ الستند:

1- ملف>حفظ كا
يعني File>Save as لكي تحفظه في
المكان الذي تريده.

2- قم بإعطائه أسم مثل animation

- نقوم بإعداد خصائص المستند (Set up the Document
Properties):

1- تعديل > مستند
يعني Modify > Document لكي نعدل بعض الأشياء في
المستند.

2- غير العنوان (Title)
و الوصف (Description ) كما في الصورة
،هذه المعلومات راح تساعد محرك البحث عن معرفة محتوى بطاقتك.
أيضا قم
بتعديل الأبعاد ( dimensions ) إلى 300×500
وتغيير لون الخلفية ( background color
) الى اللون الأزرق كما في الصورة.




ستلاحظ تغير لون و أبعاد منطقة العمل ( stage
)،
طبعا يجب عليك التعرف على واجهة برنامج الفلاش بشكل أفضل كما في
الصورة.




الخطوة الثانية: إضافة نص (Adding Text):

-
سوف نستخدم الأداة النصية ( text Tool)
الموجودة في عمود الادوات ( Tools Bar )
.



أكتب
كلمة " Train " كما في البطاقة، سوف تلاحظ في نافذة الخصائص
( Properties ) الموجودة تحت، هناك تستطيع أن تغير حجم ،
لون ، ونوع الخط المستخدم وغيرها من الأمور.

سوف تلاحظ أيضا وجود
كلمة " Static text " أي نص ثابت ، وهو النوع الذي سوف
نستخدمه في هذا المثال.


الخطوة
الثالثة: الرمز الصوري ( Graphic Symbols ):

-الرموز
( Symbols ) في فلاش هي مفهوم هام . وهناك 3 انواع من:

الرموز
-- الفيلم كليب ( MovieClip )
زر
( Button )
والرمز الصوري ( Graphic
).

ومن الأفضل عمل الرموز تقريبا لكل شيء على المسرح
( Stage )
بحيث انه من السهل عليك ادارتها والتلاعب
بها.
طبعا جميع الرموز سوف تظهر في المكتبه ( Library
).


الآن سوف نحول النص الذي كتباه الى رمز ( Symbol
) وذلك عن طريق:

1- تعديل > حوله الى
رمز يعني ( Modify > Convert to Symbol ) ـ
2-
الآن أكتب لها أي أسم مثل " Train Title " , وثم أختر رمز صوري
( Graphic ).



الخطوة الرابعة: التعامل مع الطبقات ( Layers ):ـ

-"الطبقات"
( Layers )
في فلاش أمر هام آخر يجب فهمه. إستخدام طبقات
( Layers ) منفصلة لوضع رموز ( Symbol
) منفصلة بداخلها تسمح لك التعامل مع كل واحد منها على نحو مختلف وسهل.

يمكنك
ايضا ان تقرر تلك التي تأتي في الأمام بصريا عن طريق وضعها على اعلى طبقة
أو بمعنى آخر الطبقة الأولى.
يمكنك اخفاء طبقات
من خلال النقر على المربع الصغير أدنا صورة العين وتستطيع أيضا قفل طبقات
من خلال النقر على المربع الصغير أدنا صورة القفل.

الآن سوف نضع رمز
النص الذي عملناه في طبقة لوحدة عن طريق:
1- إنقر
نقرتين على أسم الطبقة " Layer 1 " ومن ثم أكتب " Train
Title ".




تابع

تكملة الجزء
الأول

الخطوة
الخامسة: رسم الأشكال " المستطيل ( Draw Shapes Rectangle ):

-
الآن سوف نرسم العشب والشجرة.

أ- العشب :


- عمل طبقة
جديدة عن طريق:

1- إضغط على زر إدخال طبقة ( Insert
Layer )، ستظهر لك طبقة جديدة.

2- غير
إسمها الى " Grass ".






الآن
تأكد بأنك موجود في الطبقة الجديدة عن طريق النقر على الطبقة
نقرة واحدة.
وبعدما تأكدنا بأننا في الطبقة المرادة
سوف نرسم العشب.
وبما أننا نريد العشب بالون الأخضر فقط سوف نقوم
بإختيار اللون الداخلي ( Fill Color )
للمربع بدون لون الخط الخارجي ( Stroke Color
)

وذلك عن طريق:

1- لنجعل المستطيل بدون
مربع خارجي عن طريق الضغط على زر اللون الخارجي ( Stroke
Color ) وإختيار المربع بدون لون، كما في الصورة.





2-
إختر زر أداة المستطيل ( Rectangle Tool
)





3-
الآن أرسم مستطيل العشب كما في البطاقة .
ومن ثم غير لون العشب الى
اللون الأخضر عن طريق لوحة الخصائص ( properties
) بأسفل برنامج الفلاش، وذلك بالنقر على المستطيل ومن ثم تغيير اللون.




4- الآن
حول مستطيل العشب الى رمز صوري وأعطه الأسم " grass ".
لرؤية
الرموز التي لدينا إضغط على زر يشبه الكتب في الجهة
اليمنى يسمى بالمكتبة ( Library ).




إذا لم
تستطع رؤية المكتبة إذهب الى نافذة > المكتبة
يعني ( Windows > Library ).


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

رسم الأشكال "
بيضاوي" (Draw Shapes Oval):


ب- الشجرة:

- عمل طبقة
جديدة إسمها " Tree ".

- ألان رسم أعلى الشجرة، عن طريق رسم دائرة
بيضاوية بإستخدام الأداة البيضاوية ( Oval Tool
).
وذلك عن طريق الضغط على الزاوية اليمنى السفلى لزر أداة
المستطيل.




- و
تغيير اللون الخارجي ( Stroke Color )
باللون الأخضر الغامق ، و تغيير اللون الداخلي ( Fill
Color ) الى اللون الأخضر الفاتح.

- الآن إنقر مرتين على
الدائرة البيضاوية حتى تقوم باختيار اللون الداخلي والخارجي
معاً.
ومن ثم حوله الى رمز صوري وأسمه " Oval ".

-
نأتي الآن الى رسم جذع الشجرة بجانب الدائرة الخضراء، عن طريق أداة
المستطيل، وتغيير اللون الداخلي والخارجي
كما في البطاقة، و نحوله الجذع الى رمز صوري وأسمه "
rectangle ".

سوف تلاحظ بأن جذع الشجرة يأتي أمام الدائرة الخضراء،
لحل هذه المشكلة نقوم بالآتي:

- ننقر نقرة واحد على الجذع ومن ثم
نذهب الى تعديل > رتب > أرسل إلى الخلف يعني
( Modify
> Arrange >Send to Back ).

- سوف نحول رأس الشجرة
وجذع الشجرة الى رمز واحد، وذلك بالنقر على رأس الشجرة
ومن ثم الإمساك يالزر Shift بدون أن ترفع إصبعك تقوم
بالنقر على جذع الشجرة ، سترى بأن الرمزان قد تم
إختيارهم، إرفع إصبعك الآن ومن ثم حولهم الى رمز صوري
واحد بأسم " tree ".



تمت
تكملة الجزء الأول من الدرس

السلام عليكم ورحمة
الله وبركاته
نبداء هذا الأسبوع بالجزء
الرابع من الدرس الأول المتعلق بأساسيات برنامج الفلاش
الإصدار التاسع.

الخطوة الرابعة عشر:
رمز الموفي كليب ( MovieClip ):
- رمز الموفي
كليب في فلاش مثل فيلم فلاش مصغر . و ميزة هذا الرمز
أنه يلعب وفقا لجدوله الزمني ( TimeLine
) الخاص و لا يعتمد على الجدول الزمني الخاص بالمشهد
الرئيسي ( Main Scene ) . انه امر رائع لعمل
رسوم تتحرك بشكل متكرر داخل الفيلم الرئيسي.

الآن سوف نحول العجلة
الى رمز موفي كليب:
- إنقر نقرة واحدة على مثال
(instance) العجلة الموجود على المسرح (Stage)
-
حول المثال الذي إخترته الى رمز موفي كليب
وأعطه أسم "Wheel animation ".فالآن لدينا رمز موفي كليب
بداخله مثال صوري لرمز " Wheel ".

الخطوة الخامسة عشر: الأطر الرئيسية ( KeyFrames
):
-الآن أريد تركيز بسيط منكم معي ،فالجدول
الزمني ( TimeLine ) قد يحتوي على عدد من الطبقات
( Layers ) وكل طبقة تحتوي على عدد من الإطارات
( Frames )، فأنا في الصورة التالية أقف على الإطار
العاشر في الطبقة التي أسميتها " Train ".



-الآن
سوف تسألوني أين هي الأطر الرئيسية؟ إنظروا الى الصورة
السابقة سوف ترون في بداية كل طبقة إطار رمادي بداخله
نقطة سوداء،هذا هو الإطار الرئيسي. فالإطار
الرئيسي هو أي إطار رمادي بداخله نقطة سوداء.

-
لنقم الآن بعملية التحريك " Animation " للرمز الذي
عملناه منذ قليل وهو " Wheel animation " وهذه العملية تتلخص في:
1-
إنقر نقراً مزدوجا ( Double click ) على رمز الموفي كليب "
Wheel animation ".
سترى بأن جميع الأشياء الموجودة على المسرح
قد أصبحت متلاشية قليلا، والشيء الوحيد الواضح هو رمز
العجلة الذي ضغطنا عليه. وأيضا سوف ترى أسم الرمز " Wheel
animation " موجود بجانب كلمة " Scene1 "على الجانب الأيسر فوق فهذا يعني
بأننا دخلنا الى الجدول الزمني الخاص بالموفي
كليب.



وهذا
ماكنا نقصده في بداية حديثنا بأن الموفي كليب له جدول
زمني خاص به. أيضا إذا أحببت أن ترجع الى المشهد الرئيسي
إضغط على " Scene1" الذي هو عبارة عن المشهد الرئيسي.
طبعا تستطيع تغيير أسم المشهد الرئيسي عن طريق window>Other
Panels>Secne ومن ثم ستظهر لك نافذه بها أسم المشهد
الرئيسي القياسي فنقر على الإسم نقرتين لكي تستطيع تغييره.

2-
لنكمل خطوتنا الثانية عن طريق النقر مرة واحدة على الإطار
الخامس في الجدول الزمني الخاص بالموفي كليب.



3- نضع إطار
رئيسي جديد عن طريق الزر الأيمن في الفأرة ومن ثم إختيار "إدخال
إطار رئيسي" أي يعني right click + “Insert Key Frame”
من القائمة.



4- الآن
قم بتدوير العجلة 90 درجة مع عقارب عكس الساعة
Modify > Transform > Rotate 90 degrees CSW .طبعا ستلاحظون
عدم تغير أي شيء في شكل العجلة، ولكن العجلة قد تغيرت وهذا الشيء يعرفه
الفلاش فلا داعي للخوف.

5-قوموا بتكرار العملية عند الإطار
العاشر، الخامس عشر والإطار العشرين.الآن إنتهينا من
النصف الأول لعملية التحريك.

الخطوة
السادسة عشر: الحركة البينية ( Motion Tweens ):
-لعل
أكثركم يعرف هذه الميزة فهي لربما أهم ميزة أساسية إنشهر بها برنامج
الفلاش، فالمستخدم عليه فقط أن يعطي برنامج الفلاش نقطتين مختلفتين في إطارين
رئيسيين متباعدين ومن ثم يجعل هذه الميزة بين هذين الإطارين،
ليقوم الفلاش بالباقي مثل التحريك أو تغيير الحجم أو الإثنان معا وهكذا.

-لعمل
الحركة البينية نقوم بعمل حركة واحدة بسيطة وهي:
1-
إنقر بالزر الأيمن للفارة على أي إطار بين واحد
وخمسة أي بين الإطار الرئيسي الأول والإطار
الرئيسي الثاني، ثم إختر " عمل حركة بينية" أي
يعني Create Motion Tween كما هو في الصورة.



2- كرر
العملية بين الإطار الخامس والعاشر وثم بين العاشر
والخامس عشر وأخيرا بين الخامس عشر والعشرون. ليصبح لديك الشكل التالي.



-الآن
تستطيع الرجوع الى المشهد الرئيسي وتجربة حركة العجلة عن
طريق: Control > Test Movie
قم الآن بعمل نسخ
من العجلة لكي تكمل القطار كما في البطاقة أو كما في الصورة التالية.

مصغرة بنسبة : 89% من الحجم الأصلي [ 571 x 301 ] - إضغط هنا لعرض
الحجم الأصلي


الخطوة السابعة عشر: إقفال الطبقات ( Lock Layers
):
-عملية إقفال الطبقات عملية مهمة
إذا كانت لديك طبقات كثيرة ، ولا تريد ان يختلط عمل إحدى الطبقات
بالأخرى.

-لنكمل شرح التحريك، الآن سوف نقوم بتحريك القطار بأكمله
مع العجلات، ولكي نقوم بذلك يجب علينا أن نختار جميع أجزاء القطار. لكي
نقوم بهذه الحركة بشكل لا تتداخل في أجزاء من طبقات أخرى
،سوف نقوم بإقفال جميع الطبقات ماعدا طبقة
القطار " Train ".
1- ولعمل ذلك نقوم بالضغط على النقطة الموجودة أسفل
شكل القفل أمام كل طبقة ، ماعدا طبعا طبقة
القطار.



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

2- نحول الأجزاء التي إخترناها الى رمز صوري
بأسم " Train ".

3- نحول الرمز الذي عملناه مرة
أخرى الى رمز موفي كليب بأسم " Train animation ".

4-
إنقر نقراً مزدوجا على الرمز الذي عملناه الآن، لكي ندخل
الى جدوله الزمني.

5- الآن إنقل القطار بأكمله
الى خارج المسرح على اليمين.

6- الآن أدخل إطار
رئيسي عند الإطار رقم 60. وأنت موجود الآن في الإطار
الرئيسي الثاني قم بنقل القطار الى خارج المسرح
على اليسار.

7- قم بالضغط على أي إطار موجدو بين الإطارين
الرئيسيين بالزر الإيمن للفأرة ومن ثم إختيار " عمل
حركة بينية" .

هنا تقريبا إنتهينا من عمل البطاقة بأكملها
ولكننا سوف نقوم بإضافة بعض الامور مثل الشعار logo في البطاقة.

الخطوة الثامنة عشر: إستيراد الصور ( Import
Images ):
-تستطيع في برنامج الفلاش إستيراد
( Import ) بعض أنواع الصور مثل GIF JPG وغيرها ولعمل
ذلك:
1- إعمل طبقة جديدة تكون في بداية الطبقات
جميعها ، ولتكن بأسم " Logo ".

2- وأنت موجود في أول إطار
لطبقة Logo قم بالذهاب الى ملف>إستيراد>إستيراد الى
المسرح ( File > Import > Import to Stage
).، إختر الصورة التي تريدها من على جهازك الخاص ، واعمل لها إستيراد
" Import ".

3- عدل حجم الصروة
إذا دعا الأمر، وضعها على الجانب الأيمن في الزاوية ، وثم حول الصورة الى رمز
صوري ولتكن بأسم " logo ". طبعا راح تلاحظون بأن الصورة أيضا
موجودة في المكتبة إذا أردتم وضع أكثر من صورة على المسرح.

الخطوة التاسعة عشر والاخيرة : نشر العمل (
Publish the Flash ):
- طبعا الملف الذي نعمل عليه هو
بصيغة fla وهو الملف المفتوح وأما
البطاقة التي تريد نشرها فهيا بصيغة swf وهي التي لا
تستطيع عمل أي تغيير فيها إلا عن طريق الملف المفتوح
،ولرؤية البطاقة النهائية قم بعمل التالي:

-إذهب الى ملف>
نشر أي file>publish وثم إذهبوا الى المكان
الذي كنتم مخزنين فيه الملف المفتوح وسوف ترون ملف بنفس
الأسم ولكن بصيغة مختلفة هذه هي بطاقتكم النهائية التي تستطيعون نشرها على
أي موقع تريدونه.

الى هنا إنتهينا من الدرس الأول في بعض أساسيات
برنامج الفلاش من حيث التعامل مع أدواته وبيئته.
فنرجوا أن تكونوا قد
إستفدتم