بارد فلاش التعليمية مفعول!

موجز

في هذا البرنامج التعليمي سوف تتعلم كيفية إنشاء مكعب الانتقال تأثير على التمديد الماوس.

وهنا النتائج النهائية :

متطلبات

فلاش CS3 أو فلاش CS4.

ملاحظة : لقطة للشاشة في هذا البرنامج التعليمي هو المحرز في فلاش CS3. انها تعمل بنفس الكفاءة في فلاش CS4.

الخطوة 1 -- تثبيت أثر مكون

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

الخطوة 2 -- خلق طبقة جديدة

لابقاء الامور مرتبة يجب خلق طبقة جديدة على الخط الرئيسي وإعطائه اسما. تفعل ذلك كما هو مبين في الصورة ادناه.

الخطوة 3 -- انشئ الخلفية

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

حدد الإطار الأول في بريتش غاز "" طبقة ورسم شكل مع أداة المستطيل على قماش. حدد المستطيل وضبط إعدادات اللون لديهم ميل لطيفة (يمكنك أيضا استخدام أي لون آخر).

الخطوة 4 -- إنشاء زر

أثر مكعب ينبغي أن تتصرف بشكل حيوي لمستخدمي الدولة الماوس (تجديد / التمهيدية). فمن الأفضل ممارسة عدم إضافة المستمع لتأثير الحدث في حد ذاته ، وبدلا من استخدام "فارغ" الزر.

انقر فوق الإطار الأول في طبقة "btn" ورسم مستطيل مع حجم قماش ملونة لا الأم منذ الزر لن تكون مرئية). حدد المستطيل وتحويله إلى زر مع [اضغط F8] أو الحق في الضغط على MovieClip --> "لتحويل الرمز...".

تعيين اسم الزر إلى "btn" وتأكد من أن هذا النوع هو "زر".

انقر نقرا مزدوجا فوق زر. الآن اسحب keyframe الأولى "حتى" إلى الإطار الأخير "هيت". هذا يجعل من المؤكد أن الزر سوف تكون تفاعلية ولكن غير مرئية.

العودة الى الجدول الزمني الرئيسي وتعيين اسم مثيل على زر "btn".

الخطوة 5 -- انشئ بداية Movieclip

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

انقر على الإطار الأول على طبقة "img1". استيراد صورة مع حجم قماش بالضغط على السيطرة الصحافة [أر] أو "ملف" --> "استيراد" --> "استيراد على خشبة المسرح...".

الآن تحويل هذه الصورة إلى Movieclip وتسميته "img1".

تعيين اسم مثيل بإنشائه Movieclip الى "img1".

الخطوة 6 -- انشئ نهاية Movieclip

Movieclip في النهاية سوف تحتوي على نص بدلا من صورة. لتحقيق هذا الهدف ، ستحتاج نهجا مختلفا قليلا.

حدد الإطار الأول من طبقة "img2" (حسنا ، وتسمية سيئة ، لا تتردد في تصحيح هذا ) ورسم مستطيل مع حجم لوحة زيتية على قماش. أردت التأكد من أن Movieclip نهاية له أبعاد نفس Movieclip ابدأ. ولهذا السبب كنت أول رسم شكل غير مرئي مع نفس حجم Movieclip ابدأ.

حدد الشكل وتعيين القيمة ألفا إلى 0 (الشكل لا يزال موجودا ولكن غير مرئي).

تحويل شكل إلى Movieclip [اضغط F8] أو الحق في الضغط على MovieClip --> "لتحويل الرمز..." واسم "img2".

انقر نقرا مزدوجا فوق فقط Movieclip خلق ، خلق طبقة جديدة فارغة ووضع بعض النصوص على تلك الطبقة التي أنشئت حديثا.

رئيس العودة الى الجدول الزمني الرئيسي وتعيين اسم مثيل Movieclip الى "img2".

الخطوة 7 -- إضافة الانتقال أكشن

حدد طبقة "سيناريو" وفتح "الإجراءات" نافذة مع "ويندوز" --> "الإجراءات" أو [الصحافة F9].

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

 btn.addEventListener (MouseEvent.ROLL_OVER ، _onOver) ؛

 _onOver ظيفة (ه : MouseEvent) (
  myFilter فار : CubeTransitionEffectAS3 = CubeTransitionEffectAS3 الجديدة () ؛
  myFilter.mouseEnabled = كاذبة ؛
  myFilter.mouseChildren = كاذبة ؛
  addChild (myFilter) ؛

  myFilter.init (img1 ، img2 ، 75 عاما ، "ل -> ص" (2) ، "easeInOutCubic" ، كاذبة) ؛
 )

في السطر الأول ، إضافة إلى الانتقال إلى الإصغاء الحدث على الزر. في وظيفة "_onOver" (السطر 3) عليك أولا إنشاء مثيل من قبل CubeTransitionEffectAS3 تعطيل الماوس التفاعل العنصر (خط 4 و 5). نتذكر ، على الزر الذي أنشأته في وقت سابق هو رعاية الآثار الماوس وكنت لا تريد أن تتدخل في التأثير على ذلك.

في السطر 9 أخيرا يمكنك تهيئة تأثير (وثائق للمعلمة هنا). وجزء مهم من الأولين المعلمة. أنت تعرف أن التحول يبدأ مع "img1" وينتهي ب "img2".

قم بتصدير ملف رابطة العمل المنصف. كما ترون ، فإن العنصر تأثير يعمل تماما مع خلفية شفافة من "img2".

الخطوة 8 -- أكثر تعقيدا أكشن

حسنا ، مع الرمز السابق على التمديد تعمل على ما يرام. لكن ما إذا كنت تريد أن يكون لها أيضا وظيفة التمهيدية التي عكس الانتقال من "img2" إلى "img1"؟ لتحقيق ذلك تحتاج إلى رمز أكثر تعقيدا. حذف النصي ويضاف ما يلي :

 btn.addEventListener (MouseEvent.ROLL_OVER ، _onOver) ؛
 btn.addEventListener (MouseEvent.ROLL_OUT ، _onOut) ؛

 فار تشغيل = كاذبة ؛
 غوين فار = كاذبة ؛
 goOut فار = كاذبة ؛

 _onOver ظيفة (ه : MouseEvent) (
  إذا (! تشغيل) (
  _createAnimation ( "في") ؛
  تشغيل = صحيح ؛
  ) والا (
  غوين = كاذبة ؛
  goOut = صحيح ؛
  )
 )

 _onOut ظيفة (ه : MouseEvent) (
  إذا (! تشغيل) (
  _createAnimation ( "خارج") ؛
  تشغيل = صحيح ؛
  ) والا (
  غوين = صحيح ؛
  goOut = كاذبة ؛
  )
 )

 _inAnimationDone ظيفة (ه : الحدث) (
  e.target.removeFilter () ؛
  img1.visible = كاذبة ؛

  إذا كان (غوين) (
  _createAnimation ( "خارج") ؛
  ) والا (
  تشغيل = كاذبة ؛
  goOut = كاذبة ؛
  )
 )

 _outAnimationDone ظيفة (ه : الحدث) (
  e.target.removeFilter () ؛
  img2.visible = كاذبة ؛

  إذا كان (goOut) (
  _createAnimation ( "في") ؛
  ) والا (
  تشغيل = كاذبة ؛
  غوين = كاذبة ؛
  )
 )

 _createAnimation ظيفة (دير : سلسلة) (
  myFilter فار : CubeTransitionEffectAS3 = CubeTransitionEffectAS3 الجديدة () ؛
  myFilter.mouseEnabled = كاذبة ؛
  myFilter.mouseChildren = كاذبة ؛
  addChild (myFilter) ؛

  إذا كان (دير == "في") (
  myFilter.init (img1 ، img2 ، 24 عاما ، "ل -> ص" (2) ، "easeInOutCubic" ، كاذبة) ؛
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE ، _inAnimationDone) ؛
  ) والا اذا (دير == "الخروج") (
  myFilter.init (img2 ، img1 ، 24 عاما ، "ص -> ل" (2) ، "easeInOutCubic" ، كاذبة) ؛
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE ، _outAnimationDone) ؛
  )
 )

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

المتغيرات "غوين" و "goOut" (السطر 5 و 6) وتستخدم لهذا الغرض. عندما قمت بتعيين لهم وظائف "_onOver" و "_onOut" (السطر 8 و 18) يتم تنفيذها. ولكن فقط إذا تم تشغيل فار صحيح ، واذا كانت كاذبة (السطر 9 و 19) ، عليك أن تبدأ عملية الانتقال على الفور (السطر 10 و 20).

وظيفة "_createAnimation" (السطر 52) هو مساعدك الدالة على بدء الحركة تبعا للاتجاه "دير" كنت تمريره كمحدد.

لاحظ أن بعد استدعاء removeFilter "الأسلوب" (السطر 29 و 41) على حد سواء ابدأ Movieclip وMovieclip النهاية يتم تعيين لمرئية (من أصل الأثر). ولهذا السبب قمت بتعيين الرؤية Movieclip -- التحول بدأ مع -- لكاذبة (السطر 30 و 42).

تنزيل

انقر هنا لتحميل رابطة العمل المنصف لهذا البرنامج التعليمي. ملاحظة : رابطة العمل المنصف. لا يتضمن عنصر التأثير. من أجل جعل عمل رابطة العمل المنصف ، تحتاج إلى شراء مكعب تأثير انتقال هنا.

هنا يمكنك العثور على شريط فيديو تعليمي لكيفية تنفيذ أثرا مختلفا.