دروس فلاش تأثير باردة!

ملخص

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

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

متطلبات

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

ملاحظة : وتتكون الصورة في هذا البرنامج التعليمي في CS3 فلاش. وهو يعمل في عينه في CS4 فلاش.

الخطوة 1 -- تثبيت تأثير عنصر

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

الخطوة 2 -- إنشاء طبقة جديدة

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

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

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

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

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

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

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

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

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

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

الخطوة 5 -- بدء إنشاء Movieclip

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

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

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

تعيين اسم مثيل img1 "خلقت فقط لMovieclip".

الخطوة 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).

تنزيل

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

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