دورة إحتراف فلاش 8******** flash 8

]مقدمة

كان أول إصدار لبرنامج 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

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





ونتيجة لإستخدام Flash اسلوب الرسوم المتجهة Vector Graphics فهو يقدم للإنترنت ملفات صغيرة الحجم نسبيا , فبدلا من تحريك بيكسلات عديدة من نقطة 1 إلى نقطة 2 , سيعدل Flash الصيغة الرياضية بكل بساطة , وبالتالى يتحرك الشكل بنعومة وفاعلية .

إذن لبرنامج فلاش 3 سمات هامة تميزه وتميز طبيعة عمله :

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

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

[size=16]ملفات Flash

هناك ملفان هامان سنتعامل معهما كثيرا فى Flash :

الأول - هو الملف الذى تنشيئ فيه مشروعك من أجل إنتاج الفيلم ويكون هذا الملف بإمتداد fla وهذا الملف لا يتم فتحه أوالتعديل فيه إلا بواسطة برنامج Flash نفسه .

الثانى - هو ملف الفيلم المنتج ويتم تشغيله بواسطة Flash Player أو بواسطة متصفح مثل Internet Explorer ويكون هذا الملف بإمتداد swf وهى اختصار لـ Shockwave Format أو Small Web Format .

انظر للصورة التالية للتعرف على الإختلاف بين شكل الملفين :

1 - ملف بصيغة fla

2 - ملف بصيغة swf



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

ولحفظ ملف الفلاش بصيغة fla نستعمل الطريقة المعروفة للحفظ فى أى برنامج
File > save as
أو
File > save
فى البداية سيطلب منك البرنامج إسما للملف , وبعد ذلك يمكنك حفظه بنفس الإسم فى كل مرة تستعمل فيها save , أما إذا أردت بعد عمل تعديلات أن تحتفظ بالملف الأصلى خاليا من التعديلات مثلا وحفظه كملف جديد بإسم جديد ورؤية نتائج التعديلات دون أن تفسد الملف الأصلى فيمكنك استعمال
save as



أما إذا أردت تحويل الملف إلى فيلم نهائى يمكن تشغيله بمشغل فلاش أو على صفحات النت , نذهب للقائمة
File > Export >Export Movie




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



كيفية الحصول على البرنامج


انتظرونا في الحلقة القادمة ان شاء الله تعالي

الأدوات - 1








1 - Selection Tool V



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

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



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



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

اتفاقية :

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






2 - Subselection Tool A




يمكنك بواسطتها إجراء تعديلات على الشكل عن طريق مقابض التحكم







3 - Free Transform Q



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



1 - Snap to objects وتم شرحها منذ قليل .
2 - Rotate and skew , حيث يمكنك عمل تدوير للكائن , أو تغيير زواياه كتحويل المستطيل إلى متوازى مستطيلات مثلا .إنه تشويه ولكن بكشل متناسق إلى حد ما.
3 - Scale تغيير أبعاد الكائن عرضا أو ارتفاعا
4 - Distort لعمل تشويه بشكل حر وغير متناسق لو أحببت .
5 - Envelop : تحديد الكائن بالعديد من النقاط التى لها مقابض تحكم والتى تتيح التغيير فى شكل الكائن بحرية أكبر .





4 - Gradient Transform Tool F



وهى نفسها أداة Fill Transform فى الإصدارات السابقة مع عمل بعض التعديلات الطفيفة عليها


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




5 - Line Tool N



لرسم الخطوط .وبالطبع كما فى أغلب برامج الرسم اضغط Shift أثناء الرسم لجعل الخط أفقيا أو رأسيا أو بزاوية 45 .
ولهذه الأداة خيارات فى لوح Properties (انظر أداة القلم الرصاص )




6 - Lasso Tool L



للتحديد بشكل حر .ويظهر لهذه الأداة الخيارات التالية أسفل صندوق الأدوات :



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





7 - Pen Tool P



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




8 - Text Tool T



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




9 - Oval Tool O



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




10 - Rectangle Tool R



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

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



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

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



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


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


ولو حاولنا تحريك أى عنصر منهما بمفرده نلاحظ أنه يتحرك بمعزل عن العنصر الآخر كما فى الصورة التالية :

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

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



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

ولم أكن أدرى ماهى حكمة مبرمجي فلاش من مثل هذا الأمر ! .
الآن فى الإصدار الجديد 8 , صار بوسعك إلغاء هذه الخاصية - أو الإبقاء عليها - أثناء رسم الأشكال بالنقر على هذه الأيقونة فى قسم Options أسفل صندوق الأدوات , أو من لوحة المفاتيح اضغط J .
عند النقر على الأيقونة فإنك تصبح فى وضعيةObject Drawing Mode , وترى أن الشكل الذى ترسمه يكون محددا بإطار كما فى الصورة التالية :

الآن لاختيار الشكل نحتاج لنقرة واحدة عليه , مثلما الحال فى وضع Group , وبالنقر المزدوج نستطيع رؤية كلا العنصرين Stroke و Fill
ملحوظة رقم 3 : يمكنك عمل نسخة - أو عدة نسخ - من شكل وذلك بالضغط على مفتاح Alt أثناء تحريك الشكل بأداة التحديد .





11 - Pencil Tool Y



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



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



وفى لوح Properties فى أسفل المسرح تجد خيارات إضافية لهذه الأداة , نوردها هنا بإيجاز :



1 – اللون , ونلاحظ هنا أن الخطوط المرسومة بهذه الأداة لها لون Stroke فقط ولا يوجد لون Fill .
ولكننا يمكن تغيير ذلك وجعل لون الخط Fill بدلا من Stroke , حدد الخط أولا ثم اذهب إلى القائمة :
Modify >Shape >Convert Lines to Fills



2 – الحجم .
3 – نمط الخط : مثل الشعرة أو سميك أو متقطع ..إلخ . انظر للصورة التالية :



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



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



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


1- الخيار None
2- الخيار Square
إلى هنا والفكرة واضحة ويمكنك استنتاج الصورة الخاصة بالخيار Round , قم بتكبير الخط والقيام بالتجربة بنفسك .
6 – Join يحدد شكل الأطراف عند توصيلها وله أيضا 3 خيارات :
Bevel , Round, Meter
Bevel تكون منطقة الاتصال إلى حد ما حادة
Round تكون حواف الاتصال إلى حد ما مستديرة





أما الخيار Meter فهو لتحديد درجة الحدة Sharpness كما تريد , يمكنك اختيار تلك الدرجة من 1 إلى 60 .
7 – Stroke Hinting وهذا الاختيار يبقى الحواف دقيقة ويمنع حدوث التشويش فيها أى بلغة الجرافيكس يجعلها Full Pixels .
8 – Scale وفيه تتحكم أكثر فى التغيير الحجمى Scaling من حيث الطول أو العرض .
ملحوظة : مادامت هذه الخيارات خاصة بالخطوط فسوف ستجدها متاحة أيضا مع أداة Rectangle وأداة Oval , حيث أننا كما أوضحنا من قبل أى شكل عبارة عن ملء فى الداخل وخط خارجي Stroke فى الخارج .