كيف نبني على زر المتحركه باستخدام فلاش

Share

|

الوقت : 15 دقيقة.
مستوى الصعوبه : متوسط
الاحتياجات : فلاش 8
ويفترض المعرفه : actionscripting الاساسية ، وذلك باستخدام اجراءات النافذة ، باستخدام المتغيرات ، وخلق رموز.

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

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

قبل البدء :

الرجاء تنزيل الملفات المصدر : animated_button.fla وtweeningengine.mxp.

بإستخدام محرك tweening :

لالمبدئ ، وتثبيت "tweeningengine.mxp" التمديد (أنت عادل لها الى انقر نقرأ مزدوجا على انها وانها سوف تقودك الى تمديد مدير). ستضطر لفتح / اعادة فتح فلاش.

انشاء وثيقة جديدة. حدد الاطار المعدل الى 35.
جعل السينما كليب يحتوي على مستطيل مع زوايا تقريبه ، وآخر واحد أصغر حسب الطول ولون مع اخف على رأس أول مجموعة واحدة والى 50 الفا ، ثم تضاف للنص على الزر.
اسم لهم وأيضا اسم الحالات. (عندي backofbutton ، frontofbutton مع يناظرها من الحالات : بوب وفوب).
جعل فيلم آخر كليب لاحتواء كل من لقطات الفيلم المذكور اعلاه والنص. اسم انها mybutton المثال - الاسم : myb.

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

الاولين تستخدم لاستيراد tweening الطبقات والانتقال فلاش / تخفيف الطبقة وانها ينبغي ان تدرج في الاجراءات نافذة الاولى داخل اطار "mybutton" السينما كليب.

استيراد xtd.tweening *. ؛
استيراد mx.transitions.easing *. ؛
استيراد flash.filters.dropshadowfilter ؛

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

فأر stripshrink = الجديدة 832/15/a (فوب ، "_yscale" ، bounce.easeout ، 95 ، 0 ، 10 ، كاذبة) ؛
فأر textcoloring = الجديدة colortween (textline ، strong.easeout ، "الحالي" ، "663300" ، 8 ، كاذبة) ؛
فأر backshadow = الجديدة filtertween (بوب ، dropshadowfilter جديدة (1 ، 90 ، 0x000000 ،.5 ، 5 ، 5 ، 1 ، 3) ، "المسافة" ، strong.easeout ، "الحالي" ، 10،20 ، كاذبة) ؛

وكما ترون هناك استخدمت ثلاثة انواع من tweens كل بسيط جدا ان نفهم بعد ان نذكر مثلا من الفيلم كليب وهو يشير الى ذلك ، فان الملكيه 832/15/a سيتغير ، والتخفيف من نوع ، ابتداء من القيمه ، والقيمه المنتهى ، مدة واذا 832/15/a يبدأ تلقائيا ام لا.

  كما اننا اخترنا "كاذبة" من اجل "تشغيل تلقائي" الممتلكات ، tweens ستبدأ بعد عندما الماوس فوق : this.onrollover = الوظيفة () (stripshrink.start () ؛ Backshadow.start () ؛ Textcoloring.start () ؛ ) ؛ 

  This.onrollout = الوظيفة () (stripshrink.reverse (regular.easein) ؛ Backshadow.reverse (regular.easeout) ؛ Textcoloring.reverse (regular.easeout) ؛) ؛ 

وعندما لم يعد الماوس على الزر فان جهودنا tweens سيتم عكسه مع تخفيف وظائف مختلفة.

اغلاق

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

شكرا لقراءة هذه الدورة التعليميه والامل وستجدون المفيد هذه الدورة التعليميه ، ولقد قمت الاداه التي استخدمت لصنع الصور المتحركه زر.