مدخلك لإحتراف فلاش

الظبي · 03-12-2002, 01:12 AM

هذا الدرس يعتبر مدخلك إلى عالم الإحتراف في فلاش فهو يحتوي على نقاط متقدمة جداً مثل تغيير محتويات المتغيرات، الأزرار الخفية واستخدام لغة HTML داخل محتويات المتغيرات في فلاش.

وفي هذا الدرس سنتعلم كيف نصنع الأزرار الخفية وكيف نستخدمها عدة مرات دون الحاجة لعمل أزرار كثيرة وذلك لتقليل الحجم، سرعة التصميم والإدارة وأخيراً للتحكم أكثر.، فوائدها وأشياء أخرى متعلقة بها. كما سنطرح أمثلة متقدمة عن كيفية استخدام الزر في التحكم بالأفلام Movie Clips المتوفرة في العرض بحيث يمكن إخفاؤها أو تحريكها وهكذا.

أولاً وقبل الخوض في الأزرار الخفية، يجب علينا معرفة مكونات الزر الأربعة في فلاش وهي:

Up شكل الزر الطبيعي أو عندما لا تكون الفأرة فوقه.

Over شكل الزر عند مرور الفأرة فوقه

Down شكل الزر عند الضغط عليه

Hit الشكل أو المساحة التي تجعل الزر يعمل بمعنى االمنطقة التي يمكن استخدام الزر بها.

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

الآن سننتقل للجزء الأول من الدرس

الجزء الأول:

الآن عرفنا مدى أهمية الجزء أو الكيفريم الأخير من الزر Hit وسنستخدمه لعمل الزر الخفي، وإليكم الخطوات:

قم بعمل زر جديد بالضغط على Ctrl+F8 أو من القائمة Insert ثم اختر New Symbol

ستظهر لك نافذة تكوين العنصر الجديد، قم باختيار زر Button وأعطه اسم مثلاً BlankButton

سيتم فتح نافذة جديدة للعنصر (الزر) المكون أو الجديد. ستجد في لوحة الخط الزمني بأن هناك 4 كيفريم كما ذكرنا.

اضغط على الكيفريم الرابع تحت كلمة Hit ثم اصنع كيفريم جديد بالضغط على F6

لقد كونت كيفريم في خانة Hit بحيث يمكنك رسم المساحة المفعلة للزر وليكن مربع أحمر.

قم برسم مربع في وسط الصفحة.

انتهى تكوين الزر الآن قم بالعودة للعرض الرئيسي.

نريد الآن إدخال الزر للعرض الرئيسي مع أن هذا سابق لأوانه لكن لنستعرض كيف سيكون شكل الزر الخفي في العرض.

قم بفتح نافذة المكتبة عن طرق ضغط Ctrl+L ستجد بأن الزر المخفي BlankButton موجود.

أدرج الزر في العرض بالضغط عليه وسحبه إلى العرض الرئيسي

ستلاحظ وجود الزر المربع بلون سماوي فاتح مهما كان اللون الذي وضعناه (الأحمر). هذا لأنه مخفي وما قمت برسمه هو المنطقة التي سيعمل بها الزر.

لتجربة العرض وترى كيف يظهر الزر عند العرض، قم بتكبير الزر لحجم معقول وليكن نصف الصفحة. ثم اضغط Ctrl+Enter

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

قم بإغلاق نافذة التجربة وحذف الزر الذي وضعته في العرض.

الآن عرفنا كيف نصنع الزر المخفي، فما فائدته وماذا يمكننا أن نصنع منه؟ هذا ما سنعرفه في الجز الثاني من الدرس.

الجزء الثاني:

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

قم بعمل موفي كليب جديد بالضغط على Ctrl+F8 أو من القائمة Insert ثم اختر New Symbol

ستظهر لك نافذة تكوين العنصر الجديد، قم باختيار موفي كليب Movie Clip وأعطه اسم مثلاً Button Draw

سيتم فتح نافذة جديدة للموفي كليب المكون أو الجديد.

قم بعمل مربع ملون أو سهم أو أي شكل تريد وسنستخدم هنا مستطيل.

أدرج طبقة جديدة بالضغط على علامة + في نافذة الخط الزمني.

في الطبقة الجديدة قم بتكوين حقل نصي فوق المستطيل بحجم المستطيل بالكامل

تأكد من إعدادات الحقل النصي بحيث يكون نوعه ديناميكي Dynamic Text وبأن اسم المتغير Variable مثلاً Text

الآن قم بعمل نسخ للطبقتين التي تحتوي على الشكل وحقل النص باختيارهما من نافذة الخط الزمنب والضغط على Ctrl+Alt+C وكررها 3 مرات بالضغط على Ctrl+Alt+V بحيث يكون لديك 3 كيفريم كل واحدة من طبقتين تحتوي الطبقة الأولى على حقل نصي والثانية على مربع. كما في الشكل التالي:

قم بتغيير لون المستطيل الأبيض ولون الخط للحقل النصي في كل كيفريم بحيث يكون الفريم الأول لشكل عادي والثاني عند مرور الفأرة والأخير عند الضغط.
الآن سنضيف طبقة جديدة للأكشن سكريبت. قم بإضافة طبقة جديدة كما ذكرنا سابقاً وضع أكشن سكريبت الإيقاف Stop في كل طبقة وذلك حتى لا يتحرك الموفي كليب بشكل متكرر.

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

الجزء الثالث:

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

كما سنقوم بعمل حقل نصي كبير بأسطر متعددة ليحتوي على محتويات الالموقع من نصوص مكتوبة. ولنقوم بهذا الموقع الكامل الآن باستخدام العنصرين المتوفران بالمكتبة، سنقوم بالتالي:

قم بإدراج الموفي كليب Button Draw إلى العرض الرئيسي. اضغط عليه مرة واحدة ثم اضغط الزر الأيمن واختر Panel ثم اختر Instance لتغيير خصائصه. (في فلاش إم أكس اختر Properties).

في نافذة الخصائص ضع اسم الموفي كليب Name وحدده باسم BText1 أي أن الموفي كليب سيحمل هذا الاسم.

قم بنسخ الموفي كليب أربع مرات (أو حسب ما تريد) وذلك بضغط وسحب الموفي كليب مع الضغط على Ctrl+Shift

عدل اسم الموفي كليب الثاني إلى BText2 والثالث إلى BText3 وهكذا ..

أدرج طبقة جديدة للأكشن سكريبت واضغط على الكيفريم وقم بإدراج الأكشن سكريبت التالي:

BText1.text = "About";
BText2.text = "Products";
BText3.text = "Services";
BText4.text = "Contact Us";

كما تعلمون بأن لدينا الآن موفي كليب اسمه BText1 وبداخله حقل نصي اسمه Text وقمنا هنا بتغيير محتوى المتغير Text لكل موفي كليب.

الآن عند تجربة العرض ستجد بأن الأزرار الأربعة (هي موفي كليب ولكن سنجعلها أزرار) كل واحد منها يحتوي على كلمة.

سنقوم الآن بتحويل الموفي كليب إلى أزرار، ولنقوم بذلك نتبع اللآتي:

قم بعمل طبقة جديدة فوق الطبقة التي تحتوي على الموفي كليب.
أدرج الزر المخي Blank Button فوق كل موفي كليب الواحد بعد الآخر وقم بتكبيره أو تصغيره ليكون فوق الكليب بالضبط.

الآن سنقوم بعمل الأكشن سكريبت الذي يتحكم بالموفي كليب لكي يعمل كزر، قم بالضغط على الزر الأول مرة واحدة ثم اضغط عليه بالزر الأيمن واختر Actions

قم بإدراج الأكتشن سكريبت التالي (انسخه من هنا وألصقه في نافذة الأكشن)

on (rollOver, dragOver) {
tellTarget ("BText1") {
gotoAndStop (2);
}
}
on (rollOut, dragOut) {
tellTarget ("BText1") {
gotoAndStop (1);
}
}
on (press) {
tellTarget ("BText1") {
gotoAndStop (3);
}
}
on (release) {
tellTarget ("BText1") {
gotoAndStop (1);
}
}

لاحظ بأننا استخدمنا أمر TellTarget والذي نستخدمه لنأمر الموفي كليب المستهدف Target وهو BText1 لكي يذهب لكيفريم ويتوقف بداخله حسب حركة الفأرة على الزر المخفي.

الآن قم بنسخ الكود نفسه وضعه على بقية الأزرار المخفية مع تغيير اسم الموفي كليب المستهدف إلى BText2 و BText3 وهكذا ..

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

الجزء الرابع:

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

قم بإدراج حقل نصي جديد في العرض الرئيسي وتأكد من أنه ديناميكي Dynamic Text

أعط اسم المتغير Variable اسم BigText

الآن اضغط على الزر الأول ثم اضغط الزر الأيمن واختر Actions ستجد الأكشن الذي قمنا بوضعه للزر

أضف السطر التالي للأكشن في خانة مرور الفأرة on rollover:

BigText = "A brief about Eyad as a Pro Flash Designer & Develpoer";

وفي خانة خروج الفأرة on out أضف:

BigText = "A brief about Eyad as a Pro Flash Designer & Develpoer";

ليصبح الأكشن كالتالي:

on (rollOver, dragOver) {
BigText = "A brief about Eyad as a Pro Flash Designer & Develpoer";
tellTarget ("BText1") {
gotoAndStop (2);
}
}
on (rollOut, dragOut) {
BigText = "";
tellTarget ("BText1") {
gotoAndStop (1);
}
}
on (press) {
tellTarget ("BText1") {
gotoAndStop (3);
}
}
on (release) {
tellTarget ("BText1") {
gotoAndStop (1);
}
}

لاحظ هنا بأننا قمنا بتغيير محتوى المتغير (الحقل) BigText بما نريد قوله عند مرور الفأرة فوق الزر أو خروجه. ولاحظ أيضاً بأن هذا لا ينطبق على الموفي كليب BText1 وبالتالي جاء الأمر قبل TellTarget أي أنه مستقل عنه.

المطلوب الآن نقل هذا الكود لبقية الأزرار وتغيير رقم الزر كما فعلنا سابقاً ومحتوى كل تلميح خاص بالمتغير BigText

أخيراً نريد وضع محتويات جميع الموقع مع استخدام أوامر HTML ولعمل ذلك سنقوم بالآتي:

أدرج حقل نصي كبير بحجم الشاشة تقريباً بحيث يكون أسفل النص BigText ويسار قائمة الأزرار من BText1 إلى BText4

تأكد من أنه ديناميكي وحدد المتغير Variable باسم AllText وعدل الأسطر بحيث يكون Multi Line أي متعدد الأسطر.

أيضاً ضع علامة صح على خانة HTML لتفعيل اللغة وعلى خانة Word Wrap لسحب الكلمات من السطر الطويل للسطر التالي.

الآن سنجعل هذا النص يظهر المحتويات عند الضغط على الزر كما فعلنا في النص BigText وذلك كالتالي:

أضف السطر التالي للأكشن في خانة الضغط على الفأرة on press:

AllText = "Hi, My name is Eyad Y. Makki. I work for IFAWAL as a GM. I am also one of the best Flash developers in the Arab world. Ranked No.1 in Saudi Arabia and the gulf in Flash4 from <a href=\"http://www.brainbench.com\" target=\"_blank\">BranBench.com</a>. I hope you learn from my lesson.";

ليصبح الأكشن كالتالي:

on (rollOver, dragOver) {
BigText = "A brief about Eyad as a Pro Flash Designer & Develpoer";
tellTarget ("BText1") {
gotoAndStop (2);
}
}
on (rollOut, dragOut) {
BigText = "";
tellTarget ("BText1") {
gotoAndStop (1);
}
}
on (press) {
AllText = "Hi, My name is Eyad Y. Makki. I work for IFAWAL as a GM. I am also one of the best Flash developers in the Arab world. Ranked No.1 in Saudi Arabia and the gulf in Flash4 from . I hope you learn from my lesson.";
tellTarget ("BText1") {
gotoAndStop (3);
}
}
on (release) {
tellTarget ("BText1") {
gotoAndStop (1);
}
}

أرجو ملاحظة أن هناك أوامر HTML منها ما قمت بجعله سميك باستخدام أمر في لغة HTML وإغلاقه باستخدام مع مراعاة نقطة في غاية الأهمية وهي بأن فلاش يحول بعض الأحرف والرموز التي تؤثر على الأكشن مثل الرمز التالي " وغيرها بحيث يضيف قبلها علامة \ أي تصبح علامة التنصيص بدلاً من " تصبح "\ كما هو في الوصلة التالية داخل فلاش

<a href=\"http://www.brainbench.com\" target=\"_blank\">BranBench.com</a>

الآن كل ما بقي عليك هو نسخ كود الأكشن من الزر الأول ولصقه ببقية الأزرار لديك موقع كامل يحتوي على قائمة، تلميحات ومحتويات تستطيع تغيير أي كلمة في أي وقت وكل هذا باستخدام عنصرين فقط.

الخلاصة:

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

وكالعادة أنتظر الاستفسارات والتعليقات على هذا الدرس الذي يعابر البوابة لإحتراف فلاش. وسأحاول عمل مثال وطرحه على شكل ملف مفتوح لكن أولاً أريد الآراء والاقتراحات لكي أقوم بعملها في الملف المفتوح لهذا الدرس والذي ستفهمون منه بالتفصيل.

تحياتي للجميع وتمنياتي لكم بالتوفيق في إحتراف فلاش.

منقوووووووول للأفاده القصوى

تحياتي

أسـ الحزن ـيرة · 06-12-2002, 12:30 AM

يعطيك الف الف
عااافية معلومات من جد قيمة
الله يوفقك دوم
00 لىعودة فى تعليق

الظبي · 06-12-2002, 05:46 PM

وان شاء الله تستفيدي منها قدر الامكان.

تحياتي لكي.

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق