التصميم والبرمجة بتقنية الـ Flash

السلام عليكم ورحمة الله وبركاته

سأتكلم في هذه المقالة عن تقنية Flash بشكل عام للمبرمجين والمصممين

كتعريف الكل يعرف ما هي تقنية الفلاش ولكن بإختصار

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

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

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

وهذه النسخة تحتوي على تطويرات قوية وعظيمه من دون أي مبالغة

بما فيها خمس إضافات رئيسية تنقلك نقله نوعية ورائعة :

• 3D Effects
  تتكون النسخة العاشرة من إضافة تأثيرات وتحكم ثلاثي الأبعاد في العناصر مثل تحريك ثلاثي أبعاد ودقة الضوء المنبعث على العنصر والكثير ..
• Custom Filters and Effects
  إضافة إمكانية عمل فلاتر وتأثيرات خاصه بك عن طريق برنامج Adobe Pixel Bender الذي يحتوي على نفس تأثيرات برنامج After Effects الخيالي ..
• Advanced Text Layout
  تهيئة النصوص بشكل جديد حيث بالإمكان عمل حقل النص من اليمين إلى اليسار حالياً وأيضاً كتابة نصوص عمودياً والكثير من العمليات التي تعطي مرونه عاليه ..
• Enhanced Drawing API
  الرسم وإضافة العناصر في وقت التنفيذ اصبح اسهل وأكثر قوة من قبل بإضافة خصائص جديده ..
• Visual Performance Improvements
  هذا التحديث يتعلق بالتطبيقات والفيديو حيث سيكون عرض الفيديو أكثر صفاوة وسرعة وكذالك إستخدام التطبيقات, حيث تم عمل تشغيل بعض المهام على ذاكرة الفيديو وذالك ليعطي مساحة أوفر المعالج CPU

يمكنك تحميل النسخة العاشرة من هنا ..

ويمكنك مشاهدة بعض الأمثلة لمميزات النسخة العاشره بإنتاج أدوبي من هنا ومثال آخر من هنا.

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

مع بداية بسيطه لتنفيذ عمل جميل …

البرامج التي يمكنك عمل بها فلاش ليس واحد او اثنين بل أكثر من برنامج مثل :

• برنامج فلاش بروفيشنال المشهور Flash CS3 Professional
• برنامج سويتش ماكس المعروف كذالك SWISH Max
• وبرنامج Flex العادة هو غير معروف , هذا البرنامج يعطيك أدوات خاصه بالبرمجة أكثر من التصميم يعني بعكس الفلاش بحيث ان هذا البرنامج يستهدف المبرمجين والمطورين أكثرأما الفلاش فيستهدف المصممين أكثر
• والكثير من البرامج المتنوعه من شركات أخرى التي هي غير معروفه ..

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

ولكن ستقوم بكتابة العمل بإستخدام لغة برمجة تسمى Actionscript وآخر إصدار منها هي الإصدار الثالث بحيث تسمى Actionscript 3 لأنه النسخه التي قبل النسخه الأخيره تختلف طريقة كتابتها وعملها عن النسخه الأخيره نظراً للتطورات التي عملتها أدوبي للنسخة الأخيرة من لغة البرمجة.

بإمكانك عمل نموذج فلاشي ولكنه سيكون صعب بحيث انه تقوم بعمل النموذج كتابة بالأكواد ثم عمل Compile ليتم تحويل الأكواد إلى لغة الآله وإنشاء ملف SWF لتنفيذه :) , وإذا كنت تحب أن تعرف هذه الطريقه يمكنك ذالك من هنا ( Beginners Guide to Getting Started with AS3 )

 أفضل إستخدام للفلاش بشكل مبدئي وإحترافي هو Flash Professional وهذا ما أطبق عليه دائماً , وسأشرح دروس طريق البدايه مع هذا البرنامج لعمل تقنيات جميلة بالفلاش.

أول درس :

طبعاً راح أعتقد أنك مركب البرنامج (Flash CS3 Professional)

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

راح يظهر لك البرنامج وراح تظهر لك نافذة الترحيب :

تتكون نافذة الترحيب من 5 أجزاء :

1. Open a Recent Item عبارة عن الملفات التي قمت بإنشاءها وحفظها مؤخراً بحيث يسهل لك فتح ملفات المشروع الأخير الذي تقوم بالعمل عليه في كل مره تفتح الفلاش
   هناك زر Open في نهاية القائمه لفتح أي ملف آخر.
2. Create New لإنشاء ملف جديد , القائمة تحتوي على خيارات لنوع الملف الجديد الذي تريد إنشاءه , هل هو بلغة البرمجة AS3 أو AS2 لأنني كما سبق وقلت لكم أنها تختلف عن بعضها , الأفضل دائماً أن تنشأ ملف جديد بـ AS3 لأنها آخر إصدار لكن AS2 متاح للذين يودون العمل بها او لديهم مشاريع سابقه بالـ AS2.
3. هذا الجزء عبارة عن قوالب جاهزة بإمكانك إستخدامها في مشروعك.
4. الجزء الرابع المحدد بالصورة هو معلومات عامة خارجية بالضغط عليها يفتح لك متصفح إنترنت.
5. هذا الزر عند الضغط عليه لن تظهر هذه النافذة مره أخرى, ويمكنك إعادة إظهارها مره أخرى من الإعدادات Edit -> Preferences

الأن لنبدأ العمل , أضغط على Flash File Actionscript 3 تحت الجزء Create New لننشأ ملف جديد.

ستظهر لك صفحة فارغة بمقاس 550 × 400 كالصورة التالية :

1. أدوات الرسم والتحديد.
2. نافذة الإطارات والطبقات التي تتحكم بالحركة (Time Line) للعناصر في الطبقة.
3. الجزء الأيمن به نوافذ الخصائص المتعلقة بأدوات الرسم والتحديد وخصائص العناصر التي تم رسمها او تحديدها.
4. التحكم بخصائص وإعدادات الصفحة والإطار, التاب Actions – Frame هنا يتم كتابة أكواد لغة البرمجة Actionscript ليتم تنفيذه لكل إطار
   و Filters هي خصائص العنصر عباره عن تأثيرات يتم إعدادها على العنصر مثل ضل وتموج.

 أتوقع الرسم والكتابة وتغيير إعداداتها سهله جداً وواضحه اضغط على الأداة التي تريد استخدامها من اليسار ثم ارسم :)

لكي تتضح بعض الخطوات ولكي اشرح خطوه مهمه في برنامج Flash سأتطرق لهذا الدرس.

تحريك العناصر بإستخدام الإطارات

قم بإختيار اداة الرسم الدائرة ثم ارسم دائرة في الطبقة الأولى

أرسم الدائرة في إطار العمل ( الصفحة )

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

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

بالضغط من القائمة العلوية على Modify ثم Convert To Symbol أو F8 من لوحة المفاتيح

ستظهر لك نافذة التحويل ستجد حقل name هنا تكتب اسم العنصر مثلاً MyCircle

وستجد خيارات Type وهي خيارات نوع العنصر هل هو Movie clip أو Button أو Graphic

Movie clip و Graphic لا يتخلفان عن بعض كثيراً لكن يفضل إستخدام Movie clip لأنه بإمكانك عمل فيه تأثيرات مثل ضل وتموج اما جرافيك فلا

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

ونحن في درسنا هذا سنختار Movie clip لأننا بكل بساطه سنجعل العنصر يتحرك فقط

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

اجعل خيار Registration كما هو في الوسط وأضغط OK.

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

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

في نافذة الإطارات أو الـ Time Line اختر الإطار العاشر بالضغط عليها من الماوس الزر الأيمن ثم أضغط على Insert Keyframe أو F6 من لوحة المفاتيح

هنا سينشأ إطار جديد في الإطار رقم 10 والإطارات من 1 إلى 9 هي تعتبر إطارات متكرره من الإطار الأول.

الأن في الإطار رقم 10 قم بتحريك العنصر الموجود إلى اليمين

الأن اضغط بالزر الأيمن من الماوس في أي مكان من الإطار 1 حتى 9 واختر Create Motion Tween

الأن تم تفعيل الحركه من اليسار إلى اليمين لمشاهدة الحركة ,

أضغط من القائمة العلوية Control ثم Test Movie او Ctrl + Enter من لوحة المفاتيح وشاهد النتيجة :

هذا شيء من لا شيء طبعاً لكن بداية أساسيات الفلاش :)

شاهد من أفضل المواقع التي تم تصميمها بالفلاش :
http://www.ebizmba.com/articles/best-flash-sites

شاهد الألعاب التي تم عملها بالفلاش :
http://www.abunawaf.com/mmcat-8-0.html

شاهد برنامج تطبيقي على الويب تم إنشاءه بإستخدام الفلاش :
https://www.tech-wd.com/wd/?p=289

وهناك الكثير والكثير ….

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

شكراً لمتابعتكم وإلى اللقاء قريباً :)