👴🏿 🤡 🐐 شهر مع Animate CC ⛷️ 👩🏾‍💻 🐺

وصف لتجربتي في الانتقال من Flash إلى Animate CC وإنشاء لافتات بتنسيق HTML5 القاهر. الكثير من الصور تحت القطع

القليل من الرحلات والمصطلحات التاريخية

أنا شخصياً على دراية بـ Flash لأكثر من 10 سنوات ولدي فكرة صغيرة عن كيفية عمل هذه التقنية "من الداخل".

منذ نفس عدد السنوات تقريبًا ، قمت بإنشاء مواقع ويب ، بما في ذلك بلغة HTML5 "الحديثة" ، والتي ، كما يقولون ، يمكنها القيام بكل شيء. لا ، في الواقع ، أرسل المصممون العنيدون أحيانًا مثل هذه الواجهات التي لم تكن موجودة في الطبيعة ، وكان لابد من اختراعها ، مختبئين خلف عبارة "يمكنك كتابة كل شيء في HTML5!"

لا أتظاهر بالقيمة الفنية الخاصة لإبداعاتي ، لكن عدد اللافتات التي رسمتها تجاوزت ألفًا ، وما زلت أرسمها كل يوم تقريبًا.

على مدى السنوات الخمس الماضية ، لم يركض الفلاش البطيء فقط ، ولم يفهم المشكلة حقًا. أنا شخصياً لم أر قط أي مكابح أو ثقوب ، وحتى عن أول بيان من ستيف جوبز بأن "الفلاش لم يتم شحذه بالإصبع" - هذا أمر سخيف للغاية. السبب الأكثر وضوحًا لمعارضة Apple للفلاش على أجهزة iPhone يكمن على السطح ، ولكن هذا ليس حول ذلك الآن.

نحن نقترب من خاتمة المصطلحات. HTML هي لغة ترميز للنص وتخطيط العناصر على الصفحة. لا يعرف كيف يقوم بأي عمل بمفرده. بدلاً من الفلاش ، تعني عادةً "ابتكارات HTML5": تشغيل مقاطع الفيديو بدون فلاش ، والرسوم المتحركة بدون فلاش ، والملفات متعددة التحميل بدون فلاش ، وبعض الأشياء الأخرى.

على الرغم من الإشادة بالصوت في كل مكان ، لم يظهر حتى الآن أي محرر رسوم متحركة عاقل على HTML5 "كلي القدرة" ، بينما لم تقم Adobe بتحويل Flash CC إلى Animate CC ، مضيفًا ، في الواقع ، تصدير فقط إلى HTML5.

واجهة

لا تختلف واجهة Animate CC نفسها عن Flash ، على عكس Edge Animate ، التي كانت غير عادية إلى حد كبير. ليس هناك الكثير ليقوله ، ولم ألاحظ الفرق مع CS6 ، الذي استخدمته لفترة طويلة. بالنسبة للافتات ، ليست هناك حاجة إلى AS3 ، وكانت هذه أحدث نسخة تدعم AS2. كان محول Swiffy الذي صنعته Google صديقًا لـ AS2 فقط.

* AS2،3 هي لغة برمجة Action Script المضمنة في Flash والتي تسمح لك بعمل المكون غير المتحرك للفيلم بالكامل - بحيث يتم الضغط على الأزرار ، ويتوقف الفيلم مؤقتًا في الإطارات الصحيحة ، بحيث يمكن قراءة المعلومات ، ويمكن تشغيل النصوص التفاعلية للتفاعل مع الفيلم. في الواقع ، هذه لغة قوية إلى حد ما ، وأنا أستخدم 0.000001٪ فقط من وظائفها.

محرك التقديم

بطبيعة الحال ، لا يمكن للأشياء نفسها أن تتحرك داخل الأسطوانة ، لذلك من الضروري أن يتحرك بعض المحرك ويظهرها ويخفيها. يستخدم Animate CC برنامج CreateJS لمشاريع HTML5 Canvas ، والتي ترحب بكل مشروع جديد بتحذير رائع. من الجيد أن يتم تحذيرك. على ما يبدو ، هذه مهمة غير واقعية - لنقل واحدة تلو الأخرى من الإطار الذي تريد الذهاب إليه.

:
EaselJS 0, 1. , gotoAndStop gotoAndPlay.

الجدول الزمني ومساحة العمل

لأن لم تخضع الواجهة لأي تغييرات بالنسبة لي كل شيء هنا قياسي تمامًا. لا يوجد فرق. منذ تكوين النظام باللغة الروسية ، تم تنزيل النسخة الروسية من الحزمة. هذا لا يزعجني كثيرًا ، لأنني أستخدم مفاتيح الاختصار ، على الرغم من أنني أعلق أحيانًا على ما أحتاج إليه للاختيار من القائمة.

الآن دعنا ننتقل إلى ما أستخدمه باستمرار:

مرشحات قياسية في الفلاش

تعتبر الفلاتر أحد المكونات المتكررة جدًا لأي لافتات ، فهي تتيح لك تحقيق النتيجة المرجوة بسرعة. سأدرس 3 فلاتر كنت أستخدمها كثيرًا. في الفلاش ، تعد الفلاتر جزءًا من المعيار ، وفي عملي لم يكن لها أي تأثير على الأداء ، ولم يكن بإمكانهم ، من حيث المبدأ. فيما يلي سأستخدم التصدير إلى GIF لفهم الاختلاف

الظل

الظل هو أحد أسهل الخيارات لجعل أجزاء من البانر أكبر والتركيز على الكتل الصحيحة. بطبيعة الحال ، أخذت ظلًا شديد القوة لتوضيح الاختلاف ،
قارن:

فلاش	Createjs

نعم ، الرسوم المتحركة الظل غير ممكنة. علاوة على ذلك ، إذا كان الفيديو أطول مما قدمته للاختبار ، فإن الظل يتحول إلى شيء غير معروف.
من الجدير بالذكر أيضًا أنه في المحرر و html5 النهائي ، تبدو الظلال (وفي الواقع جميع التأثيرات) مختلفة تمامًا.

المحرر	النتيجة

عند التصدير في التتبع ، يمكنك رؤية النقش التالي:
, , . (4)
حسنًا ، شكرًا على الأقل على التحذير ...

أداء اللافتة مع الظلال يترك الكثير مما هو مرغوب فيه ، لكنهم حذروا. عند مسح الظلال من هذه الركائز ، خفضت الحمل إلى 40 ٪. رسم فلاش كل هذا مع 23 ٪ من الحمل مع الظلال ، بالطبع

توهج

تتمثل إحدى أسهل الطرق لإبراز النص على خلفية متنقلة في إضافة ضربة إلى ذلك ، ويتم ذلك ببساطة باستخدام توهج بنسبة عالية من الكثافة.

فلاش	Createjs

في الوقت نفسه ، لا يزال المحرر كما هو ، "مستوى الرؤية صفر ، أنا أمشي على الأجهزة":

هناك حل واحد محتمل لهذه المشكلة ، إذا لزم الأمر ، سأشاركه ، يتم استخدام ركائز الأحرف كثيرًا ولا يمكن العيش بدونها.

بالإضافة إلى ذلك ، فإن التوهج ليس مجرد خط من الحروف ، ولكن النتيجة تشير إلى أنه لن يكون

فلاش	Createjs	في المحرر

طمس

لا تعليق. Blur متاح فقط للكائنات الثابتة ، لذلك من المستحيل استخدام هذا المرشح لمظهر النصوص.

فلاش	Createjs

كيف يمكن أن توجد مواطن الخلل المذكورة أعلاه مع الانتشار الواسع لنفس مرشحات ومرشحات SVG في CSS - لا أستطيع أن أتخيل.

مشاكل التصدير والتعبئة

اعتاد الجميع على حقيقة أن المقطع الموجود في الفلاش هو ملف قائم بذاته. يولد تصدير HTML5 مجموعة من الملفات بدلاً من واحدة. قام مشروع Swiffy ، الذي صاغته Google لتحويل SWF إلى HTML ، بتعبئة كل شيء داخل ملف HTML واحد. على ما يبدو ، كانت هذه المهمة عبئًا ثقيلًا على منشئي Animate CC. يمكنك قراءة مقالة مفصلة حول حشو "كل شيء" داخل ملف واحد لـ Doubleclick هنا . لقد صنعت المحول الخاص بي على الفور ، مما منع بناء زوج من الوظائف في php ، ولكنه بعيد عن كونه مثاليًا ، حتى مسودة. يحل مهماتي - ولا بأس.

لافتات من المطاط

بشكل افتراضي ، يبدو أن Animate يدعم "مرونة" اللافتات ، ولكن عادةً ما تعني اللافتات المطاطية تلك التي تمتد أفقيًا ، وليس بشكل متناسب على كلا المحورين. في قالب التصدير ، يُسمى هذا التحجيم المتجاوب ، وفي حالة تمدد اللافتات على طول المحور X فقط ، أدى ذلك إلى حدوث خلل مضحك حتى أقطعها من القالب

بشكل عام ، يمكنك التخلي تمامًا عن فكرة تمديد البانر ، فقط أخذ الحد الأقصى لحجم مكان البانر ، وتحديد عرض المقطع يساوي الحد الأدنى لحجم مكان البانر وجزء القطع باستخدام تجاوز السعة: مخفي ، ثم توسيط عنصر CANVAS (يشير إلى أن عرضه يساوي الحد الأقصى لحجم البانر) من خلال الخط الأفقي داخل الرابط ، الذي يشغل 100٪ من العرض ، هو أبسط قليلاً هنا مما كان عليه في FLASH ولا يتطلب أي نصوص إضافية داخل الفيديو ، فقط css.

المجموع

يمكنك العيش ، يمكنك استخدام ، لا يمكنك تحمل الفرامل. تم تقديم تقييد لموكلي الرئيسي من خلال التعاقد من الباطن - لا يزيد عن 5 مشاهد لكل بانر ، وإلا يبدأ كل شيء في التباطؤ بشكل كبير على موقع إخباري كبير مع مجموعة من نقاط البانر. تم رسم الفلاش بسرعة وبسرعة بالغة بواسطة بطاقة فيديو من أي نوع ، وقد تم عمل الكأس المقدسة على شكل اختصارات سحرية HTML5 و CSS3 من الورق المعجن من حيث الرسوم المتحركة والعناصر التفاعلية. بما في ذلك ، على الأجهزة المحمولة التي من المفترض أن يتم دفن فلاش لها ، يثير أداء مقاطع الفيديو هذه شكوكًا خطيرة. لن يتمزق معيار واحد حتى يتم دفن الفلاش أخيرًا.

شهر مع Animate CC