फ्लैश प्रभाव Tutorials वाह!

सारांश

इस ट्यूटोरियल तुम सीखना होगा कैसे माउस को रोल ओवर पर एक घन संक्रमण प्रभाव बनाने के लिए.

यहाँ अंतिम परिणाम:

आवश्यकताएँ

CS3 या फ़्लैश CS4 फ्लैश.

नोट: इस ट्यूटोरियल में स्क्रीनशॉट फ़्लैश CS3 में किया जाता है. यह बिल्कुल फ़्लैश CS4 में ही काम करता है.

चरण 1 - स्थापित करें प्रभाव घटक

घन संक्रमण प्रभाव यहाँ खरीद. कृपया का पालन निर्देश स्थापित और घटक के पैनल से अपनी. Fla फ़ाइल के पुस्तकालय में घटक खींचें.

चरण 2 - एक नई परत बनाएँ

चीजों को साफ आप मुख्य समयरेखा पर एक नई परत बनाने और उसे एक नाम रख देना चाहिए. इस मत के रूप में नीचे स्क्रीनशॉट में दिखाया गया है.

चरण 3 - पृष्ठभूमि बनाएँ

अब तुम एक ढाल के साथ एक पृष्ठभूमि बनाएँ. हालांकि यह जरूरी काम प्रभाव यह पता चलता है कि पारदर्शी प्रभाव भी सामग्री के साथ काम करता है (पर अधिक है कि बाद में) नहीं है.

चुनें बड़ी 'में पहली फ्रेम परत "और कैनवस पर आयत उपकरण के साथ एक आकार आकर्षित. आयत का चयन करें और समायोजित रंग सेटिंग्स के लिए एक अच्छी ढाल है (आप किसी भी दूसरे रंग का उपयोग कर सकते हैं).

चरण 4 - बटन बनाएँ

घन प्रभाव गतिशील उपयोगकर्ताओं माउस राज्य (रोल ओवर / rollout) को प्रतिक्रिया देना चाहिए. यह सबसे अच्छा अभ्यास के लिए नहीं असर खुद को घटना श्रोता जोड़ने और बजाय एक "" बटन का उपयोग करें रिक्त है.

क्लिक करें परत में पहली फ्रेम "btn" और कैनवास का आकार के साथ एक आयत आकर्षित (रंग नहीं के बाद से बटन दिखाई नहीं होगा मेटर करता है). आयत का चयन करें और एक बटन को यह [प्रेस F8 के साथ परिवर्तित] या MovieClip पर ठीक पर क्लिक करें -> "कन्वर्ट प्रतीक के लिए ...".

"Btn" के लिए बटन का नाम सेट करें और सुनिश्चित करें कि इस प्रकार है "" बटन.

डबल बटन क्लिक करें. अब पहली keyframe "ऊपर" अंतिम फ्रेम "मारो को खींचें." यह सुनिश्चित करता है, कि इंटरैक्टिव बटन पर दिखाई नहीं देगा.

मुख्य समयरेखा पर वापस जाओ और 'btn "के लिए बटन के उदाहरण के नाम सेट.

चरण 5 - बनाएँ Movieclip शुरू

प्रभाव की जरूरत है, जहां दो दृश्य informations से लिया जाता है Movieclip है. अब आप Movieclip संक्रमण के साथ शुरू होगी पैदा हो जाएगी.

परत "img1 पर पहला फ्रेम पर क्लिक करें. कैनवास का आकार के साथ प्रेस [Ctrl-आर] या "File" -> "आयात" -> स्टेज पर आयात "..." का उपयोग करके एक छवि आयात करते हैं.

अब एक Movieclip को इस छवि को बदलने और यह नाम 'img1 ".

उदाहरण के नाम सेट सिर्फ "के लिए img1 बनाया Movieclip".

कदम 6 - एंड Movieclip बनाएँ

समाप्ति Movieclip पाठ के बजाय एक छवि शामिल होगा. प्राप्त यह आपको एक अलग दृष्टिकोण की आवश्यकता होगी.

चुनें परत "img2 का पहला फ्रेम" (ठीक है, बुरा नामकरण, को सही लगता है कि मुक्त ) और कैनवास का आकार के साथ एक आयत आकर्षित. आपको यह सुनिश्चित करना है कि अंत Movieclip प्रारंभ Movieclip के रूप में एक ही आयाम है चाहता हूँ. Thats तुम पहले क्यों शुरू Movieclip के रूप में एक ही आकार के साथ एक अदृश्य आकार आकर्षित.

चुनें आकार और 0 से अल्फा (मूल्य आकार सेट अभी भी वहाँ पर अदृश्य है).

एक Movieclip [प्रेस F8 को आकार बदलें] या MovieClip पर ठीक पर क्लिक करें -> "कन्वर्ट प्रतीक के लिए ..." और यह नाम 'img2 ".

डबल क्लिक करें अभी बनाया Movieclip, एक नया खाली परत बनाने और है कि नवगठित परत पर कुछ पाठ रख दिया.

मुख्य समयरेखा वापस प्रमुख और 'को img2 Movieclip के उदाहरण के नाम सेट ".

7 कदम - रोल ओवर ActionScript जोड़ें

चुनें परत 'स्क्रिप्ट' और कार्य 'खुले' के साथ Windows खिड़की "" -> "कार्य" या प्रेस [F9].

अगर आप बस को रोल ओवर पर एक परिवर्तन किया है चाहता हूँ (और कोई वापस-rollout पर संक्रमण) कोड विंडो में निम्नलिखित लाइनों को कॉपी करें.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 समारोह _onOver ई (: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 = नई CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren झूठी =;
  addChild (myFilter);

  myFilter.init (img1, img2, 75, "मैं-r>", 2, "easeInOutCubic" झूठे,);
 )

पहली पंक्ति में आप बटन को रोल ओवर घटना श्रोता जोड़ें. समारोह "_onOver में" पंक्ति (3) आप पहले आप पहले CubeTransitionEffectAS3 का एक उदाहरण के घटक के निष्क्रिय माउस अन्तरक्रियाशीलता बनाने (4 लाइन और 5). याद है, पहले की है माउस प्रभाव का ख्याल रखने बटन तुम्हें बनाया है और आप प्रभाव नहीं चाहता कि उस पर दखल है.

9 अंततः लाइन में आप प्रभाव यहाँ पैरामीटर का प्रलेखन () इनिशियलाइज़. महत्वपूर्ण हिस्सा पहले दो पैरामीटर हैं. आप को परिभाषित है कि संक्रमण "img1 के साथ शुरू होता है 'और' img2 के साथ समाप्त होता है."

निर्यात अपने fla फ़ाइल. जैसा कि आप देख, प्रभावी घटक "का img2 पारदर्शी पृष्ठभूमि के साथ पूरी तरह से काम करता है."

ActionScript 8 चरण - अधिक जटिल

पिछले कोड रोल ओवर के साथ काम करता है बस ठीक ठीक है,. लेकिन क्या अगर तुम्हें भी एक rollout समारोह है कि "से img2" को img1 संक्रमण "हार" चाहते हो? प्राप्त करने के लिए कि आप एक अधिक जटिल कोड की जरूरत है. स्क्रिप्ट हटाएँ और निम्नलिखित डालें:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);
 btn.addEventListener (MouseEvent.ROLL_OUT, _onOut);

 var चल = false;
 var जा झूठी =;
 var goOut झूठी =;

 समारोह _onOver ई (: MouseEvent) (
  अगर (चलने!) (
  _createAnimation ( "में");
  चल = सच;
  और) (
  जा झूठी =;
  goOut सच है =;
  )
 )

 समारोह _onOut ई (: MouseEvent) (
  अगर (चलने!) (
  _createAnimation ( "बाहर");
  चल = सच;
  और) (
  सही जा =;
  goOut झूठी =;
  )
 )

 समारोह _inAnimationDone ई (: घटना) (
  e.target.removeFilter ();
  img1.visible = false;

  (जा) यदि (
  _createAnimation ( "बाहर");
  और) (
  चल = false;
  goOut झूठी =;
  )
 )

 समारोह _outAnimationDone ई (: घटना) (
  e.target.removeFilter ();
  img2.visible = false;

  (goOut) यदि (
  _createAnimation ( "में");
  और) (
  चल = false;
  जा झूठी =;
  )
 )

 समारोह _createAnimation (dir: string) (
  var myFilter: CubeTransitionEffectAS3 = नई CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren झूठी =;
  addChild (myFilter);

  अगर dir (== "में") (
  myFilter.init (img1, img2, 24, "मैं-r>", 2, "easeInOutCubic" झूठे,);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  और) यदि dir (== "बाहर") (
  myFilter.init (img2, img1, 24, "आर एल>", 2, "easeInOutCubic" झूठे,);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

यह जानना महत्वपूर्ण है कि तुम नहीं प्रभाव के दौरान संक्रमण की दिशा रिवर्स कर सकते चला रही है. इसके बजाय आप "याद" प्रयोक्ता की कार्रवाई कर सकते हैं, जब तक प्रभाव और किया revers परिवर्तन लागू है इंतज़ार करो.

चर "जा रहा" और "goOut" (5 लाइन और 6) इस प्रयोजन के लिए उपयोग किया जाता है. तुम उन्हें जब कार्य _onOver "सेट" और "_onOut" (8 लाइन और 18) कर रहे हैं मार डाला. लेकिन सिर्फ अगर var चल सच है, अगर यह (9 लाइन और 19) गलत है, आप परिवर्तन अभी शुरू (10 लाइन और 20).

समारोह "_createAnimation" (52 लाइन) अपने सहायक समारोह शुरू दिशा के आधार पर "dir" तुम पैरामीटर के रूप में पारित एनीमेशन है.

सूचना है कि "removeFilter" विधि (29 लाइन और 41) दोनों Movieclip आरंभ और समाप्ति Movieclip बुला के बाद दृश्य को सेट (प्रभाव से बाहर) होते हैं. Thats तुम Movieclip दृश्यता क्यों सेट - संक्रमण के साथ शुरू किया - झूठी (30 लाइन और 42 के लिए).

डाउनलोड

यहाँ क्लिक करें इस ट्यूटोरियल के fla डाउनलोड करने के लिए. नोट: fla. नहीं असर घटक शामिल हैं. आदेश में fla काम करने के लिए, तुम घन संक्रमण प्रभाव यहाँ खरीद की जरूरत है.

यहाँ आप कैसे एक अलग प्रभाव को लागू करने के ट्यूटोरियल वीडियो पा सकते हैं.