white-sugar
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

white-sugar


 
الرئيسيةالبوابةالتسجيلدخول

 

 سلسلة دروس الفلاش

اذهب الى الأسفل 
كاتب الموضوعرسالة
white sugar
المدير العام
المدير العام
white sugar

عدد الرسائل : 119
مكان الاقامة : يا ناس اعشقها (المدينة المنورة)
تاريخ التسجيل : 15/07/2008

سلسلة دروس الفلاش Empty
مُساهمةموضوع: سلسلة دروس الفلاش   سلسلة دروس الفلاش Emptyالجمعة أكتوبر 31, 2008 9:57 am

الدرس الأول


مقدمة عن برنامج فلاش

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

ما يمكننا عمله بواسطة برنامج فلاش:

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

ملاحظة هامة:
سيتم الشرح على برنامج flash MX 2004 وهو يختلف عن الاصدارات السابقة وبه الكثير من التعديلات لمن يستخدم اصدار اقدم سيلاحظ الفروقات
في استخدام القوائم وما شابه.
يمكن تحميل البرنامج من قسم البرامج.

التعرف على البرنامج:
التعرف على واجهة البرنامج:
سلسلة دروس الفلاش Screen


وسنتعرف بداية على لوحة الأدوات الرئيسة،وسنستعرض لاحقا معظم الادوات المستخدمة في برنامج
فلاش عند تطرقنا للعمل بها خلال الشرح

لوحة الادوات الرئيسية:


سلسلة دروس الفلاش Tools


تعريفات هامة :
عندما تقوم بتحرير احد الأفلام في فلاش فسوف تستخدم الأشكال الرئيسية والتي سنقوم
بالتعرف عليها كما يلي :
- مسرح العمل أو الـ Stage (منطقة عرض الكادرات)وهو المنطقة المربعة التي يتم عرض الفيلم بها.
- المقياس الزمني أو الـ Timeline وهى نافذة يتم فيها ترتيب حركة الأشكال عبر الزمن المحدد
- الرموز أو الـ Symbols وهى الرموز المتاحة لإعادة الاستخدام والخاصة بالفيلم
- نافذة المكتبة أو الـ Library window وهى المكتبة التي يتم فيها الاحتفاظ بالرموز وتنظيمها
- مستكشف الفيلم أو Movie Explorer وهو يتيح مراجعة الفيلم بجميع مكوناته.
نوافذ أخرى تتيح للمستخدم التحكم في جميع العناصر والعوامل الخاصة بإنتاج العمل.
7

7
7
7
7
الى اللقاء في الدرس القادم
بالتوفيق

الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://7ala-sugar.ahlamountada.com
white sugar
المدير العام
المدير العام
white sugar

عدد الرسائل : 119
مكان الاقامة : يا ناس اعشقها (المدينة المنورة)
تاريخ التسجيل : 15/07/2008

سلسلة دروس الفلاش Empty
مُساهمةموضوع: رد: سلسلة دروس الفلاش   سلسلة دروس الفلاش Emptyالجمعة أكتوبر 31, 2008 9:59 am

الدرس الثاني


سنتطرق بداية الى بعض المفاهيم الاساسية التي نحتاج الى استيعابها قبل البدء بالعمل

الرسومات Graphics في فلاش

الرسومات تنقسم الى قسمين:
1- رسومات المتجهة Vector Graphics
2- رسومات النقطيةBitmaps
يقوم برنامج فلاش بانشاء رسومات متجهة vector Graphics
كما يمكن من استيراد وتعديل الرسومات المتجهة او النقطية المعدة مسبقا.

الرسومات النقطية
تتكون الصور النقطية Bitmaps من مجموعة من النقاط تسمى pixel والتي تصطف معاً داخل شبكة
وتمثل بواسطة الموقع المحدد ودرجة اللون الخاصة بكل نقطة pixel على الشبكة Grid وبالطبع
تخزين المعلومات عن كل النقاط الموجودة في الصورة النقطية يؤدي الى زيادة حجم الملف وتعتمد
الصور النقطية Bitmaps على درجة الوضوح resolution لأن البيانات التي تصف الصورة محددة
بحجم الشبكة،مما يؤدي الى تشوه شكلها وتغيير جودتها عند التكبير حيث تظهر كل النقاط المكونة
لها وتظهر الحواف متعرجة او مسننة وذلك لأن عدد النقاط المحددة من pixels تم توزيعه على شبكة
أخرى مختلفة الحجم ،كما ان عرض الصورة النقطية على شاشة عرض لها درجة وضوح resolution
اقل من الصورة نفسها يقلل ايضا من جودتها .

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


الرموز والنسخ Symbols and instances

يتم تحويل العناصر في برنامج فلاش الى رموز symbols والرموز ممكن ان تكون:
1- رسومات Graphics .
2- أزرار Buttons .
3- مقطع من فيلم movie clips .
4- أو قد تكون ملفات صوت او فيديو .

عند تحويل العناصر الى رموز يتم تخزينها داخل المكتبة library ،وعند استدعاء أحد هذه العناصر
الى مسرح العمل stage فاننا بذلك نكون قد صنعنا نسخة (او مثال) instance لهذا الرمز ،
وتتميز الرموز بسهولة الاستخدام وامكانية استخدام الرمز لأكثر من مرة ، كما ان استخدامها
يقلل من حجم الملفات فمهما بلغ عدد النسخ instances التي نستخدمها من الرمز symbol
فان فلاش يقوم بتخزين تعريف واحد للرمز مع مجرد اشارات للرمز مع كل نسخة وتحويل العناصر
الى رموز يقلل من حجم الملفات حتى لو استخدمنا نسخ instance واحد من الرمز فبامكانك
دمج الخلفيات غير المتحركة في رمز واحد فتلاحظ أنه يقلل حجمها عما كان عليه قبل تحويلها
الى رمز. وتستطيع التعديل على النسخ instance دون ان يؤثر ذلك على الرمز master symbol،
كما تسطيع التعديل على الرمز symbol وبالتالي تأخذ كل النسخ instances هذا التغيير.


الحركة في فلاش

يمكن من خلال برنامج فلاش تحريك animate العناصر عبر مسرح العمل stage ،ونعني بالحركة هنا ليس تغيير مكان العنصر حيث يمكننا ان نشعر بالحركة من خلال تغيير :
- الشكل shapes.
- الحجم size.
- اللون color.
- درجة العتامة او الشفافية opacity.
-التحكم في التدوير rotation وخواص اخرى.

يمكن انشاء الحركة باستخدام ما يسمى بالحركة البنينية animation tweened وذلك بانشاء الكادر frame الاول والأخير ثم نساتخدم فلاش لعم الكادرات frames البينية.
او يمكن انشاؤها بعمل صورة منفصلة لكل كادر frame (اي بناء كادر بكادر).
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://7ala-sugar.ahlamountada.com
white sugar
المدير العام
المدير العام
white sugar

عدد الرسائل : 119
مكان الاقامة : يا ناس اعشقها (المدينة المنورة)
تاريخ التسجيل : 15/07/2008

سلسلة دروس الفلاش Empty
مُساهمةموضوع: رد: سلسلة دروس الفلاش   سلسلة دروس الفلاش Emptyالجمعة أكتوبر 31, 2008 10:00 am

الدرس الثالث

التطبيق الاول على الحركة في فلاش

بداية قم بانشاء ملف فلاش جديد بالضغط على flash document من قائمة create new من الواجهة التي تظهر تلقائيا عند تشغيل البرنامج
او من قائمة file -> new -> flash document

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

خطوات العمل:
1- اختر أداة رسم الدائرة oval tool سلسلة دروس الفلاش Ovaltool
ثم اختر لون التعبئة ولون الخط ,وارسم الدائرة في الجانب الايسر من المسرح stage (يمكنك تغيير لون التعبئة والخط بعد رسم الدائرة وذلك بالنقر نقرا مزدوجا ثم قم بختيار لون التعبئة
والخط كما تريد).
*لاحظ بعد رسم الدائرة الحصول على نقطة سوداء في شريط الزمن عند الاطار frame رقم 1
هذا يعني ان الاطار الاول قد تحول الى اطار رئيسي Keyframe.

سلسلة دروس الفلاش Keyframe

2- لتحويل الدائرة الى رمز symbol حدد الدائرة بالنقر المزدوج ثم اتبع الخطوات التالية:
- من قائمة modify اختر convert to symbol او من الخلال الضغط على زر F8 من
لوحةالمفاتيح.
- تظهر نافذة كما هو موضح بالشكل التالي :

سلسلة دروس الفلاش Ctosymbol

نحدد منها نوع الرمز هنا حدد الخيار graphic ثم اضغط ok.
يمكنك تغيير اسم الرمز بدل الاسم الافتراضي symbol1 الى اسم اخر دال على الشكل.
Double click -> modify -> convert to symbol -> graphic -> ok

بعد تحويل الشكل الى رمزsymbol يقوم فلاش بحفظ الرسم في المكتبة library الخاصة بالمشروع .

3- حدد الان الاطار frame رقم 20 من شريط الزمن لنفس الطبقة ،اضغط بالزر الايمن للماوس
واختر من القائمة السريعة الأمر Insert Keyframe او اضغط الزر F6 وبذلك يتحول الى اطار
رئيسي Keyframe .

سلسلة دروس الفلاش Lkeyframe

4- قم الان بتحريك الدائرة باستخدام الماوس وذلك بالضغط على الدائرة ثم قم بسحبها من
اليسار الى اليمين (لو قمت باختبار الفيلم هنا بالضغط على زر Enter ستلاحظ ظهور الكرة
عند الاطار الاول والاطار الأخير واختفائها في الاطارات بينهما )
5- حدد الاطار الول من شريط الزمن واشغط بالزر الايمن للماوس واختر من القائمة السريعة
الامر Tween Create Motion فيصبح شريط الزمن على الشكل التالي


سلسلة دروس الفلاش Motiontweenpic


6 - يمكنك رؤية الحركة من قائمة Control اختر play
7- لمشاهدة الفيلم اضغط على زري Ctrl + Enter وبذلك يتكون الملف التنفيذي للفيلم وهو
يحفظ تلقائيا عند حفظ الفيلم ويكون بامتداد swf.

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




هذا تطبيق بسيط رأيت ان نبدأ به وسنطرح أفكارا متنوعة ومختلفة بعد ذلك.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://7ala-sugar.ahlamountada.com
white sugar
المدير العام
المدير العام
white sugar

عدد الرسائل : 119
مكان الاقامة : يا ناس اعشقها (المدينة المنورة)
تاريخ التسجيل : 15/07/2008

سلسلة دروس الفلاش Empty
مُساهمةموضوع: رد: سلسلة دروس الفلاش   سلسلة دروس الفلاش Emptyالجمعة أكتوبر 31, 2008 10:04 am

الدرس الرابع


الحركة عن طريق تحويل الأشكال Morphing
يمكن تحويل الاشكال في فلاش من شكل لاخر بسهولة ، وذلك باستخدام ملء الكادرات البينية للاشكال وتسمى هذه الطريقة بال morphing .
يمكن تطبيق كادرات الاشكال البينية فقط على العناصر التي تم انشاؤها باستخدام أدوات الرسم في فلاش (أي تبقى الرسومات graphics كما هي ولا يتم تحويلها الى رموز) ، فلا يمكن القيام بهذه العملية مع رمز أو صورة نقطية.

يوجد طريقتان لتحويل الاشكال:
- انشاء كادرات بينية بسيطة.
- استخدام اشارات توجيه الشكل.

سنقوم بداية بتطبيق تغير الاشكال morphing باستخدام انشاء كادرات بينية بسيطة ثم سنستعرض لاحقا استخدام اشارات التوجيه.

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

خطوات العمل:

1- قم بانشاء ملف فلاش جديد .
2- عند الاطار frame رقم 1 ارسم دائرة .
حدد الدائرة بالضغط بالماوس ضغطيتن متتاليتين ثم من لوحة الخصائص properties بامكانك
فتحها من قائمة windows اختر properties ، اوتجدها في شريط اسفل البرنامج وقد يكون
مخفي اضغط على السهم تظهر ثلاث خيارت عبارة عن
- لوحة Actions-frame .
- لوحة Help .
- لوحة Properties .

اضغط على properties الان تشاهد خصائص الشكل وتظهر كالتالي:

سلسلة دروس الفلاش PropertiesPanel

من لوحة الخصائص غير قيمة x المسافة الافقية وقيمة y المسافة الرئسية ، اجعل مثلا
قيمة x 230 وغير قيمة y الى 100 سنكرر هذه العملية لكل شكل من الاشكال لأننا نحتاج
الى أن تكون جميع الاشكال لها نفس المكان من مسرح العمل.

3- عند الاطار 15 من شريط الزمن انقر بالماوس واضغط F6 لاضافة اطار رئيسي Keyframe .
ثم اضغطزر delete من لوحة المفاتيح لحذف الدائرة.

اختر أداة الخط Line Tool
سلسلة دروس الفلاش LineTool
وحدد لون خط الرسم وقم برسم نجمة كالشكل التالي:
سلسلة دروس الفلاش Star



اختر اداة لون التعبئة ، لاحظ عند اختيار أداة لون التعبئة خيارات الاداة التي تظهر اسفل الأدوات
options اضغط خيار اقفال الفراغات كما هو موضح بالرسم:

سلسلة دروس الفلاش CloseGapsTool


1- هذا الخيار لا يغلق اي فراغات بالرسم (اي اذا لم تكن حدود الشكل متلاصقة ولا يوجد
فراغات بينها فانه لن يقوم بالتعبئة عند اختيار هذا الهيار فلا تتم التعبئة الا اذا كان الشكل
مغلق تماما).

2- هذا الخيار يسمح باغلاق الفتحات الصغيرة (اي عند وجود فتحات صغيرة بالرسم فانه يقوم
بتعبئة الشكل مغلقا هذه الفتحات).

3- اغلاق الفتحات المتوسطة.
4- اغلاق الفتحات الكبيرة (بتحديد هذا الخيار فنه يقوم بتعبئة الشكل باللون بغض النظر عن ما
اذا كانت الفتحات مغلقة أو صغيرة او متوسطة او كبيرة فهو يقوم بتعبئة الشكل على جميع
الحالات).
قم باختيار الخيار المناسب لك.
حدد مكان الشكل بتغيير قيم x و Y من لوحة الخصائص كما في الخطوة رقم 2.

4- عند الاطار رقم 30 انقر بالماوس وأضف اطار رئيسي Keyframe واضغط
delete لحذف الشكل السابق (النجمة) .
اضغط على أداة رسم المستطيل وهي تكون الأداة الظاهرة افتراضيا ومن ثم تظهر لك قائمة
اختر أداة الشكل السداسي PolyStar Tool
سلسلة دروس الفلاش PolyStarTool
وارسم الشكل وذلك بالضغط
على مسرح العمل والسحب حتى تصل للحجم المطلوب ،حدد مكان الشكل كما فعلنا بالخطوات
السابقة.

5- عند الاطار رقم 45 انقر بالماوس وأضف اطار رئيسي Keyframe واضغط
delete لحذف الشكل السداسي .
عند الاطار رقم 15 حدد النجمة بالنقر المزدوج و ثم فم بنسخها بالضغط Ctrl+c من لوحة
المفاتيح أو بالضغط بالزر الايمن للماوس واختر من القائمة copy .
انقر بالماوس الان عند الاطار رقم 45 ثم الصق الشكل Ctrl+v واضبط خصائص الشكل
كالأشكال السابقة.
6- الان سوف نقوم باجراء التعير البيني للأشكال ،اختر الاطار رقم
واحد من شريط الزمن ومن لوح الخصائص properties اختر الحركة من نوع shape من القائمة
Tween كما في الشكل:

سلسلة دروس الفلاش ShapeTween

قم بتكرار الخطوة السابقة عند الاطار الرئيس رقم 15 وكذلك رقم 30.
سوف تلاحظ، شريط الزمن قد تحول الى سهم لونه أخضر فاتح بهذا الشكل:
سلسلة دروس الفلاش ShapeTweenTL


7- قم الان باختبار الفيلم بالضغط على الزر Ctrl+Enter فيظهر
كما في الشكل التالي:



الى اللقاء
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://7ala-sugar.ahlamountada.com
white sugar
المدير العام
المدير العام
white sugar

عدد الرسائل : 119
مكان الاقامة : يا ناس اعشقها (المدينة المنورة)
تاريخ التسجيل : 15/07/2008

سلسلة دروس الفلاش Empty
مُساهمةموضوع: رد: سلسلة دروس الفلاش   سلسلة دروس الفلاش Emptyالجمعة أكتوبر 31, 2008 10:08 am

سلسلة دروس الفلاش Bsmla

الدرس السادس

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

خطوات العمل:

1) قم بانشاء ملف فلاش جديد .

2) عند الاطار الاول ارسم دائرة ومستطيل كما في الشكل التالي :

سلسلة دروس الفلاش L5_fkeyframe

3) حدد الاطار رقم 20 من شريط الزمن بالنقر بالماوس ،ثم اضغط F6 لاضافة اطار رئيسي Keyframe .

4) حدد الدائرة وقم بتغيير شكلها باستخدام اداة التكبير والتدوير سلسلة دروس الفلاش FreeTransformTool من لوحة الادوات ،ثم قم بتغيير حجم المستطيل ايضا بنفس الطريقة .
(يمكنك تغيير حجم اي عنصر بتحديده ثم من لوحة الخصائص تقوم بتغيير ابعاده (العرضW ،الارتفاع H ) )

لتحصل على نتيجة كالتالي:

سلسلة دروس الفلاش L5_lkeyframe

5) عند الاطار الاول قم بتحديد العنصرين (الدائرة والمستطيل) ،بالنقر المزدوج بالماوس على العنصر الاول ثم الضغط على مفتاح shift مع النقر المزدوج على العنصر الثاني .
ثم من لوحة الخصائص اختر الحركة من نوع shape من القائمة Tween .

6) قم باختبار الفيلم لتحصل على النتيجة التالية
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://7ala-sugar.ahlamountada.com
white sugar
المدير العام
المدير العام
white sugar

عدد الرسائل : 119
مكان الاقامة : يا ناس اعشقها (المدينة المنورة)
تاريخ التسجيل : 15/07/2008

سلسلة دروس الفلاش Empty
مُساهمةموضوع: رد: سلسلة دروس الفلاش   سلسلة دروس الفلاش Emptyالجمعة أكتوبر 31, 2008 10:13 am

وأقدم لكم وصلة لسلسلة دروس فلاش بطريقة الفيديو

http://www.fares9.net

ارجو ان تستفيدوا من الدروس وتفيدوا بها غيركم

وتسلموا
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://7ala-sugar.ahlamountada.com
white sugar
المدير العام
المدير العام
white sugar

عدد الرسائل : 119
مكان الاقامة : يا ناس اعشقها (المدينة المنورة)
تاريخ التسجيل : 15/07/2008

سلسلة دروس الفلاش Empty
مُساهمةموضوع: رد: سلسلة دروس الفلاش   سلسلة دروس الفلاش Emptyالجمعة أكتوبر 31, 2008 10:22 am

السلام عليكم ورحمة اللة وبركاتة
كم وعدناكم المجموعة الثانية من سلسله دروس الفلاش الاحترافيه
من سمارت كارتون..character animation

اليكم الروابط

http://www.zshare.net/download/646587697693c6/
http://www.zshare.net/download/6471203578e074/
http://www.zshare.net/download/6472954d144b34/
http://www.zshare.net/download/64744691e89e05/
http://www.zshare.net/download/64758667f55bef/
http://www.zshare.net/download/64783873f96fb9/
http://www.zshare.net/download/64798508724c5e/

اتمنى ان تكون المجموعة نالت رضاكم
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://7ala-sugar.ahlamountada.com
 
سلسلة دروس الفلاش
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
white-sugar :: ( المنتديات العامة ) :: (المنتدى التعليمي)-
انتقل الى: