يعتمد تنسيق ملف Flash (SWF) على رسومات متجهة وهو مخصص للرسومات المدمجة والقابلة للتطوير للويب. نظرًا لأن تنسيق الملف هذا يعتمد على رسومات متجهة ، فإن الكائن يحتفظ بجودة الصورة بأي دقة وهو مثالي لإنشاء إطارات الرسوم المتحركة. في Illustrator ، يمكنك إنشاء إطارات رسوم متحركة فردية على طبقات ثم تصدير طبقات الصورة كإطارات فردية لاستخدامها على موقع الويب. يمكنك أيضا تحديد حرف او رمزفي ملف Illustrator لتقليل حجم الرسوم المتحركة. عند التصدير ، يتم تعريف كل رمز مرة واحدة فقط في ملف SWF.
أمر التصدير (SWF)
يوفر أكبر قدر من التحكم في الرسوم المتحركة وضغط البت.
يوفر مزيدًا من التحكم في مزيج تنسيقات SWF والصور النقطية في تخطيط مجزأ. يوفر هذا الأمر خيارات صورة أقل من أمر التصدير (SWF) ، ولكنه يستخدم أحدث خيارات أمر التصدير المستخدمة (راجع).
ضع الإرشادات التالية في الاعتبار عند تحضير كائن لحفظه بتنسيق SWF.
استخدم تطبيق Device Central لمعرفة الشكل الذي سيبدو عليه رسم Illustrator في التطبيق مشغل الفلاشعلى مختلف الأجهزة المحمولة.
إدراج رسم Illustrator
يمكن نسخ كائن رسومي تم إنشاؤه في Illustrator ولصقه في تطبيق Flash بسرعة وسهولة وسهولة.
عندما تقوم بلصق رسم Illustrator في تطبيق Flash ، يتم الاحتفاظ بالسمات التالية.
سمك السكتة الدماغية
تعريفات التدرجات
نص (بما في ذلك خطوط OpenType)
الصور ذات الصلة
أوضاع المزج
ملامح وأشكال
بالإضافة إلى ذلك ، يدعم Illustrator و Flash الميزات التالية عند لصق رسم.
عند تحديد طبقات في عمل فني من Illustrator افضل مستوىتمامًا ولصقها في تطبيق Flash ، يتم الاحتفاظ بالطبقات وخصائصها (الرؤية والحظر).
يتم تحويل تنسيقات ألوان Illustrator غير RGB (تنسيقات CMYK ، وتدرج الرمادي ، والمخصصة) بواسطة Flash إلى RGB. يتم إدخال ألوان RGB بالطريقة المعتادة.
عندما تقوم بإدراج أو لصق عمل Illustrator الفني ، يمكنك استخدام خيارات متنوعة لحفظ تأثيرات معينة (مثل الظل الناتج عن النص) كمرشحات Flash.
يحفظ Flash أقنعة Illustrator.
تصدير ملفات SWF من Illustrator
تكون ملفات SWF المصدرة من Illustrator بنفس جودة وضغط ملفات SWF المصدرة من Flash.
عند التصدير ، يمكنك الاختيار من بين مجموعة متنوعة من الأنماط المحددة مسبقًا للحصول على أفضل إخراج ، وتحديد كيفية استخدام ألواح الرسم المتعددة ، وكيفية تحويل الأحرف والطبقات والنص والأقنعة. على سبيل المثال ، يمكنك اختيار تصدير رموز Illustrator على هيئة أفلام أو رسومات ، أو إنشاء رموز SWF من طبقات Illustrator.
استيراد ملفات Illustrator إلى تطبيق Flash
لإنشاء تخطيط كامل في Illustrator ثم استيراده إلى Flash في خطوة واحدة ، يمكنك حفظ عملك الفني بتنسيق Illustrator الأصلي (AI) واستيراده بدقة عالية إلى Flash باستخدام أوامر File> Import To Workspace. "أو" ملف ">" استيراد إلى المكتبة ".
لو ملف Illustratorيحتوي على ألواح رسم متعددة ، وحدد لوح الرسم المراد استيراده في مربع حوار Flash's Import ، وحدد الإعدادات لكل طبقة في لوح الرسم هذا. يتم استيراد كل الكائنات الموجودة في لوح الرسم المحدد في Flash كطبقة واحدة. عندما تقوم باستيراد لوح رسم آخر من نفس ملف AI ، يتم استيراد الكائنات من لوح الرسم هذا إلى Flash كطبقة جديدة.
عندما تقوم بإدراج عمل فني من Illustrator كملفات AI أو EPS أو PDF ، فإن Flash يحتفظ بنفس السمات كما هو الحال عند لصق عمل Illustrator الفني. أيضًا ، إذا كان ملف Illustrator الذي تقوم باستيراده يحتوي على طبقات ، فيمكنك استيرادها باستخدام إحدى الطرق التالية.
تحويل طبقات Illustrator إلى طبقات Flash.
تحويل طبقات Illustrator إلى إطارات Flash.
قم بتحويل كل طبقات Illustrator إلى طبقة Flash واحدة.
Adobe Illustrator و بعد المؤثرات
استيراد الرسوم المتحركة البسيطة
مرحبًا. نقوم اليوم بمراجعة رسم متحرك بسيط في After Effects.موارد: Adobe Illustrator CC
Adobe After Effects 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 ، إذا وضعنا لقطات ، فسنحصل على صورة ذات طبقات مدمجة ، لكننا لسنا بحاجة إلى ذلك.
الشكل 7 - الاستيراد كتكوين
كل ما تم استيراده.
الآن دعونا نرى ما لدينا. انقر نقرًا مزدوجًا على التكوين
، ما الذي سيفتح وسنرى الطبقات (إذا تم كل شيء بشكل صحيح ، ستكون هناك عدة طبقات). لقد حصلنا على هذا ، انظر الصورة
الشكل 8 - تكوين مفتوح
والآن ما نحن هنا اليوم من أجله - الرسوم المتحركة.
الرسوم المتحركة بتنسيق
بعد المؤثرات
اضبط النقطة المحورية في الجزء العلوي من السهم باستخدام أداة التحريك الخلفي (Pan Behind Tool) ( مفتاح الاختصار- ص). فقط خذ نقطة وانقلها حيث تريد. نتيجة لذلك ، سيبدو هكذا ..
الشكل 9 - أداة عموم والطبقات
هذا كل شيء ، الآن دعنا ننتقل إلى طبقات الرسوم المتحركة.
نحتاج إلى طبقة سهم وقط رأس.
لنبدأ بالسهم.
قم بتوسيع القائمة ، وابحث عن الساعة وانقر عليها. إذن ، نضع النقطة الأولى عند صفر ثانية. في المجموع ، ستستمر الرسوم المتحركة لمدة ثانيتين.
إذن ، هذه هي الإعدادات التي تحتاج إلى إجرائها (سنضع 3 نقاط إجمالاً)
| ثانية | 0 | 1 | 2 |
| +66 | - 70 | +66 |
الشكل 10 - سهم الدوران
الآن لنحرك رأس القط.
قم بتوسيع head_cat وابحث موضع.
سيكون هناك 4 نقاط.
سيغير فقط الإحداثي الأخير دون لمس الباقي.
| ثانية | 0.1 | 0.17 | 1.12 | 2.0 |
| موضع | 689.3 | 729.3 | 729.3 | 689.3 |
الشكل 11 - رأس المنصب
لذا ، كان مبدأ الرسوم المتحركة هكذا. يتأرجح السهم من جانب إلى آخر ، بمجرد اقترابه من القطة ، يسحب رأسه إلى نفسه ، ويبقى في هذا الوضع قليلاً ، ثم يعيده إلى مكانه.
المرحلة النهائية
إنتاج
تحتاج إلى إنشاء منتج نهائي من عملك.
دعنا نذهب إلى القائمة إضافة إلى عرض قائمة الانتظار
تفتح لوحة Render وفي Output Module (نقرتان) حدد تنسيق الإخراج. أخذت * .mov
الشكل 12 - تقديم
انقر فوق الزر RENDER واحصل على النتيجة (لا تنس تحديد المسار).
هذا كل شئ.
تحسين رسومات الويب
المعلومات الرسوميةيتم نقلها بشكل أبطأ بكثير من النص ، ويتناسب وقت تحميل الصور مع حجمها ملفات الرسوم. لهذا تحميل سريعتتطلب صفحات الويب حجمًا صغيرًا من الصور الرسومية المضمنة فيها ، والذي يتحقق من خلال تحسينها. يُفهم تحسين الصورة على أنه تحويلها الذي يوفر الحد الأدنى من حجم الملف مع الحفاظ على جودة الصورة المطلوبة في هذه الحالة ، والتي يتم تحقيقها بشكل أساسي عن طريق تقليل عدد الألوان في الصور الرسومية ، واستخدام تنسيقات الملفات المضغوطة والخاصة ، وتحسين إعدادات الضغط للأفراد شظايا الصورة.
يحتوي Illustrator على أدوات تحسين الصورة المضمنة التي توفر أساليب مختلفةمعاينة عملية التحسين السريعة والفعالة. تعطي المعاينة فكرة دقيقة إلى حد ما عن كيفية ظهور الصورة المحسّنة في الوقت الفعلي ، مما يساعد على تقييم نتيجة التحسين واختيار الإعدادات الصحيحة. ويمكنك تحسين كل من الصور التي تم إنشاؤها مباشرة في Illustrator وغيرها ، مثل الصور التي تنوي وضعها على موقع ويب.
يتم تعيين معلمات التحسين في النافذة حفظ لالويب(Save for Web) ، يتم استدعاؤه بواسطة الأمر الذي يحمل نفس الاسم من القائمة ملف(ملف). يقدم البرنامج استخدام واحد من أربعة أوضاع للمعاينة ، ولكن أفضل وضعين لتقييم جودة التحسين:
- 2 المتابعة(خياران) عرض متزامن للصورة الأصلية والصورة المثلى وفقًا للإعدادات المحددة (الشكل 1) ؛
- 4-متابعة(أربعة خيارات) في هذا الوضع ، يتم تقسيم منطقة العرض إلى أربعة نوافذ (الشكل 2) لعرض الصورة الأصلية وثلاثة إصدارات من الإصدار الأمثل: يتم إنشاء الإصدار الأول بناءً على قيم التحسين المحددة ، والآخران هي خيارات لإعدادات التحسين الحالية.
يتيح لك كلا الوضعين توفير الوقت بشكل كبير في البحث. الخيار الأفضلالتحسين ، لأنها تلغي الحاجة إلى حفظ الصور من إعدادات مختلفةالتحسين والمقارنة المرئية اللاحقة. بالإضافة إلى ذلك ، من الممكن تقييم ليس فقط جودة الصورة المحسنة ، ولكن أيضًا حجمها ووقت التنزيل لخيارات اتصال مختلفة. للمقارنة ، فإن الوضع الأكثر ملاءمة هو 4-Up (أربعة خيارات) ، والذي يسمح لك بالتقييم البصري لتأثير الضغط أو تقليل لوح الألوان على جودة الصورة وحجمها ، وفي النهاية تحديد أفضل معلمات التحسين.
يتيح لك Illustrator تحسين رسومات الويب ليس فقط بتنسيقات GIF و JPG و PNG-8 و PNG-24 ، ولكن أيضًا في SWF و SVG. يتم حفظ الصور المفهرسة التي تحتوي على عدد قليل من الألوان بتنسيق GIF. لحفظ الصور بالألوان الكاملة والصور ذات التدرج الرمادي والرسومات الغنية بالألوان مثل استخدام تعبئة التدرج تنسيق JPG. للحصول على صور كاملة الألوان مع مناطق شفافة ، قم بتطبيق تنسيق PNG، والذي يسمح لك بحفظ كل من الصور المفهرسة وذات الألوان الكاملة ، بينما في PNG-8 الحد الأقصى لعدد الألوان الممكنة للصورة المحسنة هو 256 ، وفي PNG-24 يمكن أن تحتوي الصورة على ملايين الألوان ، وبالتالي يبدو تنسيق jpeg. الفرق بين PNG-24 و JPEG هو أن طريقة الضغط المستخدمة لتحسين صور PNG-24 لا تؤدي إلى فقدان الجودة ، ولكنها تزيد من حجم الملف. تجمع تنسيقات SVG و SWF بين الرسومات والنصوص والمكونات التفاعلية ويمكن أيضًا تحسينها.
يعتبر مثال محددتحسين الصورة. دعنا نقول ، في برنامج Illustrator ، تم تطوير شعار موقع (الشكل 3) ، تم حفظه في الأصل بتنسيق AI. لن تؤدي محاولة تحسينه على الفور للويب إلى أي شيء جيد ، لأنه سيحدث في هذه الحالة قطع أوتوماتيكيالصورة ، والتي لن تأخذ في الاعتبار الوضع الحقيقي للنقش الذي تم الحصول عليه نتيجة للتشوه (الشكل 4 و 5).
لذلك ، دعنا نحاول تصدير الشعار إلى تنسيق PSD باستخدام الأمر ملف => تصدير(ملف => تصدير) حجم الصورة التي تم إنشاؤها سيكون 143 كيلو بايت. افتح ملف PSD الناتج واستخدم الأمر ملف => حفظ للويب(ملف => حفظ للويب). نظرًا للعدد المحدود من الألوان المتضمنة في الصورة ، في هذه الحالة ، يكون تنسيق GIF هو الأمثل ، مع الإعدادات المحددة التي تحتاج إلى تحديدها. من خلال تجربة الإعدادات ، يمكنك رؤية ذلك أفضل جودةيعطي خوارزمية الضغط الافتراضية للبرنامج انتقائي(انتقائي). بالنسبة إلى التنعيم ، إذن ، نظرًا لوجود تعبئة متدرجة ، فمن الأفضل اختيار خوارزمية مع توليد ضوضاء ضوضاء(الشكل 6). سيكون حجم ملف التحسين الناتج 6.729 كيلو بايت (الشكل 7) ، بينما سيتم الحفاظ على شفافية الخلفية ، والتي يسهل التحقق منها عن طريق حفظ صورة GIF مع ملف HTML (الشكل 8). نتيجة لذلك ، في هذا المثال ، تم الحصول على ملفات emblem.html و emblem.gif في مجلد Primer1.
أزرار
عنصر التصميم المحدد الذي لا غنى عنه لأي صفحات ويب هو أزرار التحكم الرسومية. من المستحيل ببساطة تخيل صفحة بدونها. أصبحت أزرار الرسم اليوم نوعًا خاصًا ، ويسمح لك Illustrator بإنشاء أكثر الخيارات تعقيدًا. على سبيل المثال ، تبدو الأزرار المصممة ككائنات شبكية و (أو) التي تحتوي على أقنعة أكثر فاعلية من الأزرار العادية.
ضع في اعتبارك خيار إنشاء زر مرتفع دائري في Illustrator. ارسم كائنًا متجهًا مملوءًا بلون عشوائي على شكل دائرة (الشكل 9) وقم بتحويله إلى شبكة باستخدام الأمر كائن => إنشاء شبكة متدرجة(كائن => إنشاء شبكة متدرجة) بتحديد أربعة صفوف وأربعة أعمدة ، وفي القائمة مظهر(عرض) عن طريق تحديد خيار إلى مركز تسليط الضوء(الخلفية) إلى 60 (الشكل 10). اختر أداة التحديد المباشروانقر في الزاوية اليسرى العلوية من الكائن ، مع تحديد نقاط الربط الموجودة هناك (الشكل 11). قم بتغيير لون الخلية المطابقة إلى اللون الأبيض عن طريق تحديده في اللوحة حوامل(الشكل 12).
خذ أداة الشكل البيضاوي(Ellipse) ، اضبط علامة الماوس على وسط الدائرة التي تم إنشاؤها من قبل وأثناء الضغط باستمرار على المفاتيح بديلو يحول، قم بتمديد الدائرة الجديدة أعلى الدائرة القديمة بحيث تكون أكبر من الدائرة القديمة بمقدار 1-2 بكسل من جميع الجوانب. اجعلها حدًا أسود سكتة دماغية) بعرض 1-2 بكسل واملأها بتدرج نصف قطري من الأحمر إلى الأبيض (الشكل 13). اسحب الكائن المتجه الذي تم إنشاؤه بمقدار 1-2 بكسل إلى اليمين والأسفل ، ثم ، دون إزالة التحديد ، انقر بزر الماوس الأيمن فوقه ومنه قائمة السياقاختر فريقًا ترتيب => إرسال إلى الخلف(تنظيم => إرسال مرة أخرى). نتيجة لذلك ، نحصل على فراغ للزر الموضح في الشكل. 14.
كقاعدة عامة ، يوجد في أي صفحة ويب عدة أزرار من نفس النوع ، تختلف ، على سبيل المثال ، فقط في اتجاه الأسهم المرسومة عليها ، والتي تشير إلى اتجاه التحرك حول الموقع. ضع في اعتبارك أبسط حالة لوجود زرين ، أحدهما ، مع سهم لأسفل ، يعني الانتقال إلى الصفحة التالية ، والزر بسهم يصل إلى الزر السابق. كفراغ للسهم ، لنأخذ مثلثًا عاديًا مرسومًا بالأداة مضلع(مضلع) معبأ باللون الأسود ومصمم أيضًا ككائن شبكي لتأثير أكبر. انقل السهم إلى الزر واضبط موضع كل الكائنات بالنسبة لبعضها البعض باستخدام أزرار اللوحة المقابلة محاذاة(تنسيق). يظهر أول الأزرار المستلمة في الشكل. 15. قم بعمل نسخة من الطبقة بالزر عن طريق اختيار الأمر طبقة مكررة طبقاتونتيجة لذلك نحصل على طبقتين متطابقتين. ثم حدد السهم الموجود على نسخة الطبقة وقم بتدويره بمقدار 180 درجة عن طريق تحديد الأمر من قائمة السياق تحويل => استدارةالتحول => استدارة. نحصل على نفس الزر كما هو موضح في الشكل. 16. يرجى ملاحظة أنه من الأنسب تخزين جميع الأزرار من نفس النوع لمشروع واحد في ملف واحد على طبقات مختلفة ، وهو ما يتم توضيحه في هذه الحالة.
أنت الآن بحاجة إلى حفظ الخيارات المحسّنة لكل زر من الأزرار. اجعل الطبقة السفلية غير مرئية أولاً في هذه الحالة سيتم الاحتفاظ بالزر الموجود في الطبقة العليا. اختر فريقًا ملف => حفظ للويب(ملف => حفظ للويب) ، قم بتكوين معلمات تحسين الزر ، على سبيل المثال ، كما هو موضح في الشكل. 17 ، انقر فوق الزر يحفظ(حفظ) وأدخل اسم الملف. يظهر الزر المحفوظ كنتيجة في الشكل. 18. الآن اجعل الطبقة السفلية مرئية ، واجعل الطبقة العليا غير مرئية ، واحفظ الزر الثاني بنفس الطريقة ، مع إعطائها اسمًا مختلفًا. تظهر النتيجة في الشكل. 19.
الآن كل ما تبقى هو التأكد من أن الأزرار تبدو جيدة على صفحة الويب ووضعها في صفحة مخصصة (الشكل 20). نتيجة لذلك ، في هذا المثال ، تم الحصول على ملف Primer2.html وصورتين رسوميتين في مجلد الصور (المجلد التمهيدي 2).
إذا رغبت في ذلك ، أثناء عملية التحسين ، يمكن بسهولة تحويل الزر إلى شريحة. في هذه الحالة ، بعد اختيار الأمر ملف => حفظ للويب(ملف => حفظ للويب) ويجب تحديد إعدادات التحسين من أداة لوحة الأدوات تحديد شريحة(تحديد شريحة) وانقر نقرًا مزدوجًا على الصورة ، والتي ستتحول تلقائيًا إلى شريحة برقم تسلسلي 1 (الشكل 21). النقر المزدوج مرة أخرى سيفتح النافذة خيارات الشريحة(خيارات الشريحة) ، حيث ستحتاج إلى تحديد ارتباط ، وإذا رغبت في ذلك ، قم بتغيير اسم الشريحة (الشكل 22) ، ثم احفظ الصورة المحسنة. ستكون النتيجة في هذه الحالة هي ملفات Primer3.html (الشكل 23) و Primer3.gif (مجلد Primer3).
عناصر تفاعلية
تتمثل إحدى طرق إضفاء الإثارة على الصفحة في إدخال عناصر التصميم التي تغير ملفات مظهر(أو الحالة) اعتمادًا على سلوك الماوس ، أو نادرًا ، في حالة وجود أي مواقف أخرى: التكبير ، والتمرير ، والتحميل ، والأخطاء ، إلخ.
من بين هذه العناصر ، الأكثر شهرة هي العناصر المنقولة (من التدحرج الإنجليزي إلى التدحرج ، والتدحرج) التي تغير مظهرها تحت تأثير الماوس. الأزرار المتحركة هي أمثلة على عمليات الانقلاب النموذجية. غالبًا ما يتم استخدام عمليات التمرير عند إنشاء عناصر تنقل أخرى في الموقع. في الواقع ، أي تمرير ليس صورة واحدة ، بل عدة صور (تصل إلى أربع) ، كل منها يتوافق مع حدث معين. تعتبر الأحداث الرئيسية كالتالي: الحالة الطبيعية العادية ، تحوم مؤشر الماوس فوق العنصر ، والضغط لأسفل على زر الماوس الأيسر عند التمرير فوقه. من الناحية النظرية ، يمكن تضمين أحداث مثل Click تحرير زر الماوس الأيسر بعد النقر ، لأعلى بعد تحرير الزر ، الخروج عند مغادرة المنطقة النشطة. ومع ذلك ، من الناحية العملية ، غالبًا ما يقتصر على تغيير العنصر فقط للأحداث الثلاثة أو حتى الحدثين الأولين.
كلاسيك رول أوفر
بالمعنى الكلاسيكي ، فإن التمرير عبارة عن سلسلة من الصور الرسومية بتنسيق GIF ورمز HTML المقابل لها ، وبفضل ذلك ، اعتمادًا على سلوك الماوس ، تحل صورة واحدة محل أخرى في نافذة المتصفح.
لم يتم تصميم Illustrator لإنشاء عمليات تمرير مباشرة بالمعنى الكلاسيكي ، ولكن يمكن أن يساعد في تطوير العناصر الأولية لها. الفكرة في هذه الحالة هي إنشاء طبقة مع صورة مطابقة للحدث الأول. ثم قم بعمل نسخة من الطبقة وقم بتحويل الصورة لتتناسب مع الحدث الثاني ، وهكذا. يتم تصدير الصورة ذات الطبقات الناتجة إلى ملف PSD مع الاحتفاظ بالطبقات ، والتي على أساسها يتم إنشاء التمرير في برنامج الصورمستعد. تتمثل ميزة استخدام Illustrator ، كما هو الحال في العديد من الحالات الأخرى ، في عدد من ميزاته المثيرة للاهتمام التي لا تتوفر في حالات أخرى. أدوات البرمجيات، جنبًا إلى جنب مع راحة تحويل الرسومات المتجهة.
دعنا نحاول إنشاء تمرير على شكل نقش يتغير لونه اعتمادًا على سلوك الماوس. افتح Illustrator وأنشئ شكلًا على شكل مستطيل دائري ومليء باللون الأسود (الشكل 24) ، وقم بعمل نسخة منه وضعه في جزء مجاني من الشاشة. قم بتحويل النسخة الأولى من المستطيل إلى كائن شبكة مع تمييز في المنتصف (الأمر كائن => إنشاء شبكة متدرجةكائن => إنشاء شبكة متدرجة) ، وتحديد أربعة صفوف وعشرة أعمدة (الشكل 25). قم بتنشيط النسخة الثانية من المستطيل وقم بتعيين تعبئة متدرجة لها ، على غرار ما هو موضح في الشكل. 26. قم بتراكب كائن التدرج اللوني أعلى الشبكة ، وقم بتقليل عتامة كائن التدرج اللوني إلى حوالي 80٪ ، وحجم كائن التدرج اللوني إلى حوالي 1 بكسل لمحاكاة تأثير الانتفاخ في النهاية. ثم فوق الأشياء تطبع النقش. في شكلها الأصلي ، دعها تحصل لون أبيض، والتي تتوافق مع الحالة العادية (الشكل 27) ، وبعد ذلك عندما تتغير حالة التمرير ، سيتغير لون النقش ، على سبيل المثال ، إلى اللون الأخضر عندما يتم تحريك علامة الماوس فوقه (الحالة فوق) وإلى اللون الأزرق عند الضغط على زر الماوس (الحالة السفلية).
انتبه إلى اللوحة طبقاتعلى هذه المرحلةلديها طبقة واحدة فقط. قم بعمل نسختين من هذه الطبقة باستخدام الأمر طبقة مكررة(طبقة مكررة) من قائمة اللوحة طبقات، سيكون هناك ثلاث طبقات في اللوحة (الشكل 28). ثم ، في النسخة الأولى من الطبقة ، قم بتغيير لون النقش إلى اللون الأخضر ، وفي الثانية إلى اللون الأزرق (الشكل 29). نتيجة لذلك ، سيتم الحصول على الفراغ الضروري للتمرير.
قم بتصدير الصورة التي تم إنشاؤها إلى تنسيق PSD مع حفظ الطبقات باستخدام الأمر ملف => تصدير(ملف => تصدير) واختيار نموذج ألوان RGB (الشكل 30). افتح ملف PSD الذي تم إنشاؤه في ImageReady (الشكلان 31 و 32). أنشئ إطارات بناءً على الطبقات باختيار الأمر عمل إطارات من طبقات(إنشاء إطارات من الطبقات) من قائمة اللوحة الرسوم المتحركة. ستبدو نافذة الرسوم المتحركة في الشكل. 33. في نفس الوقت في لوحة الانقلابفي البداية ، سيتم إنشاء حالة عادية واحدة.
ثم في النافذة الرسوم المتحركةحدد الإطار المقابل لحالة التمرير ، أثناء وجودك في اللوحة طبقاتيتم تحديد الطبقة تلقائيًا نسخة الطبقة الأولى(الشكل 34). اذهب إلى الباليت الانقلابوانقر على الزر إنشاء حالة التمديد(إنشاء حالة التمديد) شكل. 35 ، مما يؤدي إلى ظهور الدولة على الدولةفي اللوحة الانقلاب(الشكل 36). قم بإنشاء الدولة بنفس الطريقة الدولة السفلية. تنشيط الدولة طبيعيفي اللوحة الانقلابوحذفها في اللوحة الرسوم المتحركةجميع الإطارات باستثناء الإطار الذي يجب أن يتطابق مع الحالة طبيعي. نتيجة لذلك ، لكل حالة تمرير في اللوحة الرسوم المتحركةسيكون هناك إطار واحد فقط (الشكل 37 و 38 و 39).
أرز. 38. عرض الصورة ونافذة الرسوم المتحركة ولوحات الطبقات والقوائم للحالة الفوقية
تحقق من النتيجة بالضغط على الزر معاينة في المستعرض الافتراضي(معاينة المستعرض) على شريط الأدوات وبالانتقال إلى نافذة المتصفح (الشكل 40). بعد ذلك ، احفظ الملف باستخدام الأمر ملف => حفظ محسن(ملف => حفظ مع التحسين) وتحديد الخيار HTML والصور (* .html). نتيجة لذلك ، في هذا المثال ، تم الحصول على ملف Primer4.html وسلسلة من الصور الرسومية في مجلد الصور.
أرز. 40. نافذة المتصفح مع عنصر التمرير
انقلاب SVG
تنسيق SVG الشائع بشكل متزايد (Scalable Vector Graphics قابلة للتطوير رسومات فيكتور) ، الذي تم إنشاؤه على أساس معيار XML ، يسمح لك أيضًا بالحصول على مجموعة متنوعة من العناصر التفاعلية ، ولا سيما عمليات التمديد ، ولكن في الممارسة العملية فقط يتم تنفيذ ذلك بطريقة مختلفة تمامًا. من الجدير بالذكر أن إنشاء انتقالات SVG تفاعلية ، على عكس الكلاسيكية ، عندما يتم إنشاء كود HTML المقابل تلقائيًا بالكامل ، يتطلب معرفة لغة JavaScript وفهمًا للمبادئ الأساسية للبرمجة الموجهة للكائنات.
تم تصميم لوحة خاصة للعمل مع كائنات SVG. تفاعل SVG، والذي يسهل فتحه باستخدام الأمر نافذة => تفاعل SVG(نافذة => تفاعل SVG) شكل. 41.
دعنا نفكر في هذا البديل الخاص بإنشاء تمرير فوقي باستخدام مثال الزر التفاعلي ، والذي سيتغير لون الملصق عليه من الأسود إلى الأزرق عندما يتم تحريك الماوس فوقه ثم يعود إلى اللون الأسود عندما يغادر الماوس المنطقة النشطة.
قم بإنشاء زر مستطيل بحواف مستديرة واختر تعبئة متدرجة مناسبة له ، على سبيل المثال ، كما هو موضح في الشكل. 42. ضبط شفافية الزر في اللوحة الشفافية(الشفافية) في هذا المثال ، قيمة المعلمة التعتيم(التعتيم) مضبوط على 50٪. قم بعمل نسخة من الزر ، وقم بتعبئته باللون الأخضر الداكن (الشكل 43) ، ثم قم بتحويله إلى كائن شبكة باستخدام الأمر كائن => إنشاء شبكة متدرجة(كائن => إنشاء شبكة متدرجة) بتحديد أربعة صفوف وعشرة أعمدة ، وفي القائمة مظهر(عرض) عن طريق تحديد خيار إلى مركز(نحو المركز) وتحديد القيمة تسليط الضوء(تمييز) إلى 100. اخفض عتامة طبقة كائن الشبكة إلى حوالي 40٪ (الشكل 44). ضع كائن الشبكة أعلى كائن التدرج ، وسيبدو الزر مثل ذلك الموضح في الشكل. 45.
أرز. 44. تحويل نسخة من زر إلى كائن شبكة
أكمل الزر بالنقش المقصود واضبط موضعه باستخدام أزرار اللوحة المقابلة محاذاة(تنسيق). ستحتوي الصورة الناتجة على طبقة واحدة مع ثلاثة أشياء متراكبة على بعضها البعض (الشكل 46). ستشير الأحداث المجدولة إلى كائن نصي ، ولتيسير الأمر ، قم بتغيير اسمه إلى نصعن طريق النقر المزدوج فوق الكائن وإدخال اسم جديد. وبالمثل ، قم بتغيير اسم الطبقة من من الطبقة الأولى إلى الطبقة(الشكل 47).
تتضمن معالجة الأحداث استخدام إجراءات JavaScript ، لذلك تحتاج إلى تضمين ملف مع وصف هذه الإجراءات. يطلق عليه Events.js ويتم حفظه على القرص في مجلد Sample Files \ Sample Art \ SVG \ SVG عند التثبيت برنامج Adobeالمصور. لتضمين ملف Events.js ، استخدم الأمر ملفات جافا سكريبت تفاعل SVG(الشكل 48). بعد ذلك ، تحتاج إلى الضغط على الزر يضيف(إضافة) والعثور على الملف المطلوب على القرص الصلب الخاص بك. عندما يظهر اسمه في الميدان URL(الشكل 49) اضغط على الزر منتهي(الخروج).
أرز. 48. اختيار ملفات جافا سكريبت القيادة
بعد ذلك ، يجب تحديد رد الفعل على أحداث الماوس للكائن نص. حدد كائن النص ، في الحقل حدث(حدث) لوحات تفاعل SVGحدد حدثا على الفأرة فوق elemColor (evt، "Text"، "# 3333FF")هذا يعني أنه عندما يكون الماوس فوق الكائن نصسيتغير لونه إلى اللون الأزرق (الشكل 50). لكي يتغير لون النص إلى اللون الأسود بعد مغادرة الماوس للمنطقة النشطة ، يلزمك إنشاء حدث آخر onmouseoutحدده في الحقل حدث(حدث) لوحات تفاعل SVG. ثم في سطر العمل أدخل النص elemColor (evt، "Text"، "# 000000")سيعود هذا إلى اللون الأسود (الشكل 51).
أرز. 51. الشكل النهائي للوحة تفاعل SVG لكائن النص
احفظ التمرير الذي تم إنشاؤه كملف SVG باستخدام الأمر ملف => حفظ باسم(ملف => نوع الملفشكل SVG، ثم قم بتعيين خيارات حفظ ملف SVG كما هو موضح في الشكل. 52. بعد الحفظ ، سيتم الحصول على ملف واحد فقط بامتداد SVG ، وليس ملفين ، كما في حالة التمرير الكلاسيكي ، في هذه الحالة ، تم الحصول على ملف Primer5.svg (مجلد Primer5). ومع ذلك ، لكي يعمل التمرير بالفعل ، يجب عليك أيضًا نسخ ملف Events.js مع وصف إجراءات JavaScript إلى المجلد الذي يحتوي على ملف SVG. بعد ذلك ، يمكنك التحقق من أداء التمرير وستظهر النتيجة كما هو موضح في الشكل. 53.
الرسوم المتحركة SVG
يمكن أيضًا استخدام تنسيق SVG لنقل الرسوم المتحركة. دعنا نحاول إنشاء عنصر رسوم متحركة بسيط (في هذه الحالة ، سيكون معلومات عن الشركة) ، والذي سيظهر على الشاشة عند تحريك الماوس فوق الكائن الرسومي المقابل ويختفي عند إزالة الماوس من العنصر التفاعلي.
لنقم بإنشاء مثل هذه السلسلة تقريبًا من الكائنات الرسومية والنصية ، كما هو موضح في الشكل. 54. أعد تسمية جميع الكائنات التي تم إنشاؤها بطريقة ملائمة عن طريق النقر على اسم الكائن التالي في اللوحة طبقاتوإدخال الاسم المطلوب (الشكل 55). لاحظ أنه تم تمييزه في الشكل. 56 قطعة نص 1 ، نص 2 ، نص 3و المسار 1سيكون مرئيًا دائمًا ، وكل الآخرين فقط عندما تحوم فوق الكائن النص 1.
أرز. 54. العرض الأصلي للصورة
قم بتضمين ملف Events.js مع وصف لإجراءات JavaScript باستخدام الأمر ملفات جافا سكريبت(ملفات JavaScript) من لوحة تفاعل SVGبالضغط على الزر يضيف(إضافة) عن طريق تحديد الملف المطلوب على القرص الصلب والنقر فوق الزر منتهي(الخروج).
تحديد استجابة حدث الماوس لكائن النص 1. حدد الكائن نص، في الميدان حدث(حدث) لوحات تفاعل SVGحدد حدثا على الفأرة فوقوفي السطر أدناه أدخل النص elemShow (evt، "Text4") ؛ elemShow (evt، "Path2"). نتيجة لذلك ، عندما يكون الماوس فوق الكائن النص 1ستصبح الأشياء مرئية النص 4و المسار 2. يرجى ملاحظة أنه في حالة وجوب تنفيذ عدة إجراءات عند وقوع حدث ما ، فيجب تحديدها من خلال علامة "؛". ثم افعل الشيء نفسه للحدث onmouseout، وإدخال النص الخاص به ، مما يعني إخفاء الكائنات (الشكل 57).
احفظ النتيجة كملف SVG باستخدام الأمر ملف => حفظ باسم(ملف => حفظ باسم) ، تحديد اسم الملف ، وتحديد في المجال نوع الملف SVG ، ثم قم بتعيين الخيارات الخاصة بحفظ ملف SVG وفقًا لـ Fig. 58. بعد الحفظ ، سيتم الحصول على ملف Primer6.svg (مجلد Primer6). لا تنس نسخ ملف Events.js إلى المجلد الذي يحتوي على هذا الملف. إذا بعد ذلك قمت بتشغيل coz ملف معين، سترى النتيجة موضحة في الشكل. 59. هذا ما تحتاجه تقريبًا. الشيء الوحيد الذي لم يتم تضمينه في خططنا هو الظهور الأولي للأشياء نص 4 و طريق 2 عند التحميل. للتخلص من هذا القصور ، حدد هذين الكائنين في وقت واحد وقم بعمل إجراء لهما elemHide (evt، "Text4") ؛ إخفاء (evt، "مسار 2")في الحدث تفريغ(الشكل 60). احفظ الملف مرة أخرى وتأكد من أن الكائنات موجودة الآن النص 4و المسار 2مرئي فقط عند تحريك الماوس فوق الكائن النص 1.
الرسوم المتحركة GIF
لا يمكن تصور أي صفحة ويب بدون الرسوم المتحركة على الويب ، بما في ذلك الصور المتحركة المتحركة. تتمثل إحدى طرق إنشائها في استخدام تطبيق Adobe ImageReady ، والذي يسمح لك ، من بين أشياء أخرى ، بإنشاء رسوم متحركة من الطبقات. في هذه الحالة ، يمكن تحضير الصورة متعددة الطبقات نفسها بتنسيق تطبيقات مختلفة، بما في ذلك Adobe Illustrator.
من السهل جدًا إنشاء رسوم متحركة بناءً على عناصر من اللوحة حرف او رمز(الرموز) فتحها الأمر نافذة => الرموز(Window => Symbols) أو من إحدى مكتبات الرموز التي يمكن فتحها باستخدام الأمر نافذة => مكتبات الرموز(نافذة => مكتبات الرموز).
على سبيل المثال ، دعنا نحاول زيادة حجم أي رمز كائن ، يجب تعيين المراحل الرئيسية لعملية زيادة الكائن على طبقات منفصلة. أولاً ، ضع كائنات الرمز واحدة فوق الأخرى ، ثم قم بزيادة حجم كل كائن لاحق ، على سبيل المثال ، كما هو موضح في الشكل. 61. نتيجة لذلك ، في لوحة طبقاتسيتم إنشاء طبقة واحدة مع العديد من الكائنات (الشكل 62). إذا قمت بتصدير هذه الصورة مباشرة إلى تنسيق PSD ، فلن يعمل هذا ، نظرًا لوجود طبقة واحدة فقط ، وبطبيعة الحال ، عند فتح ملف PSD في ImageReady ، سيكون هناك أيضًا طبقة واحدة فقط. لذلك ، يجب عليك أولاً وضع الكائنات في طبقات مختلفة. يمكن القيام بذلك طرق مختلفةأسهل طريقة هي تحديد الطبقة أولاً طبقة 1في لوحة الطبقات واستخدم الأمر الافراج عن طبقة(حرر في طبقات). ستؤدي النتيجة إلى نقل كل كائن إلى طبقته الخاصة ، ولكن سيتم دمجها جميعًا في الطبقة طبقة 1. لذلك ، سيتعين عليك بعد ذلك سحب جميع الطبقات المتداخلة يدويًا إلى أعلى لوحة الطبقات بحيث تكون فوق الطبقة طبقة 1، ثم أصبح طبقة فارغة طبقة 1سهل الإزالة (الشكل 63). قم بتصدير الصورة إلى تنسيق PSD باستخدام الأمر ملف => تصدير(ملف => تصدير) بالإعدادات كما في الشكل. 64.
قم بتحميل ملف PSD الذي تم إنشاؤه في برنامج ImageReady (الشكل 65 و 66). افتح قائمة اللوحة الرسوم المتحركةعمل إطارات من طبقات(إنشاء إطارات من طبقات). نتيجة لذلك ، سيتم إنشاء خمسة إطارات ، يتوافق كل منها مع طبقته ونافذة اللوحة الرسوم المتحركةسيبدو في الشكل. 67.
بعد ذلك ، قم بتعيين مدة كل من الإطارات التي تم إنشاؤها في هذه الحالة ، يتم تعيين مدة جميع الإطارات على 0.2 ثانية. ثم احفظ الرسوم المتحركة المحسّنة باستخدام الأمر ملف => حفظ محسن(ملف => حفظ مع التحسين). قد تشبه النتيجة التي تم الحصول عليها الشكل. 68.
إنه أكثر ملاءمة لاستخدام الوظائف يمزج الحيةبرنامج المصور. يعمل هذا الاستخدام المشترك لـ Illustrator و ImageReady على تسريع عملية إنشاء رسوم متحركة بتنسيق GIF بشكل كبير.
على سبيل المثال ، ارسم كائنين تعسفيين متعددي الألوان ، ثم امزجهم مع المعلمات المناسبة (الشكل 69). من المستحيل استخدام هذا الملف مباشرة لإنشاء رسم متحرك ، حيث أن الصورة موجودة في طبقة واحدة (الشكل 70). لذلك ، ستحتاج أولاً إلى وضع كل عنصر من عناصر كائن المزج في طبقة منفصلة. للقيام بذلك ، في النافذة طبقاتتسليط الضوء على الخط
أرز. 70. الحالة الأولية لنافذة الطبقات
قم بتصدير الملف الذي تم إنشاؤه إلى تنسيق PSD باستخدام الأمر ملف => تصدير(ملف => تصدير). افتح ملف PSD الذي تم إنشاؤه في ImageReady (الشكل 73). يرجى ملاحظة أن جميع الطبقات التي تم إنشاؤها في برنامج Illustrator ستظهر في نافذة الطبقات (الشكل 74) ، وفي النافذة الرسوم المتحركةسيكون هناك إطار واحد فقط.
تنشيط قائمة اللوحة الرسوم المتحركة، بالنقر على السهم الأسود في الزاوية اليمنى العليا من اللوحة ، واختيار الأمر عمل إطارات من طبقات(إنشاء إطارات من طبقات) في النهاية ، في هذا المثال ، سيتم إنشاء خمسة إطارات ، ونافذة اللوحة الرسوم المتحركةسيأخذ الشكل وفقًا للشكل. 75. حدد جميع الإطارات بالضغط على المفتاح يحول، وقم بتعيين مدة إطار مناسبة في هذا المثال ، يتم أخذ نفس الوقت البالغ 0.2 ثانية لكل إطار. ثم احفظ الملف باستخدام أمر التحسين ملف => حفظ محسن(ملف => حفظ مع التحسين) الإعداد في القائمة نوع الملفخيار الصور فقط (* .gif). الرسوم المتحركة سوف تشبه الشكل. 76.
الأمر الأكثر إثارة للاهتمام ليس الحركة ، ولكن تغيير الحجم السلس لكائنات المزج. على سبيل المثال ، يمكنك استخدام انتقال المزج الذي تم إنشاؤه بالفعل. في هذه الحالة ، بعد إنشاء طبقات منفصلة لكل عنصر من عناصر انتقال الدمج ، ضع كل الكائنات فوق بعضها البعض باستخدام الأزرار مركز المحاذاة الأفقية(المحاذاة بالنسبة للمركز الأفقي) و مركز المحاذاة العمودية(محاذاة عمودية إلى المنتصف) محاذاة(الشكل 77).
تصدير الملف الذي تم إنشاؤه إلى تنسيق PSD ( ملف => تصدير File => Export) وافتح ملف PSD الذي تم إنشاؤه في برنامج ImageReady (الشكل 78). إنشاء إطارات رسوم متحركة بناءً على طبقات ( عمل إطارات من طبقاتأنشئ إطارات من طبقات) واختر المدة المناسبة لها (الشكل 79). وبعد ذلك ، لجعل الرسوم المتحركة أكثر فاعلية ، انسخ الإطارات الموجودة ، ولكن بترتيب عكسي بحيث تزيد الصورة أولاً ثم تنقص ، وهكذا في دائرة (الشكل 80). ثم احفظ ملف التحسين ( ملف => حفظ محسنملف => حفظ مع التحسين). تظهر الرسوم المتحركة الناتجة في الشكل. 81.
أرز. 80. حالة نافذة الرسوم المتحركة بعد تكرار الإطارات
أرز. 81. الانتهاء من الرسوم المتحركة
يتم عمل GIF الشفاف في Adobe Illustrator على النحو التالي. انتقل إلى ملف القائمة> حفظ للويب والأجهزة (Alt + Ctrl + Shift + S). في النافذة التي تفتح ، في حقل تنسيق الملف الأمثل ، يجب عليك أولاً الانتقال إلى علامة التبويب حجم الصورة(حجم الصورة). الحقيقة هي أن الصفحة بأكملها تدخل في نافذة التحسين افتراضيًا ، وهذا ليس ضروريًا في العادة. لذلك ، في علامة التبويب حجم الصورة ، قم بإلغاء تحديد خانة الاختيار قصاصة إلى Artboard(قص لملاءمة الصفحة) وانقر فوق الزر "تطبيق".
ثم ، في قائمة اختيار التنسيق ، حدد GIF وحدد خانة الاختيار الشفافية.
بعد ذلك ، سنحدد الألوان التي ستكون شفافة. جميع الألوان الموجودة في الصورة موجودة في علامة التبويب جدول الألوان(مخطط الألوان) ويتم عرضها كمربعات ملونة. حدد أداة من شريط الأدوات على الجانب الأيسر من النافذة قطارة(ماصة).
يمكن تحديد الألوان بطريقتين. أسهل طريقة هي تحديد اللون باستخدام قطارة مباشرة على الصورة - بعد ذلك سيتم تمييز اللون على جدول الألوان بضربة داكنة. حسنًا ، إذا كنت تعرف بالضبط اللون الذي يجب أن يكون شفافًا ، فيمكنك تحديده مباشرة على جدول الألوان بالنقر فوق المربع الملون المقابل. وفي الحالتين الأولى والثانية ، إذا كنت بحاجة إلى تحديد عدة ألوان ، فأنت بحاجة إلى العمل مع الضغط على مفتاح Shift (أو Ctrl). بعد اختيار اللون ، تحتاج إلى إرشاد البرنامج لجعله شفافًا. للقيام بذلك ، انقر فوق الرمز حددت خرائط الألوان إلى "شفاف"(أضف الألوان المحددة إلى الشفافية). في الشكل ، هذا الزر محاط بدائرة ، ويتم ضبط اللون الأحمر على شفاف. ستظهر مساحة شفافة على الصورة ، وسيغير المربع الموجود في جدول الألوان مظهره - وسيصبح جزء منه مثلثًا أبيض. لإلغاء اللون المحدد ، تحتاج إلى تحديده في Color Table ، ثم النقر فوق الألوان المحددة في الخرائط إلى رمز شفاف مرة أخرى.
بضع كلمات حول طريقة تحديد الشفافية. القائمة المنسدلة هي المسؤولة عن ذلك. حدد خوارزمية ثبات الألوان للشفافية، باللغة الروسية - خوارزمية محاكاة الشفافية (الشكل أدناه). هناك أربعة خيارات: لا تذبذب الشفافية - لا توجد خوارزمية ، ثبات شفافية الانتشار - خوارزمية منتشرة ، ثبات شفافية النمط - خوارزمية قائمة على النمط وثبات شفافية الضوضاء - خوارزمية قائمة على الضوضاء. في وضع خوارزمية الانتشار ، يصبح شريط التمرير نشطًا كمية(المبلغ) الذي يسمح لك بتغيير قيمة الانتشار. ما الذي يجب تطبيقه في الممارسة؟ حسب الغرض والصورة. لا أستخدم هذا الخيار وأترك دائمًا الخيار الافتراضي - لا ثقل للشفافية.
اضغط على حفظ - GIF الشفاف جاهز. تم تنفيذ العمل في Adobe Illustrator الإصدار CS4 (الإصدار 14) ، ولكن جميع الإجراءات واختصارات لوحة المفاتيح ذات صلة بالإصدار السابق CS3 (الإصدار 13).
اليوم ليس لدينا ما هو معتاد تماما درس Adobeالمصور. لأننا هذه المرة لن نصنع صورة ثابتة ، بل رسم متحرك حقيقي. تخيل أنه اتضح مساعدة من Adobeيمكن لبرنامج Illustrator أيضًا رسم رسوم متحركة :)
ولا نحتاج إلى شيء من أجل هذا. تنظيم كفء للطبقات وتصدير العمل النهائي إلى تنسيق swf ، حيث يتم تحويل كل طبقة إلى إطار للرسوم المتحركة. في البرنامج التعليمي اليوم ، سنقوم برسم رسوم متحركة للعد التنازلي بأسلوب فيلم رجعي. يجب أن يكون الإخراج فيلم فلاش بنفس العد التنازلي.
أول شيء يجب فعله هو رسم كل شيء العناصر الضروريةللرسوم المتحركة في المستقبل. للقيام بذلك ، قمت بعمل موضعين لإطار الفيلم في مستند منفصل ، دائرة للرجوع إليها ، والتي تم تقطيعها إلى قطاعات منفصلة ، ونسيج وخدش رأسي لإضافة تأثير العصور القديمة ، وكذلك جميع الأرقام والنقوش.
عندما تكون جميع أجزاء الكارتون جاهزة ، يمكنك البدء في إنشاء الرسوم المتحركة نفسها. للراحة ، من الأفضل القيام بذلك في مستند جديد. في هذه الحالة ، ستلعب الطبقات دور إطارات الرسوم المتحركة. وفي الطبقة الأولى ، تحتاج فقط إلى نسخ إطار الفيلم. ضعه في منتصف منطقة العمل.
الآن قم بإنشاء طبقة ثانية وانسخ إطار الفيلم فيها ، حيث يتم عمل الثقوب الموجودة على الحواف مع التحول. كما يجب أن تتمحور.
من هاتين الطبقتين ، يمكنك بالفعل الحصول على الرسوم المتحركة لفيلم متحرك. لكن في وقت لاحق سنحتاج إلى المزيد من الطبقات. لذا حدد الطبقتين الأوليين ، وانتقل إلى خيارات اللوحة وقم بعمل نسخة من الطبقات.
بطريقة مماثلة ، نحتاج إلى تجميع 12 طبقة بإطارات أفلام تحدد حركتها.
الآن لدينا مجموعة كاملة من الطبقات وكلها مرئية. بمعنى أن الطبقات العليا تحجب الطبقات السفلية ، وهي ليست ملائمة للعمل. لذلك ، يمكنك إيقاف تشغيل بعض الطبقات من خلال النقر على أيقونة العين الموجودة على يسار اسم الطبقة. لإيقاف تشغيل كل الطبقات أو تشغيلها مرة واحدة ، اضغط باستمرار على مفتاح Alt أثناء النقر على أيقونة العين. عند تشغيل الطبقات وإيقافها ، يمكنك أن ترى بالضبط ما هو موجود في إطار معين من الرسوم المتحركة المستقبلية. والآن ، لكي نضيف اهتزازًا طفيفًا إلى حركة الفيلم ، نحتاج إلى تحريك الإطارات المستلمة قليلاً في اتجاهات مختلفة. للقيام بذلك ، قم بتشغيل الطبقة التي ستعمل بها فقط هذه اللحظة، ثم انقل الإطار بضع بكسل إلى أي من الجانبين.
عندما تنتهي من جميع الطبقات وتضيف تغييرًا بسيطًا ، يمكنك البدء في إنشاء الرسوم المتحركة للدائرة المتحركة. للقيام بذلك ، انسخ الدائرة التي تتكون من قطاعات من مستند أجزاء الرسوم المتحركة وضعها على الطبقة الأولى أعلى إطار الفيلم.
إذا قمت بإزالة التحديد من الدائرة ، فسيبدو مثل كل واحد. هذا هو بالضبط ما نحتاج إليه.
ولكن نظرًا لأنها تتكون من قطاعات منفصلة ، فمن الممكن ، عن طريق تغيير لونها ، إنشاء رسوم متحركة بسرعة وسهولة. للقيام بذلك ، انسخ هذه الدائرة إلى الطبقة الثانية واجعل القطاع الأول أفتح. تتذكر أن الفيلم يهتز أثناء الحركة ، لذلك ليس من الضروري وضع الدائرة بالضبط في وسط الإطار. ضعه على العين.
وبالمثل ، تحتاج إلى نسخ الدائرة إلى كل طبقة تالية ، أثناء الرسم بلون أفتح قطاعًا واحدًا أكثر من المرة السابقة. معًا ، تشكل هذه الطبقات الـ 12 رسمًا متحركًا لحركة الفيلم بدائرة تعبئة.
بعد ذلك ، نحتاج إلى إضافة نسيج إلى طبقاتنا. قم بتشغيل الطبقة الأولى وانسخ النسيج من هناك. مصدر الملفمع قطع الغيار.
ثم قم بتشغيل الطبقات التالية بدورها وانسخ نفس النسيج هناك. لجعلها تبدو مختلفة في كل إطار ، ما عليك سوى تدويرها 90 درجة. كما قد تكون خمنت ، نحتاج إلى إضافة نسيج إلى جميع الإطارات الـ 12.
إذا كنت قد سئمت بالفعل من النسخ ، فيمكنني إرضاءك - لم يتبق سوى القليل جدًا. الجزء الصعب قد انتهى. يبقى لإضافة خدوش عمودية ، وكل شيء تقريبًا. للقيام بذلك ، مرة أخرى ، انسخ الخدش الأصلي وضعه في مكان عشوائي في عدة طبقات. في حالتي ، تظهر الخدوش في طبقتين فقط.
الآن بعد أن أصبحت الدورة الرئيسية للرسوم المتحركة للفيلم جاهزة ، يبقى إضافة الأرقام. نظرًا لأننا نحسب من 3 إلى 1 بالإضافة إلى كلمة Go !!! ، فنحن بحاجة إلى المزيد من الطبقات. ليس 12 ، ولكن ما يصل إلى 48. للقيام بذلك ، تحتاج إلى عمل ثلاث نسخ أخرى من الطبقات الجاهزة مع فيلم الرسوم المتحركة.
وبعد ذلك كل شيء بسيط. قم بتشغيل الطبقة الأولى ووضع الرقم ثلاثة هناك.
ثم تحتاج إلى نسخ هذا الشكل إلى الطبقات التالية حتى تنتهي حركة الدائرة. عندما تصل إلى النسخة التالية من الطبقات ، حيث سيتم ملء الدائرة مرة أخرى بالكامل ، فأنت بحاجة إلى وضع الرقم الثاني. بنفس الطريقة ، انسخ الرقم واحد في الطبقات المرغوبة. وعندما تصل إلى الطبقات النهائية للتسمية Go !!! ، ما عليك سوى حذف الدائرة قبل نسخ الملصق على الطبقة المرغوبة.
هذا كل شيء مع الرسوم المتحركة. الشيء الرئيسي هنا هو عدم الخلط. يمكنك إعطاء الطبقات بعض الأسماء المريحة ، لكنني كنت كسولًا إلى حد ما :) ومع ذلك ، عند الانتهاء ، تأكد من إعادة تشغيل جميع الطبقات من خلال النقر على أيقونة العين.
في نافذة إعدادات التصدير ، تأكد من تعيين Export As: AI Layers إلى SWF Frames. هذا هو الخيار الذي يحول طبقات Illustrator إلى إطارات رسوم متحركة. بعد ذلك ، انقر فوق الزر "خيارات متقدمة".
سوف تفتح إعدادات إضافية. هنا تحتاج إلى ضبط معدل الإطارات. لدي 12 لقطة في الثانية. يعد مربع الاختيار Looping مسؤولاً عن تدوير الرسوم المتحركة. بفضلها ، سيتم تشغيل الفيديو في دائرة. وخيار Layer Order: Bottom Up يعرض طبقات الرسام من أسفل إلى أعلى في اللوحة. هذه هي بالضبط الطريقة التي صنعنا بها الرسوم المتحركة الخاصة بنا.
نتيجة لذلك ، نحصل على فيلم فلاش مع الرسوم المتحركة لدينا.
الآن ترى أن إنشاء رسوم متحركة بسيطة في Adobe Illustrator ليس بالأمر الصعب كما يبدو للوهلة الأولى.
ولكن لإنشاء مقاطع فيديو طويلة أو تطبيقات تفاعلية ، لا يزال من الأفضل استخدامها برنامج أدوب فلاشأو غيرها من برامج تحرير الفلاش. على سبيل المثال ، لقد صنعت هذه القطة في Macromedia Flash القديم الذي حفرته في العمل.
في الآونة الأخيرة أيضًا ، يتم استخدام HTML5 و CSS3 بشكل متزايد لإنشاء الرسوم المتحركة. كود معينأيد المتصفحات الحديثةولا يتطلب استخدام مشغل الفلاش.
رومان الملقب دكاسكاسخاصة للمدونة ملاحظات المصور microstock
اشترك في النشرة الإخبارية لدينا حتى لا يفوتك أي جديد:
تحميل...