Learn Flash

Learning Videos
आपकी ट्रेनिंग शुरू करने से पूर्व आपको यह बताना अत्यंत आवश्यक है की हमने आपके लिए पहले से ही फ्लैश की एक फाइल तैयार की हुई है. इस फाइल का नाम है “Master Layout for KICA”. अगर आपके पास वह फाइल नहीं हो तब आप हमसे वो फाइल ई.मेल या अन्य ज़रिये से मंगवा सकते हैं.

आपने काम शुरू करने से पहले इसकी एक कॉपी बनानी है और अपने सुविधा के अनुसार उसको एक नया नाम देना है. जैसा की मैं कर रहा हूँ. मैं अपनी इस फाइल का नाम 12345 रख रहा हूँ.

अब हम इस फाइल पर डबल क्लिक कर ओपन करेंगे.

अगर आपने कंप्यूटर पर कभी भी “पेंट ब्रश” पर काम किया हो तब आप पायेंगे की टॉप लेफ्ट साइड पर इसके जो टूल्स हैं वो “पेंट ब्रश” से काफी मिलते हैं. यहाँ सेलेक्शन के टूल सिम्बोल एक “ऐरो” है, वहीँ टेक्स्ट लिखने के टूल को “ T ” से दर्शाया गया है. उसी प्रकार चोकोर या Rectangle बनाने के लिए जिस टूल को प्रयोग में लाना है उसे चोकोर या “Rectangle” के सिम्बोल में दर्शाया गया है, लाइन के लिए “लाइन टूल” तथा कुछ अन्य टूल भी दिये गए हैं.

इस सॉफ्टवेर का सबसे बड़ा हिस्सा “stage (स्टेज)” कहलाता है.

हमने इस स्टेज का माप / size 850 x 450 Pixel (पिक्सेल) लिया है.

तीन और महत्वपूर्ण टूल जो आपके कंप्यूटर के दाहिने / Right बाजु में ऊपर की ओर हैं वो हैं

Align (अलाइन टूल), Info (इन्फो टूल) और Transform (ट्रांसफोर्म टूल)

अलाइन टूल का काम स्टेज पर चीजों को ठीक से व्यवस्थित करना.

इन्फो टूल का काम है आपके द्वारा व्यवस्थित चीजों को X और Y एक्सिस के हिसाब से उसकी exact वस्तुस्थिति या location को बताना.

ट्रांसफोर्म टूल जिसकी जरुरत हमें बार-बार पड़ने वाली है का काम Objects  की साइज़ में किसी तरह के बदलाव को अंकित करना या फिर उसको घुमाना हो या अन्य बदलाव के लिए होता है.

इस सॉफ्टवेर का एक और महत्वपूर्ण हिस्सा है इसका टाइम लाइन. टाइम लाइन अलग-अलग फ्रेम्स में बांटा गया है. प्रत्येक फ्रेम को एक चोकोन द्वारा दिखाया गया है. टाइम लाइन पर एक रेड स्लाइडिंग बार है जो आगे-पीछे हो सकता है. अगर हम एंटर की प्रेस करते हैं तब यह स्लाइडिंग आगे की ओर बढ़ने लगता है और १ सेकण्ड में २४ फ्रेम पार कर जाता है. इसलिए 1 सेकण्ड = 24 फ्रेम.

अब समझने वाली बात है की अगर

1 सेकण्ड = 24 फ्रेम तब

2 सेकंड = ?   ........................... 48 (correct)

लेकिन अगर मैं आपसे

७ सेकण्ड = ? या

१५ सेकंड = ? पूछूँ तब आपको बताने में थोड़ी तकलीफ अवश्य होगी  

इसलिए हमने 24 को राउंड ऑफ कर 25 कर दिया ताकि हमें गिनती गिनने में ज्यादा तकलीफ ना आये.) हमें

1 सेकण्ड = 25 फ्रेम ही याद रखना है. ताकि हम 2 सेकण्ड = 50 फ्रेम; 3 सेकण्ड = 75 फ्रेम; 4 सेकण्ड = 100 फ्रेम आसानी से ध्यान रहे.

अब हम सिखने हेतु एक पूरा प्रोजेक्ट बनायेंगे और उसमे अपने डिजाइन के लिए जो-जो गतिविधियां / movements चाहिए डालेंगे. मान लीजिए की वो प्रोजेक्ट है की

Our Project

हमें बच्चों के लिए एक डिजाइन बनाना है जिसमे उन्हें A for Apple, B for Ball, C for Cat, D for Dog, E for Elephant, F for Fish दिखाना है. बाद में वो A, B, C, D, E, F एक लाइन में नीचे दिखने चाहिए.

इस कार्य को शुरू करने के लिए हम

1.       सर्वप्रथम अपने रेड स्लाइडिंग बार को टाइम लाइन के फ्रेम नंबर 1 पर लायेंगे.

2.       उसके बाद हम एक न्यू लेयर बनायेंगे. ध्यान रखने वाली बात इतनी ही है की हमें अलग-अलग Objects के लिए अलग-अलग लेयर बनाने होंगे. ऐसा करने से objects की movement करने में हमें कोई दिक्कत नहीं आएगी.

3.       इस New Layer 2 पर हम पुरे डिजाइन के दौरान जो-जो Objects चाहिए उसे यहाँ अच्छी तरह सजा लेंगे या Arrange कर लेंगे. इस Arrangement के लिए हम एक-एक कर निम्न कदम उठाएंगे.

·         सबसे पहले हम टेक्स्ट टूल लेकर अलग-अलग A, B, C, D, E और F लिखेंगे.

·         अब Align टूल की मदद से उसे उसको ठीक से व्यवस्थित करेंगे.

·         Align टूल दो तरह के काम करता है. जब Align टूल में उपलब्ध ‘To Stage’ सेलेक्टेड हो तब वह पुरे स्टेज के हिसाब से ‘Objects’ को व्यवस्थित करता है. और जब ‘To Stage’ सेलेक्टेड नहीं हो तब वह मौजूद ‘Objects’ के हिसाब से स्टेज को व्यवस्थित करता है. हमें ज्यादा जरुरत मौजूद ‘Objects’ के हिसाब से स्टेज को व्यवस्थित करने की पड़ेगी.

·         -------------------------------------------------------------------------------------------

·         अब हम पहले A को एक निश्चित स्थान पर रख देते हैं.

·         अब हम पहले C को एक निश्चित स्थान पर रख देते हैं.

·         फिर A, B, और C को एक साथ सेलेक्ट करेंगे.

·         अब Align टूल में जाकर पहले लेफ्ट Align और बाद में Distribute क्लिक करेंगे.

·         Distribute का बटन A-B, A-C  के बिच की दूरी को बराबर करता है.

·         उसी प्रकार पुरे स्टेज को सजा लेंगे.

·         अगर हमें कही हमारे Objects की Duplicate चाहिए तो वह भी बना लेंगे.

·         अब सभी Objects के X तथा Y co-ordinates की values नोट कर लेंगे.

·         अब हम A, B, C, D, E, F आदि सभी Objects को एक साथ सेलेक्ट करेंगे और Mouse का राइट बटन प्रेस करेंगे.

·         उसमे उपस्थित Distribute to Layers को सेलेक्ट करेंगे.

·         A, B, C, D, E, F इत्यादि की स्वतः ही अलग अलग लेयर्स बन जायेंगी.

·         अब इन लेयर्स को लॉक कर देंगे ताकि बाहर से इमेज लाते समय और उनको Resize करते समय A, B, C, D, E, F इत्यादि को कोई प्रॉब्लम न हो.

·         फिर एक और नया लेयर बनायेंगे. अब हम इस लेयर पर बाहर से इमेज लेकर आयेंगे और इस लेयर पर ड्रॉप करेंगे.

·         ट्रांसफोर्म टूल में जाकर अब उन्हें Resize करेंगे. हम अलग अलग इमेजेस को अलग अलग भी Resize कर सकते हैं. या एक साथ भी Resize कर सकते हैं.

·         फिर उन्हें Align भी करेंगे.

·         Align करने के बाद उन सभी को एक साथ सेलेक्ट कर माउस का राइट बटन प्रेस करेंगे और फिर Distrbute to Layers सेलेक्ट करेंगे.

·         इससे जितने भी इमेजेज हैं वो अलग अलग लेयर्स में चले जायेंगे और उन लायेर्स का नाम भी वही होगा जो आपने इमेजेज को दिया था.

·         अब हम एक एक करके सारे Objects को F8 प्रेस कर Symbol में बदलते जायेंगे. Symbol का नाम याद रखने की हमें कोई जरुरत नहीं है.

·         फिर हम one-by-One सभी इमेजेज को सेलेक्ट करेंगे और माउस का राइट बटन प्रेस कर Create Motion Tween सेलेक्ट करेंगे. जैसे जैसे हम ऑब्जेक्ट्स को ट्वीन करते जायेंगे वैसे-वैसे लेयर पर मौजूद सिम्बोल बदलता जाएगा. पहले जो सिम्बोल “एक फोल्ड पेपर” का था वो अब “मूविंग पेपर” का होता जाएगा. इस सिम्बोल से आपको पता चलेगा की कोई “Object” मूविंग है की नहीं.

·         जब सारे ऑब्जेक्ट्स का “Create Motion Tween” हो जाएगा तब उसके बाद हम उनको एक एक कर मूव करायेंगे.

·         यहाँ एक बात ध्यान देने की है के फ्लैश किसी भी “Object” की मुवेमेंट के पहले और आखिरी हिस्से की एंट्री लेता है. बाकी की मूवमेंट सॉफ्टवेर खुद करता है.

·         अभी स्टेज पर “A” एक ‘Tweened Object’ है. हमें २ सेकण्ड में “A” का Size परिवर्तित (Transform) करना है अर्थात “A” २ सेकण्ड में एक Size (100 %) से दूसरे Size (200%) का हो जाए. यहाँ ध्यान दें की २ सेकण्ड का मतलब है ५० फ्रेम्स. हम ५० वे फ्रेम पर रेड स्लाइडिंग बार को लेकर जायेंगे वह जाकर F6 प्रेस करेंगे. ऐसा करने से A की लाइन मे ५०वे फ्रेम पर एक डॉट (Dot) बन जाएगा. यह डॉट इस Location पर A के transformation (परिवर्तन) को नोट करेगा. अतः जब हमें किसी ऑब्जेक्ट का कोई परिवर्तन नोट करवाना हो तब हम पहले F6 प्रेस करेंगे फिर उसका परिवर्तन अंकित करेंगे.

·         अब हम Control के साथ Enter Key प्रेस करेंगे. इससे पहली बार हमारी डिजाइन मे मूवमेंट दिखेगी.

·         ------------------------------------------------------------------------------------------------

·         है न एक मजेदार Experience अपनी तैयार डिजाईन मे हुए पहले Movement को देखना. यहाँ ध्यान दें की हमने मात्र दो जगह पर A के Movement को नोट किया है. फ्रेम नंबर १ पर (जो १००% है) और फ्रेम नंबर ५० पर (जो २००% है). फ्लैश ने फ्रेम नंबर १ और फ्रेम नंबर २ के बिच के बाकी फ्रेम्स की Value खुद से ही डाल डी. अगर हम फ्रेम नंबर २५ मे, जहाँ हमने  खुद से कोई value  नहीं डाली है मे जाकर A की लेयर सेलेक्ट करेंगे और ट्रांसफोर्म प्रेस करेंगे तो पायेंगे की फ्लैश ने खुद से इसकी value डाल डी है. अगर हम फ्रेम नंबर ५० की Value बदलते हैं (जैसे २००% की जगह ३००% करते हैं.) और वापस आकार फ्रेम नंबर २५ की value देखते हैं तो पायेंगे की यह value भी बदल गया है. यानी की दो पोइंट्स (या Dots) के बिच की value फ्लैश खुद ही बदल देता है.

·         अब हम फ्रेम नंबर ५० मे A के साइज़ की Value फिर से २००% कर देता हूँ. और फ्रेम नंबर १ में A के साइज़ की Value “0” कर देता हूँ. इससे A की मोवेमेंट २ सेकण्ड मे “0” से लेकर “२००” प्रतिशत हो जायेगी.

·         हम दोबारा (Control + Enter ) प्रेस करेंगे.

·         इस तरह आप पायेंगे की आपने Alphabet  ‘A’ की motion अपने जरुरत के हिसाब से दर्शा दी है.

·         इसके बाद हम Alphabet “B” के मोशन को दर्शाएंगे. इसके लिए ध्यान देने वाली बात ये है की जबतक A अपने मोशन को पूरा नहीं कर लेता तब तक ‘ B’ ने अपना मोशन शुरू नहीं करना चाहिए. इसलिए हम फ्रेम नंबर ५० पर ‘बी’ की लेयर को सेलेक्ट करेंगे और F6 प्रेस करेंगे. यहाँ हम ट्रांसफोर्म टूल मे जाकर B का साइज़ ‘0’ कर देंगे. इसके बाद के 2 सेकण्ड मे B का साइज़ २००% हो जाना चाहिए. इसलिए हम फ्रेम नंबर १०० पर जाकर B का साइज़ २००% कर देंगे.

·         अब हम दोबारा (Control + Enter ) प्रेस करेंगे.

·         चूँकि हमने फ्रेम नंबर १ पर B की Value नहीं डाली है इसलिए शुरुआत मे B १०० % से ‘0’ होगा पुर फिर ‘0’ से २००%. अब हम फ्रेम नंबर १ पर जाकर B के साइज़ की value ‘0’ कर देंगे.

·         और हम दोबारा (Control + Enter ) प्रेस करेंगे.

·          

·         अरे वाह हमने तो जैसा चाहा बिलकुल वैसा ही movement हमें दिख रहा है.

·          

·         अब याद करें की हम इससे पहले कौन सी फ्रेम पर थे ? कुछ लोगों को याद भी याद होगा लेकिन बहुतों को याद नहीं होगा.

·          

·         हम फ्रेम नंबर १०० पर थे. पर यहाँ यह ध्यान दें की आपको बार बार फ्रेम पर आने की जरुरत ही क्या है ? आपको इतना तो मालुम है की शुरुआत मे हमें स्टेज पर कुछ नहीं चाहिए. मतलब सभी Objects फ्रेम नंबर १ मे नहीं दिखने चाहिए. तब हम आखिर एक ही बार आकार सभी Objects की Value यहाँ ‘0’ कर देंगे.

·         अभी हम फ्रेम नंबर १०० से आगे बढ़ेंगे.

·         फिर वही प्रश्न की जब तक B अपनी सभी movements पूरी कर रहा हो तो क्या C ने दिखना चाहिए ? नहीं न ? इसलिए हम फ्रेम नंबर १०० पर C के लेयर को सेलेक्ट कर उसके साइज़ की value ‘0’ कर देते हैं.

·          

·         २ सेकण्ड के बाद यानी ५० फ्रेम के बाद या यूँ कहें १५०वें फ्रेम पर C ने २००% हो जाना चाहिए. अतः हम फ्रेम नंबर १५० पर जाकर C का लेयर सेलेक्ट करेंगे और F6 प्रेस करेंगे. फिर ट्रांसफोर्म टूल के ज़रिये से इसका साइज़ २०० % कर देंगे. लेकिन हम अभी फ्रेम नंबर १ पर जाकर C की value में कोई बदलाव नहीं करेंगे. लास्ट मे एक ही बाक हम बाकी बचे सभी की Value फ्रेम नंबर १ पर 0 कर देंगे.

·         इसी तरह हम D, E, F के Values भी F6 प्रेस कर अपने हिसाब से बदल देंगे.

·         ---------------------------------------------------------------------------

·         सभी की VALUES डालने के बाद हम फ्रेम नंबर १ पर आयेंगे और जिन-जिन अल्फाबेट्स की Values ‘0’ नहीं हों उन्हें ‘0’ कर देंगे.

·         अब (Control + Enter ) प्रेस करेंगे.

·         आपने अब तक जो काम किया है लगभग वही काम अपने पुरे फ्लैश के प्रोजेक्ट के दौरान करना है. बस टूल्स का प्रयोग अपनी जरुरत के हिसाब से करना है.

·         किसी ऑब्जेक्ट को छोटे से बड़ा, बड़े से छोटा करना हो या Rotate karna हो तो हम ट्रांसफोर्म टूल का प्रयोग करेंगे. परन्तु अगर किसी ऑब्जेक्ट को गायब या Disappear करना हो तो हम “कलर इफेक्ट” टूल (Colour Effect Tool) मे मौजूद ‘Style’ आप्शन मे मौजूद अल्फ़ा (Alpha) सेलेक्ट करना है. अल्फा अगर 0 होगा तब Object नहीं दिखेगा. पर अल्फा अगर १०० या 97 होगा तब Object पूरी तरह  दिखेगा. इस टूल का प्रयोग हम अपने इमाजेस के साथ करेंगे.

·         ---------------------------------------------------------------------------------------------

·         इमेजेस मे सबसे पहले हम Apple की इमेज वाली लेयर को सेलेक्ट करेंगे. और फिर फ्रेम नंबर ४०० पर रेड स्लाइडिंग बार को लेकर जायेंगे. फिर F6 प्रेस करेंगे. और दोबारा Apple की इमेज वाली लेयर को सेलेक्ट करेंगे और कलर टूल के स्टाइल मे मौजूद अल्फा को सेलेक्ट कर उसकी Value जीरो कर देंगे. जैसे ही हम स्टेज पर क्लिक करेंगे तब हम पायेंगे की Apple की इमेज गायब हो गयी है. अब हम २ सेकण्ड बाद यानी ५० फ्रेम बाद मतलब फ्रेम नंबर ४५० पर अपने बार को लायेंगे और F6 प्रेस करेंगे. फिर हम कलर टूल के स्टाइल मे मौजूद अल्फा को सेलेक्ट कर उसकी Value 97 कर देंगे. यहाँ हम अल्फ़ा की maximum इनपुट ९७ ले रहे हैं क्योंकि १०० लेने पर कई बार error आ जाता है.

·         बाकी इमेजेस के लिए भी हम वही विधि दोहराएंगे.

·         -------------------------------------------------------------------------

·         फ्रेम नंबर १ पर आकार सभी इमेजेस के अल्फा की value जीरो करने के बाद कंट्रोल + एंटर प्रेस कर अपने डिजाईन को देखेंगे.