احترف Flash 8 - كل دروس فلاش 8 هنا...!

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif

مقدمة



كان أول إصدار لبرنامج Flash يدعى Future Splash وقد اشترته شركة Macromedia عام 1997 وغيرت اسمه إلى Macromedia Flash
ويأتى برنامج Flash فى طليعة تطبيقات التطوير للويب هذه الأيام , وهو يطور نفسه مع كل إصدار جديد . ونحن هنا بصدد البدء فى تعلم الإصدار الأخير للبرنامج وهو Macromedia Falsh 8 وهو الذى يأتى بعد الإصدار السابق Macromedia Flash MX .
إن برنامج Flash هو أحد البرامج القائمة على الرسوم الشعاعية أو المتجهة Vector Graphics , ولنوضح الأمر أكثر نقول :
تنقسم أشكال الجرافيكس إلى نوعين :
1 –Bitmap Images أو الرسوم النقطية , وتسمى أيضا Raster Images , وتتكون من شبكة من المربعات الصغيرة Pixels ,وكل مربع يكون له مكان ثابت ودرجة لونية ثابتة كما أن العدد الإجمالى للمربعات يكون ثابتا ,ولذلك عند تغيير حجم العمل بالتكبير فإنه يفقد جزءا كبيرا من وضوحه ودقته , هذا النوع من الصور يظهر درجة مقبولة من تفاوت الألوان والظلال , و يندرج تحت هذا القسم الصور الفوتوغرافية والتصاميم المنتجة بالفوتوشوب أوبرامج التلوين الأخرى.
2 – Vector Graphics أو الرسومات المتجهة أو الشعاعية , وتتكون من خطوط ومنحنيات تعرف بطريقة الأشكال الحسابية وتسمى المتجهات Vectors, وتصف المتجهات الرسم وفقا لأرقام هندسية. ورسومات المتجهات يمكن إظهارها فى أى حجم بالتصغير أو التكبير دون أن يؤثر ذلك على جودتها ودرجة وضوحها , فعند التكبير ستتعدل الصيغة الرياضية ببساطة ويتم عرض الصورة بوضوح بنفس التناسب مع أبعاد الصورة الصلية , حيث تحتفظ بمنحنياتها وخطوطها الناعمة , وبالتالى يمكن لنافذة أى مستعرض أن تعرض ملف Flash بغض النظر عن الحجم , كما تم تصميمه أصلا , أى ستظهر الصورة واضحة بدون أى تسننات للحواف مع الحفاظ على تناسب التصميم .
ويندرج تحت هذا القسم أيضا الرسوم والتصاميم المنتجة ببرامج الرسم مثل :
Free Hand Corel Drew, Macromedia Flash Adobe Illustrator

وأترككم مع هاتين الصورتين لتوضيح الفرق بين النوعين الأولى Vectorوالثانية Bitmap
ونلاحظ مايحدث عند تكبير جزء من الصورة فى الحالتين , وقد قمنا بالتكبير مرتين فى كلا الحالتين.

http://www.alamuae.com/up/Folder-001/1144569467_1.gif
http://www.alamuae.com/up/Folder-001/1144569518_2.gif
ونتيجة لإستخدام Flash اسلوب الرسوم المتجهة Vector Graphics فهو يقدم للإنترنت ملفات صغيرة الحجم نسبيا , فبدلا من تحريك بيكسلات عديدة من نقطة 1 إلى نقطة 2 , سيعدل Flash الصيغة الرياضية بكل بساطة , وبالتالى يتحرك الشكل بنعومة وفاعلية .
إذن لبرنامج فلاش 3 سمات هامة تميزه وتميز طبيعة عمله :
1- اعتماده على الرسوم المتجههة .
2 - Animation وبشكل مجازى سنطلق عليه تعبير : الحركة , ولكن مع الأخذ فى الإعتبار أن الحركة تشمل - بخلاف الحركة من مكان لآخر - أى تغير يطرأ على العنصر مثل التغير فى شكله أو حجمه أو لونه أو درجة شفافيته أو سرعة حركتة أو طريقة ظهوره .. إلخ , ويعتبر فيلم الرسوم المتحركة أو الكارتون من الأمثلة على ذلك .
3 - Interactivity أو التفاعلية , وهى سمة برزت للوجود بعد تطوير لغة ActionScript منذ الإصدار Flash 4 , إن هذه اللغة هى مجموعة من التعليمات البرمجية تسبب حدوث أفعال لكائنات فيلمك , مثلا زر عند النقر عليه يوقف الفيلم عند نقطة معينة أو يذهب إلى صفحة على الويب , أو يعرض نصا معينا , وتمكنك هذه السمة مثلا من عمل اختبارات قائمة على اختيارك إجابة صحيحة من بين عدة إجابات , ثم إظهار نتيجة الإختبار ومعدل درجاتك , وكمثال على ذلك بعض البرامج المصممة بالفلاش على طريقة من سيربح المليون أو وزنك ذهب , وأيضا الألعاب المختلفة التى تم تصميمها بالبرنامج .
ملفات Flash
هناك ملفان هامان سنتعامل معهما كثيرا فى Flash :
الأول - هو الملف الذى تنشيئ فيه مشروعك من أجل إنتاج الفيلم ويكون هذا الملف بإمتداد fla وهذا الملف لا يتم فتحه أوالتعديل فيه إلا بواسطة برنامج Flash نفسه .
الثانى - هو ملف الفيلم المنتج ويتم تشغيله بواسطة Flash Player أو بواسطة متصفح مثل Internet Explorer ويكون هذا الملف بإمتداد swf وهى اختصار لـ Shockwave Format أو Small Web Format .
انظر للصورة التالية للتعرف على الإختلاف بين شكل الملفين :
1 - ملف بصيغة fla
2 - ملف بصيغة swf
http://www.alamuae.com/up/Folder-001/1144569545_3.gif

ومادمنا بصدد الحديث عن فلاش , فيمكننا التحدث لغة السينما فنقول أن الملف الأول هو عبارة عن ال******** أو المكان الذى يتم فيه تصوير الفيلم , وهو مكان يعج بالممثلين والمخرج ومساعديه وآلات التصوير وبوبينات الفيلم الخام والديكورات والعاملين فى البلاتوه .. اشياء كثيرة جدا ولكن مايظهر لنا فى الفيلم النهائى الذى نشاهده فى السينما أو التلفاز هو مايجرى تصويره داخل كادر الكاميرا , نحن لا نشاهد فى الفيلم مايجرى وراء الكاميرا ولا الأشياء المتراكمة داخل الأستوديو وعلى هذا الأساس فإن ملف swf هو ملف الفيلم النهائى للفلاش

واجهة البرنامج

http://www.alamuae.com/up/Folder-001/1144569579_1.jpg

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

1 - شريط القوائم Menu Bar
2 - الشريط الرئيسى Main Bar
3- Timeline أو خط الزمن
4 - المسرح أو منصة العمل .
5 - منطقة لوح الخصائص ولوح الأكشن Actions
6- الأدوات
7 - Panels أو الألواح وافتراضيا يظهر لوحان هما الألوان والمكتبة

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

أنصحكم بأن تجعلوا Main Tool Bar ظاهرا بصفة دائمة أسفل شريط القوائم , وصدقونى ستجدوا أن ذلك مفيدا جدا خاصة فى التراجع عن خطوة أو عدة خطوات , وأيضا فى النسخ واللصق والتدوير والمحاذاة .. إلخ
وذلك عن طريق القائمة
Window > Toolbars > Main
http://www.alamuae.com/up/Folder-001/1144569634_2.gif
http://www.alamuae.com/up/Folder-001/1144569671_3.gif

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif



الأدوات


http://www.alamuae.com/up/Folder-001/1144569720_1.gif
- Selection Tool V

أداة تحديد , يمكنك التحديد بواسطة النقر المزدوج (دبل كليك ) أو إحاطة الشكل عن طريق السحب بالماوس حوله
http://www.alamuae.com/up/Folder-001/1144569747_2.gif
ويجب عند تحديد عنصر بشكل كامل أن تقوم بعمل تحديد لكل من : الملء Fillوالخط الخارجي Stroke لهذا الشكل .

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

يمكنك بهذه الأداة أيضا عمل بعض التغييرات على الأشكال . مثلا فى الصورة التالية عندما تكون الأداة فوق خط خارجي تتحول لهذا الشكل دليلا على أنه يمكنك إضافة استدارة لهذا الخط .
http://www.alamuae.com/up/Folder-001/1144569765_3.gif

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

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

http://www.alamuae.com/up/Folder-002/1145969664_1.gif

1 - Snap to objects عند تفعيل هذا الخيار , سيحاول البرنامج عمل محاذاة أثناء تحريكك لكائن بالقرب من كائن آخر مثل محاذاة الحد الأيمن لمستطيل مع الحد الأيسر لمربع عند تحريك أحدهما بالقرب من الآخر.وستظهر دائرة أسفل مؤشر السهم عند الجهة التى تحرك منها الكائن دلالة على أن خيار المحاذاة فعال حاليا .

2 - تنعيم الخطوط المتعرجة.حدد خطا متعرجا رسمته بالقلم الرصاص مثلا وانقر على هذه الأيقونة عدة مرات لتنعيمه .

3 - تحويل لخط مستقيم , حدد خطا منحنيا رسمته بالقلم الرصاص مثلا , وانقر تلك الأيقونة عدة مرات لجعل الخط المنحنى أكثر استقامة .


اتفاقية :

ستتكرر كلمة " تحديد " بكثرة فى الدروس المقبلة , لذا لنتفق من الآن عندما يطلب منك تحديد كائن على المسرح فذلك يعنى أن تقوم باستخدام أداة التحديد والنقر على الكائن مرتين ( دبل كليك ) أو إحاطة الكائن بتحديد وهمى بأداة السهم , المهم يجب تحديد كل من الخط الخارجى والملء .



2 - Subselection Tool A


يمكنك بواسطتها إجراء تعديلات على الشكل عن طريق مقابض التحكم
http://www.alamuae.com/up/Folder-001/1144569791_4.gif
3 - Free Transform Q

وعن طريقها يمكن تغيير حجم الشكل أو تدويره أو عمل انبعاج (تشويه لأبعاده ) .وفى الوضع العادى يتم التحكم بأحد الحدين الأيمن أو الأيسر وإذا أردت التحكم فى الإثنين معا اضغط Alt أثناء عمل ذلك , وكذلك الأمر بالنسبة للحدين العلوى والسفلى.

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

http://www.alamuae.com/up/Folder-002/1145969758_2.gif
1 - Snap to objects وتم شرحها منذ قليل .

2 - Rotate and skew , حيث يمكنك عمل تدوير للكائن , أو تغيير زواياه كتحويل المستطيل إلى متوازى مستطيلات مثلا .إنه تشويه ولكن بكشل متناسق إلى حد ما.

3 - Scale تغيير أبعاد الكائن عرضا أو ارتفاعا

4 - Distort لعمل تشويه بشكل حر وغير متناسق لو أحببت .

5 - Envelop : تحديد الكائن بالعديد من النقاط التى لها مقابض تحكم والتى تتيح التغيير فى شكل الكائن بحرية أكبر .



4 - Gradient Transform Tool F


وهى نفسها أداة Fill Transform فى الإصدارات السابقة مع عمل بعض التعديلات الطفيفة عليها
http://www.alamuae.com/up/Folder-001/1144569813_5.gif
Center Point وهى مركز الوسط للتدرج

Focal Point وهى تعكس البؤرة أو أقصى تركيز لبقعة الضوء , وهذه النقطة موجودة فقط فى Radial Gradient

وفى الحالة الافتراضية تكون هاتان النقطتان معا فى المركز تماما . ولكن يمكنك بالطبع تغيير موضع أى منهما .

Width تغيير عرض التدرج

Size تغيير حجم التدرج

Rotation تدوير التدرج


5 - Line Tool N


لرسم الخطوط .وبالطبع كما فى أغلب برامج الرسم اضغط Shift أثناء الرسم لجعل الخط أفقيا أو رأسيا أو بزاوية 45 .

ولهذه الأداة خيارات فى لوح Properties (انظر أداة القلم الرصاص )


6 - Lasso Tool L


للتحديد بشكل حر .ويظهر لهذه الأداة الخيارات التالية أسفل صندوق الأدوات :
http://www.alamuae.com/up/Folder-002/1145969793_3.gif
الخياران الأولان هما العصا السحرية وإعداداتها , ولو كنت من مستخدمى فوتوشوب , فأنت تفهم معنى العصا السحرية حيث تستعمل فى فلاش مع الصور Bitmap بعد عمل Break apart لها وذلك لتحديد مناطق من الصورة لها نفس اللون ..

والخيار الأخير هو تحديد له شكل متعدد الأضلاع .



7 - Pen Tool P


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


8 - Text Tool T


أداة الكتابة . ونلاحظ أن الكتابة العربية غير مدعومة فى الفلاش فى أى إصدار بشكل عام . وعليك استعمال برنامج مثل الوسيط أو Corel Draw للكتابة العربية داخل فلاش


9 - Oval Tool O


وهى أداة لرسم دائرة أو شكل بيضاوي , ولرسم شكل دائري منتظم اضغط Shift أثناء الرسم .


10 - Rectangle Tool R


لرسم مربع أو مستطيل , ولرسم مربع منتظم اضغط Shift أثناء الرسم . وعند اختيار الأداة يظهر فى قسم Options فى أسفل صندوق الأدوات خيار التحكم فى درجة استدارة زوايا الشكل وفى الوضع الإفتراضى تكون القيمة صفر , وزيادة القيمة يزيد درجة التحول إلى الاستدارة , وبالنقر على هذا الخيار تظهر النافذة التالية :
http://www.alamuae.com/up/Folder-001/1144569867_7.gif
وإذا أردت فإنك تستطيع الاستغناء عن هذه النافذة الأخيرة أثناء الرسم بالنقر على السهم العلوى أو السفلى للوحة المفاتيح لتقليل أو زيادة درجة الاستدارة على الترتيب .

http://www.alamuae.com/up/Folder-001/1144569896_8.gif

ونلاحظ أنه فى صندوق هذه الأداة توجد أداة أخرى مخفية هى Polystar Tool , ولإظهارها اجعل زر الماوس الأيسر مضغوطا فوق السهم الأسود الصغير

http://www.alamuae.com/up/Folder-001/1144569922_9.gif

ومن لوح الخصائص Properties الوجود أسفل المسرح تستطيع التحكم فى شكل Polystar من حيث عدد نمط شكله وعدد أضلاعه .. إلخ

http://www.alamuae.com/up/Folder-001/1144569950_10.gif

وهنا ينبغى أن نذكر أنه بالنسبة لرسم الأشكال لدينا 3 ملحوظات :

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

http://www.alamuae.com/up/Folder-001/1144569972_11.gif
ولو حاولنا تحريك أى عنصر منهما بمفرده نلاحظ أنه يتحرك بمعزل عن العنصر الآخر كما فى الصورة التالية :

http://www.alamuae.com/up/Folder-001/1144570005_12.gif

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

Modify > Group ( Ctrl+G ) .

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

http://www.alamuae.com/up/Folder-001/1144570028_13.gif
http://www.alamuae.com/up/Folder-001/1144570054_14.gif
والأدهى من ذلك حين كنت ترسم شكلين ليس لهما Stroke ولهما نفس لون الملء , ثم جعلت أحد الشكلين يتلامس مع الشكل الآخر فإن الشكلان يمتزجان ويصبحان قطعة واحدة !

http://www.alamuae.com/up/Folder-001/1144570078_15.gif
ولم أكن أدرى ماهى حكمة مبرمجي فلاش من مثل هذا الأمر ! .

الآن فى الإصدار الجديد 8 , صار بوسعك إلغاء هذه الخاصية - أو الإبقاء عليها - أثناء رسم الأشكال بالنقر على هذه الأيقونة http://www.alamuae.com/up/Folder-001/1144570107_16.gif فى قسم Options أسفل صندوق الأدوات , أو من لوحة المفاتيح اضغط J .

عند النقر على الأيقونة فإنك تصبح فى وضعيةObject Drawing Mode , وترى أن الشكل الذى ترسمه يكون محددا بإطار كما فى الصورة التالية :
http://www.alamuae.com/up/Folder-001/1144570138_17.gif

الآن لاختيار الشكل نحتاج لنقرة واحدة عليه , مثلما الحال فى وضع Group , وبالنقر المزدوج نستطيع رؤية كلا العنصرين Stroke و Fill

ملحوظة رقم 3 : يمكنك عمل نسخة - أو عدة نسخ - من شكل وذلك بالضغط على مفتاح Alt أثناء تحريك الشكل بأداة التحديد .

http://www.alamuae.com/up/Folder-001/1144570173_18.gif




يــتــــــــــــبـــــــــع

[snIIns]

يــتـــبـــــع للادوات



11 - Pencil Tool Y

وللتبسيط سنطلق على هذه الأداة : القلم الرصاص , وعند اختيارها يظهر صندوق خياراتها فى أسفل صندوق الأدوات .

http://www.alamuae.com/up/Folder-001/1144570208_19.gif
وهى 3 خيارات :

Straighten يحول البرنامج ماترسمه إلى أقرب مايشبه الخطوط المستقيمة

Smooth يقوم البرنامج بتنعيم الخطوط التى ترسمها وتحسين الانحناءات فيها .

Ink هنا ماترسمه يظهر كما هو دون أى تعديلات من البرنامج .

http://www.alamuae.com/up/Folder-001/1144570232_20.gif
وفى لوح Properties فى أسفل المسرح تجد خيارات إضافية لهذه الأداة , نوردها هنا بإيجاز :

http://www.alamuae.com/up/Folder-001/1144570259_21.gif
1 – اللون , ونلاحظ هنا أن الخطوط المرسومة بهذه الأداة لها لون Stroke فقط ولا يوجد لون Fill .

ولكننا يمكن تغيير ذلك وجعل لون الخط Fill بدلا من Stroke , حدد الخط أولا ثم اذهب إلى القائمة :

Modify >Shape >Convert Lines to Fills
http://www.alamuae.com/up/Folder-001/1144570279_22.gif
2 – الحجم .

3 – نمط الخط : مثل الشعرة أو سميك أو متقطع ..إلخ . انظر للصورة التالية :
http://www.alamuae.com/up/Folder-001/1144570305_23.gif

4 – لعمل مجموعة خيارات خاصة بك وتطبيقها عند استعمال الأداة .

http://www.alamuae.com/up/Folder-001/1144570337_24.gif

5 – Capيحدد شكل الطرف الخارجي للخط ( قم بالتكبير لترى ذلك بوضوح أكثر ) ويوجد 3 خيارات :

http://www.alamuae.com/up/Folder-001/1144570357_25.gif
فى الخيار None فإنك عند رسم خط ينحني عند نقطة معينة فإنه يمكن أن توجد ثغرة فى الاتصال عند هذه النقطة ولن يفعل البرنامج شيئا لإصلاح هذا العيب

أما فى الخيار Square أو Round فإن البرنامج سيصلح هذا الخلل تلقائيا حسب النوع , انظر للصورة :

http://www.alamuae.com/up/Folder-001/1144570387_26.gif
1- الخيار None

2- الخيار Square

إلى هنا والفكرة واضحة ويمكنك استنتاج الصورة الخاصة بالخيار Round , قم بتكبير الخط والقيام بالتجربة بنفسك .

6 – Join يحدد شكل الأطراف عند توصيلها وله أيضا 3 خيارات :

Bevel , Round, Meter

Bevel تكون منطقة الاتصال إلى حد ما حادة

Round تكون حواف الاتصال إلى حد ما مستديرة
http://www.alamuae.com/up/Folder-001/1144570411_27.gif
http://www.alamuae.com/up/Folder-001/1144570432_28.gif

أما الخيار Meter فهو لتحديد درجة الحدة Sharpness كما تريد , يمكنك اختيار تلك الدرجة من 1 إلى 60 .

7 – Stroke Hinting وهذا الاختيار يبقى الحواف دقيقة ويمنع حدوث التشويش فيها أى بلغة الجرافيكس يجعلها Full Pixels .

8 – Scale وفيه تتحكم أكثر فى التغيير الحجمى Scaling من حيث الطول أو العرض .

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


12 - Brush Tool B


وهى أداة الفرشاة , ويمكنك تعديل خياراتها من Options فى أسفل صندوق الأدوات

http://www.alamuae.com/up/Folder-001/1144570460_29.gif
والآن لنستعرض تلك الخيارات :

1- لغلق لون الملء .

2- أوضاع الفرشاة . ولدينا 5 أوضاع كما يظهر فى الصورة التالية :
http://www.alamuae.com/up/Folder-001/1144570483_30.gif

وإليك أمثلة على هذه الأوضاع
http://www.alamuae.com/up/Folder-001/1144570519_31.gif

Paint Normal يعنى تلوين أى شيء أمامك سواء ملء أو خط خارجى .

Paint Fills يعنى تلوين التحديد , ولكن لو خرجت الفرشاة عن الخط الخارجي قليلا فسيتم تلوين ماهو خارج الشكل , ونلاحظ أن الخط الخارجي لم يتأثر .

Paint Behind يعنى التلوين خلف الشكل

Paint Selection يعنى تلوين جزء تم تحديده مسبقا بأداة التحديد Selection Tool .

Paint Inside يعنى تلوين الملء ( أى تلوين ماهو داخل حدود الخط الخارجي ) .

3 - حجم الفرشاة .

4 - شكل الفرشاة .


13 - Ink Bottle Tool S


وهى تستعمل لإجراء أى تعديلات على أى خط من حيث اللون أو الحجم أو النمط .. إلخ , انظر إلى المثال التالي لدينا خط مرسوم بالقلم الرصاص ثم قمنا بتغيير لونه ونمطه .

http://www.alamuae.com/up/Folder-001/1144570545_32.gif
http://www.alamuae.com/up/Folder-001/1144570569_33.gif

إذن هذه الأداة يمكنها إجراء تعديلات على خط مرسوم بأداة Line أو أداة Pencil أو خط خارجي Stroke لأي شكل .


14 - Paint Bucket Tool K


لتلوين الجزء الداخلي لأي شكل مغلق
http://www.alamuae.com/up/Folder-001/1144570589_34.gif

ويوجد مجموعة خيارات لهذه الأداة فى أسفل صندوق الأدوات , وهى خاصة بغلق الأشكال الغير مكتملة الإغلاق وملأها باللون .
http://www.alamuae.com/up/Folder-001/1144570617_35.gif

15 - Eyedropper Tool I

هذه هى أداة القطارة , وعند النقر على الجزء الداخلى لشكل ما فإن الأداة تقوم بالتعرف على ذلك اللون وتتحول الأداة إلى شكل يجمع بينها وبين الفرشاة http://www.alamuae.com/up/Folder-001/1144570637_36.gif
, وعندئذ تستطيع تطبيق ذلك على جزء داخلي Fill فى شكل آخر , وعند النقر بهذه الأداة على خط خارجي Stroke فإن الأداة تتحول إلى شكل يجمع بينها وبين القلم الرصاص http://www.alamuae.com/up/Folder-001/1144570668_37.gif ويمكنك نسخ شكل هذا الخط إلى خط آخر .

16 - Eraser Tool E

أنها الممحاة أو الأستيكة , ويظهر لها خيارات فى قسم Options
http://www.alamuae.com/up/Folder-001/1144570689_38.gif
1- لمحو ملء Fill أو خط خارجي Stroke بنقرة واحدة .

2 - انقر هنا لرؤية أنماط مختلفة للممحاة :
http://www.alamuae.com/up/Folder-001/1144570709_39.gif
الأول للوضع العادي أى محو أى شيء تمر عليه بالممحاة .

الثاني محو الملء فقط .

الثالث محو الخطوط فقط .

الرابع محو جزء تم تحديده سلفا من الملء .

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

وأخيرا تمتلك هذه الأداة خاصية رائعة , وهى : لمحو كل شيء على المسرح انقر على أيقونة الأداة نقرة مزدوجة Double Click


17 - Hand Tool H

هذه الأداة موجودة فى أغلب برامج الجرافيكس والوظيفة واحدة وهى تحريك منطقة العمل , وإذا كنت تستعمل أى أداة أخرى يمكنك استحضار هذه الأداة مؤقتا بالضغط على Space Bar فى لوحة المفاتيح .

وعند النقر المزدوج عليها تصبح منطقة المسرح بحجم مناسب للرؤية بشكل كامل Fit to Screen .


18 - Zoom Tool M, Z


حتى الآن لا أدرى مافائدة وجود مفتاحى اختصار وليس مفتاح واحد لهذه الأداة , من يعرف منكم له جائزة كبرى ..

يوجد وظيفتان لهذه الأداة التكبير أو التصغير , ويمكنك التحول بين الوظيفتين مؤقتا بالضغط على Alt .

بالنقر المزدوج على الأداة تحصل على تكبير للمسرح بنسبة100% .

19 - لتحديد لون الخط الخارجي Stroke .

20 - لتحديد لون الملء Fill .

21 - لدينا هنا 3 أيقونات الأولى من اليسار لاستعادة الألوان الافتراضية , الأبيض للملء Fill والأسود للخط الخارجي Stroke .

الأيقونة الوسطى لإلغاء اللون , انقر على أى أداة Fill أو Stroke لجعلها بلا لون .

الأيقونة الثالثة لعكس اللونين .

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif

Timeline
خط الزمن

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

ولكى نتعرف على كيفية إنشاء الحركة فى فلاش , سنقوم بمعرفة أحد الأقسام الهامة فى البرنامج وهو Timeline أو خط الزمن

تنقسم منطقة Timeline إلى قسمين رئيسيين هما :

1 - الإطارات Frames : وهى تماثل مفهوم اللقطات الذى تحدثنا عنه منذ قليل .

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

http://www.alamuae.com/up/Folder-001/1144570783_1.gif

والآن لنترك الطبقات جانبا ونركز على منطقة الإطارات , وتعالوا نتعرف بشكل أكبر على محتويات تلك المنطقة , وعند فتح البرنامج وبداية العمل ستبدو كالتالى :

http://www.alamuae.com/up/Folder-001/1144570815_2.gif

1 - Center Frame لتوسيط الإطار داخل نافذة البرنامج لتراه بشكل أوضح .
2 - Onion Skin
3 - Onion Skin Outliner
4 - Edit Multiple Frames
5 - Modify Onion Markers

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

6 - رقم الإطار المعروض حاليا .

7 - سرعة الفيلم , ويتم قياسه بعدد الإطارات فى الثانية الواحدة أو (Frame per second (fps , وفى الوضع الإفتراضى تكون القيمة 12 إطار فى الثانية . وبالطبع يمكنك تغيير تلك السرعة ولكن لاتشغل نفسك بهذا الأمر الآن , سنذكر ذلك فى حينه .

8 - الوقت المنقضى حتى الإطار المعروض حاليا ويقاس بالثانية .

9 - بالنقر على السهم الصغير يمكنك اختيار شكل عرض Timeline والذى تراه حاليا هو طريقة العرض الإفتراضية Normal .

يأتى الآن أهم جزء فى منطقة الإطارات وهو بالطبع الإطارات نفسها , وترى أمامك الآن شريطين الشريط السفلى هو شريط الإطارت , والعلوى وبه تدريج وأرقام لتوضيح أرقام الإطارات , وترى أمامك الجزء الأحمر المسمى ب Playhead وعند تحريكك له فإنك تشاهد الحركة المتتابعة للإطارات وتستطيع القيام بهذا الأمر لتختبر فيلمك بين الحين والآخر بشكل سهل وسريع .

إلى هنا ويبدو أن كل شيئ واضح وسهل , ولكن يتبقى أهم وأخطر جزء فى معرض حديثنا عن الإطارات , انظروا إلى الإطار رقم 1 , لماذا قمت بتسميتة بــ Blank Keyframe ؟ ولماذا يتميز عن الإطارات التى تليه طالما أننا لانزال فى البداية ولا يوجد أى عناصر فى الإطار ( أو اللقطة ) ؟ .

لكى يتضح الأمر تعالوا لنتعرف على أنواع الإطارات :

Frame , Keyframe , Blank Keyframe ?

ببساطة Frame هو أى إطار يلى الإطار الأول , وهو نوعان إما أن يكون فارغا لا يوجد به أى شيئ ولذا لا يحتسب فى زمن الفيلم الذى سنقوم بعمله طالما بقي كما هو فارغا , ويمكن تمثيل ذلك بالفيلم السينمائى الخام أو الجزء المتبقى من شريط الفيلم الخام الذى لم نستعمله بعد ولم يتم تسجيل أى شيئ عليه , حيث يقوم المونتاج فى السينما بإقتطاع هذا الجزء من الفيلم والإلقاء به فى سلة المهملات .

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

انظر إلى الصورة السابقة , كل الإطارات التى تلى الإطار الإطار رقم 1 هى إطارات Frames (ولكنها فارغة ), وربما تلاحظ أن لون الإطار يتغير كل 5 إطارات وذلك لسهولة تمييز وعد الإطارات ليس إلا لكنها فى النهاية كلها إطارات.

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

أما Keyframe فهو إطار يحدث به نقطة تحول ما , إما بظهور عنصر أو عناصر فيه بعد أن كان خاليا أو بتغير طرأ على العناصر التى كانت موجودة من قبل . وفى المثال السابق بعد ثوانى من رفع الستار ورؤيتنا للمسرح خاليا نرى بداية ظهور الممثلين , فى هذه اللحظة يتحول الـ Balnk Keyframe إلى Keyframe .

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

والآن إلى مزيد من التوضيح لأن هذه النقطة هامة جدا , وهى من المحاور الأساسية لتعلم الفلاش .

لقد قمنا بفتح البرنامج ولدينا الإطار رقم 1 وهو عبارة عن Blank Keyframe أو : إطار مفتاحى فارغ .

سنضع الآن عنصرا فى المسرح عبارة عن كرة ولنشاهد ماذا سيحدث للإطار .

http://www.alamuae.com/up/Folder-001/1144570838_3.gif

لاحظتم أن الإطار المفتاحى الفارغ كان به نقطة مستديرة بيضاء , تحولت - بعد إضافة الكرة - إلى نقطة سوداء , وتحول الإطار من Blank Keyframe أو إطار مفتاحى فارغ إلى Keyframe , أو : إطار مفتاحى .

إذن حصلنا الآن على قاعدة تقول : عند إجراء تغيير ما فلابد من وجود إطار مفتاحى Keyframe .


إن الإطار المفتاحى Keyframe يبدو هكذا

http://www.alamuae.com/up/Folder-001/1144570864_4.gif
أما الإطار المفتاحى الفارغ Blank Keyframe فيبدو هكذا

http://www.alamuae.com/up/Folder-001/1144570884_5.gif

الآن لو اكتفينا بوجود الكرة فى الإطار الأول وصنعنا الفيلم على هذا الأساس فإن هذا يعنى أن الكرة تظهر فى الفيلم لمدة 1 على 12 جزء من الثانية , وهو بالطبع أمر غير منطقى , إذن يجب أن يزيد زمن ظهور الكرة ولنقل مثلا لمدة 3 ثوانى , ولو أخذنا فى الإعتبار أن الفيلم يحتوى على 12 إطارا فى الثانية فيلزمنا 36 إطارا , اسحب بالزر الأيسر للماوس من الإطار الأول حتى الإطار 36 , لقد تم تحديد الإطارات
باللون الأزرق .
الآن انقر بالزر الأيمن للماوس واختر Insert Frame
http://www.alamuae.com/up/Folder-001/1144570908_6.gif

لقد صارت الإطارات من 1 حتى 36 ( والتى كانت فارغة من قبل ) تحتوى الآن على الكرة - بالرغم أنه لم يطرا أى تغيير عليها - أى أننا أطلنا فقط فترة ظهور الكرة فى المشهد عن طريق إضافة إطارات Frames .

http://www.alamuae.com/up/Folder-001/1144570929_7.gif

انقر بالزر الأيمن للماوس على الإطار رقم 37 واختر Insert Blank Keyframe

http://www.alamuae.com/up/Folder-001/1144570955_8.gif

ماذا لاحظت الآن ؟ لقد اختفت الكرة من المسرح .

إذن الإطار المفتاحى الفارغ نستخدمه لإفراغ المسرح من المحتويات السابقه ( ربما لنضع محتويات جديدة مثلا )

الآن قم بالنقر على أى إطار وليكن رقم 10 مثلا , ثم قم بتغيير لون الكرة إلى لون آخر بالنقر على Fill Color فى الأدوات , ماذا تلاحظ ؟ لقد تم تغيير لون الكرة فى كل الإطارات وليس فى الإطار رقم 10 فقط وبالطبع هذا مالانريده أو نقصده , نحن نريد إحداث تغيير عند الإطار المحدد , فمالحل ؟ , الحل ببساطة يتكثل فى أن نخبر فلاش أننا سنقوم بتغيير عند الإطار المحدد . وكيف نخبره ؟ : بأن نقوم بإدراج إطار مفتاحى Keyframe فى مكان الإطار المطلوب .

انقر مرة أخرى بالزر الأيمن للماوس عند نفس الإطار رقم 10 واختر من القائمة التى ستظهر :
Insert Keyframe

http://www.alamuae.com/up/Folder-001/1144570993_9.gif

قم الآن بتغير لون الكرة , ماذا تلاحظ الآن ؟

لقد تغير لون الكرة إبتداء من الإطار 10 وحتى نهاية الفيلم .

إذن نقوم باستخدام الإطار المفتاحى عندما نود إجراء تغيير ما .

أعتقد أنك أدركت الآن ماهو الفرق بين الأنواع المختلفة للإطارات , وفى الدروس القادمة سيتعمق لديك هذا الإدراك بالتطبيقات العملية المختلفة .

نقل الإطارات

يمكنك نقل أى إطار من أى نوع , فقط انقر عليه واسحبه لأى موضع فى نفس الطبقة أو حتى طبقة أخرى , يمكنك أيضا نقل عدة إطارات دفعة واحدة , قم بتحديدها أولا بتمرير الماوس عليهم ثم سحبهم بالماوس .

http://www.alamuae.com/up/Folder-001/1144571021_10.gif

نسخ الإطارات وقصها ولصقها

قم بتحديد الإطارات التى تود نسخها ثم انقر بالزر الأيمن للماوس واختر مايناسبك من العمليات المختلفة من نسخ Copy أو قص Cut , ثم اذهب للموضع المراد وانقر مرة أخرى بالزر اليمن للماوس واختر لصق Paste

http://www.alamuae.com/up/Folder-001/1144571044_11.gif

ملــحـوظــة
كما فى معظم البرامج وبالأخص برامج الجرافيكس يمكنك وأنت تقوم بسحب الإطارات المحددة أن تضغط باستمرار على زر Alt لعمل نسخة أخرى كل ماعليك عمله الآن هو وضعها فى المكان المراد .

إلغاء إطارات
حدد الإطار أو الإطارات ثم انقر بالزر اليمن واختر Remove Frames لإلغاء الإطارات العادية .

ملحوظة جانبية صغيرة : يمكنك إلغاء الإطارات العادية والإبقاء على مكانها شاغرا بواسطة الخيار Clear Frames

ولإلغاء الأنواع الأخرى من الإطارات ( الإطار المفتاحى , أو الإطار المفتاحى الفارغ ) اختر
Clear Keyframe

اختصارات مفيدة بالنسبة للإطارات

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

إدراج إطار F5

إدراج إطار مفتاحى F6

إدراج إطار مفتاحى فارغ F7

ولإلغاء أى نوع من الإطارات السابقة فقط اضغط مفتاح Shift مع المفتاح المخصص





سنواصل فى الدرس التالى رحلتنا لفهم الحركة فى فلاش

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif

خصائص الفيلم
Document Properties


مادمنا سنقوم بعمل فيلم , فلابد من تحديد خصائص الفيلم .
إذا شعرت بأن الخصائص الإفتراضية غير ملائمة لفيلمك الذى أنت بصدد تصميمه فيمكنك تغيير تلك الخصائص عن طريق فتح لوحة خصائص الفيلم أو Document Properties , ويمكننا الوصول إلى تلك اللوحة بعدة طرق مختلفة :
1 - مفاتيح الإختصار Ctrl+J
2 - من القائمة Modify > Document…
3 - بالنقر المزدوج على خانة Frame Rate فى خط الزمن .
4 - بالنقر بالزر الأيمن على المسرح واختيار Document Properties من القائمة المنسدلة .
5 - من لوح خصائص Properties الموجود أسفل المسرح , وهذا اللوح وظيفته التحكم فى خصائص أى عنصر فوق المسرح ومن المنطقى أن يوفر لنا أيضا التحكم فى المسرح نفسه , انقر نقرة واحدة على جزء خال من المسرح لتفعيله , ثم انقر على الزر بجوار كلمة Size مباشرة .

http://www.alamuae.com/up/Folder-001/1144571087_image001.gif

والآن لنشرح هذه النافذة بإختصار :

Title : عنوان الملف

Description : وصف للهدف من عمل الملف , أى بمثابة تذكير لك أثناء العمل عليه وتطويره أو الإضافة له فيما بعض .

Dimension : حجم الفيلم , ويمكنك التحكم فى العرض والطول . مثلا لقد قمنا هنا بتغيير الحجم الإفتراضى وهو
550X400

Match : جعل حجم الملف ملائما , ولديك 3 إختيارات : الإفتراضى , أو ملائمة لمحتويات المسرح أو ملائمة للطباعة .

Background : لون الخلفية . وفى الوضع الإفتراضى يكون اللون أبيض .

Frame Rate سرعة الفيلم : وهى أهم نقطة فى درسنا اليوم . إن السرعة الإفتراضية هى 12 إطار فى الثانية , وهى تعتبر بطيئة بالنسبة لسرعة الأفلام السينمائية وهى 24 إطار (كادر ) فى الثانية , إن سرعة 12 كانت ملائمة للمعالجات البطيئة نسبيا فيما مضى , أما الآن فإن معظم مستخدمى الكمبيوتر لديهم معالجات سريعة بعض الشيئ , لذا فإن مجموعة كبيرة من مصممى فلاش يجعلون سرعة أفلامهم 20 إطار فى الثانية , لإعطاء الحركة فى الفيلم مظهرا إنسيابيا ناعما من ناحية , ولسهولة حساب الزمن من ناحية أخرى , فمثلا لو لدينا عنصرا نريد ظهوره لمدة 3 ثوانى ونصف , تستطيع بسهولة فائقة استنتاج أنك تحتاج إلى 70 إطارا , ولكن فى سرعة 12 إطار سيكون الحساب أ كثر صعوبة . وفى النهاية الأمر متروك لتقديرك ورؤيتك الخاصة .

Ruler Units : وحدة قياس المسطرة .

Make Default : انقر هنا إذا أردت لجعل الخيارات التى اخترتها هى الإفتراضية , بحيث تكون هى الخيارات الفعالة فى كل مرة تتنشئ فيها فيلما .



.................................................. .................................................. ..........................

مطــــلــوب التركـيـز من الان

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif

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

ويمكننا تقسيم الحركة فى فلاش إلى نوعين أساسيين :

1 - Frame - by- Frame Animation الحركة بتغيير كل إطار على حدة

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

وهذه هى فكرة Frame - by - Frame Animation , إننا نقوم برسم العنصر فى كل لقطة مع عمل التغيير المطلوب , وهكذا نحصل على الحركة عند مشاهدة الفيلم . ويمكن أن تكون هذه الحركة مثلا رفرفة جناحين لفراشة أو سير الأقدام .. إلخ

2 - Tweened Animation الحركة بأسلوب التحول البينى

إن التحول البينى Tweening يعنى تغير الكائن من حالة A إلى الحالة B , وللمزيد من التوضيح نقول أننا سنقوم بتصميم العنصر فى إطار ثم نقوم بإجراء بعض التعديلات عليه فى إطار آخر ونجعل البرنامج يقوم بالتغير التدريجى للكائن بين الإطارين وفى النهاية نحصل على الحركة المطلوبة .

وينقسم التحول البينى إلى نوعين :

1 - Shape Tween التحول البينى للشكل .

2 - Motion Tween التحول البينى للحركة .


Frame by Frame Animation
الحركة بتغيير كل إطار على حدة
هناك طريقتان لعمل ذلك , الطريقة الأولى باستعمال Blank Keyframes (إطار مفتاحى ) , والطريقة الثانية باستعمال Keyframe (إطار مفتاحى فارغ )



1- طريقة Balnk Keyframe
1 - قم بتحديد الإطارات العشرة الأولى وذلك بالسحب بالماوس نحو الإطار رقم 10 ثم انقر بالزر الأيمن للماوس واختر Convert to Blank Keyframes

http://www.alamuae.com/up/Folder-001/1144571117_1.gif

2 - قم برسم خط مستقيم صغير بأداة القلم الرصاص Pencil

3 - انتقل للإطار التالى بالنقر عليه , ماذا تلاحظ ؟ لقد اختفى الخط ( وأعتقد أنك تعلم سبب ذلك , لقد انتقلنا إلى إطار مفتاح فارغ) , والآن نريد أن نفعل مثلما كان يفعل مصمموا الرسوم المتحركة فى الماضى , وسنضع صفحات الرسم الشفافة فوق بعضها البعض بحيث نرى كل الصفحات معا , وسنفعل ذلك بطريقة فلاش .

انقر بالماوس على زر Onion Skinكما فى الصورة .

يعرض Flash فى الحالة الطبيعية محتويات منصة العمل المقابلة لإطار واحد فى كل مرة , لكن إذا قمت بتفعيل سمة Onion Skin فيمكنك أن ترى محتويات عدة إطارات فى الوقت نفسه , إن خيار Onion Skin يعنى قشرة البصلة ومعناها أننا نستطيع أن نرى من خلال الأشكال المتراكمة , وكان لديك بصلة ترى مابداخلها قشرة قشرة .

http://www.alamuae.com/up/Folder-001/1144571151_2.gif

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

وبالطبع يمكنك سحب هذه الأقواس لتغطى الإطارات التى تريدها , اسحب القوس الأينم إلى الإطار الأخير رقم 10كما فى الصورة

http://www.alamuae.com/up/Folder-001/1144571198_3.gif

4 - الآن أنت فى الإطار رقم 2 , قم برسم خط فوق الخط الأول تماما مع إضافة خطا آخر عموديا عليه ( اضعط على مفتاح Shift أثناء الرسم ) , ثم انتقل للإطار رقم 3 وارسم الشكل السابق ثم أضف خطا عموديا آخر , وهكذا ..

وفى النهاية ستحصل على شكل حلزونى كما فى الصورة التالية :

http://www.alamuae.com/up/Folder-001/1144571235_4.gif
والآن لنقم باختبار العمل


"اختبار العمل"

أولا- لإختبار العمل فى داخل البرنامج انقر على Enter

حيث تشاهد حركة Playhead على الإطارات وتشاهد حركة الكائن أو الكائنات داخل المسرح

ولمزيد من التحكم فى العرض يمكنك استخدام Controller من القائمة

Window > Toolbars > Controller

http://www.alamuae.com/up/Folder-001/1144571255_5.gif

1- للتشغيل
2 - تقدم للأمام بمقدار إطار
3 - الذهاب لنهاية المشهد
4 - رجوع للخلف بمقدار إطار
5 - الذهاب لبداية المشهد
6 - إيقاف

ثانيا - لإختبار العمل بمشغل فلاش Flash Player اذهب للقائمة

Control > Test Movie

أو ببساطة اضغط Ctrl+ Enter

.................................................. ................................
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

والآن أدعوكم لتعلم المزيد من المهارات , وسنقوم بعمل الخطوات السابقة ولكن بشكل أكثر سهولة وحرفية :

1 - ارسم خطا كما فى الخطوة 1

2 - الأداة الحالية معك الآن هى القلم الرصاص , لاتتركها , فقط استمر فى الضغط على مفتاح Ctrl لإستحضار أداة التحديد بشكل مؤقت وقم بتحديد الخط بعمل إطار حوله , ثم اضغط Ctrl+C لنسخ الشكل .

3 - انقر على الإطار 2 ثم من القائمة

Edit > Paste in place

http://www.alamuae.com/up/Folder-001/1144571281_6.gif

أو اضغط مفاتيح الإختصار

Ctrl+Shift+V

سيتم لصق الشكل فى الإطار 2 , والآن أضف خطا عموديا , ثم استحضر أداة التحديد وقم بعمل إطار حول الشكل كله لتحديده , ثم Ctrl+C لنسخ الشكل ثم انتقل للإطار 3 وكرر ماسبق , وهكذا ..


(2 - طريقة Keyframe)
1 - قم برسم خط كما فى خطوة 1 فى الطريقة السابقة .

2 - انقر على الإطار التالى ثم اضغط F6 لإنشاء Keyframe ثم قم برسم خط آخر عمودى على الخط الأول

http://www.alamuae.com/up/Folder-001/1144571299_7.gif

ثم انتقل للإطار التالى واضغط F6 وارسم خطا آخر بشكل عمودى ..

وهكذا حتى تحصل على الشكل الحلزونى .

وفى النهاية ستحصل على نفس الحركة كما فى الطريقة الأولى .

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

1 - مزيد من التركيز على معرفة الفرق بين Keyframe و Blank Keyframe

2 - معرفة وظيفة Onion Skin

3 - اسخدام Paste in Place .

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif

Shape Tween
التحول البينى للشكل

فى الدرس السابق قلنا أن ال Animation فى فلاش نوعان , وشرحنا النوع الأول وهو Frame by Frame Animation حيث كان يعتمد ذاك النوع على قيامك برسم كل إطار على حدة .

واليوم أقدم لك النوع الثانى Tween animation أو التحول البينى والذى يعتمد على قيامك بصنع الإطار الأول وصنع الإطار الأخير ثم جعل البرنامج يقوم بصنع الإطارات بينهما , ومن هنا جاء مصطلح " بينى " أى بين الإطارات .

وينقسم التحول البينى إلى نوعين :

1 - Shape Tween أو التحول البينى للشكل
وهو ببساطة تحول شكل إلى شكل آخر, حيث نضع كائنا فى الإطار الأول ثم نضع كائنا ثانيا فى الإطار الأخير, ويقوم البرنامج بعمل تغير تدريجى فى شكل الكائن الأول حتى يتحول فى النهاية إلى الكائن الثانى .

2 - Motion Tween أو التحول البينى للحركة
ويعنى ببساطة تحريك كائن من مكان لآخر ,حيث نقوم بوضع كائن فى الإطار الأول ثم نقوم بتغيير مكان الكائن فى الإطار الأخير , ويقوم البرنامج بإنشاء الحركة للكائن بين الإطارين , وعند تشغيل الفيلم نشاهد الكائن يتحرك من المكان الأول إلى المكان الثانى .

وسوف نتناول فى هذه الدرس النوع الأول وهو :

التحول البينى للشكل Shape Tween

يمكن عمل ذلك بطريقتين :

أولا الطريقة العادية :

1 - قم برسم دائرة فى الإطار الأول .

2 - انقر على الإطار 35 لتحديده ثم اضغط F7 ( لإنشاء إطار مفتاحى فارغ أى لإزالة الدائرة من المسرح ) , ثم قم برسم مستطيل .

http://www.alamuae.com/up/Folder-001/1144571329_1.gif

3 - انقر على الإطار رقم 1 لتحديده , ثم من لوح Properties فى أسفل الشاشة وفى القائمة المنسدلة Tween اختر النوع Shape

http://www.alamuae.com/up/Folder-001/1144571364_2.gif

ماذا تلاحظ الآن ؟ , لقد تغير لون الإطارات بين الإطار الأول والأخير إلى اللون الأخضر الفاتح , وظهر سهم بين الإطارين .

http://www.alamuae.com/up/Folder-001/1144571388_3.gif

4 - اضغط Ctrl+Enter لاختبار فيلمك . حيث ترى الدائرة تتحول إلى مستطيل تدريجيا .


ثانيا - باستخدام Shape Hint أونقاط تلميح الشكل

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

والآن إلى المثال :

1 - قم بفتح مستند جديد ومن لوح خصائصه اختر لون الخلفية أسود , ثم قم برسم نجمة بيضاء عند الإطار 1

2 - عند الإطار 35 اضغط F7 , ثم ارسم دائرة بيضاء , وحولها إلى هلال عن طريق رسم دائرة سوداء فوق جزء منها ثم الضغط على مفتاح Delete كما فى الصورتين التاليتين :

http://www.alamuae.com/up/Folder-001/1144571464_4.gif
http://www.alamuae.com/up/Folder-001/1144571490_5.gif

3 - اذهب للإطار 1 ومن لوح الخصائص اختر نوع Shape كما فعلنا فى المثال السابق , ويمكنك الآن اختبار فيلمك حتى يمكنك المقارنه بينه وبين النتيجة النهائية بعد استعمال الطريقة كما سنوضحها الآن .

4 - الآن سنضيف نقطة التلميح الأولى , اذهب للقائمة

Modify > Shape > Add Shape Hint

http://www.alamuae.com/up/Folder-001/1144571421_6.gif

ستظهر دائرة صغيرة بها حرف a قم بسحبها إلى إلى أحد رؤوس النجمة

http://www.alamuae.com/up/Folder-001/1144571524_7.gif

5 - بالماوس قم بتحريك Playhead لتتعقب مكان ذلك الرأس ومكانه فى الشكل النهائى ( فى الإطار الأخير ) حيث ستجد أن رأس النجمة الذى وضعت عنده نقطة التلميح سيتحول إلى الرأس العلوى للهلال

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

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

http://www.alamuae.com/up/Folder-001/1144571600_8.gif
http://www.alamuae.com/up/Folder-001/1144571626_9.gif

8 - الآن اختبر فيلمك ولاحظ أن التحول الشكلى صار أنعم . بالطبع حتى نحصل على النعومة الكاملة ستحتاج إلى نقاط إضافية عند الزوايا بين الرؤوس , ولكن لم أرد الإطالة أكثر من ذلك وأعتقد أن الفكرة واضحة وهذا هو مايهمنا فى المرحلة الحالية .

ملحوظة خاصة بالنصوص :

فى الحقيقة يمكنك استعمال Shape Tween , لأى شكل Shape , ولاستعماله مع النصوص يجب تحويل النص أولا إلى شكل Shape عن طريق الخطوات التالية :

1 - اكتب النص , ثم اختر أداة التحديد Selection Tool وانقر على النص لتحديده

http://www.alamuae.com/up/Folder-001/1144571661_10.gif

2 - اذهب للقائمة

Modify > Break Apart

وقم بتكرار ذلك مرة ثانية

أو من لوحة المفاتيح اضغط Ctrl+B مرتين .

فى المرة الأولى سيكون النص هكذا

http://www.alamuae.com/up/Folder-001/1144571694_11.gif

وفى المرة الثانية سيظهر النص هكذا

http://www.alamuae.com/up/Folder-001/1144571734_12.gif

أى أنه تحول فى المرة الثانية إلى شكل .

فى الحقيقة لقد قمنا بعمل Break Apart مرتين لأننا نتعامل مع نص مكون من عدة حروف , ولكن حين يكون النص هو حرف واحد فسنقوم بعمل ذلك مرة واحدة .

ملحوظة خاصة بالصور :

كما هو الحال بالنسبة للنصوص , يجب تحويل الصورة إلى شكل حتى يمكننا تطبيق Shape Tween عليها , ولكن الطريقة ستختلف عن الطريقة بالنسبة للنص , وذلك كالتالى :

قم بتحديد الصورة وهى على المسرح , ثم اذهب للقائمة :

Modify > Bitmap > Trace Bitmap

http://www.alamuae.com/up/Folder-001/1144571803_13.gif

التحكم فى سرعة التحول البينى للشكل

فى الوضع الإفتراضى تتم عملية التحول البينى بنفش السرعة من الإطار الأول وحتى الأخير , ولكن ماذا لو أردنا تغيير ذلك وجعل الحركة سريعة فى البداية ثم تتباطأ نحو النهاية أو العكس ؟ فى هذه الحالة سنلجأ إلى خاصية Ease فى لوح الخواص Properties

http://www.alamuae.com/up/Folder-001/1144571832_14.gif
حيث يمكن استخدام المؤشر المنزلق أو كتابة القيمة العددية مباشرة , ويجب الأخذ فى الاعتبار أن القيم العددية الموجبة تعنى ان سرعة التحول ستكون سريعة فى البداية ثم تتباطئ نحو النهاية , والقيم السالبة تعنى العكس .

التحكم فى أسلوب التحول البينى عن طريق Blend

انقر على السهم المنزلق لخاصية Blend حيث يوجد خياران :

- Distributive وهو الإفتراضى , ويجعل الشكل أثناء التحول ناعما فى الأطراف والزوايا بقدر الإمكان .

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

http://www.alamuae.com/up/Folder-001/1144571851_15.gif

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif


Edit Multiple frames
تعديل عدة إطارات مرة واحدة


المقصود بهذه العملية هو إعادة تحرير عدة إطارات فى الوقت نفسه , فلو كان لدينا فى المثال السابق Shape
Tween) ) دائرة تتحول إلى مستطيل , وأردنا مثلا تغيير مكان وجود العنصرين على المسرح فبدلا من أن يتواجدا فى مركز المسرح نريد جعلهما فى الطرف الأيسر مثلا , وفى هذه الحالة علينا أن نذهب إلى كل إطار ثم نقوم بنقل العنصر , ولكن هذه الطريقة بالطبع غير عملية فبالإضافة إلى أنها تحتاج إلى خطوات طويلة , أيضا لن نستطيع أن نضع العنصر فى المكان نفسه بدقة فى كل إطار ولذا سنحصل على عناصر تتحرك حركات متذبذبة بين كل إطار وآخر . أما الطريقة الأكثر سهولة والأكثر دقة فتكمن فى استعمال Edit Multiple Frames .

وإليك الطريقة :

1 - انقر على أيقونة Edit Multiple Frames كما فى الصورة . لاحظ القوسين الذين سيظهران فى شريط أرقام الإطارات .

http://www.alamuae.com/up/Folder-001/1144571887_1.gif

2 - قم بسحب القوس الأيمن إلى الإطار الأخير .

http://www.alamuae.com/up/Folder-001/1144571931_2.gif

3 - أنقر على أى جزء فى المسرح ثم اضغط Ctrl+A لتحديد كل العناصر.

http://www.alamuae.com/up/Folder-001/1144571959_3.gif

4 - قم الآن بسحب العنصر ولاحظ أنك تسحب العنصرين معا كما يظهر فى الصورة التالية بكل وضوح

http://www.alamuae.com/up/Folder-001/1144571979_4.gif

5 - انقر مرة أخرى على أيقونة Edit Multiple Frames فقد انتهت مهمتها. والآن انقر Ctrl+Enter لاختبار العمل .

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif

Animating Gradients
الحركة باستخدام التدرج اللونى


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

1 - إذا لم يكن لوح Color Mixer ظاهرا لديك قم بإظهاره من القائمة:

Window > Color Mixer أو من لوحة المفاتيح اضغط shift+F9

انقر على مربع Stroke Color وهو المربع الذى ترى بجواره قلم رصاص , حيث تظهر لك لوحة الألوان وفى أعلى اللوحة من جهة اليمين انقر على مربع إلغاء اللون ( الذى به خط مثل المربع فى الصورة)

http://www.alamuae.com/up/Folder-001/1144572010_1.gif

ثم انقر على لون الملء Fill Color لتحديده .

فى الوضع الإعتيادى يكون لون الملء لونا واحدا Solid , قم بتغيير ذلك إلى تدرج من نوع Radial من خانة Type .

http://www.alamuae.com/up/Folder-001/1144572063_2.gif

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

http://www.alamuae.com/up/Folder-001/1144572089_3.gif

سنقوم الآن بعكس ذلك بتحريك مؤشر الأبيض يسارا والأسود يمينا ليبدو كما فى الصورة التالية .

http://www.alamuae.com/up/Folder-001/1144572126_4.jpg

ومعنى ذلك أنه سيكون التدرج الآن من الأبيض فى مركز الشكل إلى الأسود فى طرفه الخارجى .

2 - قم برسم دائرة باستخدام Oval Tool مع الضغط على مفتاح Shift للحصول على دائرة منتظمة .

http://www.alamuae.com/up/Folder-001/1144572150_5.gif

انقر على الإطار رقم 20 ثم اضغط F6 لإدراج إطار مفتاحى ( فى الدرس السابق Shape Tween استخدمنا F7 لإنشاء إطار مفتاحى فارغ ورسمنا عنصر ثانيا وكان التغير فى الشكل يتم بتحول العنصر الأول إلى العنصر الثانى , ولكننا هنا نريد إحداث التغير الشكلى فى نفس العنصر بتغيير مكان الإضاءة عليه ) .

الآن انقر على الإطار الأول للعودة إليه .

3 - انقر على أداة Gradient transform Tool من صندوق الأدوات

http://www.alamuae.com/up/Folder-001/1144572174_6.gif

, ثم انقر على الدائرة .

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

http://www.alamuae.com/up/Folder-001/1144572215_7.gif
http://www.alamuae.com/up/Folder-001/1144572240_8.gif

5 - الآن ستبدو الكرة هكذا

http://www.alamuae.com/up/Folder-001/1144572268_9.gif

6 - قم بالنقر على الإطار الأخير ثم انقر على الأداة Gradient transform Tool مرة أخرى , وقم بتحريك مركز التدرج إلى الأسفل يمينا , لتبدو الكرة بهذا الشكل .

http://www.alamuae.com/up/Folder-001/1144572287_10.gif

7 - اذهب للإطار الأول وفى لوح الخصائص اختر نوع Shape من خانة Tween كما تعلمنا من قبل , ثم قم باختبار العمل

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif

الرموز Symbols والنظائر Instances

لكى نطبق حركة من نوع Motion Tween على شكل - دائرة أو مستطيل مثلا - يجب علينا تحويل ذلك الشكل إلى رمز , ولعمل ذلك انقر على الكائن بالزر الأيمن للماوس ثم اختر Convert to symbol

http://www.alamuae.com/up/Folder-001/1144572327_1.gif

أو قم بتحديد الكائن ثم الضغط على F8 من لوحة المفاتيح .

وفى كلتا الحالتين ستظهر لنا اللوحة التالية :

http://www.alamuae.com/up/Folder-001/1144572434_2.gif


- فى مربع Name يمكننا إعادة تسمية الرمز بدلا من الإسم الإفتراضى (Symbol 1), بالطبع يمكنك تسميته كما يحلو لك ولكن من الأفضل أن تعطيه إسما يدل على الشكل المرتبط به , فعندما تقوم بعمل مشروع لفيلم فلاش يحتوى على العديد من الرموز ستجد أنه من المفيد تمييز تلك الرموز عن بعضها البعض .

- وفى خانة Type يمكننا تحديد نوع الرمز من بين أنواعه الثلاث :

Movie clip,Button,Graphic

وسنتكلم عن هذا بالتفصيل لاحقا , ولكننا الآن سنختار النوع Graphic على سبيل المثال . اضغط OK للخروج .

وعلى الفور ستلاحظ حدوث التغييرات التالية :

أولا- سيتم إضافة الرمز تلقائيا فى المكتبة Library , حيث نجد إسمه وصورته . ( المكتبة تحتاج إلى درس مستقل ولكن يكفى أن تعلم الآن أن المكتبة هى مكان لوضع كل ماتحتاج إليه أثناء صنع الفيلم مثل الرموز والصور وملفات الصوت والفيديو .. إلخ , والملف النهائى للفيلم لن يتضمن سوى العناصر التى تم استعمالها بالفعل على المسرح .أى بمعنى آخر ليس كل ماهو موجود بالمكتبة سيتم تضمينه داخل فيلم فلاش النهائى )

http://www.alamuae.com/up/Folder-001/1144572456_3.gif

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

http://www.alamuae.com/up/Folder-001/1144572476_4.gif

وربما يحق لنا أن نتساءل مامعنى إحاطة الرمز بتحديد ؟

فى الحقيقة هناك فائدتين لذلك :

الأولى : لتمييز الرمز عن الشكل العادى .

الثانية : تتعلق بمفهوم الرمز , لقد ذكرنا فى بداية الدرس كيفية تحويل الكائن إلى رمز , والحقيقة أن كلمة تحويل أو Convert لا تعبر عن المعنى الصحيح , فنحن لا نقوم بتحويل الكائن إلى رمز وإنما نقوم بوضع الكائن داخل رمز , أى أن الرمز هو عبارة عن صندوق أو وعاء أو حاوية Container نضع بداخله مانريد من كائنات .

ولكى أثبت لك صحة ما أقول , قم بالنقر على الرمز بأداة التحديد Selection Tool وحاول تغيير شكله بعمل بروز له مثلا , ماذا كانت النتيجة , لن تستطيع إحداث أى تغيير .

انقر على الرمز نقرة مزدوجة , ولاحظ ماذا يحدث

أولا : اختفى التحديد المربع حول الدائرة وصار من الممكن إجراء أى تغييرات عليها .

http://www.alamuae.com/up/Folder-001/1144572515_5.gif

ثانيا : ظهر لدينا فى شريط الزمن ( Timeline ), زمن آخر خاص بالرمز( رقم 2 ) وهو منفصل عن زمن المشهد Scene 1 ( رقم 1 ) . ويمكنك الخروج من زمن الرمز إلى زمن المشهد بالنقر على Scene 1 أو النقر على السهم المتجه لليسار .

واستنادا إلى نفس الفكرة لو كان لدينا فى الفيلم عدة رموز , فإنه سيكون لكل رمز زمنه الخاص به أيضا .

ثالثا : فى لوح الخصائص Properties ستجد شيئا يستحق التوقف قليلا لفهمه , إن لوح الخصائص يصف الرمز الموجود على المسرح بأنه

Instance of : Circle Symbol

, أى أنه نظير أو نسخه عن الرمز المذكور وليس الرمز نفسه .

http://www.alamuae.com/up/Folder-001/1144572545_6.gif


ولكن مامعنى ذلك ؟
إن من بين الوظائف العديدة لبرنامج فلاش هو عمل أفلام أو Movies لإستخدامها على شبكة الإنترنت , لذا فمن الضرورى أن تكون هذه الملفات صغيرة الحجم بقدر الإمكان , لذلك فقد ابتدع البرنامج فكرة الرموز والنظائر . وللمزيد من التوضيح نقول :

لو أن لدينا كائنا وأردنا ظهور ذلك الكائن مرة واحدة فى الفيلم , فسينتج لدينا فيلما لنفرض أن حجمه سيكون 50 كيلو بايت مثلا , ولكن لو أردنا استخدام نفس الكائن 10 مرات فسيتضاعف حجم الفيلم 10 مرات أى يصبح حجم الفيلم 500 كيلو بايت .

ولكن لو قمنا بتحويل ذلك الكائن إلى رمز ثم أخذنا منه 10 نظائر - أو 10 نسخ - فإن حجم الفيلم لن يتغير وسيظل 50 كيلو بايت كما هو .

إذن أى رمز نقوم بإنشاؤه يتواجد تلقائيا فى المكتبه , ومايتواجد على المسرح هو نظير - أو عدة نظائر - لهذا الرمز .


عمل عدة نظائر لرمز واحد

ويمكنك ذلك بسحب الرمز من المكتبه إلى المسرح مرة تلو الأخرى .


التعديل فى النظائر
يمكنك التعديل فى كل نظير على حدة دون أن يؤثر ذلك فى النظائر الأخرى , وذلك فى بعض النواحى:

Free Transform - 1 تغيير أبعاد الكائن وعمل تشويه لتلك الأبعاد .

Color -2 ويشمل التحكم فى :

Brightness درجة السطوع

Tint اللون

Alpha الشفافية

3 - Blend وهو يعنى علاقة الرمز بماهو أسفل منه سواء كان لون منصة العمل وهو الأبيض فى الحالة الإفتراضية , أو أى كائنات أخرى . وهذا الخيار متوفر فقط بالنسبة للرمز من نوع Movie Clip أو Button .

http://www.alamuae.com/up/Folder-001/1144572570_7.gif

4 - تغيير نوع الرمز بالنسبة للنظير , فمثلا لو كان النظير لرمز من نوع Graphic , يمكننا تحويله إلى نظير لرمز من نوع Movie Clip . وذلك من لوح الخصائص Properties .

http://www.alamuae.com/up/Folder-001/1144572588_8.gif

لقد أوضحت لك مفهوم الرمز ومفهوم النظير , ومن أجل تبسيط الشرح وحمايتك من دوامة المصطلحات , من الآن فصاعدا لن أذكر كلمة نظير لأننى سأعتبر أن النظير هو الرمز على اعتبار أن أحمد هو نفسه الحاج أحمد !!, إن الأمر ببساطة يشبه عمل نسخه من ملف Text مثلا فى القرص C ووضعه فى القرص D على الحاسوب , فالبرغم من أن الكمبيوتر يدرك أن الملف الأخير هو مجرد نسخة إلا أنه لن يتعامل معه باحتقار بسبب ذلك !! وسيكون لذلك الملف كل صلاحيات ووظائف الملف الأصلى , حتى أنك بعد عدة أيام ربما ستنسى أنه كان نسخة عن ملف آخر , وهذا هو ماأريده منك الآن , أن تنسى كلمة نظير وأن تتذكر فقط كلمة رمز, وسيكون واضحا أن الموجود على المسرح نظير والموجود فى المكتبة رمز .


إنشاء رمز من فراغ

لقد قمنا فى بداية الدرس بإنشاء شكل ثم وضعناه داخل رمز , ( وهذه هى أفضل الطرق لإنشاء الرمز) , ولكن هناك طريقة أخرى لإنشاء الرمز وهى تعتمد على عكس ماسبق , أى أننا سنقوم بإنشاء الرمز أولا ثم وضع الشكل فيه , وهذه الطريقة يمكن تنفيذها بأسلوبين :

الأسلوب الأول - من القائمة

Insert > New Symbol

http://www.alamuae.com/up/Folder-001/1144572612_9.gif

أو من لوحة المفاتيح اضغط Ctrl+F8

الأسلوب الثانى - فى أسفل لوح المكتبة Library اضغط على الأيقونة الموضحة فى الشكل

http://www.alamuae.com/up/Folder-001/1144572642_10.gif

وفى كلتا الحالتين ستظهر لنا لوحة Create New Symbol وهى شبيهة تماما بلوحة Convert to Symbol التى رأيناها فى بداية هذا الدرس .

قم بتسمية الرمز وتحديد نوعه كما تعلمنا ثم اضغط OK .

نلاحظ الآن أن الرمز قد أضيف تلقائيا داخل المكتبه كما نلاحظ ظهور علامة + فى جزء المعاينة فى المكتبة و فى المسرح , وأننا داخل الزمن الخاص بالرمز ولكن لا شيئ آخر , لقد قمنا بإنشاء صندوق , مجرد صندوق فارغ لا يحوى أى شيئ بداخله , ولو قمنا بتحويل الملف الآن إلى فيلم فلاش فلن نحصل على شيئ , مجرد مسرح خال من المشاهد والممثلين .

لنقم الآن بوضع شكل داخل الرمز , مثلا قم برسم دائرة , لقد قمنا بوضع شكل - وهو الدائرة - داخل الرمز , الآن انقر على Scene 1 أو على السهم فى شريط الزمن كما هو موضح فى الصورة للعودة إلى الزمن الأصلى للمشهد .

http://www.alamuae.com/up/Folder-001/1144572664_11.gif

ماذا حدث ؟ أين ذهبت الدائرة ؟ ياللعجب .. لقد اختفت ! ..

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

والآن للحصول على النظير , فقط قم بسحب الرمز إلى المسرح .




تحرير رمز Edit Symbol

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

وهناك طريقتان لعمل ذلك :

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

الطريقة الثانية وهى الأفضل :
انقر نقرة مزدوجة على نظير الرمز فى المسرح , وميزة هذه الطريقة أنك تستطيع رؤية باقى العناصر الأخرى بحيث تأخذ فى اعتبارك عند تحرير النظير مدى علاقته بالعناصر المجاورة . وبلغة فلاش فأنت تقوم الآن بعمل Edit in place .


إلغاء رمز


فى المكتبة حدد الرمز ثم اضغط Delete من لوحة المفاتيح , أو انقر على أيقونة سلة المهملات فى أسفل المكتبة , أو اسحبه إليها .

http://www.alamuae.com/up/Folder-001/1144572685_12.gif

وفى المسرح حدد النظير ثم اضغط Delete من لوحة المفاتيح .

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif


Motion Tween

التحول البينى للحركة

يعتمد Motion Tween على تغير مكان الكائن , فنحن نضع كائنا فى الإطار الأول ثم نأتى إلى الإطار الأخير ونغير مكان الكائن , ثم يقوم فلاش بعمل تغيير تدريجى فى موضع الكائن من مكانه الأول إلى مكانه الأخير وعند مشاهدة الفيلم بتتابع اللقطات يبدو لنا وكأن الكائن يتحرك من مكان لآخر . هذه هى الفكرة بكل اختصار , والآن إلى الشرح :

1 - ارسم دائرة ثم قم بتحديدها باختيار أداة التحديد ثم النقر المزدوج عليها .

2 - اضغط F8 لتحويل الدائرة إلى رمز ( أوضحنا فى درس الرموز أن هذا شرط أساسى لعمل Motion Tween ) , ستظهر لك نافذة , يمكنك من خلالها تسمية الرمز وتعيين نوعه وسنختار النوع Graphic

3 - انقر على الإطار 30 مثلا ثم اضغط F6 لعمل إطار مفتاحى Key Frame

4 - وأنت ضاغط على مفتاح Ctrl قم بتغيير مكان الدائرة بسحبها إلى الجهة المقابلة من المسرح .

5 - والآن سنطلب من البرنامج أن يقوم بعمل تحول تدريجى فى موضع الدائرة من مكانها الأول حتى مكانها الأخير. انقر على الإطار الأول للعودة إليه , ومن لوح الخصائص Properties فى الأسفل اختر Motion من أنواع Tween .

http://www.alamuae.com/up/Folder-001/1144572718_1.gif

6 - فى شريط الإطارات , ستلاحظ ظهور سهم بين الإطار الأول والأخير مع تغير لون الإطارات إلى اللون الأزرق الفاتح ( فى Shape Tween كان لون الإطارات أخضر )

http://www.alamuae.com/up/Folder-001/1144572753_2.gif

7 - قم بالضغط على Ctrl+Enter لاختبار الفيلم .


تغييرات أخرى يمكن تطبيقها


إن التحول البينى للحركة Motion Tween لا يقتصر فقط على تحريك الكائن , وكما شرحنا من قبل أن الحركة ما هى إلا تغير فى مكان الكائن من إطار لآخر , لذلك يمكننا تطبيق مبدا التغير فى خصائص أخرى للكائن Properties مثل :

1- الدوران Rotate , انقر على الإطار الأول ثم اختر ماتريد من خيارات Rotate الأربع :

- None عدم الدوران .

- Auto إذا كنت قد قمت بتدوير العنصر فى الإطار الأخير , فسيتم الدوران فى نفس الإتجاه .

CW - الدوران فى اتجاه عقارب الساعة .

- CCW الدوران عكس عقارب الساعة .

http://www.alamuae.com/up/Folder-001/1144572792_3.gif

كما يمكننا تحديد عدد مرات الدوران

http://www.alamuae.com/up/Folder-001/1144572816_4.gif

2 - اللون Color , انقر على الرمز فى المسرح , ثم من قائمة Color فى لوح الخواص Properties أسفل المسرح واختر التأثير اللونى المرغوب :

- None وهو الخيار الإفتراضى ويعنى بقاء اللون كما هو .

- Brightness لتعديل درجة السطوع أو الإضاءة .

- Tint لتعديل اللون عن طريق العديد من التحكمات الدقيقة فى قنوات RGB الثلاث : الأحمر والأخضر والزرق .

- Alpha لتعديل درجة الشفافية .

http://www.alamuae.com/up/Folder-001/1144572841_5.gif

- Advanced لتعديل أدق فى قنوات RGB ودرجة الشفافية معا .

http://www.alamuae.com/up/Folder-001/1144572861_6.gif

التحكم فى سرعة الحركة

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

http://www.alamuae.com/up/Folder-001/1144572896_7.gif


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

وكتوضيح من البرنامج فإن كلمة Out تظهر مع القيم الموجبة وكلمة In تظهر مع القيم السالبة . الآن انقر على الإطار الأول , وقم مثلا بتغيير القيمة إلى 100 , وقم باختبار الفيلم , لتجد أن الدائرة تتحرك بسرعة أولا ثم ببطء نحو النهاية .

قم بتغيير القيمة مرة أخرى واجعلها سالبة واختبر الفيلم لتجد أن الدائرة تسير ببطء أولا ثم تتسارع نحو النهاية .

ثانيا باستخدام Edit
هذه الخاصية هى من الإضافات الممتازة فى هذا الإصدار , حيث تسمح بالتحكم بشكل أدق فى نمط الحركة , انقر على زر Edit المجاور لـ Ease حيث تظهر لك اللوحة التالية

http://www.alamuae.com/up/Folder-001/1144572918_8.gif

تستطيع تغيير شكل المنحنى لإحداث نمط الحركة كما تريد , مثلا هنا قمنا بجعل الدائرة تسير ثم تتراجع للوراء ثم تتقدم وتكمل سيرها نحو النهاية .

إذا أردت إلغاءإحدى النقاط فى المنحنى وإعادتها لسابق وضعها , انقر عليها مع الضغط على مفتاح Alt , وإذا أردت إلغاء جميع النقط وإعادة المنحنى لوضعه الإفتراضى انقر على Reset .

وفى أسفل اللوحة تجد أرقام الإطارات حتى تحدد بكل دقة وقت التغيير المطلوب .

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

ولكن ماذا لو كان لدينا تغيرات أخرى نجريها على العنصر , مثلا تغيير لونه ودرجة دورانه وحجمه تدريجيا , فى هذه الحالة سنحتاج لاستعمال خيارات Property وفى الحالة الإفتراضية تكون غير فعالة حيث يكون مربع الإختيار Use one setting for all properties محددا .

قم بالنقر على المربع بجوار Use one setting for all properties لإلغاء إختياره ثم انقر على السهم فى نافذة Property حيث تجد الخواص التالية :

Position حيث تتحكم فى معدل سرعة التغير فى المكان كما رأينا فى المثال السابق .

Rotation حيث تتحكم فى معدل سرعة التغير فى زاوية الدوران .

Scale حيث تتحكم فى معدل سرعة التغير فى الحجم .

Color حيث تتحكم فى معدل سرعة التغير فى اللون .

Filters ( يتم تطبيقها فقط على Movie Cilp , Button , Text ) حيث تتحكم فى معدل سرعة تطبيق فلتر من الفلاتر .


الحركة باستخدام مسار

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

1 - قم برسم دائرة ثم حددها بالكامل وحولها إلى رمز من نوع Graphic .

2 - انقر على الإطار 30 واضغط F6 لعمل إطار مفتاحى .

3 - انقر على أيقونة Add Motion Guide لإضافة طبقة اسمها الطبقة الدليلية .

http://www.alamuae.com/up/Folder-001/1144572943_9.gif

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

http://www.alamuae.com/up/Folder-001/1144572968_10.gif

4 - انقر على الإطار الأول فى الطبقة الدليلية ثم اختر أداة القلم الرصاص من الأدوات , وارسم خطا به العديد من المنحنيات .

http://www.alamuae.com/up/Folder-001/1144572998_11.gif

5 - قم بقفل الطبقة الدليلية بالنقر على النقطة الصغيرة أسفل أيقونة القفل .

http://www.alamuae.com/up/Folder-001/1144573055_12.gif

والهدف من ذلك هو أننا الآن سننتقل إلى الطبقة الأولى ونغير مكان الدائرة فى الإطار الأول والأخير ولا نريد تحريك خط المسار - الذى رسمناه - عن طريق الخطأ .

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

http://www.alamuae.com/up/Folder-001/1144573075_13.gif

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

8 - انقر على الإطار الأول مرة أخرى ومن لوح الخصائص بالأسفل اختر نوع Motion من قائمة Tween .

الآن اضغط Ctrl+Enter لاختبار الفيلم. لاحظ أن المسار الذى رسمناه لا يظهر بالطبع فى الفيلم النهائى .

التحكم فى اتجاه الكائن أثناء حركته على المسار

لنفرض أن الكائن هو عبارة عن سهم ونريد أن نجعل السهم يسير على المسار الذى حددناه بحيث يتغير إتجاهه وفقا لإنحناءات المسار وبحيث يكون اتجاه رأس السهم فى نفس اتجاه الحركة , هنا سنحدد الخيار Orient to path فى لوح الخواص Properties .

http://www.alamuae.com/up/Folder-001/1144573100_14.gif

حدد الإطار الأول ثم قم بوضع السهم على مقدمة المسار مع تعديل إتجاهه , ولتنفيذ ذلك اضغط Q لتفعيل أداة Free Transform أو اخترها من الأدوات وقم بتدوير السهم بحيث يكون فى نفس اتجاه بداية المسار , حدد الإطار الأخير وافعل الشيئ نفسه

http://www.alamuae.com/up/Folder-001/1144573121_15.gif

اضغط Ctrl+Enter لإختبار العمل .

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif


الأزرار Buttons


إن الزر Button هو أحد الأنواع الثلاثة للرمز:

Graphic , Movie Clip , Buttons

وهو أكثر تطبيقات فلاش استعمالا فى صفحات الإنترنت . والآن لنتعرف على كيفية إنشاء زر .

1 - ارسم دائرة ثم حددها وحولها إلى رمز من نوع Button


http://www.alamuae.com/up/Folder-001/1144573156_1.gif

2 - انقر على الدائرة نقرة مزدوجة لتدخل فى طور تحرير الرمز , ولاحظ تغير شريط الزمن .

عندما تقوم بإنشاء رمز من نوع زر Button فإن البرنامج يصنع تلقائيا 4 إطارات للزر , وهذه الإطارات لن تعمل من تلقاء نفسها وإنما تستجيب لتفاعل مؤشر الماوس .

- الإطار الأول Up وهو يمثل شكل الزر فى الحالة العادية بدون وجود مؤشر الماوس فوقه .

- الإطار الثانى Over وهو يمثل شكل الزر عند مرور مؤشر الماوس فوقه .

- الإطار الثالث Down وهو يمثل شكل الزر فى لحظة النقر عليه .

- الإطار الرابع Hit وهو يمثل المنطقة الفعالة فى الزر , أى المنطقة التى عندما يمر الماوس فوقها يتحول إلى شكل اليد التى نعرفه جميعا http://www.alamuae.com/up/Folder-001/1144573238_3.gif, لكى يعلم المستخدم أنه عند النقر هنا سيحدث شيئ ما مثل الذهاب إلى عنوان صفحة ويب أو تشغيل ملف موسيقى أو تحميل ملف موجود .. إلخ

http://www.alamuae.com/up/Folder-001/1144573211_2.gif

والآن لنكمل تصميم الزر حتى نفهم هذه الإطارات بشكل أوضح .

نحن الآن فى الإطار الأول , وافتراضيا يكون لدينا إطار مفتاحى Key frame فى هذا الإطار بمعنى أنه فى الحالة العادية وعند عدم استخدام الزر فسيكون ظاهرا دائما بلونه الأحمر .

- انقر على الإطار الثانى Over ثم اضغط F6 لإدراج أطار مفتاحى Key frame , وقم بتغيير لون الدائرة إلى الأزرق مثلا . ومعنى ذلك أنه عند مرور مؤشر الماوس فوق الزر سيتغير لونه من الأحمر إلى الأزرق .

- انقر على الإطار الثالث Down ثم اضغط F6 لإدراج إطار مفتاحى Key frame , وقم بتغيير لون الدائرة إلى الأسود مثلا , ومعنى ذلك أن لون الدائرة سيتغير إلى الأسود فى لحظة النقر بالماوس , وعند إفلات الماوس سيعود إلى الأزرق وعند سحب الماوس يعود للأحمر .

- انقر على الإطار الرابع Hit , ومن خلال هذا الإطار يمكننا تحديد المنطقة الفعالة التى عند مرور مؤشر الماوس فوقها يتحول إلى شكل يد , وفى الحالة الإفتراضية تكون هذه المنطقة هى الزر بالكامل , أى عند مرور مؤشر الماوس فوق أى جزء من الزر سيتحول إلى يد . ويجب أن نفهم أن هذه المنطقة الفعالة هى منطقة يتم تحديدها بأى شكل دائرة .. مربع .. مثلث .. إلخ لا يهم .فهى فى النهاية منطقة وهمية بمعنى أنها غير مرئية .

لنفرض أننا نريد أن تكون المنطقة الفعالة دائرة صغيرة فى مركز الزر , ولعمل ذلك سنقوم بتصغير الدائرة فى هذا الإطار .

1 - انقر على الإطار Hit .

2 - قم بتحديد الدائرة فى منطقة المسرح .

3 - اذهب للقائمة

Window >Info أو من لوحة المفاتيح اضغط Ctrl+I

http://www.alamuae.com/up/Folder-001/1144573280_5.gif

قم بتقليل حجم الدائرة بنفس القدر عرضا وارتفاعا , الآن جعلنا المنطقة الفعالة دائرة صغيرة داخل الدائرة الكبيرة , ولكن هل الدائرة الصغيرة فى مركز الدائرة الأكبر كما أردنا ؟ هذا السؤال لا أوجهه لك عزيزى القارئ وإنما أجهه إلى البرنامج , وعلى الفور يجيبنى فلاش مندهشا :

- كيف لى أن أعرف , أنت لم تطلب منى ذلك !

هذا صحيح , ففى كل برامج الكمبيوتر المختلفة يعطيك البرنامج فقط ماتطلبه وليس ما تتمناه !

سنحاول الآن أن نرى مكان الدائرة الصغيرة , انقر على أيقونة Onion Skin

http://www.alamuae.com/up/Folder-001/1144573307_6.gif

سنجد أن الدائرة الصغيرة تتحاذى من الناحية العليا اليسرى للدائرة الأصلية , وهذا هو الوضع الإفتراضى الذى سنقوم بتعديله

http://www.alamuae.com/up/Folder-001/1144573325_7.gif

- قم بالتراجع عن طريق Ctrl+Z عدة خطوات حتى تختفى الدائرة الصغيرة .

- فى لوح Info انقر على نقطة المركز فى لوح وضعية الرمز

http://www.alamuae.com/up/Folder-001/1144573350_8.gif

- الآن قلل حجم الدائرة عرضا وارتفاعا كما فعلنا من قبل , وشاهد النتيجة

http://www.alamuae.com/up/Folder-001/1144573371_9.gif


- انقر على أيقونة Onion Skin مرة أخرى للعودة إلى الوضع العادى .

- قم باختبار العمل .

تعيين وظيفة للزر

عند النقر على أى زر لابد من حدوث شيئ .. أى شيئ وإلا فما فائدته ؟ , لنجرب الآن مثالا بسيطا : عند النقر على الزر سيتم تشغيل ملف موسيقى .

1 - من القائمة

File > Import > Import to Library

http://www.alamuae.com/up/Folder-001/1144573466_13.gif

وقم باختيار أى ملف صوت لديك ويستحسن أن يكون بصيغة mp3 . لقد تم وضع ملف الصوت فى المكتبة .

2 - انقر نقرا مزدوجا على الزر لتدخل فى طور تحرير الزر , وانقر على إطار Down

3 - فى قسم sound فى لوح الخواص , اختر الملف الذى استوردناه للتو . واترك الخيارات الباقية كما هى .

http://www.alamuae.com/up/Folder-001/1144573533_15.gif

4 - اختبر العمل .


الزر الخفى
Invisible Button

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

1- اكتب نص من كلمة أو كلمتين .

2- سنصنع الآن زرا عبارة عن مستطيل باستخدام أداة Rectangle Tool , ولا يهم اللون لأننا فى النهاية سنحوله إلى زر خفى .

3 - قم بتحديد المستطيل ثم حوله إلى رمز من نوع Button

4 - انقر على المستطيل نقرة مزدوجة للدخول فى طور تحرير الزر .

5 - اسحب الإطار المفتاحى من إطار Up وضعه فى إطار Hit .

http://www.alamuae.com/up/Folder-001/1144573390_10.gif

6 - انقر على Scene1 أو على السهم فى منطقة Timeline للعودة إلى المشهد , وسنلاحظ أن لون المستطيل قد تغير لونه . اسحب المستطيل وضعه فوق النص .

http://www.alamuae.com/up/Folder-001/1144573411_11.gif

7 - اختبر العمل , لن نرى الزر الخفى وإنما سنرى نص على شكل زر .

http://www.alamuae.com/up/Folder-001/1144573439_12.gif

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif


Movie Clip

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

عند المقارنة سنخرج النوع الثانى وهو الزر Button من نطاق المقارنة , لأن اختلافه واضح ولا يحتاج إلى مقارنته لرؤية وجه الخلاف , فهو يتكون من 4 إطارات تعمل كلها أو أحدها بالتفاعل مع الماوس كما أوضحنا فى الدرس السابق .

يتبقى الآن أن نشرح الفرق بينه وبين النوع الأول وهو ال Graphic , لأنه دائما يحدث لبس بين هذين النوعين .

وبدلا من الشروحات النظرية التى توصلنا فى الغالب إلى دوامة من المتاهات , دعونا نفهم الأمر بشكل عملى .

1 - سنقوم الآن بإنشاء رمز جديد New Symbol, وكما تعلمنا من قبل يمكننا فعل ذلك بعدة طرق اختر منها مايحلو لك :

من لوحة المفاتيح اضغط Ctrl+F8

أو من القائمة Insert > New Symbol

أو فى أسفل لوح المكتبة Library انقر على أيقونة New Symbol ( وهى آخر الأيقونات فى اليسار ) .

وفى أى من هذه الحالات ستظهر لوحة Create New Symbol

قم بتسمية الرمز Container واختر نوعه Graphic , ثم اضغط Ok.

http://www.alamuae.com/up/Folder-001/1144573584_1.gif


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

2- نحن الآن فى منطقة تحرير الرمز حيث تجد مساحة بيضاء فارغة ولا نرى حدود المسرح ( لأننا ببساطة لم نعد فى مسرح المشهد وإنما نحن فى المسرح الخاص بالرمز ) , قم برسم دائرة وحددها ثم حولها إلى رمز من نوع Graphic كما تعلمنا من قبل , ثم انقر على الإطار رقم 30 واضغط F6 لإدراج إطار مفتاحى Key frame , ثم قم بتغيير موضع الدائرة إلى الجهة المقابلة , ثم انقر على الإطار الأول من جديد واختر من قائمة Tween فى الخصائص نوع Motion ( أعتقد أنه لا حاجة لشرح ذلك بالصور لأننا شرحنا ذلك بالتفصيل فى درس سابق ويمكنك العودة إليه مرة أخرى لتتذكر التفاصيل ) .

ولكن ينبغى أن نتوقف الآن عند نقطة هامة ذكرتها منذ قليل , وهى أننا سنضع داخل الرمز شيئا سيكون مفاجأة بالنسبة لك , لقد وضعنا داخل الرمز الأصلى رمزا آخر , ومادمنا قد اتفقنا أن الرمز ماهو إلا صندوق فمالذى يمنعنا من وضع صندوق داخل صندوق آخر ! وهذا يسمى فى لغة فلاش Nesting , وهو مصطلح يعنى وضع شيئ داخل العش . ويمكنك عن طريق وضع الرموز داخل بعضها عمل فلاشات بتأثيرات مذهلة ماكانت لتتم إلا بهذه الطريقة .

3 - عد الآن إلى المشهد بالنقر علىScene 1 أو النقر على السهم فى منطقة خط الزمن Timeline , وبالطبع ستجد أن المسرح خال لأننا قمنا بتصميم الرمز فى المكتبة وليس فى المسرح , لذا قم بسحب الرمز Container من المكتبة إلى المسرح .

4 - الآن اضغط Ctrl+Enter لاختبار العمل فى بيئة Flash Player , واستعد للمفاجأة ..

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

انقر نقرة مزدوجة بأداة التحديد على رمز الدائرة فى المسرح لتدخل فى الزمن الخاص بالرمز .

http://www.alamuae.com/up/Folder-001/1144573622_2.gif


كل شيئ يبدو على مايرام , الإطارات من 1 حتى 30 لونها أزرق فاتح وبها سهم دلالة على أن لدينا Motion Tween , ولكى نتأكد أكثر قم بتحريك رأس التشغيل Playhead من الإطار الأول إلى الأخير لتجد أن الحركة موجودة , ولكى نتأكد أكثر وأكثر اذهب للقائمة

Window > Toolbars > Controllers

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

لدينا إطارا واحدا فقط , إذن كيف بالمنطق أن نتوقع حدوث حركة تحتاج إلى 30 إطارا فى إطار واحد ؟

ولتصحيح ذلك الخطأ - المقصود ! - انقر على الإطار رقم 30 ثم اضغط F5 من لوحة المفاتيح ( لتمديد زمن الإطار الأول حتى الإطار رقم 30 )

http://www.alamuae.com/up/Folder-001/1144573656_3.gif

الآن اختبر العمل بالضغط على Ctrl+ Enter , ولا تخف .. لا توجد مفاجآت هذه المرة .

والآن لنرى ماذا كان سيكون الحال لو أن رمز Container هو من نوع Movie Clip بدلا من Graphic

5 - اضغط Ctrl+Z للتراجع حتى نعود للإطار الواحد . ثم انقر على الرمز لتحديده ومن لوحة المفاتيح اضغط Delete لإلغاؤه .

http://www.alamuae.com/up/Folder-001/1144573678_4.gif

اذهب للمكتبة وانقر بالزر الأيمن للماوس على رمز Container واختر من القائمة

Type > Movie Clip

لقد غيرنا نوع الرمز من Graphic إلى Movie Clip , ونلاحظ أنه لايزال يحتفظ بداخله برمز الدائرة والحركة من نوع Motion Tween .

اسحب الرمز إلى المسرح , ثم اضغط Ctrl+ Enter لاختبار العمل فى بيئة Flash Player .

الآن توجد حركة بالرغم من وجود إطار واحد فقط , لماذا ؟ لأن الـ Movie Clip له زمنه الخاص المستقل عن زمن المشهد الأساسى . أى أننا يمكن اعتبار أن الـ Movie Clip

هو عبارة عن فيلم صغير نضعه داخل فيلم فلاش .

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif


الطبقات
Layers


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

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

والآن تعالوا لنتعرف على أيقونات لوح الطبقات.

http://www.alamuae.com/up/Folder-001/1145224738_1.gif


1 – يجعل فلاش لكل طبقة مربعا ذو لون مختلف وذلك للتمييز بين الطبقات , كما أن لذلك المربع الملون وظيفة هامة أخرى.. فعند النقر على المربع تصبح الكائنات فى الطبقة عبارة عن تحديدات بخطوط خارجية فقط دون لون ملء أى تصبح Outlines, وكمثال لدينا الشكل التالى , انظروا له فى الحالة العادية , ثم بعد النقر على المربع المذكور .

http://www.alamuae.com/up/Folder-001/1145224790_2.gif

http://www.alamuae.com/up/Folder-001/1145224825_3.gif

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

ولتطبيق هذا الأمر على كل الطبقات ماعدا الطبقة الحالية , اضغط Alt أثناء النقر على المربع .

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

ولتطبيق هذا الأمر على كل الطبقات ماعدا الطبقة الحالية , اضغط Alt أثناء النقر على النقطة .

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

ولتطبيق هذا الأمر على كل الطبقات ماعدا الطبقة الحالية , اضغط Alt أثناء النقر على النقطة .

4 – اسم الطبقة , انقر نقرة مزدوجة لتغيير الإسم كما تريد , ويفضل أن يكون الإسم دالا على مهمة الطبقة أو على الكائنات الموجودة بها وهذا سيساعدك كثيرا أثناء التصميم أو فى المستقبل عند إجراء أى تعديلات إضافية . مثلا يستحسن وضع الأكشن Action فى طبقة مستقلة وفى هذه الحالة سيتم تسمية الطبقة Action أو الإكتفاء بحرف a كما يفعل المحترفون .

5 – أيقونة تدل على نوع الطبقة , كما أن النقر عليها يظهر نافذة خصائص الطبقة
http://www.alamuae.com/up/Folder-001/1145224854_4.gif


أتمنى أن يكون الشرح داخل الصورة واضحا ولا يحتاج إلى تعليق إضافى .

ولكن سنتوقف قليلا عند أنواع الطبقات :

Normal الطبقة العادية , وهى الطبقة الإفتراضية .

Guide طبقة دليلية , وقد استعملناها فى درس الحركة باستخدام مسار . وفى نفس مفهوم الطبقة الدليلية تأتى الطبقة التى تتبعها وسيكون نوعها Guided . وأيضا تعرفنا عليها فى نفس الدرس المذكور .

Mask طبقة قناع وسيأتى ذكرها فى درس قادم بإذن الله.

والنوع الذى يلى ذلك هو Masked وبديهى أنها طبقة مرتبطة بطبقة القناع .

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

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

http://www.alamuae.com/up/Folder-001/1145224880_5.gif

لاحظوا أن الطبقة Guide لها أيقونتان , العلوية عندما يكون هناك طبقة تتبعها دليليا أى Guided Layer , والطبقة الأخيرة هى الطبقة الدليلية فور إنشائها وقبل وجود طبقة تتبعها .

6 – لإلغاء طبقة , قم بالنقر عليها لتحديدها ثم انقر على هذه الأيقونة , أو اسحب الطبقة إلى هذه الأيقونة .

7 – لإضافة طبقة مجلد Layer Folder Insert

8 – لإضافة طبقة دليلية Motion Guide Insert

9 - لإضافة طبقة عادية Insert Layer


التحكم فى كل الطبقات دفعة واحدة

انظر للشرح داخل الصورة .
http://www.alamuae.com/up/Folder-001/1145224911_6.gif

المزيد من التحكم فى الطبقات

حدد أى طبقة وانقر بالزر اليمن للماوس حيث تظهر قائمة بالخيارات العديدة :

http://www.alamuae.com/up/Folder-001/1145224933_7.gif

1 – إظهار كل الطبقات

2 – قفل الطبقات الأخرى

3 – إخفاء الطبقات الأخرى

4 – إدراج طبقة جديدة

5 – إلغاء الطبقة

6 – تحويل هذه الطبقة إلى طبقة دليلية

7 – إضافة طبقة دليلية

8 – تحويل هذه الطبقة إلى طبقة قناع

9 – إظهار القناع

10 – إضافة طبقة مجلد

11 – إلغاء طبقة المجلد المحددة

12- توسيع طبقة المجلد بإظهار الطبقات التى بداخله

13 – تقليص طبقة المجلد بإخفاء الطبقات التى بداخله

14 - توسيع كل طبقات المجلدات وإظهار الطبقات التى بداخلها

15 – تقليص كل طبقات المجلدات وإخفاء الطبقات التى بداخلها

16 – إظهار لوحة خصائص الطبقة .

ملحوظة :
لوضع طبقة داخل طبقة مجلد , اسحب الطبقة إلى طبقة المجلد , وبنفس الطريقة يمكنك جعل طبقة تتبع طبقة دليلية .

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif
Mask

القناع

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

1 – سنقوم بتصغير الملف قليلا , من القائمة :

Modify > Document

( أو من لوحة المفاتيح اضغط Ctrl+J )

(أو انقر مرتين على مربع Frame Rate فى Time Line )

وفى كل الأحوال ستظهر لك النافذة التالية ومنها قم بتغيير مقاس الملف كما فى الصورة

http://www.alamuae.com/up/Folder-001/1144573717_Mask0.gif

2- من القائمة

File > Import > Import to Stage

http://www.alamuae.com/up/Folder-001/1144573755_Mask1.gif

( أو من لوحة المفاتيح اضغط Ctrl+R )

ثم اختر صورة لوضعها فى مسرح العمل .

3 – نريد الآن توسيط الصورة فى نقطة المركز فى المسرح , إذن سنذهب للقائمة

Window > Align

(أو من لوحة المفاتيح اضغط Ctrl+K )

سظهر لوح Align فى منطقة الألواح على يمين المسرح , ولاحظ أنه 3 ألواح فى داخل لوح واحد :

Align , Transform , Info

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

قم باختيار لوح Align ثم انقر على To Stage لأننا نريد أن تكون المحاذاة بالنسبة للمسرح , ثم اختر

Align Horizontal Center , Align Vertical Center كما فى الصورة

http://www.alamuae.com/up/Folder-001/1144573801_Mask2.gif

14

--------------------------------------------------------------------------------




Mask

القناع


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

1 – سنقوم بتصغير الملف قليلا , من القائمة :

Modify > Document

( أو من لوحة المفاتيح اضغط Ctrl+J )

(أو انقر مرتين على مربع Frame Rate فى Time Line )

وفى كل الأحوال ستظهر لك النافذة التالية ومنها قم بتغيير مقاس الملف كما فى الصورة




2- من القائمة

File > Import > Import to Stage



( أو من لوحة المفاتيح اضغط Ctrl+R )

ثم اختر صورة لوضعها فى مسرح العمل .

3 – نريد الآن توسيط الصورة فى نقطة المركز فى المسرح , إذن سنذهب للقائمة

Window > Align

(أو من لوحة المفاتيح اضغط Ctrl+K )

سظهر لوح Align فى منطقة الألواح على يمين المسرح , ولاحظ أنه 3 ألواح فى داخل لوح واحد :

Align , Transform , Info

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

قم باختيار لوح Align ثم انقر على To Stage لأننا نريد أن تكون المحاذاة بالنسبة للمسرح , ثم اختر

Align Horizontal Center , Align Vertical Center كما فى الصورة




( ملحوظة : لكثرة الأزرار فى هذا اللوح فقد تصاب بالهلع لأول وهلة , ولكن خذ الأمور ببساطة , فقط ضع مؤشر الماوس فوق أى زر لتظهر لك لوحة تخبرك عن وظيفة هذا الزر )

4 - الأن لدينا الصورة تتوسط المسرح تماما .

http://www.alamuae.com/up/Folder-001/1144573831_Mask3.gif

5 – انقر على زر Insert Layer لإضافة طبقة جديدة فوق الطبقة الحالية وقم بتسميتها Mask ( بالنقر مرتين على اسم الطبقة ) , ثم قم برسم دائرة فوق الصورة بحيث تغطى الوجه تماما ويستحسن أن تضغط مفتاح Shift أثناء الرسم للحصول على دائرة منتظمة وليكن لون الدائرة بأى لون ملء ولكن بدون لون تحديد , لماذا بدون لون تحديد , السبب أن فلاش لا يتعرف على لون التحديد فى القناع وإنما يرى لون الملء فقط . ثم قم بجعل الدائرة فى منتصف المسرح كما تعلمنا من قبل .

http://www.alamuae.com/up/Folder-001/1144573858_Mask4.gif

6 – لازالت الطبقة Mask هى الفعالة , الآن انقر على الإطار 25 فى شريط الزمن وانقر على مفتاح F6 لإضافة إطار مفتاحى .

7 - انقر على الإطار رقم 1 فى شريط الزمن الخاص بالطبقة , ثم فى لوح Transform (الذى هو ضمن لوح Align المفتوح سلفا ) اجعل حجم الدائرة بنسبة 10 % من الحجم الأصلى وتأكد بأن المربع Constrain مختارا وذلك لجعل التغيير فى الحجم متساويا فى الطول والعرض

http://www.alamuae.com/up/Folder-001/1144573887_Mask5.gif

الآن لدينا الدائرة التى كانت تحجب الوجه وقد تحولت إلى دائرة صغيرة جدا جدا فى مركز الصورة .

7 – الإطار رقم 1 لازال فعالا , اذهب إلى Properties ومن نافذة Tween اختر النوع Shape .


http://www.alamuae.com/up/Folder-001/1144573906_Mask6.gif

ستجد أن شريط إطارات الطبقة أصبح بهذا الشكل

http://www.alamuae.com/up/Folder-001/1144573927_Mask7.gif

8 – انقر على الطبقة الأولى التى هى طبقة الصورة , ثم انقر على الإطار 25 , بالطبع الصورة اختفت , ولإظهارها نحتاج أن نقوم بتمديد الزمن الخاص بها , ولعمل ذلك اضغط على F5 فى لوحة المفاتيح وبذا نكون قد أضفنا إطارات بين الإطار 1 والإطار 25 .

يمكن إضافة إطارات أيضا بالذهاب إلى القائمة : Insert > Timeline > Frame

أو انقر بالزر الأيمن للماوس واختر Insert Frame

الآن ستظهر الصورة عند آخر إطار .

9 – انقر مرة أخرى على طبقة القناع بالزر الأيمن للماوس واختر Mask , حيث ستلاحظ التغير التالى فى شكل كلا الطبقتين مع وجود قفل عليهما

http://www.alamuae.com/up/Folder-001/1144573953_Mask8.gif

10 – اضغط Ctrl+Enter لإختبار الفيلم .

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif

Actions And ActionScript

مـقــدمـــة


رأت لغة ActionScript النور لأول مرة فى الإصدار Flash 4 ثم تطورت بعد ذلك لتصبح لغة برمجة غرضية التوجه OOP , لقد أضافت شركة Macromedia إجراءات ووظائف جديدة إلى هذه اللغة وعملت على تطوير محتواها بشكل مشابه للغة JavaScript , ورغم ذلك لا ينبغى الخلط بين اللغتين .

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

يمكنك أن تربط تعليمات ActionScript إلى إطار مفتاحى فى شريط الزمن أو إلى كائن على المسرح من خلال لوحة الإجراءات Actions .

ولفتح لوح Actions يكفى أن تضغط F9 من لوحة المفاتيح أو اضغط على شريط Actions أسفل المسرح .

يمكننا تقسيم لوح Actions إلى 5 مناطق رئيسية , 4 منهم يظهرون أمامك الآن والمنطقة الخامسة تظهر عند استخدام المساعد أو Script Assist .

http://www.alamuae.com/up/Folder-001/1145601753_1.gif

والآن لنتعرف على الأقسام الأربعة الأولى :

1 - فئات Actions المختلفة . ويمكنك الوصول إليها أيضا بالنقر على السهم الصغير فى الأيقونة الموضحة فى الصورة التالية :

http://www.alamuae.com/up/Folder-001/1145601800_2.gif

2 - الـ Actions التى تستعملها فى فيلمك الحالى .

3 - منطقة الScript أو كتابة الكود الخاص بلغة ActopnScript

4 - شريط معلومات عن رقم السطر الحالى وعدد الأسطر الإجمالية وماهو الرمز المتعلق بهذا الكود .

Script Assist

بالنقر على خيار المساعد تبرز منطقة فوق منطقة Script , ويوجد بتلك المنطقة كل الخيارات المتعلقة بالأمر الذى اخترته ,ببساطة قم بتحديد أى سطر من أسطر الكود Script لتجد المساعدة الخاصة به فى نافذة Script Assist , وعندئذ بدلا من تعديل الكود بالكتابة مباشرة , يمكنك عمل التعديل فى الخيارات المتاحة وعندها يقوم البرنامج بالنيابة عنك بتعديل الكود وفقا لذلك , مثلا فى الصورة التالية تجد المساعدة بخصوص الأمر on release, فالمفترض أن يضغط المستخدم على الزر ثم يفلت زر الماوس وهذا هو الفعل release وهو الوضع الذى يجعله البرنامج افتراضيا من أوضاع الزر المختلفة , ويضع لذلك الكود الخاص فى أول أسطر السكريبت .

http://www.alamuae.com/up/Folder-001/1145601839_3.gif

ولكن يمكنك تغيير ذلك إذا أردت , فمثلا أنت تريد حدوث الحدث عند مرور الماوس فوق الزر , وفى هذه الحالة قم بإلغاء تحديد مربع Release وحدد مربع Roll Over بدلا منه . أو ربما تريد لأن تضع مفتاح اختصار من لوحة المفاتيح يؤدى نفس عمل الضغط على الزر نفسه , وفى هذه الحالة اختر Key Press , أو تريد أن يحدث الحدث عند الضغط على الزر وقبل إفلاا الماوس وفى هذه الحالة تختار press وهكذا ..
وعندما تربط إطارا بأكشن معين فإن البرنامج يضع حرف a فى ذلك الإطار للدلالة على وجود أكشن مرتبط بالإطار .

وأخيرا : تعود أن تجعل الأكشن فى طبقة خاصة فى أعلى الطبقات لتصل إليها بسهولة أثناء التصميم واجعل لهذه الطبقة اسم a

كانت هذه مقدمة بسيطة عن Action Script , وسيكون هناك المزيد من الشرح فى الدروس القادمة فتابعوا معنا .

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif

القوائم المنبثقة

Popup Menu


اليوم سأقدم لكم تطبيقا نستخدم فيه الأكشن بطريقة عملية حيث سنتعلم كيفية عمل القوائم المنبثقة أو باللغة الإنجليزية Popup Menu , وهى عبارة عن عناوين عند مرور الماوس فوقها تظهر عناوين أخرى فرعية , وهو أمر شائع استخدامه فى الإنترنت .

1 – قم بإنشاء رمز جديد من نوع Movie Clip بالنقر على الأيقونة الخاصة بذلك أسفل لوح المكتبة , وقم بتسميته mcMenu , و mc هى اختصار ل Movie Clip , وكما قلت من قبل لك الحرية فى التسمية ولكن من الأفضل أن يكون الإسم له معنى بحيث يساعدك ذلك عند ازدحام العمل بالأسماء .

http://www.alamuae.com/up/Folder-001/1145601886_1.gif

2 – وعلى الفور ستجد نفسك فى المسرح الخاص بالرمز ( والدليل على ذلك أنك الآن لا ترى حدود المسرح الأصلى , وإنما ترى مساحة ضخمة بيضاء ).

قم بكتابة 3 نصوص مثلا : دروس , برامج , كتب , وبالطبع فلاش لا يدعم اللغة العربية ( منذ البداية وحتى الآن ! ) , لذلك يمكنك الاستعانة ببرنامج مثل الرسام أو الوسيط .

http://www.alamuae.com/up/Folder-001/1145601937_2.gif

3 – يمكنك ظبط المحاذاة للكلمات الثلاثة باستخدام Align , اذهب للقائمة :

Window > Align

ثم انقر على Align Vertical Center

http://www.alamuae.com/up/Folder-001/1145601976_3.gif

4 – بأداة التحديد انقر على كلمة دروس لتحديدها ثم اضغط F8 لتحويلها إلى رمز من نوع زر Button , وقم بتسميته Lessons .

افعل الشيء نفسه مع كلمة برامج وقم بتسمية الرمز Programs

وكلمة كتب وقم بتسمية الرمز Books

5 – انقر على كلمة دروس مرتين لتدخل فى منطقة تحرير الرمز الذى هو من نوع زر كما اتفقنا , وستجد الكلمة لا تزال محددة , اضغط F8 وقم بتحويله إلى رمز من نوع Graphic وقم بتسميته Lessons2 .

لقد حولناه إلى رمز من هذا النوع لنغير من لونه فى كل وضع من أوضاع الزر الثلاث : الوضع العادى, وعند مرور الماوس فوقه , وعند النقر عليه .

انقر على الإطار Over للزر ثم اضغط F6 من لوحة المفاتيح لإدراج إطار مفتاحى Key frame .

http://www.alamuae.com/up/Folder-001/1145601999_4.gif

انقر على الرمز فى المسرح لتحديده ثم من لوح الخصائص فى أسفل المسرح اذهب للقائمة

Color > Tint

وقم بتغيير اللون كما تريد .

http://www.alamuae.com/up/Folder-001/1145602022_5.gif

ثم افعل نفس الشيئ مع الإطار Down .

- انقر على الرمز برامج نقرة مزدوجة وقم بتحويل الكلمة إلى رمز من نوع Graphic كما فعلنا من قبل وقم بتسميته Graphic2 , وقم بتغيير اللون فى الإطارات الثلاث كما فعلنا مع الزر الأول , أيضا نفس السيئ مع الزر Books وقم بتسمية الرمز الجديد Book2 وقم بتغيير اللون كما سبق .

قم الآن بتسمية تلك الطبقة Buttons لأننا سنضع فيها الأزرار . ثم قم بإضافة طبقة أخرى اسمها Bars , انقر على الطبقة لتحديدها ثم باستعمال أداة Line Tool قم بعمل خطين عموديين يفصلان بين العناوين الثلاثة .

http://www.alamuae.com/up/Folder-001/1145602046_6.gif

- انقر على Scene 1 للخروج من منطقة تحرير الرمز الأصلى mcMenu و وبالطبع ستجد المسرح فارغا وأنت الآن أصبحت خبيرا وتعرف الإجابة أفضل منى .

اسحب الرمز mcMenu من المكتبة إلى المسرح .

يمكنك الآن اختبار العمل فى مرحلته الأول , اضغط Ctrl+L , وستجد أنه عند مرور الماوس فوق العنوان أو النقر عليه يتغير لون العنوان .

6 – الآن سنقوم بإضافة طبقتين أخريتين , طبقة من أجل عناوين الإطارات Labels وسنسميها L والثانية من أجل Action Script وسنسميها A .

http://www.alamuae.com/up/Folder-001/1145602078_7.gif

مالمقصود بعناوين الإطارات Frame Labels ؟

يمكنك وضع عنوان أو تسمية لأى إطار شرط أن يكون من نوع Keyframe أو Blank Keyframe, فبدلا من أن يكون الإطار الثانى اسمه Frame 2 يمكنك تسميته colorChange مثلا إذا كنت تنوى عمل تغير فى اللون عنده , وفى الحقيقة نحن نقوم بتسمية الإطارات التى يحدث عندها تغييرات وهى الإطارات المفتاحية Keyframes ولذلك أهمية بالغة , فمثلا إذا ربطت اكشن مثب goto بالإطار 25 ثم رأيت أثناء التصميم أنك تريد حذف 5 إطارات قبل الإطار 25 , فى هذه الحالة سيصبح الإطار 25 هو الإطار 20 , ولكن الأكشن goto لايزال يستدعى الإطار 25 الذى لم يعد موجودا أصلا , فى هذه الحالة سيتوقف الفيلم , ولكن إذا ربطنا الأكشن بإطار اسمه DrBahaa مثلا , فسيتم الإرتباط بهذا الإطار أيا كان ترتيبه بين الإطارات .

ولتسمية إطار نكتب الإسم فى خانة Frame Label له فى لوح الخواص Properties .

http://www.alamuae.com/up/Folder-001/1145602101_8.gif

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

8 – فى طبقة L انقر سنضع إطار مفتاحى كل عشرة إطارات , إضغط F6 عند الإطار 10 و20 و30 , ثم عند الإطار 40 اضغط F5 لإضافة إطارات عادية لتمديد فترة ظهور آخر إطار مفتاحى .

http://www.alamuae.com/up/Folder-001/1145602135_9.gif

9 – الآن نحن نريد أن تظهر العناوين والخطوط الفاصلة أيضا حتى الإطار الأخير , لذا حدد الإطار 40 فى كل من الطبقتين Bars , Buttons بالسحب بالماوس لأسفل .

http://www.alamuae.com/up/Folder-001/1145602163_10.gif

10 – اضغط F5 لإضافة إطارات عادية , نحن لن نحتاج إلى إطارات مفتاحية لأن العناوين والفواصل لن يحدث بها أى تغيير طول الفيلم .

11 – انقر على الإطار 10 ثم اذهب إلى Frame Label وقم بتسميته lessons , والإطار 20 قم بتسميته programs والإطار 30 قم بتسميته books , وستجد أن أسماء الإطارات ظهرت أيضا فى منطقة الإطارات فى خط الزمن .

ملحوظة : كقاعدة عامة يستحسن أى يكون هناك أى فراغ فى اسم الإطار ولو كان لديك اسم مكون من كلمتين مثل My Books مثلا فيمكنك جعل الحرف الأول من الكلمة الأولى صغير والحرف الأول من الكلمة الثانية كبير Capital ليدل على بداية كلمة ثانية فيصبح لدينا myBooks .

http://www.alamuae.com/up/Folder-001/1145602191_11.gif

12 – الآن سنقوم بعمل أول أكشن , انقر على الإطار فى طبقة A ثم اذهب لقسم الأكشن أسفل المسرح واختر الخيار Stop

http://www.alamuae.com/up/Folder-001/1145602216_12.gif

وفائدة ذلك أننا لا نريد أن يعمل الفيلم إلا عند التفاعل مع الماوس .

12 – انقر على الطبقة Bars لتحديدها ثم انقر على أيقونة إضافة طبقة جديدة لتصبح الطبقة الجديدة فوق الطبقة المحددة , وقم بتسميتها subMenu .وفى هذه الطبقة سنضع العناوين الفرعية التى تظهر عند مرور الماوس فوق العناوين الرئيسة .

فى الطبقة الجديدة subMenu انقر على الإطار 10 وقم بإدراج إطار مفتاحى بالضغط على F6 ( لاحظ أن الإطار الأول تركناه كما هو Blank Key Frame , لأنه فى الحالة الإفتراضية لا تظهر العناوين الفرعية إلا فى حالة مرور الماوس فوق العناوين الرئيسة ) قم بوضع 3 نصوص كما فى الصورة .

http://www.alamuae.com/up/Folder-001/1145602240_13.gif

عند الإطار 20 اضغط F6 وقم بحذف العناوين الفرعية عن طريق تحديدها ثم اضغط Delete من لوحة المفاتيح , وقم بإنشاء 3 نصوص أخرى .

كرر الأمر عند الإطار 30 .

13 – قم بقفل طبقة subMenu وانقر على طبقة Buttons لتفعيلها , ثم انقر على العنوان الأول وهو: دروس . الآن سنضع إجراء فى Action .

تأكد أن Script Assist فعالا واذهب للإجراء :

Global Functions > Timeline Control > Goto

http://www.alamuae.com/up/Folder-001/1145602281_14.gif

سيضع البرنامج هذا الأمر فى سطرين

http://www.alamuae.com/up/Folder-001/1145602306_15.gif

وسنقوم بتعديل كل سطر لملائمة احتياجاتنا .

إن البرنامج يجعل حدوث الأكشن عند النقر على الزر , ولكننا نريد بدلا من ذلك , أن يحدث الأكشن عند مرور الماوس فوق الزر , لذا انقر على السطر الأول لتحديده

وفى Script Assist قم بإلغاء التحديد الإفتراضى وحدد Roll Over كما فى الصورة

http://www.alamuae.com/up/Folder-001/1145602328_16.gif

انقر على السطر الثانى فى الأمر وهو GotoAndPlay(1) , نحن نريد أن نستبدل رقم الإطار بعنوان الإطار وهو lessons , كما أننا نريد الذهاب للإطار والتوقف بدلا من التشغيل , لذلك اذهب مرة أخرى إلى Script Assist وقم بتغيير ذلك كما فى الصورة التالية

http://www.alamuae.com/up/Folder-001/1145602362_17.gif

14- نريد أن نجعل العناوين الفرعية تظهر عند الحاجة إليها وتختفى عند ابتعاد الماوس لذا سنضيف الآن طبقة جديدة وليكن اسمها Hide مثلا , اغلق باقى الطبقات الأخرى , والآن انقر على الإطار 10 فى الطبقة الجديدة , وأدرج إطار مفتاحى , ثم قم برسم مستطيل أحمر اللون يغطى العناوين , ويجب أن يكون المستطيل بدون خط خارجى Stroke .

http://www.alamuae.com/up/Folder-001/1145602405_18.gif

15 – قم بتحويل المستطيل إلى Outline بالنقر على المربع الخاص بذلك فى الطبقة

http://www.alamuae.com/up/Folder-001/1145602432_19.gif

16 – قم باختيار اللون الأسود ثم ارسم مستطيل لتحديد كلمة دروس ومستطيل آخر متداخل معه لتحديد العناوين الفرعية وسيصبحا تحديدا واحدا أوتوماتيكيا . انقر مرة أخرى على مربع Outline لإلغاؤه وسيظهر التحديد باللون الأسود , قم بتحديده ثم انقر Delete من لوحة المفاتيح .

http://www.alamuae.com/up/Folder-001/1145602456_20.gif

الآن لديك تحديد أحمر مجوف يظهر من خلاله العناوين , انقر على هذا التحديد وقم بحويله إلى رمز من نوع Button , ثم انقر عليه مرتين للدخول فى طور تحريره .

سنقوم بتحويل الزر إلى زر مخفى كما تعلمنا من قبل , ولعمل ذلك اسحب غلإطار المفتاحى من الإطار الأول إلى الإطار الأخير Hit

أضغط هنا لترى الصورهـ (http://www.alamuae.com/up/Folder-001/1145602485_21.gif)

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


أضغط هنا لترى الصورهـ (http://www.alamuae.com/up/Folder-001/1145602512_22.gif)

كرر الأمر مع العناوين الأخرى لعمل زر مخفى لكل منهما .

الآن انقر على المسرح مرة ثم انقر على الزر المخفى لتحديده وتحديد كل إطاراته

أضغط هنا لترى الصورهـ (http://www.alamuae.com/up/Folder-001/1145602582_22-.gif)

ثم اذهب للأكشن وتأكد أن Script Assist فعالا ثم اختر الأمرين كما سبق وقم بالتعديل ليصبح الكود النهائى هكذا . قم بنسخ ولصق الكود للزرين الأخريين .

أضغط هنا لترى الصورهـ (http://www.alamuae.com/up/Folder-001/1145602626_23.gif)

وبذا نكون قد أنهينا عمل القوائم المنبثقة Popup Menu

[snIIns]

http://www.alamuae.com/up/Folder-001/1144574337_TheLogo.gif

تمرير النص


سنشرح هنا طريقة عمل نص له شريط تمرير Scroll bar به زر للتمرير لأعلى والآخر للتمرير لأسفل .

http://www.alamuae.com/up/Folder-001/1145602668_1.gif

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

File > Import to stage

أو يمكنك ببساطة استعمال أزرار من فلاش , اذهب للقائمة

Window > Common Libraries > Buttons

http://www.alamuae.com/up/Folder-001/1145602709_2.gif

وقم باختيار هذا الزر مثلا

http://www.alamuae.com/up/Folder-001/1145602737_3.gif

وعن طريق أداة Transform قم بتغيير إتجاهه للأعلى , ثم قم بعمل نسخة منه عن طريق سحبه بالماوس وأنت ضاغط على مفتاح Alt , وقم بتدوير النسخة للإتجاه المعاكس .

وللدقة فى العمل اجعل الشريط فى طبقة وأغلقها , واجعل الأزرار فى طبقة مستقله فوقها .

وسنسمى الزر العلوى Up والسفلى Down

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

ثم اختر من القائمة

Text > Scrollable

http://www.alamuae.com/up/Folder-001/1145602764_4.gif

سيظهر مربع أسود فى الركن الأيمن السفلى للنص دليلا على أن النص له الخاصية Scrollable , أى يمكن تمريره .

قم بنسخ أى نص لديك ثم الصقه فى مربع النص

http://www.alamuae.com/up/Folder-001/1145602801_5.gif

ثالثا - فى لوح الخصائص يجب تحديد صفات النص لنتمكن من تمريره :

1 – يجب أن يكون من النوع Dynamic

2 – يجب إعطاؤه إسما لإستعماله فى Action Script

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

http://www.alamuae.com/up/Folder-001/1145602885_6.gif

4 – يجب أن نختار خاصية Multiline .

5 – يستحسن تحديد اتجاه النص تبعا لنوع اللغة .

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

ActionScript 2.0 Classes > Movie > TextField > Properties > Scroll

http://www.alamuae.com/up/Folder-001/1145602915_7.gif

فى Script Assist قم بتغيير الجملة not_set_yet إلى الإسم الذى منحته للنص .

http://www.alamuae.com/up/Folder-001/1145602941_8.gif

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

http://www.alamuae.com/up/Folder-001/1145602963_9.gif

انقر على الزر العلوى وافعل الشيئ نفسه مع الفرق أننا سنضع علامتى ناقص -- فى نهاية الجملة .

والآن انتهى الدرس , قم باختبار عملك .

http://www.alamuae.com/up/Folder-001/1145602996_10.gif