❇️ ⚰️ 🥐 चेतन सीसी के साथ एक महीने 👨🏻‍✈️ 👩🏽‍🔬 ⛹️

मेरे अनुभव का विवरण फ्लैश से चेतन सीसी में जाने और सर्वशक्तिमान एचटीएमएल 5 प्रारूप में बैनर बनाने के लिए। कट के नीचे बहुत सारी तस्वीरें

थोड़ा ऐतिहासिक भ्रमण और पद

व्यक्तिगत रूप से, मैं स्वयं 10 से अधिक वर्षों से फ्लैश से परिचित हूं और इस तकनीक के "अंदर से" कैसे काम करता है, इसका थोड़ा विचार है।

लगभग उसी वर्ष के लिए मैं वेबसाइटें बना रहा हूं, जिसमें "आधुनिक" एचटीएमएल 5 भाषा भी शामिल है, जो कि जैसा कि वे कहते हैं, सब कुछ कर सकती है। नहीं, वास्तव में, कभी-कभी जिद्दी डिजाइनरों ने ऐसे इंटरफेस भेजे जो प्रकृति में मौजूद नहीं थे, उन्हें आविष्कार किया जाना था, वाक्यांश के पीछे छिपाते हुए "आप एचटीएमएल 5 में सब कुछ लिख सकते हैं!"

मैं अपनी रचनाओं के विशेष कलात्मक मूल्य का ढोंग नहीं करता, लेकिन मेरे द्वारा खींचे गए बैनरों की संख्या एक हजार से अधिक हो गई है, और मैं उन्हें लगभग हर दिन खींचता रहता हूं।

पिछले 5 वर्षों में, फ्लैश ने केवल आलसी को लात नहीं मारी है, और वास्तव में इस मुद्दे को नहीं समझा है। व्यक्तिगत रूप से, मैंने कभी भी कोई ब्रेक या छेद नहीं देखा है, और यहां तक कि स्टीव जॉब्स के पहले बयान के बारे में भी कि "फ्लैश उंगली से तेज नहीं होता है" - यह पूरी तरह से हास्यास्पद है। सबसे स्पष्ट कारण Apple iPhones पर फ्लैश का विरोध करता है जो सतह पर है, लेकिन यह अब उसके बारे में नहीं है।

हम शब्दावली के निरूपण के करीब पहुंच रहे हैं। HTML पाठ के लिए एक मार्कअप भाषा है और एक पृष्ठ पर तत्वों का लेआउट है। वह नहीं जानता कि किसी भी कार्य को अपने दम पर कैसे करना है। फ्लैश के बजाय, वे आमतौर पर "एचटीएमएल 5 नवाचार" का अर्थ है: फ्लैश के बिना वीडियो खेलना, फ्लैश के बिना एनिमेशन, फ्लैश के बिना बहु-लोडिंग फ़ाइलें, और कुछ अन्य चीजें।

हर जगह बजने वाली प्रशंसा के बावजूद, अब तक कोई भी संत एनीमेशन संपादक "सर्वव्यापी" एचटीएमएल 5 पर दिखाई नहीं दिया है, जबकि एडोब ने फ्लैश सीसी को चेतन सीसी में परिवर्तित नहीं किया है, वास्तव में, एचटीएमएल 5 को निर्यात करता है।

इंटरफ़ेस

ऐनिम चेतन के विपरीत, चेतन सीसी इंटरफ़ेस स्वयं फ्लैश से अलग नहीं है, जो बेतहाशा असामान्य था। कहने के लिए ज्यादा कुछ नहीं है, और मुझे CS6 के साथ अंतर पर ध्यान नहीं दिया गया, जिसका मैंने लंबे समय तक इस्तेमाल किया। बैनर के लिए, एएस 3 की आवश्यकता नहीं है, और यह एएस 2 का समर्थन करने वाला नवीनतम संस्करण था। Google ने जो Swiffy कनवर्टर बनाया, वह केवल AS2 के साथ था।

* AS2,3 फ्लैश में निर्मित एक्शन स्क्रिप्ट प्रोग्रामिंग भाषा है जो आपको वीडियो क्लिप के पूरे गैर-एनीमेशन घटक को बनाने की अनुमति देती है - ताकि बटन दबाए जाएं, वीडियो सही फ्रेम पर रुकता है, ताकि जानकारी पढ़ी जा सके, और वीडियो के साथ बातचीत के लिए इंटरैक्टिव स्क्रिप्ट लॉन्च की जा सके। वास्तव में, यह एक काफी शक्तिशाली भाषा है, और मैं इसकी कार्यक्षमता का केवल 0.000001% उपयोग करता हूं।

रेंडरिंग इंजन

स्वाभाविक रूप से, ऑब्जेक्ट स्वयं रोलर के अंदर नहीं जा सकते हैं, इसके लिए यह आवश्यक है कि कुछ इंजन को हिलना, दिखाना और छिपाना चाहिए। चेतन सीसी HTML5 कैनवस-शैली की परियोजनाओं के लिए CreateJS का उपयोग करता है, जो हर नई परियोजना का एक अद्भुत चेतावनी के साथ स्वागत करता है । जाहिरा तौर पर, यह एक अवास्तविक कार्य है - जिस फ्रेम में आप जाना चाहते हैं, उससे एक-एक करके लेना।

:
EaselJS 0, 1. , gotoAndStop gotoAndPlay.

समयरेखा और कार्यक्षेत्र

क्योंकि इंटरफ़ेस मेरे लिए किसी भी बदलाव से नहीं गुजरा है यहाँ सब कुछ बिल्कुल मानक है। कोई फर्क नहीं है। चूंकि सिस्टम रूसी में कॉन्फ़िगर किया गया है, पैकेज का रूसी संस्करण डाउनलोड किया गया था। यह मुझे बहुत परेशान नहीं करता है, क्योंकि मैं हॉटकीज़ का उपयोग करता हूं, हालांकि कभी-कभी मैं उस मेनू पर लटका देता हूं जिसे मुझे मेनू से चुनने की आवश्यकता है।

अब जो मैं लगातार उपयोग करता हूं, उस पर चलते हैं:

फ्लैश में मानक फिल्टर

फिल्टर किसी भी बैनर के बहुत लगातार घटकों में से एक हैं, वे आपको वांछित परिणाम प्राप्त करने की अनुमति देते हैं। मैं 3 फिल्टर पर विचार करूंगा जिनका उपयोग मैं अक्सर करता था। फ्लैश में, फिल्टर मानक का हिस्सा हैं, और मेरे काम में उनके प्रदर्शन पर कोई प्रभाव नहीं पड़ा है, और वे सिद्धांत रूप में नहीं कर सकते हैं। इसके बाद मैं अंतर को समझने के लिए GIF पर निर्यात का उपयोग करूंगा

छाया

छाया बैनर के हिस्सों को बड़ा बनाने और सही ब्लॉकों पर ध्यान केंद्रित करने के लिए सबसे आसान विकल्पों में से एक है। स्वाभाविक रूप से, मैं अंतर दर्शाने के लिए एक जरूरत से ज्यादा मजबूत छाया ले लिया
तुलना में:

फ़्लैश	CreateJS

हां, शैडो एनिमेशन संभव नहीं है। इसके अलावा, अगर वीडियो परीक्षण के लिए मेरे द्वारा प्रस्तुत किए जाने से अधिक लंबा है, तो छाया एक अज्ञात चीज में बदल जाती है।
यहां यह भी ध्यान देने योग्य है कि संपादक और तैयार html5 में, छाया (और वास्तव में सभी प्रभाव) बहुत अलग दिखते हैं।

संपादक	परिणाम

ट्रेस में निर्यात करते समय, आप निम्न शिलालेख देख सकते हैं:
, , . (4)
ठीक है, कम से कम चेतावनी के लिए धन्यवाद ...

छाया के साथ बैनर का प्रदर्शन वांछित होने के लिए बहुत कुछ छोड़ देता है, लेकिन उन्होंने चेतावनी दी। इन सबस्ट्रेट्स से छाया को मिटाते हुए, मैंने लोड को 40% तक कम कर दिया। फ्लैश ने छाया के साथ लोड के 23% के साथ यह सब चित्रित किया, ज़ाहिर है

चमक

एक मोटी पृष्ठभूमि पर पाठ को उजागर करने के सबसे आसान तरीकों में से एक यह है कि इसमें एक स्ट्रोक जोड़ा जाता है, यह बस उच्च तीव्रता के साथ चमक का उपयोग करके किया जाता है।

फ़्लैश	CreateJS

उसी समय, संपादक अभी भी वही है, "दृश्यता शून्य है, मैं उपकरणों पर चल रहा हूं":

इस समस्या का एक संभव समाधान है, यदि आवश्यक हो, तो मैं इसे साझा करूंगा, पत्र सबस्ट्रेट्स का उपयोग अक्सर किया जाता है और आप बस उनके बिना नहीं रह सकते।

इसके अलावा, चमक न केवल पत्रों का एक स्ट्रोक है, लेकिन परिणाम संकेत देता है कि यह नहीं होगा

फ़्लैश	CreateJS	संपादक में

गिरावट

कोई टिप्पणी नहीं। धुंधला केवल स्थैतिक वस्तुओं के लिए उपलब्ध है, इसलिए ग्रंथों की उपस्थिति के लिए इस फिल्टर का उपयोग करना असंभव है।

फ़्लैश	CreateJS

सीएसएस में एक ही एसवीजी फिल्टर और फिल्टर की व्यापक पैठ के साथ उपरोक्त ग्लिच कैसे मौजूद हो सकते हैं - मैं कल्पना नहीं कर सकता।

निर्यात और पैकेजिंग की समस्याएं

सभी को इस तथ्य के लिए उपयोग किया जाता है कि फ्लैश में क्लिप एक स्व-निहित फ़ाइल है। HTML5 निर्यात एक के बजाय फ़ाइलों का एक समूह बनाता है। स्विफ्ट परियोजना, Google द्वारा SWF को HTML में बदलने के लिए गढ़ी गई, सब कुछ एक HTML फ़ाइल के अंदर पैक किया। जाहिर है, यह कार्य चेतन सीसी के रचनाकारों के लिए एक भारी बोझ था। आप यहां डबलक्लिक के लिए एक फ़ाइल के अंदर "सब कुछ" भरने के बारे में एक विस्तृत लेख पढ़ सकते हैं । मैंने फ्लाई पर अपना कन्वर्टर बनाया, php में फंक्शन्स की एक जोड़ी के निर्माण को अवरुद्ध किया, लेकिन यह आदर्श होने से दूर है, यहां तक कि एक ड्राफ्ट भी। मेरे कार्यों को हल करता है - और ठीक है।

रबर के बैनर

डिफ़ॉल्ट रूप से, चेतन बैनर के "रबरनेस" का समर्थन करता है, लेकिन आमतौर पर रबर बैनर का मतलब है कि क्षैतिज रूप से खिंचाव, और दोनों अक्षों के साथ आनुपातिक रूप से नहीं। इसे निर्यात टेम्प्लेट में उत्तरदायी स्केलिंग कहा जाता है, और केवल एक्स अक्ष के साथ स्ट्रेचिंग वाले बैनरों के मामले में, इससे मज़ेदार ग्लिच बनते हैं जब तक कि मैं इसे टेम्पलेट से बाहर नहीं काट देता।

सामान्य तौर पर, आप बैनर को खींचने के विचार को पूरी तरह से त्याग सकते हैं, बस बैनर स्थान का अधिकतम आकार ले सकते हैं, और बैनर की जगह के न्यूनतम आकार के बराबर क्लिप की चौड़ाई निर्दिष्ट करें और अतिप्रवाह का उपयोग करके फसल के हिस्से को छिपाएं: फिर CANVAS तत्व को केंद्रित करें (बैनर स्थान के अधिकतम आकार के बराबर इसकी चौड़ाई का संकेत देकर) लिंक के अंदर क्षैतिज रेखा, जो 100% चौड़ाई पर कब्जा कर लेती है, यहां तक कि यहां थोड़ी सी भी सरलता है क्योंकि यह FLASH में था और वीडियो के अंदर किसी अतिरिक्त स्क्रिप्ट की आवश्यकता नहीं है, केवल सीएसएस।

कुल मिलाकर

आप जीवित रह सकते हैं, आप उपयोग कर सकते हैं, आप ब्रेक को सहन नहीं कर सकते। मेरे मुख्य ग्राहक के लिए उपमहाद्वीप में प्रतिबंध लागू किया गया था - प्रति बैनर 5 से अधिक दृश्य नहीं, अन्यथा बैनर स्पॉट के एक समूह के साथ एक बड़ी खबर साइट पर सब कुछ बेतहाशा धीमा होने लगता है। फ्लैश को बहुत लंबे समय के लिए और किसी भी प्रकार के वीडियो कार्ड द्वारा बहुत जल्दी से खींचा गया है, और जादुई संक्षिप्तीकरण एचटीएमएल 5 और सीएसएस 3 के रूप में पवित्र कंघी अब तक एनीमेशन और इंटरैक्टिव तत्वों के मामले में पपीयर-मैचे से बना है। मोबाइल उपकरणों पर, जिसमें फ्लैश को माना जाता है, दफन किया जा रहा है, ऐसे वीडियो का प्रदर्शन गंभीर संदेह पैदा करता है। एक भी मानक नहीं फाड़ा जाएगा जब तक कि फ्लैश अंत में दफन न हो जाए।

चेतन सीसी के साथ एक महीने