طيف_المغارة
13-07-2006, 06:47 AM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
دورة تعلم عمل أزرار تفاعلية ..Rollover button : الجزء الأول
البرنامج المستعمل : Macromedia Flash 8 PRO
الدرس يمكن تطبيقه مع النسخ الأخرى
الدورة ستتكون إن شاء الله من ثلاثة أجزاء
ستكون قادرا في نهايتها على :
تصميم أزرار و قوائم تفاعلية Rollover button و ربطها بالشبكة
تصميم أزرار و قوائم تفاعلية Rollover button متحركة
طبط تصرفات الأزرار عبر ربطها بأكواد معينة من نافذة Action
إضافة الأصوات للأزرار حسب وضعياتها
إضافة إلى تلميحات و تقنيات أخرى
المستوى : مبتدئ - متوسط
و على بركة الله نبدأ
القائمة التي سنقوم بتصميمها هي هذه و هي بامتداد swf يعني فلاش و حجمها 5 كيلو و نصف
من هـــــــــــــــــــــــــــــــــــــــنا (http://members.*************/teeef25/test.htm)
افتح برنامج ميكروميديا فلاش
و اختر عمل جديد بالمقاسات التي تناسبك
الآن سنشرع في تصميم زر تفاعلي
من قائمة Insert اختر New symbol
http://absba7.absba.org/teamwork8/ss3/12.jpg
من النافذة القافزة علم خيار -- button -- و سم زرك
http://absba7.absba.org/teamwork8/ss3/13.jpg
من قائمة الأدوات اختر Rectangle tool أو اضغط مباشرة على الحرف R لتفعيلها
http://absba7.absba.org/teamwork8/ss3/14.jpg
ثم من هنا اضغط على الزر البارز لتدوير أركان المستطيل
http://absba7.absba.org/teamwork8/ss3/15.jpg
ثم أدخل القيمة المناسبة لشدة الإنحناء المرغوبة
http://absba7.absba.org/teamwork8/ss3/16.jpg
ثم ارسم شكلا كهذا البارز في الصورة أو آخر من ابتكارك .. و اضبط ألوان الإطار و الوسط
حسب ما يناسبك
http://absba7.absba.org/teamwork8/ss3/17.jpg
و هذا سيكون مظهر الزر في الوضعية UP
نذهب بعدها إلى الوضعية Over و نضغط بالزر الأيمن
http://absba7.absba.org/teamwork8/ss3/18.jpg
و نختار Isert keyframe أو نختصر ذلك و نضغط F6
http://absba7.absba.org/teamwork8/ss3/19.jpg
بعدها و في الوضعية Over نغير الألوان بما يناسب عملنا -- من هنا
http://absba7.absba.org/teamwork8/ss3/20.jpg
و نتابع بنفس الطريقة حتى نحصل على مظاهر مختلفة في الوضعيات الثلاث الأساسية
http://absba7.absba.org/teamwork8/ss3/21.jpg
http://absba7.absba.org/teamwork8/ss3/33.jpg
http://absba7.absba.org/teamwork8/ss3/34.jpg
بعد ذلك ننتقل إلى صفحتنا الأولى Stage عبر الضغط على زر Scene 1
http://absba7.absba.org/teamwork8/ss3/24.jpg
بعدها نتجه إلى المكتبة Library حيث سنجد الزر الذي صممناه و نقوم بسحبه إلى الصفحة أي ال Stage عدة مرات بما يناسب روابط موقعك أو تصميمك
http://absba7.absba.org/teamwork8/ss3/25.jpg
بعدها نختار أداة الكتابة بالضغط على الحرف T
و نكتب فوق كل زر نصا بما يناسب مواضيعنا و روابطنا
و اضبط إعدادات النص من هنا طبعا على ذوقك
و لا تنس تفعيل خاصية Static text
http://absba7.absba.org/teamwork8/ss3/26.jpg
لتحصل على قائمة كهذه
http://absba7.absba.org/teamwork8/ss3/27.jpg
الآن سنقوم بإملاء الأوامر على كل زر ... كل واحد سيقوم بفتح رابطه ...
لأجل ذلك نحدد الزر -- تأكد أنك حددت الزلر و ليس النص -- و نذهب إلى النافذه Action
التي توجد أسفل صفحة العمل
http://absba7.absba.org/teamwork8/ss3/28.jpg
و أدخل الكود التالي
ولا تنس إدخال رابطك كاملا بين القوسين
on (release) {
getURL("رابطك هنا كاملا");
}
تابع مع باقي الأزرار بنفس الطريقة و غير الرابط الخاص بكل واحد
و الآن مبروك عليك القائمة التفاعلية التي صمتها بيدك
لتجريبها اضغط Ctrl+Enter
جربت .. كلو تمام .. أغلق نافدة التجريب و لنتابع
قم بتحديد كل الأزرار و النصوص بالسهم كما تفعل إذا رغبت في تحديد ملفات كثير ة لحدفها أو فتحها يعني اضغط و جر السهم حتت تلحظ ما يلي
http://absba7.absba.org/teamwork8/ss3/29.jpg
و الآن سنجعل القائمة كعنصر واحد لتسهيل إضافتها كاملة في تصميماتنا لأجل ذلك اضغط بزر
الفأرة الأيمن على التحديد و اختر Convert to symbol
http://absba7.absba.org/teamwork8/ss3/30.jpg
وكالعادة نسميها و نجعلها كما يلي
http://absba7.absba.org/teamwork8/ss3/31.jpg
الآن ستجدها بالمكتبة و يمكنك استعمالها مع أخريات أفقية أو عمودية صممتها
بسحبها إلى صفحة العمل
http://absba7.absba.org/teamwork8/ss3/32.jpg
و عند انتهائك يمكنك تصدير العمل ككل او فقط قائمتك لإدراجها في صفحة html بالدريمويفر أو غيره
من قائمة File اختر Export ثم Export movie و تابع بضغط ok
http://absba7.absba.org/teamwork8/ss3/31.jpg
http://absba7.absba.org/teamwork8/ss3/32.jpg
مبروك عليك القائمة و لا تنس التطبيق أن تعرضه هنا
أو مشكلة واجهتك
و الدرس المقبل سيكون لكيفية جعل الأزرار تتحرك -- تأثير الزوم --
بعد أن تتحقق أهداف الأول
و تجدرر الإشارة إلى التالي
لست مجبرا بتصميم أزرارك في برنامج الفلاش
يمكنك عملها بالفوتوشوب أو غيره و استيرادها بالفلاش
و المهم أن تكون شفافة بالامتداد المتجهي png
و تذكر أن تصمم حسب الوضعيات الثلاث الأساسية up - over - down -
يعني لكل زر أربعة أشكال
و أتمنى ان أكون قد توفقت في الشرح
و الحقوق مفتوحة في غير النسب .. و جزى الله خيرا من ساهم في نشره
دعواتكم الطيبة
أخوكم
تم رفع الصور على السيرفر بواسطة المشرف العامsultan2
السلام عليكم ورحمة الله وبركاته
دورة تعلم عمل أزرار تفاعلية ..Rollover button : الجزء الأول
البرنامج المستعمل : Macromedia Flash 8 PRO
الدرس يمكن تطبيقه مع النسخ الأخرى
الدورة ستتكون إن شاء الله من ثلاثة أجزاء
ستكون قادرا في نهايتها على :
تصميم أزرار و قوائم تفاعلية Rollover button و ربطها بالشبكة
تصميم أزرار و قوائم تفاعلية Rollover button متحركة
طبط تصرفات الأزرار عبر ربطها بأكواد معينة من نافذة Action
إضافة الأصوات للأزرار حسب وضعياتها
إضافة إلى تلميحات و تقنيات أخرى
المستوى : مبتدئ - متوسط
و على بركة الله نبدأ
القائمة التي سنقوم بتصميمها هي هذه و هي بامتداد swf يعني فلاش و حجمها 5 كيلو و نصف
من هـــــــــــــــــــــــــــــــــــــــنا (http://members.*************/teeef25/test.htm)
افتح برنامج ميكروميديا فلاش
و اختر عمل جديد بالمقاسات التي تناسبك
الآن سنشرع في تصميم زر تفاعلي
من قائمة Insert اختر New symbol
http://absba7.absba.org/teamwork8/ss3/12.jpg
من النافذة القافزة علم خيار -- button -- و سم زرك
http://absba7.absba.org/teamwork8/ss3/13.jpg
من قائمة الأدوات اختر Rectangle tool أو اضغط مباشرة على الحرف R لتفعيلها
http://absba7.absba.org/teamwork8/ss3/14.jpg
ثم من هنا اضغط على الزر البارز لتدوير أركان المستطيل
http://absba7.absba.org/teamwork8/ss3/15.jpg
ثم أدخل القيمة المناسبة لشدة الإنحناء المرغوبة
http://absba7.absba.org/teamwork8/ss3/16.jpg
ثم ارسم شكلا كهذا البارز في الصورة أو آخر من ابتكارك .. و اضبط ألوان الإطار و الوسط
حسب ما يناسبك
http://absba7.absba.org/teamwork8/ss3/17.jpg
و هذا سيكون مظهر الزر في الوضعية UP
نذهب بعدها إلى الوضعية Over و نضغط بالزر الأيمن
http://absba7.absba.org/teamwork8/ss3/18.jpg
و نختار Isert keyframe أو نختصر ذلك و نضغط F6
http://absba7.absba.org/teamwork8/ss3/19.jpg
بعدها و في الوضعية Over نغير الألوان بما يناسب عملنا -- من هنا
http://absba7.absba.org/teamwork8/ss3/20.jpg
و نتابع بنفس الطريقة حتى نحصل على مظاهر مختلفة في الوضعيات الثلاث الأساسية
http://absba7.absba.org/teamwork8/ss3/21.jpg
http://absba7.absba.org/teamwork8/ss3/33.jpg
http://absba7.absba.org/teamwork8/ss3/34.jpg
بعد ذلك ننتقل إلى صفحتنا الأولى Stage عبر الضغط على زر Scene 1
http://absba7.absba.org/teamwork8/ss3/24.jpg
بعدها نتجه إلى المكتبة Library حيث سنجد الزر الذي صممناه و نقوم بسحبه إلى الصفحة أي ال Stage عدة مرات بما يناسب روابط موقعك أو تصميمك
http://absba7.absba.org/teamwork8/ss3/25.jpg
بعدها نختار أداة الكتابة بالضغط على الحرف T
و نكتب فوق كل زر نصا بما يناسب مواضيعنا و روابطنا
و اضبط إعدادات النص من هنا طبعا على ذوقك
و لا تنس تفعيل خاصية Static text
http://absba7.absba.org/teamwork8/ss3/26.jpg
لتحصل على قائمة كهذه
http://absba7.absba.org/teamwork8/ss3/27.jpg
الآن سنقوم بإملاء الأوامر على كل زر ... كل واحد سيقوم بفتح رابطه ...
لأجل ذلك نحدد الزر -- تأكد أنك حددت الزلر و ليس النص -- و نذهب إلى النافذه Action
التي توجد أسفل صفحة العمل
http://absba7.absba.org/teamwork8/ss3/28.jpg
و أدخل الكود التالي
ولا تنس إدخال رابطك كاملا بين القوسين
on (release) {
getURL("رابطك هنا كاملا");
}
تابع مع باقي الأزرار بنفس الطريقة و غير الرابط الخاص بكل واحد
و الآن مبروك عليك القائمة التفاعلية التي صمتها بيدك
لتجريبها اضغط Ctrl+Enter
جربت .. كلو تمام .. أغلق نافدة التجريب و لنتابع
قم بتحديد كل الأزرار و النصوص بالسهم كما تفعل إذا رغبت في تحديد ملفات كثير ة لحدفها أو فتحها يعني اضغط و جر السهم حتت تلحظ ما يلي
http://absba7.absba.org/teamwork8/ss3/29.jpg
و الآن سنجعل القائمة كعنصر واحد لتسهيل إضافتها كاملة في تصميماتنا لأجل ذلك اضغط بزر
الفأرة الأيمن على التحديد و اختر Convert to symbol
http://absba7.absba.org/teamwork8/ss3/30.jpg
وكالعادة نسميها و نجعلها كما يلي
http://absba7.absba.org/teamwork8/ss3/31.jpg
الآن ستجدها بالمكتبة و يمكنك استعمالها مع أخريات أفقية أو عمودية صممتها
بسحبها إلى صفحة العمل
http://absba7.absba.org/teamwork8/ss3/32.jpg
و عند انتهائك يمكنك تصدير العمل ككل او فقط قائمتك لإدراجها في صفحة html بالدريمويفر أو غيره
من قائمة File اختر Export ثم Export movie و تابع بضغط ok
http://absba7.absba.org/teamwork8/ss3/31.jpg
http://absba7.absba.org/teamwork8/ss3/32.jpg
مبروك عليك القائمة و لا تنس التطبيق أن تعرضه هنا
أو مشكلة واجهتك
و الدرس المقبل سيكون لكيفية جعل الأزرار تتحرك -- تأثير الزوم --
بعد أن تتحقق أهداف الأول
و تجدرر الإشارة إلى التالي
لست مجبرا بتصميم أزرارك في برنامج الفلاش
يمكنك عملها بالفوتوشوب أو غيره و استيرادها بالفلاش
و المهم أن تكون شفافة بالامتداد المتجهي png
و تذكر أن تصمم حسب الوضعيات الثلاث الأساسية up - over - down -
يعني لكل زر أربعة أشكال
و أتمنى ان أكون قد توفقت في الشرح
و الحقوق مفتوحة في غير النسب .. و جزى الله خيرا من ساهم في نشره
دعواتكم الطيبة
أخوكم
تم رفع الصور على السيرفر بواسطة المشرف العامsultan2