LinkBack URL
About LinkBacks
.. الســــلام عليكـــــم و رحمـــــــة الله و بركاتـــــه ..
بعد طول انتظار، و بعد عمل لأكثر من شهرين
اكملت مع اخي العزيز المشرف B L U E شرح طريقه عمل القوائم الفلاشيه للثيمات الفلاشيه ,,
الطريقه طويله نسبياً ..
هنالك العديد من الطرق لتصميم الثيمات الفلاشيه ..
و يظهر ذلك بأختلاف كل ثيم فلاشي من ناحيه الشكل و الاهم ترتيب الايقونات !
لكن الاساس واحد تقريباً .. و الطريقه التاليه تبني الاساس الصحيح لمن يريد الاستمرار بالثيمات الفلاشيه و الابداع فيها
هذه الطريقه تعمل على الاجهزه التاليه :
C510, C702,C901,C902, C903, C905, G705, T700, T707, T715, W508, W595, W705, W760, W902, W980, W995, Z780
و بقيه الاجهزه من نفس الفئه
اما الاجهزه التاليه :
G502, K850i, W890i, W910i
و الاجهزه المشابهه لها فتستخدم كودات برمجيه تختلف قليلاً
-------
سيتم استخدام برنامج الـ Adobe Flash CS3
*ملحوظه : لا يمكن عمل القائمه الفلاشيه بماكروميديا فلاش 8
*ملحوظه : يرجى الاطلاع اولا على الموضوع التالي فهو يحتوي على معلومات مفيده للشرح :
*كيفيه صنع ساعه فلاشيه ~
.
نفتح البرنامج و ننشيء ملف فلاش جديد [ Action Script 2.0 ]
ثم نضغط على [ Edit] في خانه الـ [ Properties ]
. نقوم بتغيير مساحه ساحه العمل الي
Width : 240
Height : 320
. تغيير لون خلفيه العمل الى اللون الاسون ، يمكن استخدام أي لون حسب التصميم ، لكن انا سأستخدم الاسود اثناء الشرح
. تغيير عدد الفريمات الى 24
ثم نفتح قائمه [ Publish Setting ]، بالضغط على [ Edit ] بجانب الـ [ Profile ] او بالاختصار
[ CTRL + Shift + F12 ]
و نضغط على [ Formats ] من الشريط العلوي ، و نزيل الاختيار عند [ HTML ]
ثم نضغط على [ Flash ] من الشريط العلوي ايضا
و نقوم بتغيير الآتي :
. Player > Flash Lite 2.0
. نزيل الاختيار عن [ Compress Movie ] و [ Include XMP metadata ]
. نضع خيار الـ [ Script time limit ]الى 10 ثواني
. يمكن وضع كلمه سر لحمايه ملف الفلاش باختيار [ Protect from import option ] ، و نضع اي كلمه سر
ملحوظه : هذه النقطه خاصه بالفلاش 4 فقط
- - -
خطوه تحميل و ادراج الايقونات للفلاش
نقوم بتحميل الايقونات التي سنستخدمها من هنا :
Icons & Brands.rar
و نفتح الضغط عن الملف المضغوط .. ليظهر لنا 3 ملفات :
1- "Icons" .. به 22 ايقونه بصيغه الفلاش " SWFا"
2- "Brand C,W" .. به العلامتين " Walkman , Cyper-Shotا"
3- "Dummy Icon" .. ايقونه افتراضيه سنستخدمها لرؤيه المؤثرات عند عملها // يمكن استخدام أي ايقونه أخرى على ان تكون "Movie Clip و سيتم شرح ذلك فيما بعد"
ثم نقوم بادراج الملفات الى ملف الفلاش الخاص بنا .. بالضغط على : File >> Import >> Import to Library ,,
و نفتح الـLibrary او بالاختصار " Ctrl + L "
سيتم ادراجهم كـملفات رسوميه .. نقوم بتغييرها الى الآتي :
نضغط بالزر الايمن على الايقونات ، و نختار Properties
نزيل الامتداد من اسم الملف اي نزيل swf.
نغير النوع " Type " الى : Movie Clip
و نختار Export for ActionScript
و نضع المعرّفات التاليه "حسب كل ايقونه نضع المعرّف الخاص بها" :
Icon name ||||||||||||||||||||||||||||||| Identifier
-- |||||||||||||||||||||| --
Activity Log:DESKTOP_ACTIVITY_LOG_ICN
Alarms:DESKTOP_ALARMS_ICN
Applications:DESKTOP_APPLICATIONS_ICN
Calls :DESKTOP_CALLS_ICN
Camera :DESKTOP_CAMERA_ICN
Contacts : DESKTOP_PHONEBOOK_ICN
Cyber-shot :DESKTOP_CAMERA_CS_ICN
Entertainment:DESKTOP_ENTERTAINMENT_ICN
File Manager :DB_DESKTOP_ICN
Internet:DESKTOP_WAP_ICN
Location Services:DESKTOP_LOCATION_SERVICES_ICN
Media Center:DESKTOP_MEDIA_CENTER_ICN
Media Player:MEDIAPLAYER_DESKTOP_ICN
Messaging:DESKTOP_MESSAGING_ICN
Organizer:DESKTOP_ORGANIZER_ICN
Play Now:PREPLAY_DESKTOP_ICN
Radio:FM_RADIO_DESKTOP_ICN
Settings:DESKTOP_SETTINGS_ICN
Stopwatch:SPO_DESKTOP_ICN
Track ID:DESKTOP_TID_ICN
Video Call:MMT_DESKTOP_ICN
Walkman:WALKMAN_DESKTOP_ICN
---
بعد الانتهاء من كل الايقونات .. و لتسهيل العمل .. نقوم بنشاء فولدر جديد في المكتبه Library
و نسميه Icons و نضع الايقونات فقط داخل الفولدر ,,
نقوم ايضاً بحذف الـ"swf." من العلامتين Walkman , Cyper-Shot و نحولهم الى MovieClip
نقوم بحذف ".png" من الايقونه الافتراضيه و ايضا نحولها الى MovieClip
---
الآن ننتقل لخطوه اخرى ، سنقوم بعمل حامل للايقونات لنقوم بعمل التأثيرات عليه :
نعمل [ New Symbol ] ، بالضغط على الاختصار [ Ctrl + F8 ] او الضغط على الزر المخصص حسب الصوره
و نسميه [ Icon holder ] ، و نختار النوع الى [ Movie Clip ] و نضغط OK
سيتم فتح الـ [ Icon holder ] مباشرةً ، نضيف الصوره اليه بالـ - بالسحب و الاسقاط -
و نغير الاحداثيات الى [ 0.0 ] من الـ Properties
[IMG]http://img22.imageshack.us/img22/4055/28232050.png
[/IMG]
و نضع اسم [ Instance Name ] للايقونه الافتراضيه مثل [ dummy ] حسب الصوره
ملاحظه : يجب وضع الاسم كما مكتوب بالضبط و بنفس حاله الاحرف لكي تتطابق عند تطبيق السكريبت التي سيتم اضافته.
ثم نضيف الكود البرمجي - السكريبت - الآتي في الـفريم الاول
كود PHP:dummy._visible = false;
و ذلك بالضغط على الفريم الذي نعمل عليه بالزر الايمن للماوس ، و نختار Actions
---
ننتقل الى الخطوه التاليه ، عمل التأثيرات على الايقونات ، يمكن لكل شخص عمل التأثيرات الخاصه به اذا كان عنده خبره بالفلاش او حركة الـفريمات.
و سأقوم بالمستقبل بشرح بعض التأثيرات المختلفه
---
.هذا جدول للألوان سيتم استخدامه لاحقاً
ملحوظه : يمكنك استخدام الوان مغايره للجدول
نعمل [ MovieClip ] جديد ، بالضغط على الاختصار [ Ctrl + F8 ]
و نسميه [ Effects ] ، ثم داخله نقوم بأنشاء لاير جديد نسميه [ Actions ] ثم نقفله
و نعود للاير Layer 1 و نعيد التسميه الى Icon
ثم ندخل الـ الى ساحه العمل و نغير الاحداثيات الى [ 0.0 ]
ثم نضغط على الايقونه ونغير الـ instanse name الى [ Icon holder ]
. في لاير Actions نضيف keyframe في الفريمات التاليه :
8,9,28,29,48,49,68,69,88,89,95,96,103
. في الفريمات التاليه :
8,28,48,68,88,95,103
نضيف كود وظيفته عمل توقف
كود PHP:stop();
. نضغط الى الفريمات التاليه و نغير الاسم لكل فريم الى :
9 : left49 : up
29 : right
69 : down
89 : unselect
96 : startup
103 : quickselect
نضغط على الايقونه و في الـ Properties نقوم بالتالي
. في خانه الـ Color Effect نختار [ Tint ] و نغير اللون الى لون الـ Unselected icon حسب جدول الالوان
و تدرج الـ Tint يجب ان يكون الى 100%
. نعمل Keyframe في الفريمات التاليه 5 , 8 ضمن لاير الـ icon ، جميع الخطوات التاليه ستكون ضمن هذا اللاير
. في الفريم 1 نضغط على الايقونه و نغير الطول height و العرض width الى 10% و ذلك من الخانه [ Transform ] او بالاختصار [ CTRL+T ]
. في الفريم 5 نغير الطول و العرض الى 120% ، و نبقيه على 100% في الفريم 8
. نضغط بالزر الايمن للماوس على الايقونه و نختار [ Creat classic tween ]
ملحوظه هامه : اذا كنت تعمل على برنامج الفـلاش 3 فلن تجد الـ Classic tween
لذا استبدلها بـ Motion tweeen
. ثم نغير الـ Ease الى 100
. في الفريم 5 ايضا نعمل [ Creat classic tween ] لكن نبقي الـease على 0
نبدأ بالخيار [ left ]
. نعمل Keyframe في الفريمات التاليه
9 , 29 , 49 , 69 , 95
. ثم نعمل Keyframe في الفريم 13 و نضغط على الايقونه الافتراضيه و نغير الطول و العرض من القائمه [ Transform ]الى 125%
و نغير الاحداثيات من القائمه [ Properties ] الى x=-15 , y=0
ثم نغير الـ Tint الى لون الـ Selected color حسب جدول الالوان
. نعمل Keyframe في الفريم 18 و نغير احداثيات القائمه الى x=-5 , y=0
. نعمل Keyframe في الفريم 23 و نغير احداثيات القائمه الى x=5 , y=0
. نعمل Keyframe في الفريم 28 و نغير احداثيات القائمه الى x=0 , y=0
. نعمل [ Classic tween ] للفريمات 9 , 13 , 18 , 23 ، مع تغيير الـ ease الى 100 للفريم 9
و -100 للـ 13 , 100 للـ 18 , 0 للـ 23
---
خيار [ right ]
.نعمل Keyframe في الفريم 33 و نغير الطول و العرض الى 125%و نغير الاحداثيات الى x=15 , y=0
ثم نغير الـ Tint الى لون الـ Selected color حسب جدول الالوان
.نعمل Keyframe في الفريم 38 و نغير احداثيات القائمه الى x=5 , y=0
. نعمل Keyframe في الفريم 43 و نغير احداثيات القائمه الى x=-5 , y=0
. نعمل Keyframe في الفريم 48 و نغير احداثيات القائمه الى x=0 , y=0
. نعمل [ Classic tween ] للفريمات 29 , 33 , 38 , 43 ، مع تغيير الـ ease الى 100 للفريم 29
و -100 للـ33 , 100 للـ38 , 0 للـ43
---
خيار [ up ]
. نعمل Keyframe في الفريم 53 و نغير الطول و العرض الى 125%
و نغير الاحداثيات الى x=0 , y=-15
ثم نغير الـTint الى لون الـSelected color حسب جدول الالوان
. نعمل Keyframe في الفريم 18 و نغير احداثيات القائمه الى x=0 , y=-5
. نعمل Keyframe في الفريم 23 و نغير احداثيات القائمه الى x=0 , y=5
. نعمل Keyframe في الفريم 28 و نغير احداثيات القائمه الى x=0 , y=0
. نعمل [ Classic tween ] للفريمات 49 , 53 , 58 , 63 ، مع تغيير الـ ease الى 100 للفريم 49
و -100 للـ53 , 100 للـ58 , 0 للـ63
---
الآن خيار [ down ]
. نعمل Keyframe في الفريم 73 و نغير الطول و العرض الى 125%
و نغير الاحداثيات الى x=0 , y=15
ثم نغير الـ Tint الى لون الـ Selected color حسب جدول الالوان
. نعمل Keyframe في الفريم 78 و نغير احداثيات القائمه الى x=0 , y=5
. نعمل Keyframe في الفريم 83 و نغير احداثيات القائمه الى x=0 , y=-5
. نعمل Keyframe في الفريم 88 و نغير احداثيات القائمه الى x=0 , y=0
. نعمل[ Classic tween ] للفريمات 69 , 73 , 78 , 83 ، مع تغيير الـ ease الى 100 للفريم 69
و -100 للـ73 , 100 للـ78 , 0 للـ83
---
آخر خطوات عمل التأثيرات
. نضيف Keyframe في الفريم 89 ، و نغير الطول و العرض للايقونه الى 125%
و نغير اللون الى لون الـ Selected icon ، و الاحداثيات [ 0.0 ]
. ثم نعمل Classis tween لنفس الفريم و الـease = 100
. نضيف Keyframe للفريمات التاليه : 96 , 100 , 103
. في الفريم 96 نغير الطول و العرض الى 10% و اللون الى الـunselected color و الاحداثيات [ 0.0 ]
. في الفريم 100 نغير الطول و العرض الى 140% و اللون الى الـselected color و الاحداثيات [ 0.0 ]
. في الفريم 103 نغير الطول و العرض الى 125% و الاحداثيات [ 0.0 ]
.نعمل Classic tween في الفريمات 96 , 100
و نغير الـ ease للفريم 96 الى 100 , و نبقيه للفريم 100 على 0
انتهينا من عمل التأثيرات ، و يجب ان يكون الشريط الزمني مثل هذا
الآن خطوه وضع العنوان Title و الايقونات بالمكان المناسب لهم
نضيف اللايرات التاليه
Actions < و نقوم بأغلاقه , Title , Brand - Cyper-Shot , Brand - Walkman , Icons , Background
الآن ننتقل للاير Icons ، و نضيف الـ Effects بالسحب و الافلات الى ساحه العمل
و نضعها بالاحداثيات التاليه حسب الجدول
و نسميها حسب الاسم الموضح بالجدول
أي سنضع الـ Effects 12 مره
---
ثم ننتقل للاير الـ Title ، و نضيف مستطيل للكتابه ، نسميه : titleField
و نغير الاحداثيات الى x=-40 , y=22 , w=320 , h=30
نوع الخط : أي نوع لن يؤثر لأنه سيتم استخدام الخط الخاص بالهاتف
حجم الخـط 20
اللون : حسب الجدول
Anti-alias > Use device fonts
و نوسط الكتابه و نختار الـ Behavior : Single line
نزيل الاختيار عن باقي الخيارات المختاره
الآن يمكن اغلاق لاير الـIcon و Title ، و نجعل لاير الـTitle مخفي
---
ثم نتجه للاير الـ Brand - Cyper-Shot ، و نضيف علامه الـ Cyper-Shot الى ساحه العمل مع وضع الاحداثيات على x=61 , y=26
و اللون نفس لون العنوان و نغير الاسم الى [ brandC ]
- ثم نتجه للاير الـBrand - Walkman، و نضيف علامه الـWalkman الى ساحه العمل مع وضع الاحداثيات على x=47 , y=22
و اللون نفس لون العنوان و نغير الاسم الى [ brandW ]
بالأمكان ترك خانه الاسم فارغه و عدم كتابه [ brandC ] - [ brandW ] او كتابتها بطريقه خاطئه
و النتيجه ستظهر لك العلامتين Wallman و Cyper-Shot سوياً، أي مثلا ستظهر Cyper-Shot في ايقونه الكاميرا حتى لو كان جهازك Walkman
---
يمكن اضافه أي خلفيه اذا اردنا الى لاير الـ Background على ان تكون بصيغه png، انا سأترك الخلفيه سوداء كما هي
عند اضافه الخلفيه الى المكتبه،Library نضغط بزر الماوس الايمن و نختار Properties، و نضع الخيار "Compression" على "Lossless (PNG/GIF)
نضغط OK و نضيف الخلفيه من المكتبه بالسحب و الافلات و نضع الحداثيات على (0,0)
الان يمكن اعاده اللاير Title مرئي ، و اغلاق كافه اللايرات !
---
الخطوه الاخيره هي اضافه السكريبت ..
كل سكريبت له عمل معين لكن لن اتمكن من الشرح لأن الشرح سيطون فوق مه هو طويل حاليا ^_^
المهم نضيف السكريبت التالي الى اللاير Action
عند اختيار اللاير نضغط F9 و نضيف السكريبت في الملف التالي كاملاً :
السكريبت.rar
نضغط File > Save as ، لنحفظ العمل بصيغه FLA ، لكي نستطيع التعديل عليه لاحقاً اذا اردنا
و نضغط File > Export > Export Movie ليصبح لدينا ملف فلاش - قائمه فلاشيه - كما في الصوره
طبعا هذا الملف اصبح غير قابل للتعديل لذلك قمنا بحفظه اولاً بصيغه FLA .
لتحميل القائمه الفلاشيه التي تم صنعها كما في الشرح :
Flash Menu
اما ملف الـFLA الذي قمت بصنعه لن ارفعه لتشجيع الاعضاء على التجربه
لأنه يمكن فيما بعد تغيير الخلفيه و الالوان و حتى التأثيرات بواسطه هذا الملف ^^
تــــــــــم
المشاركة الأصلية كتبت بواسطة Silent_queen
.. بالتوفيق ,,
مواقع النشر (المفضلة)