درس عمل قائمة متحركة رائعه للمواقع
في هذا الدرس . سوف نشرح لك كيفية تصميم قائمة تصفح لموقعك بطريقة احترافيه وسهلة جدا عن طريق كود الاكشن
اسكربت وبعض تقنيات برنامج الفلاش . بتطبيقك
لهذا الدرس سوف تتعلم كيف تصمم قائمة تصفح . وكيف تقوم بتحريكها . وكيف تطبق كود الاكشن اسكربت على تصميمك .....
وهذا هو التطبيق النهائي للدرس
والان نبدأ الدرس :
الخطوة 1 :
افتح مشروع جديد على برنامج الفلاش . ثم من قائمة Modify إختر Document . (او من الاختصار
Document ) . والان قم بتحديد عرض مشروعك width الى 425 pixels وقم بتغير الطول height الى 115 pixles . وقم بتغيير الخلفية background color الى اللون الاسود . ثم قم بتغيير الاختيار frame rate الى 28 fps . ثم اضغط على OK
والان نبدأ الدرس :
الخطوة 1 :
افتح مشروع جديد على برنامج الفلاش . ثم من قائمة Modify إختر Document . (او من الاختصار Document ) . والان قم بتحديد عرض مشروعك width الى 425 pixels وقم بتغير الطول height الى 115 pixles . وقم بتغيير الخلفية background color الى اللون الاسود . ثم قم بتغيير الاختيار frame rate الى 28 fps . ثم اضغط على OK
الخطوة 2 :
قم بإختيار اداة Rectangle Tool . والان اذهب الى لوحة الادوات Tool panel من قسم الالوان قم بتعطيل الايقونة التى على شكل قلم صغير . ثم من نفس القائمة اضغط على ايقونة المربع الصغير مع الخط الاحمر المائل . ولملئ اللون المناسب للقائمة إختر #3A3A3A ثم ارسم المستطيل بحجم 425x25px . انظر الصورة القادمة :
الخطوة 3 :
ثم بعد ذلك قم بإختيار الاداة Free Transform Tool ثم قم بنسخ المستطيل الذي قمت برسمه ثلاث مرات . انظر الصورة بالاسفل :
الخطوة 4 :
قم بتحديد اداة الاختيار Selection Tool ثم اختر جميع المستطيلات التى قمت بعملها . ثم اذهب الى قائمة Align Panel او من الاختصار (Ctrl+K) ثم قم بعمل الاتى :
1- تأكد من ان الاختيار Align/Distribute معطل
2- اضغط على زر Distribute vertical center
الخطوة 5 :
وفي اثناء اختيارك للمستطيلات . اضغط على زر Ctrl+G لوضعهم في (Group) . انظر الصورة فى الاسفل :
الخطوة 6 :
اذهب مرة اخرى الى Align Panel او اضغط الاختصار (Ctrl+K) ثم قم بعمل الاتى :
1- تأكد من ان زر Align/Distribute to Stage مفعل وليس معطل .
2- اضغط على زر Align horizontal center .
3- اضغط على زر Align vertical center .
الان انت قمت بعمل محاذاه للمستطيلات على الخلفية .
الخطوة 7 :
اضغط الان على زر Ctrl+B او (Break Apart) لتفريق المستطيلات من بعضها . والان يجب ان يكون لديك كما في الصورة :
الخطوة 8 :
والان جاء وقت الكتابة على القائمة . اذا قم بإختيار اداة الكتابة ثم اذهب الى Properties او من الاختصار (Ctrl+F3) سوف تجدها اسفل صفحة المشروع .. ثم قم بعمل الاتى :
1- قم باختيار Static Text
2- غير الخط الى Tahoma
3- غير حجم الخط الى 12
4- ثم من الاسفل اختر Anti-alias for readability
انظر الصورة في الاسفل للتوضيح :
الخطوة التاسعه :
قم بكتابة اسماء القائمة كما ترى في الصورة :
الخطوة 10 :
بعد ذلك قم باختيار اداة التحديد Selection Tool ثم اختار جميع الكلمات التى قمت بكتابتها . ثم اذهب مرة اخرى الى Align Panel او من الاختصار (Ctrl+K) .. ثم قم بعمل الاتى :
1- تأكد من ان زر Align/Distribute to Stage معطل .
2- اضغط على زر Align/Distribute to Stage .
div>الان قمنا بعمل محاذاه للكلمات على المستطيلات .
الخطوة 11 :
قم باختيار اداة التحديد ومن ثم اختر فقط المستطيل الاول والكلمة الاولى كما بالصورة
الخطوة 12 :
والان اضغط على زر F8 لتحويل كل من المستطيل والكلمة الى Movie Clip Symbol.
الخطوة 13 :
والان اختر ال Movie Clip التى قمت بعملها ثم اذهب مرة اخرى الى قائمة Properties Panel في اسفل صفحة المشروع وعلى الشمال سوف تجد Instance name قم بتسمية ال Movie Clip الى HomePage_mc انظر الصورة في الاسفل :
الخطوة 14 :
قم بالضغط مرتين على الـ movie clip في صفحة مشروعك عن طريق اختيار اداة التحديد Selection tool . يجب ان تكون الان داخل الـ Movie Clip
والان جاء وقت التحريك :
الخطوة 15 :
قم باختيار اداة التحديد Selection Tool ثم قم باختيار الكلمة "Home Page " ثم اضغط على Ctrl+X او اعمل Cut . بعد ذلك قم بعمل new layer فوق layer 1 ثم قم بتسميتها text . قم باختيار text layer ثم قم بالضغط على Ctrl+Shift+V او Paste in place
الخطوة 16 :
قم بالرجوع الى layer 1 ثم اضغط عليه مرتين وقم باختيار اداة التحديد Selection Tool ثم غير اسمه الىrectangle
الخطوة 17 :
والان بعد اختيارك الى الشريحة recatngle اضغط على الزر F8 او (Convert to Symbol) لتحويل هذه الشريحة الى Movie Clip Symbol
الخطوة 18 :
قم باختيار الـ frame رقم 15 لشريحة الـ rectangle ثم قم بالضغط على زر F6
الخطوة 19 :
والان وانت واقف على الـ frame 15 . قم باختيار اداة التحديد Selection Tool ثم قم بالضغط مرة واحدة على شريحة الـ rectangle لاختيارها . بعد ذلك قم بالذهاب الى Properties Panel او من الاختصار (Ctrl+F3) في اسفل صفحة مشروعك على اليمين . سوف ترى قائمة الالوان Color menu قم باختيار Tint . ومن القئمة التى بجانبها قم بوضع هذا الرقم فيها #171717 ثم قم بتغيرها الى 100% ... للتوضيح انظر الصورة بالاسفل :
الخطوة 20 :
والان اضغط بالزر الايمن في اى مكان بين الـ keyframes التى وضعتها على الـ timeline وقم باختيار Create Motion Tween من القائمة التى ستظهر لك
الخطوة 21 :
قم باختيار شريحة الكلمة ثم اضغط مرة اخرى F8 او Convert to Symbol لتحويله Movie Clip Symbol
الخطوة 22:
والان اختر الـ Frame 15 ثم اضغط على زر F6 . والان انت لازلت على الـ Frame 15 . قم بتحريك شريحة الكلمة قليلا .استخدم اسهم لوحة المفاتيح او الفأرة كما في الصورة التالية :
الخطوة 23 :
بعد ذلك قم باختيار اداة التحديد ثم اضغط مرة واحدة على الـ text لاختيارها . بعد ذلك اذهب الى قائمة Properties Panel او من الاختصار (Ctrl+F3) اسفل صفحة مشروعك على اليمين . سوف ترى قائمة الالوان Color menu ومنها اختر Tint ثم قم بتغيير اللون الى (#8BCE00) وقم بتغيير النسبة الى 100% كما في الصورة :
والان هذه هى النتيجة :
الخطوة 24 :
والان اختر Filters من القائمة Properties Panel بعد ذلك قم اضغط على الايقونة التى على شكل + ثم اختر Glow filter ثم قم بتغيير خصائصها الى التالى :
1. Blur X and Y : 5
2. Quality : Low
3. Strength: 100%
كما ترى في الصورة التالية :
هذه هي النتيجة :
الخطوة 25 :
والان قم بالضغط بالزر الايمن في اى مكان بين الـ keyframes التى قمت بانشاءها من قبل على الـ timeline ثم اختر Create Motion Tween من القائمة التى سوف تظهر لك .
الخطوة 26 :
والان قم بالرجوع الى المشهد الاساسي (Scene 1) .
الخطوة 27 :
والان قم بالضغط مرتين على الشريحة الاولى layer 1 ثم قم بتغيير اسمها الى Menu . بعد ذلك قم بإنشاء شريحة جديدة فوق شريحة Menu وقم بتسميتها الى invisible button .
الخطوة 28 :
قم باختيار شريحة invisible button التى قمت بإنشائها من قبل ثم قم بعمل invisible button عليها كما في الصورة :
الخطوة 29 :
قم باختيار اداة التحديد ثم قم بالضغط مرة واحدة على شريحة الـ invisible button لتحديدها ثم اذهب الى Action Script Panel او اضغط F9 والان قم بكتابة الكود التالى :
on (rollOver) {
_root.mouse_over_HomePage_mc = true;
}
on (rollOut) {
_root.mouse_over_company_mc = fstartlse;
}
on (release){
getURL("http://www.flashfridge.com/");
}
on (rollOver) {
_root.mouse_over_HomePage_mc = true;
}
on (rollOut) {
_root.mouse_over_company_mc = fstartlse;
}
on (release){
getURL("http://www.flashfridge.com/");
}
الخطوة 30 :
قم بإنشاء شريحة جديدة فوق شريحة invisible button وقم بتسميتها action
ثم اذهب الى الـ frame 1 للشريحة action ثم اضغط مرة اخرى على زر F9 ثم اكتب الكود التالى :
_root.HomePage_mc.onEnterFrame = function() {
if (mouse_over_HomePage_mc) {
_root.HomePage_mc.nextFrame();
} else {
_root.HomePage_mc.prevFrame();
}
};
والان لقد انتهينا من الزر الاول في القائمة .... كرر كل الخطوات مع باقي الازرار ولكن الاختلاف سوف يكون في اسماء الازرار والشرائح فقط حتى تحصل على المشروع النهائي
بالتوفيق ان شاء الله
ليست هناك تعليقات:
إرسال تعليق