Transcript for:
Creating Animated Websites with Images

और क्या हाल है अच्छे मैं सो के बैठूं थोड़ी देर पहले ये लो तुम भी पानी पियो पानी है नहीं पानी बट जो भी है थोड़ा बहुत साथ में पी लेते हैं कोई दिक्कत नहीं है तो अब आते मुद्दे प तो मुद्दा यह है कि आज हमें पढ़ना है कुछ अरे बोतल दिख रही है तो मुद्दा यह है कि आज हमें पढ़ना है कि भैया आप उन वेबसाइट को कैसे क्रिएट करते हो जिन पर स्क्रोलिंग ब इमेज एनिमेशन चलता है राइट तो होता ये है कि बेसिकली कैनवस होता है कैनवस के टॉप पर हम पहली इमेज लाते हैं एंड फिर जैसे जैसे स्क्रॉल करते जाते हो हम इमेजेस को प्रिंट करते चले जाते हैं अब कई लोग का पॉइंट ऑफ व्यू ये होता है कि इससे तो वेबसाइट स्लो हो जाएगी हां थोड़ी सी वो इसलिए नहीं क्योंकि इमेज प्रिंट हो रही है वो इसलिए क्योंकि आपको इमेजेस को लोड करना पड़ेगा ठीक है अब लेकिन यार एक चीज याद रखो जैसे कि देसी फूड बनाने में या चाइनीज फूड बनाने में आप हेल्थ को नहीं देखते राइट आप कहते हो यार मजा आता है इसमें यार है ना वैसे ही होता है अगर आप कुछ फैंसी स्टफ क्रिएट करना चाहते हो तो आपको थोड़ा सा थोड़ा सा वेबसाइट स्लो को ताक पे रखना पड़ेगा ठीक है दैट इज समथिंग अ अगर आप अपना आर्ट एंड अपना क्राफ्ट एंड अपनी कह सकते हैं इंटेंसिटी शो करना चाहते हो कि आप किस लेवल पे चीजों को लेकर जा सकते हो तो थोड़ा सा तो वो ताक पे रखना पड़ेगा नहीं तो आप बेसिक दैट इज समथिंग जो आज हम करने चलेंगे तो पहले देख लेते हैं फाइनल आउटकम कैसा दिखता है एंड देन उसके बाद आगे बढ़ेंगे राइट लेट्स [संगीत] गो तो फाइनल आउटकम दिख गया होगा एंड आई एम प्रिटी श्यर आपको मजा भी आ गया होगा और मजा नहीं आए तो पैसे वापस हो जाएंगे यहीं के यहीं इट्स टाइम वी शुल स्टार्ट लेट्स गो फटाफट इससे पहले हम लोग शुरू करें तो मेरे साथ चलोगे पूछो कहां ये लो सैनिटाइजर लो सैनिटाइजर लो हा चलो आओ सैनिटाइजर ले लिया अब चलते हैं तो हम आगे बढ़ेंगे हमें जो सबसे पहली चीज समझनी है वो अभी मैं आपको दिखा रहा हूं एक सॉफ्टवेयर बिल्ड किया मैंने और वो सॉफ्टवेयर बेसिकली आपके लिए क्या करके देगा आप किसी भी वीडियो के फ्रेम्स कट डाउन कर सकते हो कोई आपको हैवी सॉफ्टवेयर नहीं चाहिए पड़ेगा ये आपके लिए वो करके देगा अब जब फ्रेम्स कट होते हैं ना तो हर इमेज हर इमेज आप निकाल सकते हो बाय द वे आप डिसाइड भी कर सकते हो कितने फ्रेम्स चाहिए आपको एक वीडियो से ठीक है कितना स्मूथ चाहिए उतने ज्यादा फ्रेम्स और नंबर तीन आप जो करोगे दैट इज ये सॉफ्टवेयर आपको ये भी करके दे सकता है कि कंप्रेस आपको करनी है अपनी इमेजेस को तो वो भी आपको ये करके देगा ठीक है तो सबसे पहले मैं सॉफ्टवेयर के दर्शन करा देता हूं आपको थोड़ी सी गड़बड़ है गड़बड़ गड़बड़ नहीं अभी वीडियो शुरू हुई है तुम सोचो र गड़बड़ अभी हो गई गड़बड़ एस सच कुछ खास नहीं है मुझे ये बताना है कि ये जो सॉफ्टवेयर बिल किया या आप कैसे इंस्टॉल करोगे आपके विज या macc1836 तो सबसे पहले जरा मैक इस में देख लेते हैं क्योंकि इसमें चोच ले ज्यादा है भाई साहब ठीक है तो आपको कुछ स्टेप्स रिपीट करने पड़ेंगे मेरे साथ और ये स्क्रिप्ट ऑलरेडी हमने यहां पे ये मैक की पूरी आप कह सकते हैं स्ट्रिप्स की स्क्रिप्ट ऑलरेडी लिख रखी है तो आप डिस्क्रिप्शन से डाउनलोड कर लीजिए बढ़िया सबसे पहले आपको होम ब इंस्टॉल करना पड़ेगा अगर ऑलरेडी इंस्टॉल्ड है तो छोड़ दीजिए इन केस आपको पता नहीं कि इंस्टॉल्ड है या नहीं तो इस लाइन को कॉपी करिए ये वाली जो दूसरी लाइन है इसको कॉपी करिए टर्मिनल पे आइए पेस्ट करिए और एंटर प्रेस करिए इट विल टेक सम टाइम एंड इट विल इंस्टॉल होम ब्रू फॉर अस राइट पासवर्ड मांग सकते है तो पासवर्ड एंटर करके एंटर प्रेस करिए सो दैट विल स्टार्ट तो प्रेस रिटर्न और एंटर टू कंटिन्यू आपको एंटर प्रेस करना पड़ेगा इट विल टेक सम टाइम इवेंचर विल इंस्टॉल होम ब फॉर अस राइट तो जैसा कि देख सकते हो हो ब मेरे लिए इंस्टॉल हो चुका है कोई परेशानी नहीं है अब हमें जो करना है दैट इज इंस्टॉल करना है एफएफ एमपी यही वोह बंदा है जिसके वजह से हम कह सकते हैं पूरा लॉजिक वर्क करेगा ठीक है तो इसको इंस्टॉल करने के लिए हमें होम ब्र का इस्तेमाल करना पड़ता है इसीलिए हो ब्र को इंस्टॉल किया है बढ़िया लेट्स एंड टर दैट एंड दैट विल इंस्टॉल एफएफ एमपीईजी फॉर यू एंड दिस विल बी द स्टेप जिसके वजह से हम आगे के सारे फ्रेम्स वगैरह निकाल पाएंगे एंड यू कैन क्लियर सी इंस्टॉल हो चुका है कोई परेशानी नहीं है ठीक है नाउ वी कैन स्टार्ट आवर वर्क तो अब याद रखना ये जो दो स्टेप्स है ये जिंदगी में सिर्फ एक बार करने हैं अपने लैपटॉप पे ठीक है अब ये बार-बार नहीं करने हैं अब सिर्फ आपको अपनी स्क्रिप्ट चलानी है कहने का मतलब है ये जो दो इंस्टॉलेशंस हमने किए हैं इनकी हेल्प से हम आगे का काम कर पाएंगे तो अब आगे के काम आप ये जो अब हम लिखेंगे ये सब जो हैं ये हम तब करेंगे जब आपको फाइल्स चाहिए हो राइट ये दोनों सिर्फ एक बार करने थे ओके लेट्स गो तो सबसे पहले हमारा जो फोल्डर है उसको देखते हैं यहां पे मेरे पास एक फोल्डर है लेट्स से और ये मेरी वो फाइल है जिसके वजह से शेल स्क्रिप्ट या जो कह सकते हो मेरी स्क्रिप्ट है ठीक है तो मैं जरा समझाता हूं आपको ध्यान से ध्यान से सुनिए हमारे पास ये इस शेल स्क्रिप्ट है ये आप डिस्क्रिप्शन से डाउनलोड कर सकते हो आपकी वीडियो आपके पास है जस्ट वीडियो के फ्रेम्स निकालने हैं अब आप क्या करिए टर्मिनल पे आइए नीचे साइड पे यहां पे देखेंगे तो एड लिखा हुआ है ठीक है दिखा देता हूं तो एड्रेस लिखा हुआ है हमारा टर्मिनल हमारा टर्मिनल जब ऐसा कुछ शो करता है मतलब ब्लैंक इसका मतलब आप ऑलरेडी कहां पर हो आप ऑलरेडी आपके यूजर के नाम प हो ठीक है अब आपको यहां से पात लिखना है तो सीडी डेस्कटॉप विड हुई यह मेरे फोल्डर का नाम है तो आई विल राइट सीडी डेस्कटॉप विद हुई एंटर ट्स अबाउट इट और मेक शर करना आपके फोल्डर्स के नाम में कहीं पर स्पेस ना हो ठीक है तो अगर स्पेस होगा तो भी आप कर सकते हो काम लेकिन अगर आप टेक्निकल ज्यादा नहीं हो तो आपको दिक्कत होगी वो काम करने में ओके अगले स्टेप्स क्या है आपको आपकी स्क्रिप्ट के लिए यह कुछ रन करना है तो लेट मी रन दैट सी एमओ प् एक एक्सट्रैक्ट फ्रेम्स इससे क्या होगा मेरी जो स्क्रिप्ट है वो एग्जीक्यूटेबल बन जाएगी और ट्स अबाउट इट तो ऐसा देखिएगा कि कुछ हुआ नहीं बट एक्चुअली कुछ हुआ है अब उसके बाद हम हमारी स्क्रिप्ट को चला सकते हैं कैसे डॉट स् एक्क फ्रेम्स ड ए स्पेस देने के बाद आपको वीडियो का नाम देना है तो . mp4 क्योंकि उसी फोल्डर में मेरी वीडियो है आप देख सकते हो उसी फोल्डर में वीडियो है तो उसी फोल्डर का मतलब है डॉट स्लश एंड देन उसके बाद आपको अपने फोल्डर का नाम देना है जो भी फोल्डर में आप सेव करना चाहते हो फॉर एग्जांपल मैं एक्सट्रैक्टेड नाम की फोल्डर में सेव करना चाहता हूं एक इंटरेस्टिंग फैक्ट बताता हूं मैंने दो अपडेट्स डाली इसमें पहला अगर ऐसा फोल्डर नहीं होगा तो यह बना देगा वो फोल्डर और दूसरा अब हमारी इमेज साइज बाय डिफॉल्ट ही काफी कम आएंगी साइज में तो क्योंकि मैंने पीएनजी की जगह जेपीजी का इस्तेमाल किया है सो अगर हम जाए सो इट विल टेक सम एंड इट विल गिव यू ऑल द फाइल्स राइट दैट्ची आपको यहां पे फाइल्स में कई सारी फाइल्स मिलेंगी ये नहीं मिलेगी ये तो हमने अभी डाली है वीडियो ठीक है तो आपको एक मिलेगी एफएफ एमपैक जो कि एक विंडोज इंस्टॉल है सबसे पहले आप इसे इंस्टॉल करेंगे डबल क्लिक करिए यहां पर विंडोज एक वार्निंग दे सकता है कि भैया यह तो एक वायरस है और वहां पर लिखा होगा व्यू मोर तो व्यू मोर प क्लिक करिए रन एनीवे नाम का बटन आएगा उस परे क्लिक करेंगे ठीक है अब यह जो प्रकट होगा इसमें नेक्स्ट और फिर यहां पे नेक्स्ट इंस्टॉल तो भैया वायरस क्यों बोल रहा था विंडोज से वायरस इसलिए बोल रहा था क्योंकि थर्ड पार्टी से डाउनलोड किया ऐसा समझ लो अभी के लिए ठीक है आपने किसी ट्रस्टेड सोर्स से डाउनलोड नहीं किया इसलिए यह बोल रहे हैं कि वायरस है आप भरोसा कर सकते हो वायरस नहीं है ठीक है नाउ अब आते हैं हमारे कैनवस एनिमेशन यूटिलिटी पे इस पे डबल क्लिक करेंगे फटाफट दिस इज हां ऐसा कुछ प्रकट होगा ठीक है तो मोफो पे जाना है फटाफट रन एनीवे एंड ये भाई हमारा चालू हो जाएगा इट विल टेक सम टाइम बिल्कुल ये चालू हो गया ये विंडोज के लिए तो विज के लिए थोड़ा धं की शक्ल डाल दी हम लोगों ने तो फटाफट चालू करते हैं इसको सेलेक्ट वीडियो एंड यहां पे हमारी वीडियो दिख रही होगी आपको इस वीडियो को सेलेक्ट करेंगे ओपन करेंगे फटाफट अगर जीरो लिखे रहने देंगे इसका मतलब है विंडोज में हमारे पास काफी कंट्रोल्स है इस वक्त राइट काफी कुछ हम मैनिपुलेट कर सकते हैं जीरो लिखने का मतलब वीडियो में जितने फ्रेम्स होंगे सारे निकालो नहीं तो आप डिफाइन कर सकते हो कि भैया पर सेकंड पे कितने फ्रेम्स चाहिए आपने कहा कि नहीं नहीं हमें तो 10 ही चाहिए तो मतलब इस हिसाब से आप डिसाइड कर सकते हो जितने कम फ्रेम्स रखोगे उतना कम कह सकते हो आप फाइल्स क्रिएट होंगी ठीक है सो दैट इज व्हाट इट लुक्स लाइक बढ़िया तो हम जीरो ही रख रहे हैं अभी केलिए एंड जी पैक जी पैक रखेंगे तो इससे आपकी साइज जो इमेज की होंगी वो खुद से ही पहले से ही छोटी होंगी साइज में ठीक है फिर उसके बाद मैं एक्सट्रैक्ट करूंगा एंड दैट विल आस्क मी कि कहां प क्रिएट करना है तो यहां पर मैं चाहता हूं एक फोल्डर बन जाए और फोल्डर का नाम रखना चाहता हूं हु ठीक है हम लोग का फेवरेट फोल्डर हुई अब हुई पार्ट डज एजिस्ट तो ठीक है एक काम करते हैं हम एक काम करते हैं एक काम करते हैं लेट्स क्रिएट न्यू फोल्डर क्योंकि विंडोज काफी दिन बाद चला रहा हूं तो मुझे समझ नहीं आ रहा करना क्या है ओके नाउ सेलेक्ट फोल्डर एंड दस अबाउट इट द प्रोसेस विल स्टार्ट इट विल टेक सम टाइम फ्रेम्स एक्सट्रैक्टेड सक्सेसफुली बहुत बढ़िया लेट्स कम बैक हियर यहां पे हुई नाम से एक फोल्डर आ चुका है इसके अंदर आपके सारे फ्रेम्स आ चुके हैं ठीक है अगर आप देखेंगे तो ऑलरेडी कंप्रेशन हो रखा है 48 केब में फाइल है वच इज प्रिटी गुड बट अगर आप चाहते हैं कि और कंप्रेशन हो यहां पर सिलेक्ट फोल्डर प जाएंगे फटाफट हमें अपना हुई फोल्डर सेलेक्ट करना है सेलेक्ट फोल्डर एंड कंप्रेशन के लिए जितना पीछे आओगे उतना क्वालिटी कम होगी तो बेसिकली जैसे अगर मैं यहां पे इसको पीछे ले आता हूं सम वेयर हियर लेट्स से 20 पर पे तो अगर मैं कंप्रेस इमेजेस करता हूं दिस विल स्टार्ट द प्रोसेस ऑफ कंप्रेसिंग द इमेजेस इट विल टेक सम टाइम एंड बस आने ही वाला है मैसेज कंप्रेशन कंप्लीटेड करके ऑल राइट सो इमेज कन्वर्ज एंड कंप्रेशन कंप्लीटेड बढ़िया तो लेट्स कम बैक हियर ई पे आते हैं यहां पे अब लास्ट में प्रोबेबली एक फोल्डर आया होगा जहां तक मुझे लगता है यस बिल्कुल ये एक फोल्डर आया कंप्रेस्ड इमेजेस तो अगर हम जाएंगे तो इसके अंदर भी हमारी सारी फाइल्स यहां प ऑलरेडी है ठीक है अब एक इंटरेस्टिंग फैक्ट बताता हूं ट इज अबाउट यहां पे अगर हम सिर्फ उस फोल्डर का साइज चेक करें फटाफट कंप्रेस इमेजेस का साइज चेक करें एंड वी गो टू शो मोर ऑप्शन प्रॉपर्टीज ट विल शो इसका साइज है 144 14.4 एबी राइट चलो इसे डिलीट करते हैं फटाफट एंड लेट मी डिलीट इट बढ़िया डिलीट हो जाएगा ठीक है एक स्टेप पीछे चलते हैं और इस फोल्डर का साइज पता करते हैं अब कितना है तो पहले जो साइज था वो था 19 एबी और अब हो गया 14.4 एब व्हिच इज वेरी डिसेंट इनफ राइट आप अगर इस टाइप की वेबसाइट क्रिएट कर रहे हो तो इट्स डिसेंट साइज टू गो विद परफेक्ट इट्स टाइम कि अब हम चले जरा कोड करने क्योंकि अब हमारे पास विंडोज में भी फ्रेम्स आ चुके हैं और हमारे पास मैक में भी फ्रेम्स आ चुके हैं तो चलते हैं फिर लेट्स गो और बाय द वे सॉफ्टवेयर अवेलेबल है नीचे डिस्क्रिप्शन में सो यू कैन डाउनलोड इट फ्रॉम देयर ठीक है इसका विज वर्जन और मैक दोनों अवेलेबल है वहां पे यू कैन चेक इट आउट देयर बढ़िया लेट्स तो शेरी एक्सट्रैक्ट करके लेट्स ओपन इट शेरी एक्सट्रैक्ट तो अब इसमें थोड़ा सा टाइम लगता है जब भी आप इसे ओपन करोगे एंड हल्का सा टाइम लगता है लाइक सात सेकंड आठ सेकंड कई बार ले लेता है बट अभी ओपन हो गया जल्दी ठीक है लेट्स गो सेलेक्ट वीडियो सेलेक्ट वीडियो के बाद डेस्कटॉप और मेरी वीडियो यहां पे लेट्स से ये मेरी वीडियो है इस वक्त आप देख लो उस फोल्डर में जहां पे वीडियो है उस फोल्डर में कोई भी एक्सट्रैक्ट एक्सक फ्रेम्स करके एक्सट्रैक्टेड फ्रेम्स करके कोई फोल्डर नहीं है तो इफ आई सेलेक्ट दैट वीडियो मुझे ये बताना कि हर सेकंड में मुझे कितने फ्रेम चाहिए मुझे हर सेकंड में 30 फ्रेम्स चाहिए राइट 30 इज अ गुड नंबर टू गो विद ठीक है एक्सट्रैक्ट फ्रेम्स इट विल स्टार्ट द प्रोसेस ऑफ एक्सट्रैक्टिंग इट एंड थोड़ा सा टाइम लगेगा एंड उसके बाद भाई हमारा बोल देगा एक्सट्रैक्टेड हो गया फेम्स एक्सट्रैक्टेड बढ़िया तो अगर मैं आपको इस वक्त दिखाऊं इसे जस्ट अ सेकंड तो यहां पे एक एक्सट्रैक्टेड फ्रेम्स करके एक फोल्डर आ गया है जिस फोल्डर में वीडियो थी उसी फोल्डर में आ गया होगा ओपन करेंगे यहां पे आप देखेंगे तो 382 फ्रेम्स होने चाहिए टोटल 382 क्योंकि मैं ऑलरेडी कैलकुलेट कर चुका हूं तो मुझे पता है 382 फ्रेम्स होंगे और हर फ्रेम हर फ्रेम बहुत डिटेल्स वेरी डिटेल्स फ्रेम बहुत डिटेल है लेकिन एक छोटी सी प्रॉब्लम है क्या प्रॉब्लम है इसका साइज देखो टोटल फोल्डर का दिस इज़ 3688 m इतना साइज डालोगे तो सर्वर की लग जाएगी राइट सो वी डोंट वांट के ऐसा कुछ हो तो उस केस में क्या करेंगे हम लोग यहां पर हम जाएंगे सेलेक्ट फोल्डर प फटाफट बाय द वे मैं अब यहां पर कंप्रेशन शुरू करूंगा तो सेलेक्ट फोल्डर विथ इमेजेस इस पर जाएंगे एंड मेरे एक्सट्रैक्टेड फ्रेम्स ये है आपको वो फोल्डर सेलेक्ट करना है जिस फोल्डर में इमेजेस थी मुझे याद है वो एक्सपेक्टेड फ्रेम्स में थी इसमें ही थी सारी इमेजेस सेलेक्ट करिए फोल्डर को एंड देन उसके बाद कंप्रेशन को नीचे ले आएंगे क्वालिटी मैं सम वेर यहां कहीं रखूंगा एंड कंप्रेस इमेजेस सो दैट विल स्टार्ट द प्रोसेस विल टेक सम टाइम कंप्रेशन कंप्लीटेड लेट्स गो तो अगर मैं यहां पे आपको शोकेस करूं इसे तो लास्ट में एक फोल्डर आ गया होगा कंप्रेस्ड इमेजेस करके जिसके अंदर 382 इमेजेस होंगी जो कंप्रेस्ड हो चुकी है ठीक है अब हम इसका साइज देखते हैं 368 एब था पहले और इस भाई का साइज है 19.7 एब 368 एब से 19.7 एबी चच इज फाइन फॉर मी राइट आई विल कॉपी दिस थिंग कम आउट पेस्ट कट किया एक्चुअली मैंने कॉपी नहीं किया एंड यहां पे ये जो मेरा फोल्डर हैक्टर फ्रेम्स नहीं चाहिए मेरे पास यहां पे कंप्रेस्ड इमेजेस का फोल्डर आ चुका है ठीक है व्हिच इज समथिंग व्च आई विल यूज तो आपको करना क्या है ऐसे ही अपनी किसी भी वीडियो का कंप्रेस्ड वर्जन निकाल लेना है ठीक है कंप्रेस्ड वर्जन निकाल के आप यहां पर ले आइए यहां पे मेरे पास सारे फ्रेम्स अवेलेबल हैं आप भी अपने सारे फ्रेम्स ले आइए और फिर हम हम लोग यहां पे कामकाज शुरू करेंगे जो कि शुरू कर रहे हैं अब इट्स टाइम वी शुड स्टार्ट विद द डेवलपमेंट प्रोसेस ऑलराइट ना मैं यहां पे आ चुका हूं तो मुझे यहां देख सकते हो स्क्रीन के इस कोने पे और अगर लाइट तुम्हें कम लग रही है व लिए क्योंकि सर्जरी के बाद मेरे को बोला गया है कि आपको ज्यादा लाइट नहीं देखनी और मेरी आंखें इस वक्त फट रही है ठीक है सो प्लीज तुम इतनी सी कृपा जरूर करना कि मुझे इतनी कम लाइट में रहने के लिए अनुमति दे दो चलो इट्स टाइम वी शुड स्टार्ट लेट्स गो चलो तो सबसे पहले हमारे पास यहां पे एटीएल फाइल है ओके लेट्स ब्रिंग द बल प्लेट देन सो एटील फ डन हो गया साहब यहां पे हमें चाहिए दो चीजें पहले का नाम टेल विन दूसरे का नाम जीएस एपी लेट्स ब्रिंग दैट शेट एज वेल सो टेल विंड टेल विंड जी एस ए पी सी डी एन लेट्स गो टेल विन सीएसएस प आएंगे फटाफट गेट स्टार्टेड प्ले सन देयर वी गो स्क्रिप्ट कॉपी एंड यहां पर करेंगे पेस्ट टेल विन आ गया सब जी सबब सीडी एन पहली वेबसाइट प जाएंगे जी सब मन जस उठाएंगे और यहां पर आके करेंगे बड़े भैया को पेस्ट इन केस आपके दोनों नहीं आते तो आप गलत वीडियो में हो जाके टेलन स्क्रिप्ट जस में जो हमने जी सा पुट किया है उसको पहले सीखो और क्योंकि कह सकते हो एक ऊपर लेवल की चीज है एंड टेल तो फिर भी कंपली इजी है बली सीएसएस क्लासेस बट जीएसपी इज समथिंग जो व्हिच रिक्वायर्स कि आपको थोड़ा बहुत आना चाहिए वी हैव कंटेंट अवेलेबल ऑन दिस चैनल एज वेल आप जा जाके देख सकते हो जी सा से लेटेड हमारे पास सीरीज अवेलेबल है जी सा से लेटेड बहुत सारा कंटेंट इसी चैनल पे है सच में बहुत अच्छा है लेट्स गो चलो तो सबसे पहले मैं तुम्हारी आंखें ना खराब हो जाएं इसके लिए विटफुल हाइट स्क्रीन बीजी जिंक 100 नहीं नहीं 900 इससे क्या होगा स्क्रीन हो जाएगी ब्लैक तो अगर मैं यहां पे रीलोड कर दूं तो ये ब्लैक हो गई बढ़िया बहुत बढ़िया ठीक है अब क्या करना है मैं चाहता हूं कि देखो सबसे पहली चीज मैं चाहता हूं कि हम वो वाला चीज सीखें जिसमें 400 पिक्सेल हम स्क्रॉल करेंगे फिर भी एलिमेंट स्टिकी रहे स्टिकी मतलब वही चिपका रहे तो कैसे करेंगे एक हम यहां पे कंटेनर बनाएंगे तो बेसिकली हम यहां पे कह सकते हैं कि ये है कैनवास कंटेनर कैनवास कंटेनर हम इसका नाम पैरेंट रख देते हैं आई डोंट नो जो भी रखना है रख सकते हो विड्थ फुल और हाइट मैंने अभी इसको क्लीयरली दे रखी है 400 400 काफी कम है मैं सेे 700 दूंगा ठीक है एंड देन उसके बाद बीजी अभी के लिए बहुत ही गंदा कलर गंदा नहीं दूंगा चलो तुम्हारी आखे फिर से बंगा बीज 800 ठीक है इन केस अगर आप नहीं देख सकते तो यहां पर एक स्क्रॉलर आ रहा है ठीक है एंड यू कैन सी मैं स्क्रॉल कर पा रहा हूं ब बढ़िया दिस वेरी गुड ठीक है ओके अब मैं य पर इसको कहूंगा कि तुम रिलेटिव हो एक काम करते मैं वो रिलेटिव वाला एक साथ लिखूंगा ताकि तुम्ह समझ आए मैं क्यों क्या कर रहा हूं वि हाइट 52 बीजी रेट 500 य मैं क्यों कर रहा हूं दिखा रहा हूं प्रोसेस समझाने के लिए ठीक है एंड अगर आप देखोगे तो हमारे पास य जो स्क्रॉल हो रहा है हमें क्या करना है करना कि यह डे रेड वाला यही टका र है यही टका र ठीक है अब हाउ ड देख देखेंगे देखेंगे कब देखेंगे अब देखेंगे तो सबसे पहले पैरेंट को जाकर रिलेटिव कर दो डन पेंट को टॉप जीरो लेफ्ट जीरो कर दो डन और जिसको आपको टेक के रखना है उसे कर दो स्टिकी ओ एंड इससे भी टॉप जीरो ए लेफ्ट जीरो कर दो अगर य नहीं चला तो मैं तुम्हें पिज्जा खिलाऊंगा ठीक है चलो लेट्स गो मैं स्क्रॉल कर रहा हूं आप देख सकते मैं स्क्रॉल कर रहा हूं रेड वही टिका हुआ है कैन यू सीट ठीक है सो ट्स द ट्रिक टस द ट्रिक टू स्टिक समथिंग देयर तो अब अगर मैं इसको बीजी रेड की जगह बीजी जिंक बीजी जिंक लेट से 400 कर दू थोड़ी आंखें फटें तुम्हारी बट ट्रस्ट मी करके बताना पड़ेगा और इसका हाइ स्क्रीन कर दूं तोय पूरी स्क्रीन पर है और मैं स्क्रॉल कर रहा य हमेशा रुका हुआ है कैन य सी द स्कलर ग्रेट बढ़िया ठीक है तो यह था कांसेप्ट ठीक है अब यहां पर आते फटाफट रिमूवस जिंक कलर ब नी इट वेरी नाइस सोस ट लुकिंग गुड ठीक है एक चीज और है हाइट स्क्रीन कर रखी इसलिए प्रॉब्लम हो रही है तो जस्ट रिमूव पैरेंट साइट स्क्रीन हटा देना ठीक है तो अब इट्स द वे इट शुड बी ठीक है मैं एक बार चेक करना चाहता हूं बस अभी भी पता नहीं मुझे डर लग रहा है एक बार देखना चाहता हूं क्या वो एलिमेंट वही पर है हा बिल्कुल वही है ठीक है परफेक्ट है सो यप दिस इ वेरी गुड अब मुझे इसके अंदर डालना है मेरा कैनवास तो आईल बी हैविंग माय कैनवास ओवर यर मैं इसको एक आईडी दे सकता हूं माय कनस ववर य वांट सो फ्रेम कुछ भी आईडी दे सकते हो क्या ही फर्क पड़ रहा है ओके सो दैट्ची है ट्स अबाउट इट तो हमारा कैनवास ऑ फुल स्क्रीन है कैन वी से दैट यस वी कैन ठीक है दिस इज गुड ऑल राइटी तो यहां तक हो गई कहानी डन अब शुरू होगा मौत का नंगा नाच लेट्स गो तो सबसे पहले हमें क्या करना है सबसे पहले हमें चाहिए ये जो हमारी यहां प इमेजेस है इस वक्त हमारे ही फोल्डर में ठीक है फ्यूचर में ये इंटरनेट पर कहीं पर लाइव हो जाएंगी तो जब लाइव हो जाएंगी वी वांट देम टू बी लोडेड फर्स्ट समझा देता हूं 300 इमेजेस है आप जब स्क्रॉल करोगे तो वो पहले से ही लोडेड होना जरूरी है तभी उतना स्मूथ चलेगा अगर स्क्रॉल के दौरान लोड होंगी तो लैब्राडोर लग जाएंगे पूरे एक्सपीरियंस के तो वी वांट टू प्रीलोड दोस इमेजेस तो मैं खुद का प्रीलोडर बना रहा हूं यहां पे प्रीलोड इमेजेस बहुत आसानी से खुद का प्रीलोडर बना सकते कैसे बहुत सिंपल एक काम करते एक्चुअली मेरी इमेजेस कितनी है देख लेते 382 जहा तक मुझे याद है 3 यस सो 382 इमेजेस है हमारे पास मैं क्या करता हूं हमेशा मैं यहां पर सेव कर लेता हूं लेट्स से लेटस से फेम्स ऐसे फ्रेम्स में सेव कर लेता हूं कि भाई मेरा मेरा करंट फ्रेम कौन सा है करंट फेम करंट फ्रेम या करंट इंडेक्स लेट करंट इंडेक्स सेव कर लेता हूं विच इज जीरो और मैं यहां पे सेव कर लेता हूं मैक्सिमम इंडेक्स कहां तक मुझे जाना है मुझे जाना 382 तक ठीक है जी तो ये हो गया डन तो अब अब ये कैसे यूज करूंगा वो देखो इससे मुझे ना बार-बार कहीं पे पेस्ट नहीं करना पड़ता कि मैक्स इंडेक्स क्या है मैक्स इंडेक्स हर जगह प 382 नहीं लिखना पड़ेगा कुल मिला के मैं सीधा लिख दूंगा फ्रेम्ड मैक्स इंडेक्स इससे फायदा क्या है कल को अगर मेरी इमेजेस कम हो गई और मैंने 330 इमेजेस ही बची तो हर जगह 382 नहीं करना पड़ेगा बस यहां थ 82 को 330 करना पड़ेगा और हर जगह चेंज हो जाएगा क्योंकि मैंने रेफरेंस देके रखा हुआ है समझे इन केस नहीं समझ आ रहा अभी आएगा लेट्स गो तो फॉर र आ इ 0 ओय चल जा भाई थैंक यू हमारा प्लान क्या है प्लान बिल्कुल सिंपल है मैं समझाता हूं प्लान बिल्कुल सिंपल है सारी इमेजेस लोड करनी है कैसे अभी देखते हैं तो हमारे पास यहां पर हमारे पास यहां पर क्या हुआ है हमने एक लूप क्रिएट किया है जो कि शुर होता है लेट से जीरो से और जो कि जाता है फ्रेम्ड मैक्स इंडेक्स तक ठीक है तो बेसिकली 32 तक जाता है कहने का मतलब ठीक है सो अब हमें यहां पर करना क्या है हमें यहां पर सबसे पहले एक इमेज यूआरएल चाहिए जो जो आप कह सकते हो इमेजेस को लोड करेगा राइट जिसके अंदर इमेज का पूरा पाथ होगा तो हमारा क्लियर क्लियर है हमारे इमेज यूआरएल का नाम क्या है कंप्रेस्ड इमेजेस की जगह मैंने इसका नाम रख दिया फ्रेम्स फ्रेम्स सबका नाम कंप्रेस फ्रेम से ही है तो चलो ठीक है फिर यूज करेंगे फ्रेम्स नाम का यूआरएल है फ्रेम्स नाम का फोल्डर हैम सॉरी एंड वो अंदर जाता है कंप्रेस्ड अंडरस्कोर फ्रेम पे तो यह बैक टेक चल रहा है याद रखना कंप्रेस्ड अंडरस्कोर फ्रेम पे यह सिंगल कोट नहीं लिखा है भाई यह बैकटिक है ठीक है बैकटिक और सिंगल कोट में फर्क होता है दिस इ सिंगल कोट दिस इ एस्केप के नीचे होता है बैकटिक दिस इ बकक फरक होता है ठीक है ड रिमेंबर द ठीक है जी कंप्रेस फ्रेम और इसके बाद इसके बाद मुझे चाहिए एक नाम राइट तो व नाम मेरा जो है ट इज समथिंग अब अब य पर मुझे थोड़ी सी सेट अप करना पड़ेगा सेटप क्या है यहां पर टोटल चार डिजिट का नाम जाएगा राइट तो वन को हम वन नहीं लिख सकते वन को लिखना पड़ेगा न अब यह कैसे करेंगे तो इसके लिए काम करते थोड़ा सा ब्राउजर पर आते हैं जरा कुछ सीखते तुम मैं कुछ सिखाता हूं ठीक है तो लेट्स से मेरे पास एक वेरिएबल है ए ए की वैल्यू 12 है ठीक है तो य पर लिखेंगे टू स्ट्रिंग हो जा यार ठीक है एड टू स्ट्रिंग का आंसर क्या आ रहा है स्ट्रिंग में डॉट पैड स्टार्ट पैड स्टार्ट बेसिकली होता है पडि स्टार्ट में ठीक है कितने अक्षर की पडि चार अक्षर की होनी चाहिए तो अगर आप देखो तो चार अक्षर की पडि होने की वजह से ये स्पेस स्पेस ले ले रहा है दो कैरेक्टर खुद के और दो कैरेक्टर स्पेस के राइट पर मैं कह सकता हूं कि नहीं नहीं वो जो पैडिव मुझे जीरो की चाहिए अब ये शुरुआत में क्या लगा रहा है जी अब आपको ये लग सकता है भाई भैया यार ये तो बहुत होशियार है कोई होशियार नहीं है ना वो होशियार है जिनको आप बोल रहे हो होशियार है ना मैं होशियार हूं जो आप सोच रहे हो मे बी अगर सोच रहे हो कि आप कि इनको ये कैसे पता इनको तो सब पता है ना ना ना ना नथिंग लाइक दैट मैंने इसे गल किया था मैंने इसे सीखा है इसलिए समझ आया है ठीक है एस सच प देखो और जब मैं जब आप किसी कोय बताते हो कि मैंने इस ग किया और सीखा है तो कहते है हां तो ये तो मुझे पता है पता सबको है बट फिर भी एंजाइटी सबको होती है कि यार इसको यह पहले से आता है मैं इसलिए आपको यह बताता हूं ठीक है आई डोंट वांट कि आप ऐसा सोचो कि सबब इज यू नो मिरेकल असली स्मार्ट कि उनको यह सब चीजें ऑटोमेटिक खुद से पता है नोबडी नोबडी नो शेट ठीक है दे दे लर्न इट एंड ट्स व्हाई दे नो इट सिंपल नाउ यू हैव लर्ट इट एंड ट्स व्हाई यू विल नो इट लेट्स गो कल को अगर कोई तुमसे कहता है कि मेरे पास एक एक नंबर है 12 और मुझे उ पांच डिजिट का बनाना है अगर वो पाच का नहीं हो सकता तो उसके आगे तीन जीरो लगा दो कैसे करोगे इट्स क्वाइट सिंपल यू टेक 12 यू मेक इट स्ट्रिंग यू मेक इट स्ट्रिंग एंड देन यू से पैड स्टार्ट बाय द वे अब ये नंबर नहीं बचेगा क्योंकि ओबवियसली आपने इस स्ट्रिंग बना दिया है आप कहते हो पाच अक्षर और शुरुआत होनी चाहिए जीरो से देर वी गो आप देखेंगे तो पांच ही अक्षर है टोटल राइट यू माइट हैव अ क्वेश्चन देन यू माइट हैव अ क्वेश्चन देन कि अगर यहां पर 122 होता तो तो फिर फिर दो ही जीरो आते गट इट गट इट यस बिल्कुल चले तो य पर वही लिखने वाले हम लोग कहेंगे हमारा जो आई है आ की वैल्यू को पहले तो स्ट्रिंग बनाओ ठीक है और फिर उसे पैड स्टार्ट करो चार अक्षर स्टार्टस विथ जीरो ठीक है डन तो यहां तक नाम बन गया अभी डॉट पीएनजी नहीं लगाया है तो इस कर्ली ब्रेस के बाद डॉट पीएनजी इंटरेस्टिंग अगर इतने प कंसोल लॉक करना चाहते हो यू कैन गो फॉर इट कंसोल लॉक इमेज यूआरएल देखो सारे यूरल कैसे आ रहे बाय द वे अभी कुछ भी नहीं आएगा क्योंकि हमने फंक्शन को चलाया नहीं है तो लेट लेट्स लोड द फंक्शन लोड इमेजेस लेट्स गो देर देर वी गो यू कैन सी ल द नेम्स राइट यू कैन सी ल द नेम्स वेट तो आप देखो यहां पे 0054 0141 राइट यू कैन सी ल द नेम्स सो वी हैव ल द नेम्स देर बढ़िया तो हमारे पास य इमेज यूरल अब हमें जो चाहिए ट इ हम एक ब्लैंक इमेज बनाएंगे तो य हमारी ब्लैंक इमेज है इनकेस आप देखने में इंटरेस्टेड हो क्या है य कुछ नहीं इमेज टक है यार बेसिक इमेज टक कुछ है नहीं इसके अंदर एसआरसी नहीं एलटी नहीं कुछ भी नहीं है सो अगर मैं दिखाऊ बस एक इमेज टक है नथिंग देर ठीक है तो हमने 382 बार इमेज टक बनाया होगा क्या हम यह कह सकते हैं बिल्कुल कह सकते हैं ठीक है हम कह रहे हैं कि इमेज का एसआरसी सेट कर दो इमेज का एसआरसी क्या है जो हमारा इमेज र सुनो पली बार जब ये चला होगा तो पहली बार एक इमेज यूआरएल बना होगा पहली बार एक इमेज टैग बना होगा और उस इमेज टैग का एसआरसी ये इमेज यूरल हो गया होगा तो बेसिकली एक आ एमजी टैग बन चुका है जिसका एसआरसी सेट है देखिए इतने सारे आईएमजी टैग्स बने हैं और सबके एसआरसी सेट है कैन यू सी दैट कैन यू सी दैट राइट सबके एसआरसी सेट हो चुके हैं इंटरेस्टिंग बहुत बढ़िया दिस डूइंग परफेक्ट जॉब राइट अब सुन इसके बाद एसआरसी सेट हुए अब ये लोड करना चालू करें जैसे एसआरसी आएगा सोर्स जैसे आय लोड करेगा राइट अब ये कब लोड कर पाएगा हमें नहीं पता हम कहेंगे जब भी लोड हो जाए तो जब भी लोड हो जाए तो एक फंक्शन चला देना जो फंक्शन यह है तो हर इमेज जब लोड होगी तो यह फंक्शन चलेगा हर इमेज के लोड होने पर चलेगा याद रखना है हर इमेज के लोड होने प यह फंक्शन चलेगा ठीक है और सबसे पहले मैं य पर एक ट्रैक रख रहा हूं कन कन रख कन रख लेट इमेजेस इमेज इमेज लोडेड लो ठीक है तो एक हमने एक वेरिएबल बना रखा है ट्रैक जीरो इस वक्त तक जीरो लोडेड है हर बार जब एक इमेज लोड हो जाएगी तो मैं इमेज लोडेड को इमेज लोडेड को क्या कर दूंगा प्लस प्लस इससे क्या होगा मेरी इमेज कितनी लोड हो गई मुझे पता चल जाएगा तो मेरा प्लान क्या है जब क्योंकि मुझे पता है टोटल इमेजेस कितनी है 382 हर लोड पे यह एक वैल्यू बढ़ा देगा तो जब भी टोटल वैल्यू 382 हो जाएगी 382 तो मैं ये श्यर हूं कि मेरी सारी इमेजेस लोड हो गई है तो मैं वो लिखूंगा मैं कहूंगा अगर इमेजेस लोडेड बराबर हो जाता है मेरे फ्रेम्स डट मैक्स इंडेक्स से मैं समझाता हूं मैं समझाऊ बड़बड़ा मत सुनो मैक्स इंडेक्स कितना 382 मतलब टोटल कितनी टोटल कितनी इमेजेस है 382 इमेजेस लोडेड हर बार एक पड़ेगा जब एक इमेज लोड होगी 382 अगर कभी हो गया इसका मतलब 382 इमेजेस लोड हो गई और अगर 382 इमेजेस मेरी लोड हो गई है जो कि बराबर आ जाता है इसके कंपैरिजन तो इसका मतलब है कि हमारी सारी इमेजेस लोड हुई है तो हम एक काम करते हैं हम यहां पर बोलते हैं जरा ल इ लोड ल इमेजेस ठीक है सो ट्स गिविंग मी सम एरर वा आ एक्चुअली गड़बड़ है ना मैं देख देख चुका हूं गड़बड़ क्या है मैंने लेस लगाया इक्वल नहीं लगाया एक्चुअली फेम मैक्स इंडेक्स मतलब ये 382 तक जाना चाहिए ना ठीक है ल इमेजेस लोडेड परफेक्ट ल इमे लो एरर का क्या आ रहा है ये फ्रेम 00 को लोड करने की कोशिश कर रहा है जो कि अवेलेबल नहीं है सो जस्ट लीव इट डोंट वरी वो छोड़ दो परेशान मत हो ऑलराइट अगर आप सोच रहे हो मैं वन से चालू कर दूं यू कैन गो फॉर इट एज वेल तो वो भी कर सकते हो ऑल इमेजेस लोडेड जब सारी इमेजेस लोड हो जाएंगी तब ये कंसोल लॉक करेगा व्हिच इज समथिंग जो हो चुका है ठीक है सो सो गाइस अब जो हमें करना है दैट हैज टू डू विथ दैट हैज टू डू विथ व्हाट इमेजेस लोड होने के बाद अब मुझे क्या करना है लेट मी थिंक लेट मी थिंक मुझे पहली पहली इमेज लोड करनी है तो मैं एक फंक्शन बनाऊंगा लोड इमेज लोड इमेज और जस्ट में भेज दूंगा मेरा करंट इंडेक्स जो कि मुझे पता है फ्रेम्स अरे फ्रेम्स क फ्रेम्ड करंट इंडेक्स करंट इंडेक्स ठीक है तो अब फटाफट एक फंक्शन बनाते हैं और एनिमेशन भी हम चालू कर सकते हैं इसके बाद स्टार्ट एनिमेशन ठीक है लेकिन एक फंक्शन पहले बनाते यही फंक्शन मेन कह सकते हो जूस है ठीक है उसका नाम है लोड इमज ये इंडेक्स रिसीव करेगा और उस इंडेक्स की इमेज को लोड करेगा बाय द वे एक चीज और करनी पड़ेगी क्या है जब आपकी इमेज लोड हो गई है उसके बाद मुझे सारी इमेजेस को सेव करना है ये जो इमेज टैग्स मैंने बनाए थे जिनमें एसआरसी थे वो सारे इमेज टैग सेव करने हैं वही तो इमेजेस हैं मेरी तो आप कह सकते हो सारी इमेजेस जो हैं अ वो सारी इमेजेस मैं यहां पे सेव करूंगा ठीक है तो आई विल डू दिस इमेजेस ओ इमेजेस डॉट पुश इमेज तो इन केस नहीं समझ आ रहा अभी भी समझ नहीं आ रहा क्या हो रहा है तो इमेजेस अरे में सारी इमेजेस आ चुकी हैं मे बी आई कुड शो टू यू बट नहीं दिखा सकता क्योंकि आई बिलीव मुझे उसका एक्सेस नहीं मिलेगा मिल रहा है मिल रहा है मिल रहा है ठीक है इतनी सारी इमेजेस है और सारी इमेजेस लोड हो चुकी है ठीक है यह हिसाब तो इमेजेस अरे में मेरी सारी इमेजेस इस वक्त है तो इंडेक्स जब मुझे रिसीव होगा तो मुझे बस वही इमेज एक लोड करके देनी है जो भी इमेज वहां पर है राइट तो चेक करेंगे कहीं गलती से कोई ऐसा इंडेक्स ना बोल दे जो ऐसा हो सकता है ना कोई इंडेक्स बोल दे - 2च ऐसा कोई इंडेक्स होता तो व जीरो से बड़ा होना चाहिए क्या जीरो से बड़ा होना चाहिए क्या व जीरो से बड़ा होना चाहिए हां बिल्कुल और साथ ही साथ मेरा इंडेक्स छोटा या बराबर होना चाहिए फेम्स डट मैक्स इंडेक्स से क्या मैं सही बोल रहा हूं क्या मैं सही बोल रहा हूं हा सही बोल रहा हूं ठीक है तो अब सोचते हैं जरा लोड इमेज को मैंने बोला 23 इमेज लोड करो तो 23 इमेज सही है बिल्कुल सही है ठीक है ठीक है ओके लेट्स गो अब अब मुझे क्या करना है यहां पर यहां पर सबसे पहले कुछ कहानी पढ़नी है जो कि है इमेज को बाहर निकालना ठीक है तो यहां पर मेरी जितनी इमेजेस है जितनी इमेजेस है उनमें से मैं उस इंडेक्स की इमेज को बाहर निकाल लूंगा जो इंडेक्स मुझे रिसीव हु तो लो इमेज में मुझे 23 रिव हुआ था तो मैंने इमेजेस 23 इमेज टेक्निकली व 234 इमज होगी ब ठीक है ओके यू पॉइंट इंडेक्स भेजा इंडेक्स वाली इमेज लोड होगी राइट बढ़िया ठीक है दिस इ परफेक्ट कोई परेशानी नहीं है परनी है क्या क्या कोई परेशानी है क्या कोई परेशानी है क्या कोई परेशानी है कोई परेशानी नहीं है क्या कोई परेशानी है कोई परेशानी नहीं ठीक है अब मुझे क्या करना है अब मुझे यहां पर कैनवास हमारा कैनवास को सेलेक्ट कर लो फटाफट तो कैनवास कैनवास डॉक्यूमेंट क्वेरी सिलेक्टर वी हैव कैनवास विद अस ओके कैनवास हमारे पास आ चुका है दोस्तों जाओ एक बार एक काम करो यार तुम लोग मेरे लिए छोटी सी हेल्प करोगे प्लीज प्लीज प्लीज प्लीज तुम लोग को मेरी छोटी से हेल्प करना है दैट इज हम लोग ना प्लान कर रहे हैं एक वन वीक या टू वीक का टाइप स्क्रिप्ट 100 लोगों का फ्री प्रोग्राम ठीक है तो उसमें टाइप स्क्रिप्ट से टेड चीजों को सॉल्व करेंगे और क्वेश्चन सॉल्व करेंगे टाइप स्क्रिप्ट लोगों को सिखाएंगे यह क्लोज्ड होगा मतलब 100 लोगों के लिए ही होगा मैक्स और अगर आप लोग इच्छुक हैं तो प्लीज मुझे बताना मैं आपको इस तरीके से टाइप स्क्रिप्ट के साथ काम करना सिखाना चाह चाहता हूं हर रोज मिलेंगे यू कैन आस्क मी एनी क्वेश्चन एज यू वांट राइट एक लाइव प्रोग्राम जैसा कुछ करना चाह रहे हैं एक हफ्ते या दो हफ्ते का तो आप मुझे बताना आर यू इंटरेस्टेड इन इट और नॉट और एक प्रोग्राम हम करना चाहते हैं जावास्क्रिप्ट एंड एनीमेशंस इस तरीके की चीजें और भी अलग-अलग अवार्डेड वेबसाइट्स का स्टफ राइट तो इ शुक हो ग तो प्लीज कमेंट सेक्शन में बताना अ 100 लोगों के लिए ही रखेंगे क्योंकि आई थिंक उतने ही लोग हो सकते हैं जिनको जिनकी लाइफ में मैं एक टाइम प इंपैक्ट पुट कर सकता हूं तो आप लोग मुझे ना व्हाट डू यू थिंक अबाउट इट ठीक है मजा बहुत आएगा यू नो इट आप मेरे साथ अगर हो तो यार हसी हंसी खुशी होती रहती है वहां प हंसी मजाक होता रहता है राइट तो चलो लेट्स गो तो सबसे पहली चीज जो अब हमें करनी है वो क्या है इमेज आ चुकी है हमें कैनवास प पुट करनी है ट्स इट कैनवास हम बा द मैं चेक करना चाहता हूं कैनवास आया या नहीं क्या मेरे पास कैनवास आया है हां कैनवास है मेरे पास कैनवास है मेरे पास ठीक है तो लेट्स लेट्स गो देयर बढ़िया तो हमारे पास कैनवास है ओके अब हमें सबसे पहले कैनवास की विड्थ सेट करनी है विच इज गोना बी विंडो डॉट इनर विड्थ चच इज इक्वल टू हमारी जो स्क्रीन है ठीक है कैनवास की हाइट सेट करनी है कैनवास डट हाइट विंडो ड हाइट अब मेरी बात सुनिए अब अगली चीज जो मैं लिखूंगा जैसे आपने एक पढ़ा होगा कई बार इमेज आपके कैनवस से बड़ी हो सकती है कई बार इमेज आपके कैनवस से छोटी हो सकती है तो हमें उसे इतना स् स्ल करना है कि वो हमारे पूरे कैनवास में फिट हो जाए इसको हम कहते हैं एस्पेक्ट रेशियो ठीक है तो एस्पेक्ट रेशो कैसे निकलता है आपको एक का रेशो निकालना है y का रेशो निकालना है और आपको डिसाइड करना है कि उनमें से स्पेक्ट रेशो किसका ज्यादा है ठीक है अ जिसका भी ज्यादा है हमें वो चूज करना होता है आपको अगर समझ नहीं आ रहा है तो ऐसा समझो कैनवस की विड्थ वर्सेस इमेज की विड्थ डिवाइड करेंगे कैनवस की हाइट वर्सेस इमेज की डिवाइड करेंगे तो हमें एक एक नंबर मिलेगा जीरो से वन के बीच में ठीक है अब जो नंबर हमें मिलेगा ये हमारा बेसिकली कह सकते हो कि जो भी नंबर ज्यादा होगा कि भाई विड्थ वाला नंबर डिवाइड करने पर स्पेक्ट रेश में ज्यादा आ रहा है राइट तो वो हम नंबर लेकर चलेंगे और उसके बेसिस पर स्केलिंग करेंगे इन के समझ नहीं आ रहा है तो यही लॉजिक है जो अब मैं लिखूंगा च विल एक्चुअली हेल्प यू टू गेट इमेज प्रॉपर्ली स्केल्ड ऑन योर कैनवास मतलब इमेज प्रॉपर्ली आपके कैनवास प अब ये लॉजिक है सो सबसे पहले लेट्स गो विथ स्केल एकस तो हम यहां पे कैनवस की विड्थ लेंगे कैनवास की विथ हम है विच इज बेसिकली अभी ऊपर ही सेट करी है विंडो डॉट इनर विड्थ राइट स्क्रीन की विड्थ के बराबर है डिवाइड बाय हमारी जो इमेज की विड्थ है वो ठीक है तो कैनवस की विड्थ स्क्रीन की विड्थ इमेज की विड्थ जितनी भी इमेज की विड्थ है ज्यादा या कम जो भी है तो डिवीजन करेंगे राइट अगर आप कैलकुलेटर देखना चाहते हो तो मैं कैलकुलेटर में इसको दिखाता हूं वेट फॉर एग्जांपल हमारी इमेज की हमारी कैनवास की विड्थ है 1920 मान लेते हैं और हमारी इमेज की विड्थ है 1660 तो वैल्यू आ रही है 1.15 ठीक है तो ये आपका कह सकते तो एक वैल्यू आई है जो कि इसका रेशो है ठीक है इसका रेशो है अच्छा अब चलते हैं अपन स्केल वा निकालने वैसे ही स्केल वा अरे आा यार तो कैनवास हाइट इमेज हाइट ठीक है तो ये हमारा रेशो आ गया दोनों की हाइट का ओके अब हमें उनमें से वो चूज करना है अब हमें उनमें से वो चूज करना है जो ज्यादा हो राइट तो हम यहां पे कह रहे हैं जस्ट अ सेकंड कॉमा आएगा हम यहां पे कह रहे हैं कि स्केल एक ज्यादा हो या स्केल वाइज ज्यादा हो इनमें से जो भी ज्यादा हो वो चूज करो अगर बराबर होगा तो कोई एक आ जाएगा उनमें से कोई दिक्कत नहीं हो तो ये हमारा स्केल पैरामीटर है कि हमें इमेज को कितना स्केल करना है ठीक है तो जो भी वैल्यू ज्यादा है अगर उतना स्केल कर देंगे तो उसने वो पैरामीटर तो कवर कर लिया मैं समझाता हूं हम कहते हैं विड्थ में डिफरेंस ज्यादा है मान लेते हैं हाइट में डिफरेंस कम है इसका मतलब है कि आपकी इमेज विड्थ में ज्यादा स्पेस छोड़ रही होगी और हाइट में कम छोड़ रही होगी क्या हम ये कह सकते हैं ठीक है अब सुनिए अगर मैंने उसे विड्थ बराबर स्केल कर दिया तो हाइट से तो वैसे ही स्केल हो गई होगी ना थोड़ा सा कॉमन सेंस का इस्तेमाल करना पड़ेगा ठीक है आओ देखो देखो देखो सुनो लेट इट लेट इट लोड एपिक पेन मैं ये लाइन समझाना चाहता हूं क्योंकि मेरी आत्मा नहीं मान रही है मैं इसको दूसरी स्क्रीन पर ले जाऊंगा लेट्स गो सुन तो प्लीज सुनना यह आपकी लैपटॉप है ठीक है और कैनवस की विड्थ इतनी है ये कैनवस की विड्थ है ठीक है आपको अपनी ये इमेज उसपे सेट अप करनी है क्लियर आपकी इमेज की विड्थ कम है क्लियर आपकी इमेज की हाइट कम है हम इस इमेज को स्केल करेंगे ग्रो कराएंगे स्ल स्केल करते करते यहां तक ले जाएंगे तो अब आपकी इमेज यहां से यहां तक आ रही है तो भैया अगर विड्थ में हमने इतना बड़ा स्केल कर दिया तो हाइट में तो वैसे भी इतना एरिया कवर हो ही जाएगा ना सोचो यह कागज है अगर मैंने कागज को ऐसे घसीट दिया ऐसे मैं एक सेकंड रुक रहा हं पूरा तुम्हें स्क्रीन प दिखाता हूं वेट अ बंद हो जाए यार बंद हो जा भाई हम सुनो यह कागज है इतना बड़ा ठीक है ये कागज है दिख रहा होगा आई बिलीव ठीक है अगर मैं इस कागस को खींच तो ये दोनों एरिया से बढ़ेगा विड्थ में भी बढ़ेगा हाइट में भी बढ़ेगा तो ये दोनों बढ़ता चला जा रहा है ये बढ़ता चला जा रहा है राइट ये बढ़ता चला जा रहा है तो ये विड्थ में भी बढ़ रहा है और ये हाइट में भी बढ़ रहा है तो ज्यादा अगर विड्थ में ज्यादा स्पेस अगर विड्थ में था और मैंने खींच के विड्थ कवर कर दी तो हाइट में तो कम स्पेस था वो तो वैसे ही कवर हो गई होगी इसलिए हम बोल रहे हैं कि जस्टिस सेक इसलिए हम बोल रहे हैं कि हमें क्या चाहिए हमें वो वैल्यू चाहिए जिसमें ज्यादा हो ताकि हम वो कवर कर सके राइट हम दोनों में वो वैल्यू का मल्टीप्लाई कर देंगे ट्स अबाउट इट तो ठीक है ठीक है चलो लेट्स लेट्स सॉल्व दिस टाइम थोड़ा कम है तो फटाफट इसको सॉल्व करते हैं हा तो अब हमें नई विड्थ चाहिए राइट सो कंस्ट न्यू विथ च इ च इज इक्वल टू हमारी जो इमेज की विड्थ है उसको बढ़ा देंगे गुण स्केल और वैसे हमें एक नई हाइट मिलेगी न्यू हाइट इमेज हाइट इनटू स्केल बढ़िया ठीक है अब हमें ऑफसेट सेट करना है कि इमेज हम सेंटर से ही दिखाए तो ऑफसेट एक्स तो उसके लिए हम कैनवस की विड्थ को माइनस कर देंगे न्यू विथ न्यू विड्थ से और इसका हाफ तो बेसिकली यह ये इक्वेशन आपको और अभी हम वा के लिए भी करेंगे ये आपको ऑफसेट सेट करके देगी जिससे आप ऐसे समझ लो आप इमेज प्रॉपर्ली कैनवास पर आएगी सेंटर से ऐसा समझ लो अभी ठीक है एंडस बीट ठीक है न्यू हाइट ओके तो इन दो लाइन से आपका ऑफसेट सेट होगा अब हम बस ड्र कहां से कहां तक करना है वह सब हम यहां पर लिख देंगे तो हम कहेंगे कॉन्टेक्स्ट सबसे पहले जो भी पिछला कांटेक्ट नहीं बनाया भाई कॉन्टेक्स्ट नहीं बनाया यह तो सबसे बड़ी दिक्कत है सुनो कैनवास पर काम करने के लिए आपको एक कांटेक्ट नाम की चीज चाहिए पड़ती है च बेसिकली विच मींस कि आप कैनवास पे कुछ भी ड्र करोगे तो उस कॉन्टेक्स्ट के थ्रू उसका मैजिक वंड होता है सुनो कैनवस पे कुछ भी ड्र करना है कॉन्टेक्स्ट उसे ड्र करेगा नाम ही कॉन्टेक्स्ट है ठीक है कैनवास प कुछ भी करना ड्र करना है इमेज डालनी है हटाना है जो कुछ है वहां पे ट्रैक्ट एंगल बनाना कुछ भी करना उसको कॉन्टेक्स्ट से करते हो ठीक है कैसे बनता है कॉन्टेक्स्ट तो सबसे पहले आपको यहां पे लिखना पड़ता है कैनवास गेट कांटेक्ट अब 2d और 3d क्या ड्र कर रहे हो 2d ड्र कर रहे हो ठीक है एंड दिस विल गिव अस कॉन्टेक्स्ट न टेक्स्ट नहीं कॉन्टेक्स्ट कटेक्स कटेक्स ठीक है ठीक है ओके तो अगर हम समझे ट क गया हा य सो अब मैं य कहूंगा जो भी पिछला ड्र हटा दो कॉन्टेक्स्ट डॉट क्लियर रेक्ट कहां से क्लियर करना जीरो से जीरो जीरो से मतलब टॉप लेफ्ट से वहां से क्लियर करना कहां तक कैनस की विड्थ जितनी है और कैनवस की हाइट जितनी है वहां तक तोय सब क्लियर करो ठीक है क्लियर हो जाएगा तो कॉन्टेक्स्ट जीरो जीरो से एकदम एंड तक पूरा क्लियर हो जाएगा पूरी स्क्रीन क्लियर हो गई जो आप कह सकते हो कैनवास है वो पूरा क्लियर हो गया मतलब वो हट गया जो था अच्छा अब उसमें मैं कहूंगा कि भैया आप इसमें ना एक ड्रा करो इमेज और फिर उसके बाद अपन उस इमेज की क्वालिटी बढ़ाने के लिए दो सेटिंग्स लिख देंगे देखते हैं अभी तो ड्र करो इमेज कौन सी इमेज ड्र करो इमेज ड्र करो ये वाली इमेज ये जो आईएमजी टग हैजी टग टग तो हमने निकाला था ये इमेज ड्र करो राइट हमारी इमेज ड्र करो बढ़िया ओके कहां से ड्र करो ऑफसेट x से ड्र करो इस पॉइंट से ड्र करो एक्स में ठीक है कहां तक ड्र करो ऑफसेट वा तक ड्र करो ठीक है ओके उसके अलावा आप बताना बताना होता है आपको कि किस विड्थ और किस हाइट तक तो हमने कहा न्यू विड्थ और न्यू हाइट तक ठीक है ट्स अबाउट इट बढ़िया अब इसके बीच में आप दो सेटिंग्स लिख स सते हो कांटेक्ट के लिए पहला क्या है आपको यहां पर एक सेटिंग मिलेगी च इज आई बिलीव उस सेटिंग का नाम था इमेज स्मूथ करके कुछ था स्मूथ इमेज स्मूथन क्वालिटी इमेज स्मूथ इंग क्वालिटी को अपन हाई कर सकते हैं ठीक है बढ़िया और एक सेटिंग हम और कांटेक्ट में ट्राई करेंगे च इ इमेज स्मूथिंग इनेबल्ड और इसे हम ट्रू करेंगे तो इससे क्या होगा हमारी जो इमेज है व प्रॉपर बिल्कुल क्रिस्प और प्रॉपर्ली दिखेगी ठीक है दैट्ची इमेज दिखा चुके हैं वो हमें यहां पे सेव करना पड़ेगा प्रिम्स डॉट अ इस वक्त करंट इमेज हमने कौन सी दिखा दी है जो भी इंडेक्स हमने रिसीव किया था तो बेसिकली लोड इमेज ने ये इंडेक्स रिसीव किया था वो इमेज दिख चुकी है तो अब हमें बताना पड़ेगा यहां पे कि करंट इंडेक्स जीरो नहीं है वो इंडेक्स है जो हमने शो किया है राइट तो ये हो गया लोड इमेज डन क्या ये अभी चल रहा है ये चल रहा है भाई इट्स शोइंग यू द फर्स्ट इमेज इट इज शोइंग यू द फर्स्ट इमेज इट इज शोइंग यू द फर्स्ट इमेज बेसिकली इट्स नॉट शोइंग य द फर्स्ट इमेज इट शोइंग यू द फर्स्ट इंडेक्स वाली इमेज च इज सेकंड इमेज तो आई कैन गो विथ दिस लोड इमेज में फ्रेम्स डट करंट इंडेक्स फम्स डट करेंट इंडेक्स च इज क्या व वैल्यू क्या है जीरो है ओके ट वक कोई दिक्क नहीं फिर तो सही है फिर इट्स गुड फिर इट्स गुड दिस इज इनसेन बहुत बढ़िया अब हम चाहते जब हम स्क्रॉल करें जो कि इस वक्त मैं कर रहा हूं घंटा कुछ नहीं हो रहा है तो हम चाहते हैं हम स्क्रॉल करें और एनिमेशन हो जाए हाउ वी गो अबाउट इट लेट्स गो तो हम लोग यहां पर कहेंगे प्यार से एक फंक्शन स्टार्ट एनिमेशन एनिमेट ऑन ए मेटन वेरी नाइस ठीक है तो स्टार्ट एनिमेशन का रूल क्या है एक टाइमलाइन क्रिएट करना तो टीएल बाय द वे मैं सच बता हं टाइमलाइन की जरूरत है सच पड़ेगी नहीं बट मैं चाहता हूं कि टाइमलाइन आप बनाओ और क्यों बनाओ वो मैं अभी थोड़ी देर बाद बताऊंगा तो टाइमलाइन बनाई और उसको स्क्रॉल ट्रिगर दे दो स्क्रॉल ट्रिगर ओ हो जा भाई ठीक है इसको स्क्रॉल ट्रिगर दो आप बोलो इसका ट्रिगर जो है रुख इसका ट्रिगर कौन है इसका ट्रिगर है जब हमारा ये एलिमेंट पहुंचेगा तो वी कैन से वी कैन से कैन कनव कव पता नहीं फालतू नाम दे दिया आप कुछ भी नाम दे सकते हो कोई फर्क नहीं पड़ता तो मैंने इसको नाम दे दिया सी ए ठीक है जब ये पहुंचेगा स्टार्ट इसका टॉप उसके टॉप पे पहुंचे ठीक है ट्स इट कुछ खास नहीं हो रहा यहां पे एंड स्क्रब दिया हुआ है ओबवियसली टू का स्क्रब है टू का स्क्रब टू का स्क्रब टू का स्क्रब ठीक है दिस विल वर्क आप चेंज कर सकते हो टू स्क्रब फ्यूचर में मार्कर्स को ट्रू कर रखा है डू वी नीड समथिंग एल्स कम ऑन डू वी नीड समथिंग एल्स एंड हमें देने की जरूरत नहीं क्योंकि एंड बसे बॉटम बॉटम होता है सो आई डोंट थिंक वी नीड टू गिव इट थ ठीक है दिस विल वर्क लेट्स गो तो हमारे पास एक टाइमलाइन है डट डट अब हम पहला एनिमेशन लिख रहे हैं ठीक है मैं क्यों चाहता था टाइमलाइन और बाय द वे सिर्फ पहले वर से ही हमारा काम हो जाएगा मैं क्यों चाहता था फिर भी क्योंकि आई वांटेड के अब आप ऐसा तो होगा नहीं सिर्फ सिर्फ एनिमेशन करोगे आप बीच में एनिमेशन को रोकना भी चाहोगे कुछ और करना चाहोगे अगर वैसा कुछ है तो आपके पास टाइम लाइन है तो आप इसमें छेड़छाड़ कर सकते हो ठीक है तो ट्स व्हाट वी आर डूइंग तो यहां पर हम किसे एनिमेट करने वाले बस इसे क गया ल् फ्रेम्स के करंट इंडेक्स को आर ू डट कर कर को करने वाले क्या करंट इंडेक्स को करने वाले हा बिल्कुल तो फम्स के करंट इंडेक्स को मैं कहता हूं बना देना ल्स ल् फ्रेम्स डॉट मैक्स इंडेक्स मैं समझाऊ मैं समझाऊ मैं समझाऊ अभी रुको दो मिनट रुको और हर बार जब ये अपडेट होगा ऑन अपडेट हर बार जब ये अपडेट हो मतलब हर बार जब यह एक स्टेप आगे बढ़े तो क्या करना है लोड कर देना इमेज को ट्स इट तो लोड इमेज और वो इंडेक्स में पास कर दूंगा मैथ डॉट फ्लोर क्योंकि ये क्योंकि जब जी साप इसे इंक्रीज करेगा ना तो ऐसा हो सकता है कि डेसीमल में वैल्यू को लेके चला जाए व 1.5 कर सकता है और इंडेक्स 1.5 नहीं होता इंडेक्स वन और टू होता है राइट तो फ्लोर करके दे रहे है से और हम कह रहे हैं कि आप क्या वैल्यू दोगे वेल्स डॉट करंट इंडेक्स जो भी है आई एम वेरी शर दिस वुड वर्क जय माता दी नहीं हो रहा है वाई अरे मैंने फंक्शन नहीं चलाया यार लेट्स गो प्रीलोड इमेजेस है हमने लोड की थी इमेज इसके तुरंत बाद स्टार्ट एनिमेशन भी चला दो अगर ये नहीं चला तो मैं तुम सबको पार्टी दूंगा नहीं [संगीत] चलाक कहीं प मैंने वेल्स लिख दिया अे बल्स क्यों लिख रहा हूं [संगीत] यार वाओ पूरा ही चल गया भाई यह क्या हुआ एक्चुअली मैं समझ गया हूं क्या प्रॉब्लम आ रही है द प्रॉब्लम इज रिलेटेड टू मुझे सीफ को नहीं देना है मुझे स्टिकी वाले को थोड़ी देना है मुझे तो पैरेंट को वैल्यू देनी है ना यार जब तक पैरेंट पूरा स्क्रॉल नहीं हो रहा है वो मुझे चेंज करना है वेर इज दैट कहां है वो सीन दे रखा ना कहीं प मैंने आई वांट द पैरेंट गाय यस दिस इज व्ट आई वांट दिस शुड वर्क नाउ यस यस इट इज वर्किंग ठीक है मैंने स्क्रोलिंग रोक दी ये रुक गया एक नंबर बहुत ही शानदार हो रहा है ये तो एक नंबर बहुत ही बढ़िया इंटरेस्टिंग आप देखते रहो बगल में स्क्रॉलर चल रहा है वेरी नाइस ठीक है मैं एक बार माउस से भी स्क्रॉल करता हूं माउस से नहीं ये अपने ट्रैक पैड से आप ट्रैक पैड प देख सकते हो ट्रैक पैड प काफी स्मूथ है काफी काफी स्मूथ है राइट इंटरेस्टिंग और ये जो आप देख रहे हो ना ये ओवर स्क्रोलिंग ये मैक में एक कह सकते हो फीचर है तो ऐसा मत ऐसा आपके लैपटॉप प होगा अगर आप विंडोज में हो तो ठीक है दिस वर्किंग जस्ट परफेक्ट एज इट शुड बी बहुत बढ़िया ठीक है अब ये इफेक्ट मैंने आपको सिखाया इससे हम क्या कुछ क्रिएट कर सकते हैं अगर आप वह सीखना चाहते हो तो डू लेट मी नो हम लोग इससे पूरा एक वेब प क्रिएट कर सकते हैं वेबसाइट क्रिएट कर सकते हैं और एक बेहतरीन एक नंबर एक्सपीरियंस बिल्ड कर सकते हैं राइट तो बाय द वे अगर आपको ये मार्कर्स खराब लग रहे यू कैन एक्चुअली रिमूव देम यू कैन रिम मार्क बिकॉज नोबडी लाइक्स देम बढ़िया ठीक है दिस लुकिंग वेरी गुड ल राइट ठीक है तो अब आपको एक काम करना है मेरा जल्दी से फटाफट वो यह है कि अगर आप उस वाले सेशन में इंटरेस्टेड है जो मैंने आपको बताया था हफ्ते भर जो पढ़ाई होगी उसम अगर आप इंटरेस्टेड हो तो जाओ कमेंट सेक्शन को भर दो प्लीज इतना कर प्लीज ठीक है नाइस और एक चीज और एक चीज और एक चीज और ट है टू डू विथ शेरिस का एक प हमने क्रिएट किया है वहां पे काफी सारा अच्छा-अच्छा कंटेंट क्विज और दुनिया भर की चीजें हमने वहां पे पुट करी हैं तीन साढे ती चार महीनों से हम लोग उे क्रिएट कर रहे थे क्रिएट हो चुका है उसका एक्सपीरियंस बहुत तगड़ा है उसका यूआई फ्रंट एंड और बहुत मजेदार है वो ऐप लच होने वाला है आप लोग के लिए उसमें काफी कुछ फ्री सब कुछ फ्री है अभी तो तो यू कैन कम देयर एज वेल एक्साइटेड रहिए क्योंकि हमने आपसे बोला था कि शेरिस इज नॉट जस्ट अनदर चैनल जहां पे हम चीजों को बस पुट करना चाहते हैं एंड फॉर्चूनेटली इनफ मुझे लगता है कि अब मैं भी मेरे फेज और मेरे वही आप कह सकते हैं सेटअप में वापस आ पा रहा हूं जैसे मैं पढ़ाया करता था तो मजा आएगा और बहुत मजा आएगा चलो ठीक है instagram's मीट देयर