Hello students, इस ट्यूटोरियल में हम सीखेंगे कि ट्वीन्स के कितने प्रकार होते हैं और ये आपकी एनिमेशन्स को कितनी आसानी से ज़िंदा कर सकते हैं। Adobe Animate में हम ज़्यादातर तीन तरह के ट्वीन्स यूज़ करते हैं – Shape Tween, Classic Tween, Motion Tween। लेकिन इन सबके डिटेल में जाने से पहले, देखते हैं कि “Tween” असल में होता क्या है। सोचिए, आप एक सिंपल ऑब्जेक्ट को ऐनिमेट करना चाहते हैं, जैसे कि कोई मूव होता हुआ ऑब्जेक्ट। पारंपरिक (Traditional) ऐनिमेशन में, आपको ऑब्जेक्ट को पहले फ़्रेम पर एक पोज़ीशन में ड्रॉ करना पड़ता था। फिर अगले की-फ़्रेम (keyframe) पर वही ऑब्जेक्ट थोड़ा आगे बढ़ाकर ड्रॉ करना पड़ता, ताकि मूवमेंट दिख सके। आपको यह प्रोसेस हर फ़्रेम के लिए रिपीट करना पड़ता, ऑब्जेक्ट को बार-बार अलग पोज़ीशन में ड्रॉ करके। इस टेक्नीक को Key by Key Animation कहा जाता है। ये डिटेल में तो बहुत अच्छा है और आज भी कॉम्प्लेक्स ऐनिमेशन्स में यूज़ होता है, लेकिन ये काफ़ी टाइम कंज़्यूमिंग होता है। यहीं पर Tweens काम आते हैं। Tweens हमारी मदद करते हैं स्मूद ऐनिमेशन बनाने में, बिना हर सिंगल फ़्रेम ड्रॉ किए। अब शुरू करते हैं हमारे पहले टाइप से – Shape Tween। सबसे पहले, 1st keyframe पर एक ऑब्जेक्ट ड्रॉ करें। फिर आख़िरी keyframe ऐड करें। उस keyframe पर, Selection Tool से ऑब्जेक्ट को दाईं तरफ़ मूव करें। अब आपके पास दो keyframes हैं – ऑब्जेक्ट की दो अलग-अलग पोज़ीशन में: पहला और आख़िरी। इसके बाद, इन दोनों keyframes के बीच Tween अप्लाई करें। ऐनिमेशन बनाने के लिए, keyframes के बीच राइट-क्लिक करें और “Create Shape Tween” सिलेक्ट करें। ये अपने-आप बीच के फ़्रेम्स (in-between frames) जेनरेट कर देगा, जिससे आपको हर फ़्रेम ड्रॉ नहीं करना पड़ेगा। अगर आप इन-बिटवीन फ़्रेम्स को क्लियरली देखना चाहते हैं, तो Onion Skin फीचर ऑन कर सकते हैं। यही तरह से Shape Tween Adobe Animate में काम करता है। Shape Tweens का यूज़ न सिर्फ़ शेप्स को ऐनिमेट करने के लिए, बल्कि किसी शेप का रंग बदलने, किसी ड्रॉइंग को टेक्स्ट में बदलने या उसे किसी और शेप में ट्रांसफ़ॉर्म करने के लिए भी किया जाता है। अब Shape Tween का एक और उदाहरण देखते हैं। हमारे पास 1st keyframe पर एक स्क्वेयर है। हम इस स्क्वेयर को सर्कल में बदलेंगे। इसके लिए टाइमलाइन पर फ़्रेम 10 पर जाएँ और एक Blank Keyframe ऐड करें। इस ब्लैंक keyframe पर, Oval Tool से एक परफ़ेक्ट सर्कल ड्रॉ करें (Shift key दबाकर रखें ताकि शेप परफ़ेक्ट राउंड रहे)। अब हमारे पास दो अलग-अलग शेप्स हैं, दो keyframes पर — पहले keyframe पर एक square है और आख़िरी keyframe पर एक circle। अगला स्टेप है circle को square के साथ अलाइन करना। इस काम में मदद के लिए Onion Skin फीचर ऑन करें। इससे आप square और circle दोनों को एक साथ देख पाएँगे, जिससे उनकी पोज़ीशन को एडजस्ट करना आसान हो जाएगा, और ट्रांज़िशन स्मूद बनेगा। अब समय है tween लगाने का। दो keyframes के बीच कहीं भी राइट-क्लिक करें और “Create Shape Tween” चुनें। या फिर आप मेनू बार में Insert मेनू पर जाकर “Create Shape Tween” सेलेक्ट कर सकते हैं। बस इतना करते ही आप एक स्मूद ट्रांज़िशन ऐनिमेशन देखेंगे, जहाँ square धीरे-धीरे morph होकर circle में बदल जाएगा। आप शेप का रंग भी tween के दौरान बदल सकते हैं, जिससे transformation और भी डायनामिक लगेगा। चलिये एक नया लेयर ऐड करते हैं इस ऐनिमेशन के लिए। पहले फ़्रेम पर हमारे पास एक orange square है, और आख़िरी फ़्रेम पर एक blue circle, जो square की पोज़ीशन के साथ perfectly aligned है। अब इन दोनों keyframes के बीच shape tween ऐड करें। ऐसा करते ही आप देखेंगे कि square धीरे-धीरे circle में बदल रहा है। सिर्फ़ शेप ही morph नहीं होती, बल्कि उसका कलर भी orange से blue में बदलता है। अगर आप इस shape को एक जगह से दूसरी जगह मूव करवाना चाहते हैं, तो वो भी आसानी से किया जा सकता है। जब ये point A से point B तक ट्रैवल करेगा, तो shape और color दोनों रास्ते में बदलते रह सकते हैं। ये तो कुछ सिंपल examples थे कि Shape Tween कैसे काम करता है। अब चलिए एक और example देखते हैं, जिसमें हम shape tween को थोड़ा और डीटेल में समझेंगे। इस बार हम shape morphing पर काम करेंगे, लेकिन transformation को बेहतर बनाने के लिए हम Shape Hints का इस्तेमाल करना सीखेंगे। सबसे पहले, 1st frame पर एक सिंपल bar shape ड्रॉ करें। फिर frame #15 पर एक keyframe insert करें। अब Selection Tool की मदद से bar को arrow shape में बदल दें। तो frame 1 पर हमारे पास सिर्फ़ एक bar है, और frame 15 पर ये arrow में बदल चुका होगा। अगर हम इन दोनों keyframes के बीच shape tween ऐड करते हैं, तो shape तो बदलती दिखेगी, लेकिन transition थोड़ा distorted लग सकता है। इससे ऐनिमेशन स्मूद या natural नहीं लगेगा। इसी distortion को ठीक करने के लिए हम Shape Hints का इस्तेमाल करते हैं। Shape Hints Adobe Animate को ये समझने में मदद करते हैं कि दो shapes के बीच transition कैसे accurately map किया जाए, जिससे ऐनिमेशन क्लीन और नेचुरल लगे। Shape Hints ऐड करने के लिए, आप Control + Shift + H शॉर्टकट यूज़ कर सकते हैं, या फिर Modify मेनू में जाकर Shape → Add Shape Hint चुन सकते हैं। जैसे ही आप shape hints ऐड करेंगे, आपको shape के बीच में छोटे-छोटे लाल dots दिखेंगे, जिन पर A, B, C जैसे लेबल होंगे। पहला hint “A” होगा, दूसरा “B”, फिर “C”, और “D”, वगैरह। इस ऐनिमेशन के लिए हम 4 shape hints ऐड करेंगे। एक और hint ऐड करने पर वो “C” कहलाएगा, और एक और ऐड करने से “D” मिलेगा। शुरुआत में ये सारे hints एक ही spot पर दिखाई देंगे, लेकिन हमें इन्हें rectangle के corners पर रखना होगा, ताकि transformation को सही direction मिले। • Hint D को rectangle के top right corner पर ले जाएँ। • Hint C को bottom right corner पर रखें। • Hint B को bottom left corner पर रखें। • Hint A को top left corner पर रखें। ये याद रखना बहुत ज़रूरी है कि कौन-सा hint किस corner पर रखा गया है, क्योंकि अगले keyframe (frame 15) में हमें इन्हें उसी पोज़ीशन पर रखना होगा। अब frame 15 सेलेक्ट करें। Hints को पहले जैसी पोज़ीशन पर मूव करें: Hint D को top right, C को bottom right, B को bottom left, और A को top left corner में रखें। जैसे ही hints सही जगह snap हो जाएँगे, उनके रंग green हो जाएँगे। इसका मतलब है कि hints सही तरीके से shape से attach हो गए हैं, और अब दोनों shapes के बीच ट्रांज़िशन स्मूद और क्लीन होगा। अगर आप अभी ऐनिमेशन प्रीव्यू करेंगे, तो देखेंगे कि arrow, bar shape से बहुत ही स्मूद तरीके से morph हो रहा है – ये Shape Hints के यूज़ की वजह से है। अंतर देखने के लिए, इन दोनों ऐनिमेशन्स (बिना shape hints और shape hints के साथ) को compare करें। ऊपर वाला ऐनिमेशन Shape Hints के साथ है, जबकि नीचे वाला बिना hints के है। जैसा कि आप देख सकते हैं, shape hints वाला ऐनिमेशन ज़्यादा स्मूद और नैचुरल दिखता है। अब shape tween का एक और example देखते हैं, जिसमें हम shape hints यूज़ करेंगे। इस केस में, frame 1 पर हमारे पास एक circle है। फिर frame 20 पर एक keyframe ऐड करेंगे, जिसमें circle को बिल्कुल वैसा ही रहने देंगे जैसा frame 1 पर था। मतलब, frame 1 और frame 20 – दोनों पर same circle shape होगी। अब इन दोनों फ़्रेम्स के बीच Shape Tween लगाएँ (right click → Create Shape Tween)। अभी shape में कोई बदलाव नहीं दिखेगा, लेकिन हम shape hints की मदद से interesting transformation बना सकते हैं। इसके लिए, दो shape hints ऐड करें – Hint A और Hint B। Hint B को circle के lower left arc पर रखें। Hint A को, hint B के ऊपर, उसी left arc पर थोड़ा ऊँचाई में रखें। अब frame 20 पर जाएँ। Hints को circle के right arc पर मूव करें, और उन्हें वही relative positions दें: Hint B को bottom right arc पर रखें, और Hint A को upper right arc पर। अब ऐनिमेशन preview करें। आप देखेंगे कि, भले ही हमने circle की shape को नहीं बदला, फिर भी एक इंटरेस्टिंग result मिलता है। Circle ऐसा लगेगा जैसे वो फैल और सिकुड़ रहा हो – almost like a bubble animation। सिर्फ़ shape hints को reposition करके, बिना circle की shape बदले, हम एक dynamic effect बना सकते हैं। ये दिखाता है कि shape hints से आप fun animations या अलग-अलग deformations create कर सकते हैं, बस hints की positions adjust करके। आप अलग-अलग shapes और अलग-अलग points पर hints रखकर experiment कर सकते हैं, और देख सकते हैं कि कितने तरह के results मिल सकते हैं। Shape hints आपको shape transformation पर काफ़ी control देते हैं। तो इस तरह shape tweens काम करते हैं। ये कुछ simple techniques थीं shape tweens को use करने की। अब हम अन्य tweens explore करेंगे – जैसे Classic Tween और Motion Tween। Classic Tweens, Adobe Flash के शुरुआती versions में primary animation method थे, और basic animation functionality प्रोवाइड करते थे। Flash के शुरुआती दिनों में, इस तरह के tween को बस Motion Tween कहा जाता था। बाद में Adobe ने इसे नए versions में Classic Tween नाम दिया, ताकि इसे बाद में आए advanced Motion Tween से अलग किया जा सके। जैसे-जैसे Adobe Flash evolve हुआ, motion tweens introduce किए गए, जिनसे ज़्यादा advanced animation capabilities और object movement पर बेहतर control मिला। Classic tweens बेसिक ऐनिमेशन्स के लिए बहुत अच्छे हैं, जबकि motion tweens dynamic और advanced motion effects के लिए ideal हैं। अब एक Classic Tween का example देखते हैं। सबसे पहले, 1st frame पर हमने एक square shape ड्रॉ किया है। एक ज़रूरी बात याद रखें: Classic tween या motion tween बनाने के लिए, आपको उस shape को symbol में convert करना होगा। अभी ये square सिर्फ़ एक basic shape है। जैसा हमने symbols वाले tutorial में सीखा था, इसे symbol में convert करने के लिए Modify menu में जाएँ और Convert to Symbol चुनें, या फिर shortcut F8 दबाएँ। Symbol का नाम “rectangle” रखें और registration point को center पर set करें। Symbol में convert करने के बाद, हम इसमें motion ऐड करने के लिए तैयार हैं। सबसे पहले timeline को frame #30 तक extend करें (Insert → Frame)। फिर frame 30 पर एक keyframe ऐड करें। अब उस keyframe को select करके, symbol को stage के right side पर मूव करें। अब time है Classic Tween बनाने का। दोनों keyframes के बीच कहीं भी right-click करें और “Create Classic Tween” चुनें। या फिर Insert menu में जाकर “Create Classic Tween” select कर सकते हैं। जैसे ही आप classic tween apply करेंगे, Adobe Animate अपने-आप बीच के फ़्रेम्स (in-between frames) generate कर देगा, जिससे एक smooth motion बनेगा – पहले keyframe से लेकर दूसरे तक। इस ऐनिमेशन के लिए आपको बस ये दो keyframes चाहिए, जो animation की शुरुआत और अंत define करते हैं। आप चाहें तो इस symbol को scale down कर सकते हैं। आप चाहें तो इस symbol को scale down कर सकते हैं, बिना उसकी shape distort किए। या फिर इसे rotate करके smooth transition effect बना सकते हैं। Classic tweens और shape tweens का काम थोड़ा similar लगता है, लेकिन इनके बीच एक बड़ा अंतर है: • Shape tweens stage पर directly drawn vector shapes के साथ काम करते हैं, और उनके points व curves को modify करके morphing effects बनाते हैं। • Classic tweens, symbols या objects के groups के साथ काम करते हैं, और उनकी position, rotation, scale और अन्य properties को एक whole unit के रूप में बदलते हैं। Classic Tweens simple motion animations के लिए perfect हैं, जबकि Shape Tweens complex shape transformations के लिए ideal होते हैं। Classic Tween का इस्तेमाल करते समय एक ज़रूरी नियम याद रखना चाहिए: एक ही layer पर दो symbols नहीं होने चाहिए। उदाहरण के लिए, यहाँ हमारे पास एक ही layer पर दो अलग-अलग symbols रखे हुए हैं। अगर मैं इन्हें animate करने की कोशिश करता हूँ — एक keyframe ऐड करके दोनों symbols को नीचे move करता हूँ, और फिर classic tween बनाने की कोशिश करता हूँ — तो Animate एक error message दिखाता है: “You must convert frame content to symbol in order to tween.” ऐसा इसलिए होता है क्योंकि tweens एक समय में एक ही object की properties को control करने के लिए बने हैं। Tween, position, scale, rotation, opacity जैसी properties को time के साथ मैनेज करता है। अगर एक layer पर multiple symbols हों, तो Animate decide नहीं कर पाता कि किस object की properties animate करनी हैं, और conflict हो जाता है। अगर आपको multiple symbols animate करने हैं, तो हर symbol को अपनी अलग layer पर रखना चाहिए। इससे हर ऐनिमेशन पर independent control मिलेगा, और motion भी smooth व साफ़ रहेगा। अगर आप error message पर “OK” क्लिक करते हैं, तो Animate दोनों symbols को automatically एक single symbol में convert कर देगा। लेकिन ये flexibility कम कर देता है, इसलिए recommended नहीं है। मुख्य बात ये है कि Classic Tween के लिए कभी भी 2 symbols को एक ही layer पर मत रखें। हमेशा हर symbol को अलग layer पर रखें, ताकि animation पर आपका पूरा control रहे। अगर गलती से आपने दो symbols एक ही layer पर रख दिए हैं, तो उन्हें अलग layers में ले जाने का आसान तरीका है: दोनों symbols को select करें, right-click करें और “Distribute to Layers” option चुनें। ये अपने-आप दो अलग layers बना देगा, और हर symbol को उसकी खुद की layer में रख देगा। अब आप दोनों layers पर keyframe ऐड कर सकते हैं, symbols को जहाँ चाहें move कर सकते हैं, और हर एक पर अलग classic tween apply कर सकते हैं। क्योंकि symbols अब अलग layers पर हैं, दोनों independently animate होंगे। आप इन्हें rotate या scale भी कर सकते हैं, और आपको desired animation results मिलेंगे। बस याद रखें — Classic Tween इस्तेमाल करने के लिए symbols को हमेशा अलग layers पर रखना चाहिए, ताकि animation smooth और conflict-free रहे। अब जब आपको Classic Tween बनाना आ गया है, तो चलिए tweening effects, खासकर Ease In और Ease Out, को explore करते हैं। ये effects Properties panel में मिलेंगे। ये effects आपको Properties panel में, Frame tab के अंदर, Tweening section में मिलेंगे। इसे demonstrate करने के लिए, हम एक bouncing ball animation बनाएँगे। हमारी timeline 60 frames लंबी होगी। Frame 1 पर हम circle symbol को top पर रखते हैं। Frame 30 पर उसे नीचे move करते हैं, और Frame 60 पर फिर से ऊपर position में लाते हैं। अब इन keyframes के बीच Classic Tween apply करें। इससे एक basic bouncing effect बनेगा, लेकिन इसे और realistic बनाने के लिए हम tweening effects ऐड करेंगे। Animation के second-half में, जब ball वापस ऊपर bounce करेगी, तो हम “Ease Out – Sign” effect लगाएंगे। जब ball नीचे गिर रही होगी, तब “Ease In – Sign” effect use करेंगे। तो ये effects करते क्या हैं? • Ease In – motion धीरे-धीरे शुरू होता है और फिर तेज़ हो जाता है। • Ease Out – motion तेज़ी से शुरू होता है और धीरे-धीरे slow हो जाता है। ध्यान से देखिए: जब ball नीचे गिरती है, तो शुरुआत में slow होती है और ज़मीन के पास आते-आते speed बढ़ जाती है। फिर bounce करके ऊपर जाती है, तो पहले fast होती है और ऊपर पहुँचते-पहुँचते धीरे-धीरे रुकती है। ये process animation के एक fundamental principle को follow करता है, जिसे Slow In & Slow Out कहते हैं। हम इसे animation principles के अगले section में detail में सीखेंगे। अब चलते हैं Motion Tween की तरफ़ और देखते हैं ये कैसे काम करता है। इस example के लिए हम एक leaf symbol का इस्तेमाल करेंगे। Classic Tween या Shape Tween की तरह, Motion Tween में आप वही process follow नहीं कर सकते। यानि timeline बढ़ाना, आख़िरी frame पर keyframe लगाना, symbol reposition करना और फिर tween apply करना — ये method यहाँ काम नहीं करेगा। अगर आप ऐसा करेंगे, तो कोई animation generate नहीं होगी, जैसे classic या shape tween में होती है। तो फिर Motion Tween कैसे create करें? ये steps follow करें: 1️⃣ Timeline को अपनी desired animation length तक extend करें। 2️⃣ Timeline पर right-click करें और Create Motion Tween select करें। 👉 याद रखें: Motion Tween apply करने से पहले ही इसे लगाना ज़रूरी है, symbol की final position set करने से पहले। जब Motion Tween apply हो जाए, तो last frame select करें और symbol को उसकी final position पर move करें। अब screen पर एक dotted line दिखाई देगी — ये symbol का motion path है। अब हम animation को fine-tune कर सकते हैं। Frame 20 पर leaf को हल्का सा left की तरफ़ move करें। ध्यान दें कि जैसे ही हम position adjust करते हैं, motion path अपने-आप update हो जाता है। इसी तरह Frame 60 पर leaf को right की तरफ़ shift करें, और Frame 110 पर वापस left ले जाएँ। इससे एक gentle swaying effect बनेगा, जो असली पत्ते के गिरने जैसा लगेगा। लेकिन अभी motion थोड़ा robotic लग रहा है, natural नहीं। इसे organic बनाने के लिए हम Selection Tool का इस्तेमाल करके motion path को edit कर सकते हैं। Selection Tool की मदद से हम motion path में curves जोड़ सकते हैं, जिससे animation का movement और भी smooth और natural लगता है। अगर आपको और भी fine adjustments चाहिए, तो आप Sub-Selection Tool का इस्तेमाल कर सकते हैं, जो curves को और detail में refine करने की सुविधा देता है। Path सेट होने के बाद, आप अलग-अलग frames पर leaf को rotate या resize करके उसके movement को fine-tune कर सकते हैं। ये छोटे-छोटे details animation को और realistic बनाते हैं। तो इस तरह आप Motion Tween का इस्तेमाल करते हैं। Classic Tween के मुकाबले, Motion Tween आपको custom movement paths पर ज़्यादा control देता है, जिससे आपकी animation ज़्यादा fluid और dynamic लगती है। अब आपको Shape Tween, Classic Tween और Motion Tween – इन तीनों की clear understanding हो गई होगी। अपनी animation skills को और improve करने के लिए practice करते रहें। धन्यवाद, और अगले tutorial में फिर मिलेंगे!