في الآونة الأخيرة، أصبحت أنواع مختلفة من الرسوم المتحركة لرسومات SVG (Scalable Vector Graphics) على مواقع الويب والتطبيقات شائعة جدًا. هذا يرجع إلى حقيقة أن كل شيء أحدث المتصفحاتتدعم بالفعل هذا التنسيق. فيما يلي معلومات حول دعم المتصفح لـ SVG.
يناقش هذا المقال أبسط مثالتحريك ناقلات SVG باستخدام سهل البرنامج المساعد مسجرسام الخط الكسول.
مصدرلإكمال هذه المهمة وفهمها بالكامل، من المستحسن أن تكون لديك معرفة أساسية بـ HTML وCSS وJquery، ولكنها غير مطلوبة إذا كنت تريد فقط تحريك SVG) فلنبدأ!
وهذه هي الخطوات التي يتعين علينا اتباعها:
1. قم بإنشاء بنية الملف الصحيحة
ستساعدنا خدمة التهيئة في هذا الأمر، حيث نحتاج إلى تحديد المعلمات كما في الصورة أدناه.
- الكلاسيكية H5BP (لوحة المرجل HTML5)
- لا يوجد قالب
- فقط HTML5 شيف
- مصغر
- دروس آي إي
- إطار كروم
- ثم انقر فوق تنزيله!
2. قم بتنزيل البرنامج المساعد وتوصيله
نظرًا لأن التهيئة الأولية تأتي مع أحدث مكتبة Jquery، من الأرشيف الذي نحتاج إلى تنزيله من مستودع مشروع Lazy Line Painter، نحتاج فقط إلى نقل ملفين إلى مشروعنا. الأول هو "jquery.lazylinepainter-1.1.min.js" (قد يختلف إصدار البرنامج المساعد) وهو موجود في جذر المجلد الناتج. والثاني هو example/js/vendor/raphael-min.js.
نضع هذين الملفين في مجلد js. ونقوم بربطها بـ Index.html قبل main.js كما يلي:
3. ارسم صورة مخططة رائعة في Adobe Illustrator
على سبيل المثال، يمكنك استخدام الرموز الموجودة في المرفق.
4. قم بتحويل صورتنا إلى Lazy Line Converter
فقط اسحب الرمز الخاص بك إلى النافذة في الصورة أدناه.
يمكن تغيير سمك ولون المخطط التفصيلي وسرعة الرسوم المتحركة في الكود نفسه، والذي سيظهر بعد التحويل!
5. الصق الكود الناتج في main.js
الآن نقوم ببساطة بلصق الكود الناتج في ملف main.js فارغ
حدود:
عرض السكتة الدماغية - سمك المخطط التفصيلي
لون السكتة الدماغية - لون المخطط التفصيلي
يمكنك أيضًا تغيير سرعة رسم كل متجه عن طريق تغيير قيم معلمة المدة (الافتراضي 600)
6. أضف بعض CSS حسب الرغبة
إزالة فقرة من ملف Index.html
مرحبا بالعالم! هذا هو HTML5 المعياري.
وبدلاً من ذلك نقوم بإدخال كتلة ستحدث فيها الرسوم المتحركة الخاصة بنا
ثم قم بإضافة بعض CSS إلى ملف main.css لجعله يبدو أجمل:
Body (الخلفية:#F3B71C;) #icons (الموضع: ثابت؛ الأعلى: 50%؛ اليسار: 50%؛ الهامش: -300px 0 0 -400px;)
حفظ كافة الملفات.
الآن فقط افتح ملف Index.html في متصفح حديث واستمتع بالتأثير.
ملاحظة: عند التشغيل على جهاز محلي، قد يتأخر بدء الرسوم المتحركة لعدة ثوانٍ.
أهلاً بكم! اليوم سأحاول وصف الاحتمالات برامج أدوبي Illustrator، ومقارنتها بقدرات Flash. ولن يكون هذا تحليلًا عالميًا للبرنامج، بل وصفًا للبعض حيل مثيرة للاهتمامالذي اكتشفته في هذا البرنامج. قمت بجمع المعلومات قطعة قطعة وأنا أدرسها لكي أنشر كل شيء في مشاركة واحدة. سأعترف على الفور بأنني لست من مستخدمي برنامج Illustrator ذوي الخبرة العالية، فقد كنت أستخدمه فقط للرسم خلال الأشهر الستة الماضية (قبل ذلك كنت أرسم كل شيء باستخدام برنامج Flash). يشتكي الكثير من الناس من أن الرسام معقد وليس دائمًا بديهيًا. إلى حد ما، أوافق على أنه بعد التدفق، يصبح هذا البرنامج معقدا. لكن الشيء الرئيسي هنا ليس الاستسلام، بل مواصلة الدراسة. وبعد بضعة أسابيع تخطر ببالي فكرة كيف تمكنت من الاستغناء عنها من قبل!
إذًا، ما الذي أعجبني في الرسام، وما الذي وجدته غير الفلاش؟
1. سأبدأ بالأبسط، ولكن في نفس الوقت ضروري. حاول ترتيب الكائنات في دائرة في Flash. في السابق كانت هناك أداة ديكو، ولكن تمت إزالتها، على ما يبدو أنها اعتبرت غير ضرورية. قررنا أنه سيكون أكثر متعة القيام بذلك باليدين. لدى Illustrator هذه الوظيفة: التأثير - التشويه والتحويل - التحويل.
كل شيء سريع وبسيط؛ نقوم بتعيين القيم (المسافة بين الكائنات، عدد النسخ) بأنفسنا في الإعدادات.
2. التعرج
شيء أبسط ولكنه مفيد. قد يبدو هذا أمرًا صغيرًا، ولكن في Flash يتعين عليك الرسم يدويًا، أما في Illustrator فيستغرق الأمر ثوانٍ.
3. تشوه الأجسام (الاعوجاج)
لا يوجد شيء مثل هذا في فلاش. في المثال أدناه، عرضت طريقتين فقط لتشويه الأشكال البسيطة (التأثير - الالتواء - القوس/السمكة). في الواقع هناك 15 منهم أحدث نسخةالبرامج.
4. التقريب التلقائي للزوايا (الزوايا المستديرة)
يمكنك القيام بذلك يدويًا: على كائن رسومي، عند تحديده، تظهر نقطة بيضاء وعلامة خط مستديرة في الزاوية (في جميع الزوايا). نسحب بالماوس ونضبطه حسب ذوقك.
ولكن هذا ينطبق فقط على الأشكال، مع خط قلم رصاص نفعل ذلك بشكل مختلف قليلا - نطبق تأثير التقريب (التأثير – الأسلوب – الزوايا المستديرة). عند الخروج نحصل على نفس النتيجة.
5. خشنة
ينطبق التأثير على أشكال بسيطة(التأثير – التشويه والتحويل – الخشونة). الإخراج يشبه النماذج ثلاثية الأبعاد منخفضة البولي. أعتقد أنه رائع :) والأهم من ذلك أنه بسيط للغاية.
6. التجعد والانتفاخ (السحب والانتفاخ)
المثال في الصورة أدناه:
7. توسيع النموذج (مسار الإزاحة)
يحتوي Flash على وظيفة توسيع التعبئة، ولا يعمل مع خطوط القلم الرصاص على الإطلاق، على عكس Illustrator.
8. الفرش (فرشاة فنية، فرشاة الأنماط، فرشاة التشتت)
انظر إلى الصورة أدناه مع الأمثلة:
9. فرشاة الملمس
يتميز Illustrator أيضًا بالعديد من فرش الملمس التي كتبت عنها وكيفية ظهورها نسخة جديدةفلاش - . لقد لوحظ أن استخدام الفرش في Adobe Animate بطيء جدًا. وهنا كيف ستسير الأمور :(
10. لست متأكدًا مما إذا كانت هذه خدعة حقيقية، ولكني أريد التركيز على فرشاة تحمل الاسم المضحك Blob Brush. توجد هذه الفرشاة في شريط الأدوات، وهي فرشاة رائعة جدًا للاستخدام. لديها مجموعة من الإعدادات، وأنا أحب ذلك أكثر من المعتاد. من الصعب شرح فوائده بالكلمات، فمن الأفضل تجربته مرة واحدة.
10. سبليت إلى الشبكة
شيء آخر مفيد هو وظيفة Split to Grid (Object-Path-Split to Grid) فهي تسمح لك بقص الشكل إلى أجزاء متساوية. ماذا يذكرنا هذا؟ هذا صحيح - النوافذ في مبنى شاهق. أعتقد أنه أمر رائع لرسم المناظر الطبيعية للمدينة على سبيل المثال؛)
أداة أخرى مفيدة مقدمة في Illustrator، ربما منذ إصدارها الأول. بمساعدتها يمكنك إنشاء، على سبيل المثال، القوام الخشبي:
12. التحرك (يمين – تحويل – نقل)
يزيح كائنًا بمسافة محددة. إذا رغبت في ذلك، يمكنك على الفور إنشاء نسخة يتم وضعها على المسافة المطلوبة من الكائن المحدد أفقيًا/أو رأسيًا. كان الإصدار السابق من Flash يحتوي على مكون إضافي يفعل ذلك هذه الوظيفة. لسوء الحظ، لا أتذكر اسمها.
يعد Illustrator مناسبًا جدًا لإنشاء أنماط سلسة (Object-Pattern-Make). أتذكر مدى حرصي على تطوير التطور في الفلاش من خلال إنشاء . في إصدار SS 2015 من Illustrator، يتم تنفيذ كل شيء تلقائيًا؛ وستساعدك مجموعة من الإعدادات على إنشاء نمط بعشرات الأشكال، مع وجود عدد قليل من العناصر الرسومية في متناول اليد. في الإصدارات السابقة من البرنامج، كان يجب القيام بكل شيء يدويًا، تمامًا كما هو الحال في Flash حتى الآن.
(ملاحظة - يمكن تحويل النموذج إلى كائن قابل للتحرير باستخدام وظيفة Object - Expand Appearance.
14. كائن الفسيفساء
إنشاء لوحة ألوان بناءً على صورة موجودة. قم باستيراد الصورة التي تريدها إلى الرسم التوضيحي (فتح)، ثم كائن - إنشاء فسيفساء كائن. في الإعدادات نحدد تكرار التقسيم في الطول والعرض.
وفي الإخراج نحصل على:
15. مزيج
تستخدم لإنشاء التدرجات. يمكنك إنشاء انتقالات خطوة بخطوة، كما هو الحال في الصورة. لن أقول إنني أستخدمه كثيرًا، لكنه قد يكون مفيدًا لشخص ما. يبدو لي أنه يمكن استخدامه لإنشاء صور خلفية بسيطة.
يمكن أيضًا استخدام الأداة لاستنساخ الكائنات. ضع كائنين على مسافة من بعضهما البعض وقم بتطبيق خيارات المزج، وحدد عدد الخطوات (عدد الكائنات المستنسخة).
16. أداة بناء الشكل.
شيء مناسب جدًا للعمل مع البدائيين. في الفلاش، بدا لي أن الأمر كان أقل ملاءمة.
اضغط مع الاستمرار على Alt وانقر على المقاطع المحددة لحذف المقاطع. إذا قمنا ببساطة بسحب الماوس فوق عدة مناطق محددة - اتصالات.
الوظيفة الإضافية هي أداة تساعد في قطع الملفات وتوصيلها وما إلى ذلك تلقائيًا. الأشكال المميزة. أما بالنسبة لي، فالأمر ليس مريحًا للغاية؛ فغالبًا ما أستخدم أداة Build Shape.
(اللوحات الفنية)
18. لوحة الأدوات المخصصة
القدرة على إنشاء شريط الأدوات الخاص بك، والتخلص من شريط الأدوات غير الضروري، واختيار شريط الأدوات الذي تستخدمه فقط.
في Flash، توجد لوحات الرسم، أي المشاهد (المشهد 1،2،3..) بشكل منفصل وتحتاج إلى التبديل بينها (Shift+F2). في Illustrator، يمكن وضعها جميعًا أمام عينيك. من الملائم أن تقوم بإنشاء عدة إصدارات من نفس الرسم، بحيث تكون جميع الخيارات أمام عينيك للمقارنة.
19. القياس المتساوي باستخدام الأنماط الرسومية
ما يشترك فيه الرسام مع الفلاش هو القدرة على حفظ كائن في رمز، وبنفس السهولة يمكن نقل هذا الرمز إلى فلاش (افتح الملف في flash.ai باستخدام استيراد - استيراد إلى المسرح).
يتمتع الرمز الموجود في Illustrator بنفس الخصائص الموجودة في Flash.
وفي الختام، سأكتب أنه في المصور، في رأيي، هو أدنى من الفلاش. نعم، نعم، هناك شيء من هذا القبيل. وهذه هي أداة التعبئة (دلو الطلاء). بغض النظر عن مدى صعوبة محاولتي التعود عليه في Illa، فهو أكثر ملاءمة في Flash.
إذا أصبحت ملاحظاتي مفيدة لك أو إذا كنت ترغب في إضافة أي شيء خاص بك، مرحبا بك في التعليقات! بالتوفيق للجميع ;)
يعتمد تنسيق ملف Flash (SWF) على رسومات المتجهاتوهو مصمم للرسومات المدمجة والقابلة للتطوير للإنترنت. نظرًا لأن تنسيق الملف هذا يعتمد على رسومات متجهة، فإن الكائن يحافظ على جودة الصورة بأي دقة وضوح ويعتبر مثاليًا لإنشاء إطارات الرسوم المتحركة. في Illustrator، يمكنك إنشاء إطارات رسوم متحركة فردية على الطبقات ثم تصدير طبقات الصورة كإطارات فردية لاستخدامها على موقع الويب الخاص بك. يمكنك أيضًا تحديد الرموزفي ملف Illustrator لتقليل حجم الرسوم المتحركة. عند التصدير، يتم تعريف كل رمز مرة واحدة فقط في ملف SWF.
أمر التصدير (SWF)
يوفر أكبر قدر من التحكم في الرسوم المتحركة وضغط البت.
يوفر مزيدًا من التحكم في مزيج تنسيقات SWF والصور النقطية في تخطيط مجزأ. يوفر هذا الأمر خيارات صور أقل من أمر التصدير (SWF)، ولكنه يستخدم آخر خيارات أمر التصدير المستخدمة (انظر ).
عند إعداد كائن لحفظه بتنسيق SWF، ضع الإرشادات التالية في الاعتبار.
باستخدام تطبيق Device Central، يمكنك رؤية الشكل الذي سيبدو عليه رسم Illustrator في التطبيق مشغل فلاشعلى الأجهزة المحمولة المختلفة.
إدراج رسم Illustrator
تم إنشاؤها في تطبيق المصوريمكن نسخ الرسم ولصقه بسرعة وسهولة وبسهولة في تطبيق Flash.
عندما تقوم بإدراج رسم Illustrator في تطبيق Flash، يتم الاحتفاظ بالسمات التالية.
سمك السكتة الدماغية
تعريفات التدرجات
النص (بما في ذلك خطوط OpenType)
الصور ذات الصلة
أوضاع المزج
الخطوط العريضة والأشكال
بالإضافة إلى ذلك، يدعم Illustrator وFlash الخيارات التالية عند إدراج رسم.
عند تحديد الطبقات في رسم Illustrator المستوى الأعلىبالكامل ولصقها في تطبيق Flash، يتم الحفاظ على الطبقات وخصائصها (الرؤية والقفل).
يتم تحويل تنسيقات ألوان Illustrator بخلاف RGB (تنسيقات CMYK وتدرج الرمادي والتنسيقات المخصصة) إلى RGB بواسطة Flash. يتم إدراج ألوان RGB كالمعتاد.
عندما تقوم بإدراج رسم Illustrator أو إدراجه، يمكنك استخدام خيارات متنوعة لحفظ تأثيرات معينة (مثل ظلال النص) كمرشحات Flash.
يحتفظ Flash بأقنعة Illustrator.
تصدير ملفات SWF من Illustrator
تتطابق ملفات SWF المصدرة من Illustrator مع نسبة الجودة والضغط لملفات SWF المصدرة من Flash.
عند التصدير، يمكنك الاختيار من بين مجموعة متنوعة من الأنماط المحددة مسبقًا لضمان الإخراج الأمثل، وتحديد الطريقة التي تريد بها استخدام لوحات الرسم المتعددة وكيف تريد تحويل الرموز والطبقات والنص والأقنعة. على سبيل المثال، يمكنك اختيار تصدير رموز Illustrator كأفلام أو ملفات الصور الرسوميةوإنشاء رموز SWF من طبقات Illustrator.
استيراد ملفات Illustrator إلى تطبيق Flash
لإنشاء تخطيط كامل في Illustrator ثم استيراده إلى Flash في خطوة واحدة، يمكنك حفظ العمل الفني بتنسيق Illustrator الأصلي (AI) واستيراده بدقة إلى Flash باستخدام منطقة أوامر File > Import to Workbench" أو "File " > "استيراد إلى المكتبة".
إذا كان ملف Illustrator الخاص بك يحتوي على لوحات رسم متعددة، فحدد لوح الرسم المراد استيراده في مربع حوار Flash's Import وحدد الإعدادات لكل طبقة في لوح الرسم هذا. يتم استيراد كافة الكائنات الموجودة في لوحة الرسم المحددة إلى Flash كطبقة واحدة. عند استيراد لوحة رسم أخرى من نفس ملف AI، يتم استيراد الكائنات الموجودة في لوحة الرسم هذه إلى Flash كطبقة جديدة.
عندما تقوم باستيراد رسم Illustrator كملف AI أو EPS أو PDF، يحتفظ Flash بنفس السمات كما هو الحال عندما تقوم بإدراج رسم Illustrator. بالإضافة إلى ذلك، إذا كان ملف Illustrator الذي تقوم باستيراده يحتوي على طبقات، فيمكنك استيرادها باستخدام إحدى الطرق التالية.
تحويل طبقات Illustrator إلى طبقات Flash.
تحويل طبقات Illustrator إلى إطارات Flash.
تحويل جميع طبقات Illustrator إلى طبقة Flash واحدة.
استيراد ورسوم متحركة بسيطة مرحبا. اليوم نحن ننظر إلى الرسوم المتحركة البسيطة في After Effects.
الموارد: برنامج Adobe Illustrator CC
أدوبي بعد الأثر CC
لنبدأ بالتعلم من خلال الرسم في Illustrator.
دعونا نرسم
1) ارسم مستطيلاً أصفر كخلفية
الشكل 1 - المستطيل
2) ارسم دائرة واملأها بالتدرج
دعونا نعمل قليلا على الدائرة:
- احذف النقطة السفلية على الكفاف، نحصل على قوس؛
- نرسم خطًا مستقيمًا، ونغلق الجزء السفلي من القوس، ونحصل على نصف دائرة
الشكل 2 - 1) رسم الدائرة؛ 2) التدرج. 3) حذف النقطة
3) ارسم مستطيلاً واصنع نسخة منه
- مستطيل رمادي واحد؛
- مستطيل آخر باللون الرمادي الداكن
4) ارسم مثلثًا من علامة النجمة عن طريق ضبط عدد الأشعة على 3
الشكل 3 - 1) الضوء المستقيم؛ 2) الظلام المستقيم. 3) المثلث
5) ارسم قطة باستخدام القلم والأشكال البسيطة 
الشكل 4 - 1) الرأس؛ 2) الرقبة. 3) الجسم. 4) الساق. 5) الذيل
والآن اللحظة الأكثر أهمية
لنقم بتوزيع الصور إلى طبقات (ما سيتم تحريكه موجود في طبقة منفصلة) مثل هذا: 
الشكل 5 - جميع الصور (وضع علامة حمراء على الطبقات المهمة)
هذا كل شيء، الآن دعونا نحفظ.
دعونا نلقي نظرة على إعدادات الحفظ
الشكل 6 - حفظ
والآن المرحلة التالية. أغلق Adobe Illustrator وافتح After Effects.
استيراد إلى After Effects
ملف - استيراد - ملف - حدد ملف Illustrator المحفوظ لدينا.
لنختار استيراد الطبقات من Illustrator؛ إذا قمنا بإضافة لقطات، فسنحصل على صورة ذات طبقات مدمجة، لكننا لسنا بحاجة إلى ذلك.
الشكل 7 - الاستيراد كتركيبة
هذا كل شيء، مستورد.
الآن دعونا نرى ما لدينا. انقر نقرًا مزدوجًا فوق التركيبة حتى تفتح ونرى الطبقات (إذا تم كل شيء بشكل صحيح، فستكون هناك عدة طبقات). لقد حصلنا على هذا، انظر الشكل
الشكل 8 - التكوين المفتوح
والآن ما نحن هنا اليوم هو الرسوم المتحركة.
الرسوم المتحركة في After Effects
قم بتعيين نقطة التدوير أعلى السهم باستخدام أداة Pan Behind Tool ( مفتاح الاختصار- ي). نحن فقط نأخذ نقطة ونحركها عند الحاجة. والنتيجة ستكون بهذا الشكل.. 
الشكل 9 - أداة التحريك والطبقات
هذا كل شيء، والآن دعنا ننتقل إلى طبقات الرسوم المتحركة.
سنحتاج إلى طبقة Arrow وHead_cat.
لنبدأ بالسهم.
دعنا نوسع القائمة ونجدها ونضغط على الساعة. لذا، فقد وضعنا النقطة الأولى عند صفر ثانية. ستستمر الرسوم المتحركة لمدة ثانيتين إجمالاً.
إذن، هذه هي الإعدادات التي تحتاج إلى إجرائها (سنضع 3 نقاط في المجمل):
| ثانية | 0 | 1 | 2 |
| +66 | - 70 | +66 |
الشكل 10 - سهم التدوير
الآن دعونا نحرك رأس القطة.
دعونا نقوم بتوسيع head_cat ونبحث عن Position .
سيكون هناك 4 نقاط هنا.
سيتم تغيير الإحداثيات الأخيرة فقط دون التأثير على الإحداثيات الأخرى.
| ثانية | 0.1 | 0.17 | 1.12 | 2.0 |
| موضع | 689.3 | 729.3 | 729.3 | 689.3 |
الشكل 11 - موضع الرأس
لذلك، كان مبدأ الرسوم المتحركة مثل هذا. يتأرجح السهم من جانب إلى آخر، وبمجرد اقترابه من القطة، يسحب رأسه إلى الداخل، ويبقى على هذا الوضع لفترة، ثم يعيده إلى مكانه.
المرحلة النهائية
إنتاج
تحتاج إلى إنشاء منتج نهائي من عملك.
انتقل إلى القائمة - أضف إلى قائمة انتظار العرض
سيتم فتح لوحة Render وفي وحدة الإخراج (نقرتين) حدد تنسيق الإخراج. أخذت *.mov
الشكل 12 - تقديم
انقر على زر RENDER واحصل على النتيجة (فقط لا تنس تحديد المسار).
هذا كل شيء.
اليوم لدينا شيء غير عادي درس أدوبيالمصور. لأننا هذه المرة لن نصنع صورة ثابتة، بل رسمًا متحركًا حقيقيًا. تخيل، اتضح مع باستخدام أدوبييستطيع Illustrator أيضًا رسم الرسوم المتحركة :)
ولهذا لا نحتاج إلى شيء على الإطلاق. التنظيم السليم للطبقات وتصدير العمل النهائي إلى تنسيق swf، حيث يتم تحويل كل طبقة إلى إطار للرسوم المتحركة. في البرنامج التعليمي اليوم، سنقوم برسم رسوم متحركة للعد التنازلي بأسلوب فيلم قديم. يجب أن يكون الإخراج فيديو فلاش مع نفس العد التنازلي.
أول شيء فعله هو رسم كل شيء العناصر الضروريةللرسوم المتحركة في المستقبل. للقيام بذلك، في وثيقة منفصلة، قمت بعمل موضعين لإطار الفيلم، ودائرة كمرجع، يتم تقطيعها إلى قطاعات منفصلة، وملمس وخدش رأسي لإضافة تأثير العصور القديمة، بالإضافة إلى جميع الأرقام و النقوش.
عندما تكون جميع أجزاء الرسوم المتحركة لدينا جاهزة، يمكننا البدء في إنشاء الرسوم المتحركة نفسها. للراحة، من الأفضل القيام بذلك في مستند جديد. في هذه الحالة، سوف تلعب طبقاتنا دور إطارات الرسوم المتحركة. وفي الطبقة الأولى، تحتاج فقط إلى نسخ إطار الفيلم. ضعه في منتصف منطقة عملك.
الآن قم بإنشاء طبقة ثانية وانسخ إطار الفيلم فيها، حيث يتم عمل الثقوب على طول الحواف بإزاحة. كما يجب وضعها في المركز.
من هاتين الطبقتين يمكنك بالفعل الحصول على رسوم متحركة لفيلم متحرك. ولكن في وقت لاحق سوف نحتاج إلى العديد من الطبقات. لذا حدد أول طبقتين، وانتقل إلى خيارات اللوحة وقم بعمل نسخة من الطبقات.
وبطريقة مماثلة، نحتاج إلى تجميع 12 طبقة من إطارات الفيلم التي تحدد حركته.
الآن لدينا مجموعة كاملة من الطبقات وكلها مرئية. بمعنى أن الطبقات العليا تحجب الطبقات السفلية، وهو أمر غير مناسب تمامًا للعمل. لذلك، يمكنك إيقاف تشغيل بعض الطبقات من خلال النقر على الأيقونة الموجودة على يسار اسم الطبقة. لإيقاف تشغيل جميع الطبقات أو تشغيلها مرة واحدة، اضغط مع الاستمرار على مفتاح Alt أثناء النقر على أيقونة العين. من خلال تشغيل الطبقات وإيقاف تشغيلها، يمكنك رؤية ما هو موجود بالضبط في إطار معين من الرسوم المتحركة المستقبلية. والآن، لكي نتمكن من إضافة اهتزاز طفيف لحركة الفيلم، نحتاج إلى تحريك الإطارات الناتجة قليلاً في اتجاهات مختلفة. للقيام بذلك، قم بتشغيل الطبقة التي ستعمل معها فقط. في اللحظة، ثم قم بتحريك الإطار بضع بكسلات في أي اتجاه.
بمجرد الانتهاء من جميع الطبقات وإضافة القليل من التحول، يمكنك البدء في إنشاء الرسوم المتحركة للدائرة المتحركة. للقيام بذلك، انسخ الدائرة المكونة من قطاعات من المستند مع الأجزاء الكرتونية وضعها على الطبقة الأولى أعلى إطار الفيلم.
إذا قمت بإلغاء تحديد الدائرة، فسوف تبدو وكأنها كل واحد. هذا هو بالضبط ما نحتاجه.
ولكن نظرًا لأنه يتكون من قطاعات فردية، يمكنك إنشاء رسوم متحركة بسرعة وسهولة عن طريق تغيير لونها. للقيام بذلك، انسخ هذه الدائرة إلى الطبقة الثانية واجعل القطاع الأول أفتح. تتذكر أن فيلمنا يهتز أثناء تحركه، لذلك ليس من الضروري على الإطلاق وضع الدائرة في وسط الإطار تمامًا. وضعه بالعين.
بطريقة مماثلة، تحتاج إلى نسخ الدائرة إلى كل طبقة تالية، مع طلاء قطاع واحد أكثر بلون أفتح من المرة السابقة. تشكل هذه الطبقات الـ 12 معًا رسمًا متحركًا للفيلم يتحرك بدائرة ملء.
بعد ذلك نحتاج إلى إضافة نسيج إلى طبقاتنا. قم بتشغيل الطبقة الأولى وانسخ النسيج من هناك الملف المصدرمع قطع الغيار.
ثم قم بتشغيل الطبقات التالية واحدة تلو الأخرى وانسخ نفس النسيج هناك. لجعله يبدو مختلفًا في كل إطار، ما عليك سوى تدويره بمقدار 90 درجة. كما كنت قد خمنت، نحن بحاجة إلى إضافة نسيج لجميع الإطارات الـ 12.
إذا كنت قد سئمت بالفعل من النسخ، فيمكنني إرضائك - لم يتبق سوى القليل جدًا. لقد انتهى الجزء الأصعب. كل ما تبقى هو إضافة خدوش رأسية وهذا كل شيء تقريبًا. للقيام بذلك، نقوم مرة أخرى بنسخ الصفر الأصلي ووضعه في مكان تعسفي في عدة طبقات. في حالتي، تظهر الخدوش في طبقتين فقط.
الآن بعد أن أصبحت الدورة الرئيسية للرسوم المتحركة للفيلم جاهزة، كل ما تبقى هو إضافة الأرقام. بما أن العد التنازلي لدينا يبدأ من 3 إلى 1 بالإضافة إلى كلمة Go!!!، فنحن بحاجة إلى المزيد من الطبقات. ليس 12، ولكن ما يصل إلى 48. للقيام بذلك، تحتاج إلى عمل ثلاث نسخ أخرى من الطبقات الجاهزة مع الرسوم المتحركة للفيلم.
وبعد ذلك كل شيء بسيط. قم بتشغيل الطبقة الأولى ووضع الرقم ثلاثة هناك.
ثم تحتاج إلى نسخ هذا الرقم إلى الطبقات التالية حتى تنتهي الرسوم المتحركة للدائرة. عندما تصل إلى النسخة التالية من الطبقات، حيث سيتم ملء الدائرة بالكامل مرة أخرى، تحتاج إلى وضع الرقم اثنين. بنفس الطريقة، انسخ الرقم واحد إلى الطبقات المطلوبة. وعندما تصل إلى الطبقات النهائية لنقش Go!!!، ما عليك سوى حذف الدائرة قبل نسخ النقش إلى الطبقة المطلوبة.
هذا كل شيء بالنسبة للرسوم المتحركة. الشيء الرئيسي هنا هو عدم الخلط. يمكنك إعطاء الطبقات بعض الأسماء المناسبة، لكنني كنت كسولًا نوعًا ما :) وأيضًا، عند الانتهاء من عملك، تأكد من إعادة تشغيل جميع الطبقات مرة أخرى من خلال النقر على أيقونة العين.
في نافذة إعدادات التصدير، تأكد من تعيين تصدير باسم: طبقات AI إلى إطارات SWF. هذا هو الخيار الذي يحول طبقات Illustrator إلى إطارات رسوم متحركة. بعد ذلك، انقر فوق الزر "خيارات متقدمة".
سوف تفتح إعدادات إضافية. هنا تحتاج إلى ضبط معدل الإطارات. لدي 12 إطارًا في الثانية. تعتبر خانة الاختيار Looping مسؤولة عن الرسوم المتحركة الدورية. وبفضل ذلك، سيتم تشغيل الفيديو في دائرة. ويقوم خيار Layer Order: Bottom Up بإعادة إنتاج طبقات الرسام من الأسفل إلى الأعلى في اللوحة. هذا هو بالضبط كيف بنينا الرسوم المتحركة لدينا.
الإخراج هو فيديو فلاش مع الرسوم المتحركة لدينا.
الآن ترى أن إنشاء رسوم متحركة بسيطة في Adobe Illustrator ليس بالأمر الصعب كما يبدو للوهلة الأولى.
ولكن لإنشاء مقاطع فيديو طويلة أو تطبيقات تفاعلية، لا يزال من الأفضل استخدامها أدوبي فلاشأو برامج تحرير فلاش أخرى. على سبيل المثال، قمت بصنع هذه القطة في برنامج Macromedia Flash القديم الذي استخرجته من عملي.
أيضًا، يتم استخدام HTML5 وCSS3 مؤخرًا بشكل متزايد لإنشاء الرسوم المتحركة. هذا الرمزمدعومة المتصفحات الحديثةولا يتطلب استخدام مشغل فلاش.
الرومانية الملقب dacascas خاصة بالنسبة للمدونة
اشترك في النشرة الإخبارية لدينا حتى لا يفوتك أي شيء جديد:
تحميل...