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

सारांश

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

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

आवश्यकताएँ

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

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

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

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

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

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

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

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

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

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

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

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

"" Btn और यकीन है कि प्रकार "है बनाने के लिए बटन के नाम सेट करें बटन".

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

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

5 कदम - बनाएँ शुरू MovieClip

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

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

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

बस MovieClip बनाया "" img1 के उदाहरण का नाम निर्धारित करें.

चरण 6 - समाप्ति MovieClip बनाएँ

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

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

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

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

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

सिर मुख्य समय के लिए वापस करने के लिए और MovieClip के उदाहरण का नाम सेट img2 ".

चरण 7 - ActionScript rollover जोड़ें

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

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

  myFilter.init (img1, img2, 75, "एल>", 2 आर, "easeInOutCubic", झूठे);
 )

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

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

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

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

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

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

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

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

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

 _inAnimationDone समारोह (ई: घटना) (
  e.target.removeFilter ();
  Img1.visible = झूठी;

  अगर () (जा
  (_createAnimation) "बाहर";
  और ()
  = चल झूठी;
  GoOut = झूठी;
  )
 )

 _outAnimationDone समारोह (ई: घटना) (
  e.target.removeFilter ();
  Img2.visible = झूठी;

  अगर () (goOut
  (_createAnimation "में");
  और ()
  = चल झूठी;
  जा = झूठी;
  )
 )

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

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

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

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

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

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

डाउनलोड

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

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