المحتوى عن 'التحريك'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • مقالات عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML5
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات عامّة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • مقالات عامّة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 7 نتائج

  1. في هذا الجزء، سوف تتعلّم كيف تستخدم مفاتيح التأطير في تحريك المجسمات على بلندر بإضافة ملف صوتي للمشروع الخاص بك ومزامنة حركات الروبوت مع الملف الصوتي. من لوحة الخصائص Properties أسفل Render، اضبط Frame Rate إلى 29.97. من قائمة Timeline، اختر وحوّل إلى Video Sequence Editor. من قائمة Video Sequence Editor، اضغط Add وأضف الملف الصوتي. هذا سيقودك لفتح ملف صوتي. اضغط (الملف الصوتي). ضع المؤشر عند نهاية الشريط الصوتي. ثمّ حوّل مرة أخرى من Video Sequence Editor إلى Timeline. غيّر طول التحريك ليتناسب مع موضع المؤشر عند رقم Frame (66). اضغط Shift + LEFT لتحريك المؤشر إلى بداية الخط الزمني Timeline. من Timeline اذهب إلى قائمة Playback وضع علامة على Audio Scrubbing وAV Sync. اضغط ALT + A للتشغيل. مرحبًا بالعالم (Hello World). مفتاح التأطير key frame للتحريك في بلندر اضغط RMB لتحديد جسم الروبوت robot mesh. في لوحة الخصائص Properties، اختر Object Data. اضغط RIGHT حتى تسمع البداية الأولى للصوت (11). ثمّ عُد للخلف فريم واحد (10). تحت Shape Keys، اختر Mouth. ضع مؤشر الماوس فوق شريط Value واضغط I لإدراج (مفتاح تأطير) key frame. اضغط RIGHT حتى تجد نهاية أول مقطع لفظي (“hell” 17) و ضع مؤشر الماوس فوق حقل Value واضغط I، ثمّ انتقل للخلف لإيجاد ذروة المقطع اللفظي لـ ( hell" (13". اضبط قيمة Value إلى 1، واضغط I لإدراج key frame. اضغط UP للانتقال إلى آخر مفتاح التأطير key frame، ثمّ اضغط RIGHT حتى إيجاد نهاية لفظ " hello" (39). اضغط I لإدراج key frame. اضغط LEFT لإيجاد لفْظَة الحرف “o” (30)، اضبط قيمة Value إلى 1 واضغط I لإدراج key frame. اضغط UP للانتقال إلى آخر مفتاح التأطير key frame، ثمّ اضغط RIGHT حتى إيجاد نهاية لفظ " World" (52). اضغط I لإدراج key frame. اضغط LEFT لإيجاد ذروة المقطع اللفظي “World” (45)، اضبط قيمة Value إلى 1 واضغط I لإدراج key frame. اضغط Shift + LEFT لتحريك المؤشر إلى بداية الخط الزمني Timeline. اضغط ALT + A للتشغيل. (HelloWorld)!. اضغط ALT + A لعمل توقف. حوّل العرض إلى الرّؤية الرباعية Quad View باستخدام CTRL + ALT + Q. إذا لم تكن عند بداية الشريط الزمني Timeline، اضغط SHIFT + LEFT للوصول هناك. أذرع الروبوت متيبسة قليلًا. لبدأ عملية التحريك (animation)، نحتاج لضبط الأذرع في وضع استرخاء. اضغط RMB على " HandIK.L"، ثمّ اضغط G لالتقاطه وتحريكه قليلا. استخدم أوضاع رؤية مختلفة كما تحتاج لضبطها كما هي بالأعلى. ثمّ اضغط I واختر Location. بدلًا من ذلك، يمكنك وضع المؤشر على الموقع في لوحة Transform، وضغط I. اضغط RMB على "HandIK.R" واضغط G لالتقاطه وقم بتحريك مكانه. اضغط I واختر Location. حرّك الشريط الزمني إلى 30. واضغط G لالتقاطه وقم بتحريك الذراع للأعلى. اضغط I واختر Location. اضغط RMB على " HandIK.L". اضغط I واختر Location، ثمّ قم بالتحرك إلى فريم frame رقم 50 في الشريط الزمني. اضغط G للالتقاط وقم بتحريك الذراع للأعلى. اضغط I واختر Location. اضغط Shift + LEFT لتحريك المؤشر إلى بداية الخط الزمني Timeline. اضغط ALT + A للتشغيل. مرحبًا بالعالم (Hello World)!. ترجمة -وبتصرّف- للمقال How to Model and Animate a Robot: Key Frame a Blender Animation لصاحبه Jared
  2. لنبدأ بتحريك الروبوت الخاص بنا. سنقوم بذلك عن طريق العظام. نعم، العظام. والعظام هي التي تشكل المحرّكات Armatures. في بلندر، Rigging هي عمليّة ربط المحركات Armatures بعنصر(جسم) mesh لتمكين حركته. في هذا الدرس، سوف تقوم بعمل Rigging لمحركات بلندر لتحريك الروبوت الخاص بك. عمل Rigging لمحركات بلندر Blender Armatures قبل أن ننشئ العظمة الأولى، تأكد من وجود المؤشر ثلاثي الأبعاد في منتصف العرض ثلاثي الأبعاد 3D View. اضغط SHIFT + S واختر Cursor to Center. الآن اضغط Z للعرض wireframe وأضف عظمة باستخدام SHIFT + A واختر Armature، Single Bone. اضغط TAB واختر تبويب bone من قائمة الخصائص Properties. اعد تسمية Bone إلى “Spine”. اضغط TAB لتعديل الوضع. استخدم RMB لتحديد قاع " Spine". اضغط G للالتقاط وZ لتحريكه على محور Z فقط، ثمّ ادخل -1، واضغط ENTER. الآن حدّد أعلى، أو رأس “Spine”. التقط بـ G، وقيد الحركة بـ Z، وحرّك للأسفل بمقدار -.35، ثمّ ENTER. بالاحتفاظ بأعلى " Spine" محددًا، اضغط E لاستخراج عظمة جديدة، وZ لتقييدها على محور Z، ثمّ ادخل 1.35 واضغط ENTER. أعد تسمية العظمة الجديدة إلى “Neck”. حدّد أعلى “Spine” مرة أخرى. اضغط E لاستخراج عظمة جديدة وX لتقييدها على محور X. ادخل .9، واضغط ENTER. اعد تسمية هذه العظمة إلى “Shoulder.L”. حدّد رأس " Shoulder.L" واضغط E، X ثمّ ادخل 2 متبوعةً بـ ENTER، لعمل استخراج بوحدتيّ بلندر على محورX. أعد تسمية هذه العظمة إلى “Arm”. حدد عظمة “Arm” واضغط على Subdivide ثلاث مرّات من قائمة Tools. هذا سيقسّم “Arm” إلى ثمانية عظام. لا تلقى بالًا لتسميتهم. اختر العظمة الأخيرة، وأعد تسميتها إلى “Hand.L”. قرّب المشهد باستخدام عجلة الفأرة إن احتجت واختر رأس “Hand.L”. استخرج عظمة جديدة بضغط E، X وادخل .5، ثمّ ENTER. أعد تسمية العظمة الجديدة إلى “HandIK.L”. حدّد “HandIK.L” واذهب إلى لوحة الخصائص Properties، تحت تبويب Bone، تحت Relations، اضغط على علامة “X” بجانب اسمها في حقل Parent. إلتقط " HandIK.L" بضغط G وحرّكه على محور X بضغط X وإدخال .25، ثمّ اضغط ENTER. اضغط Tab لتعديل الوضع ومن Object Interaction Toggle، اختر Pose Mode. حدّد “Hand.L” ومن قائمة الخصائص Properties، اختر تبويب Bone Constraints. اضغط على زر Add Bone Constraint واختر Add Tracking : Inverse Kinematics. من لوحة IK، في حقل Target، اختر Armature وفي حقل Bone اختر HandIK.L. اضبط Chain Length إلى 8 (لأننا صنعنا ثمانية عظام عندما قسمنا “Arm” ونحن نحتاج سلسلة لربطهم مرة أخرى بالجسد). اختر HandIK.L وقم بالتقاطه بضغط G لتحريكه وترى كيف يعمل ذلك غالبًا. اضغط ALT + G لإعادة ضبط موضعه. في قائمة الخصائص، اختر تبويب Armature Object Data. تحت Display اختر B-Bone. اضغط A حتى يُحدد المحرك Armature بالكامل، ثمّ اضغط CTRL + ALT +S، لتغيير مقياس العظام وادخل .5، ثمّ اضغط ENTER. حدّد " HandIK.L" وقم بتكبير مقياسها باستخدام CTRL + ALT + S وادخل 4، ثمّ اضغط ENTER. اضغط Tab لضبط الوضع. اضغط SHIFT + S واختر Cursor to Center. تأكد من أن خيار Pivot Point مضبوط على 3D Cursor. بضغط SHIFT مع الاستمرار، حدّد Shoulder، Arms، Hand وIK bone. لا تحدّد Spine أو Neck. اضغط SHIFT + D لعمل نسخة طبق الأصل، ثمّ اضغط ENTER. الآن سنقوم باستدعاء النسخة طبق الأصل arm بتعديل مقياسها إلى الخلف 100% على محور X، اضغط S، X وادخل -1 واضغط ENTER. تحت Armature، اختر Flip Names. ومن Object Mode، اختر عنصر Robot mesh. وبالضغط مع الاستمرار على SHIFT، اختر أي عظمة. اضغط CTRL + P واختر Armature Deform مع Automatic Weights. إلتقط " HandIKs" وقم بتحريكهم لترى كيف يعمل كل شيء تقريبًا. ثمّ اضغط ALT + G لإعادتهم إلى أوضاعهم السابقة. ترجمة -وبتصرّف- للمقال How to Model and Animate a Robot: Rigging Blender Armatures لصاحبه Jared
  3. سنتابع في هذا الدرس عملية تصميم جسم الروبوت عبر تنسيق التناظر في الجسم كاملًا ومن ثم تصميم الفم.... الآن سنقوم بقطع العنصر من المنتصف، اضغط B للوصول إلى the Box tool. اضغط مع الاستمرار على LMB لرسم مكعّب حول النصف الأيسر من الروبوت. اضغط X واحذف الأسطح. هدفنا هو الحصول على سطح ناعم أسفل منتصف العنصر the mesh. ربما تحتاج إلى تنظيف الأسطح المتبقية. استخدم B (Box tool) لتحديدهم وX لحذفهم. اضغط Tab للوصول إلى Object mode. في تبويب Properties، اختر Modifier. اضغط على زر Add Modifier واختر Mirror من القائمة. ثمّ اضغط Apply. اضغط Tab لتعديل الوضع edit mode. اضغط SHIFT + S واختر Cursor to Center. الآن لنضيف فم. اضغط Z للعرض wireframe. ثمّ أضف مكعّب باستخدام SHIFT + A. اضغط S لتعديل مقياس المكعّب، وادخل .6، متبوعًا بـ ENTER. اضغط S لتعديل المقياس مرة أخرى، هذه المرّة على محور Z، اضغط Z وادخل .1، ثمّ اضغط ENTER. قم بتحريك المكعّب بضغط G، Z وكتابة 1.5، ثمّ اضغط ENTER. اضغط NUM3 للتحويل إلى الرّؤية الجانبية، ثمّ اضغط S، Y واكتب .5 ثمّ ENTER، لتعديل مقياس المكعّب على محور Y. اضغط G لإمساك العنصر، وY لتقييد الحركة، وادخل -.25 متبوعًا بـ ENTER. اضغط SHIFT + H لإخفاء أي شيء آخر. اضغط Z للتحويل إلى العرض المصمت و NUM7 للتحويل إلى الرّؤية العلوية. حدّد السطح العلوي. اضغط E لبثق سطح جديد، ثمّ ENTER. صغّر مقياس السطح بضغط S، وكتابة .9، ثمّ اضغط ENTER. وقم بتصغيره مرة أخرى على محور Y بضغط S وY وكتابة .9، ثمّ ENTER. قم بالتحويل إلى الرؤية الجانبية بضغط NUM3. وعد إلى العرض wireframe بـ Z. قم ببثق سطح جديد بضغط E ثمّ ENTER. قم بإمساك السطح الجديد وحرّكه للأسفل على محور Z من خلال ضغط G، Z وكتابة -.07. اضغط ALT + H لإظهار الأسطح المخفية واضغط A لإلغاء تحديد أي شيء. اضغط NUM1 للتحويل إلى الرّؤية الأمامية. الآن، باستخدام L، حدّد الرأس، العينين والفم، لكن لا تحدد الرقبة. اضغط NUM3 للعودة إلى الرّؤية الجانبية. حرّك الرأس إلى الأمام قليلًا بإمساكه بـ G، وتقييد حركته بـ Y، وادخل -.25، ثمّ اضغط ENTER. اضغط Tab لتعديل وضع العنصر Object mode وأعد كتابة اسم العنصر the mesh من Cylinder إلى Robot. اضغط Z. مرحبًا بالعالم! تأّكد من حفظ ملف العمل الذي قمت به باستخدام CTRL + S. في الدرس التالي، سوف نضيف الألوان وبعض الحركة إلى الروبوت الخاص بنا. ترجمة – وبتصرّف – للمقال Beginner Blender Tutorial: How to Model & Animate a Robot لصاحبه Jared
  4. سنتابع في هذا الدرس ما بدأناه في الدرس الماضي من تصميم ونمذجة أجزاء جسم الروبوت وسنبدأ بالعين... أضف أسطوانة باستخدام SHIFT + A. اضغط R ثم X لعمل تدوير على محور X وادخل 90 للتدوير بمقدار 90 درجة. ادخل ENTER للتأكيد. اضغط S لتصغير المقياس Scale وادخل .25، ثم اضغط ENTER. اضغط G للإمساك Grab وZ تقييد الحركة على محور Z وادخل 2، ثم اضغط ENTER. اضغط G للإمساك Grab وY لتقييد الحركة على محور Y وادخل -.7، ثم اضغط ENTER. اضغط NUM1 للتحويل إلى الرّؤية الأمامية، ثم G، X، .325 واضغط ENTER. اضغط Z للعودة إلى العرض المصمت solid view، وحدّد السطح الأمامي للأسطوانة. قرّب المشهد إن احتجت، بواسطة عجلة الفأرة. ثم اضغط E لعمل بثق ثمّ ENTER. صغّر مقياس السطح الجديد بضغط S وادخل .75، واضغط ENTER للتأكيد. اضغط Z للعرض بالإطارات الشبكية wireframe و NUM3 للتحويل إلى العرض المصمت solid view. اضغط E لبثق سطح جديد، ثم G للإمساك به، وY لتقييد الحركة على محور Y وادخل .02، ثم اضغط ENTER. حوّل العرض إلى الرّؤية الأمامية بضغط NUM1، وعُد إلى العرض المصمت من Z. أنشئ قَطع حلقي loop cut عموديًا حول الرأس باستخدام CTRL + R. انقر LMB أو اضغط ENTER للتأكيد. هذا الرأس. الآن لنقُم بربطه في الجسم. اضغط Z للعودة إلى العرض wireframe، ثمّ أضف أسطوانة جديدة باستخدام SHIFT + A. صغّر مقياس الأسطوانة على محوريّ X وY بضغط S و * SHIFT + Z*لاستبعاد محور Z. ادخل .15،ثمّ اضغط ENTER. حرّك الأسطوانة للأعلى بمسكها من G، اضغط Z وأدخل 1. ثمّ اضغط ENTER. بعدها أنشئ سلسلة من القَطع الحلقي loop cut باستخدام CTRL + R. تأكّد من وجود مؤشرك فوق جزء الرقبة والخط البنفسجي أفقي، ثمّ ادخل 32 واضغط ENTER مرتين. اضغط Z للعرض المصمت. بينما تضغط على ALT + SHIFT، حدّد حافة عمودية باستخدام RMB. تحت قائمة الاختيار Select menu في لوحة العرض 3D View، اختر Checker Deselect. بينما تضغط على ALT + SHIFT، حدّد حافة أفقية باستخدام RMB. تحت قائمة الاختيار Select menu مرة أخرى، اخترEdge Ring . اضغط CTRL + TAB واختر أيّ سطح. قم ببثق جميع الأسطح بـ E واضغط ENTER. اضغط S لتغيير مقياس الأسطح المحدّدة واضغط SHIFT + Z لتقييد ذلك على محوريّ X وY فقط، ثمّ ادخل 1.1 متبوعًا بـ ENTER. بوضع مؤشرك على جزء الرقبة، اضغط L لتحديد الأسطوانة بالكامل. واضغط SHIFT + H لإخفاء كل شيء آخر. اضغط مع الاستمرار على عجلة الفأرة وقم بالتحرك في لوحة العرض 3D View لتغيير منظور الرّؤية. حدّد السطح العلوي والسفلي للرقبة (اضغط مع الاستمرار على SHIFT لتحديد أكثر من سطح). واضغط X لحذف الأسطح المختارة. اضغط NUM1 للعودة إلى الرّؤية الأمامية و ALT + H لإظهار الأسطح المخفية. الآن لننتقل إلى الذراعين. حدّد سطح على الرقبة، واضغط L لتحديد الرقبة كلها مرة أخرى. قم بالتبديل إلى wireframe view بضغط Z. واصنع نسخة مكرّرة من الرقبة باستخدام SHIFT + D. اضغط ENTER أو LMB للتأكيد. قم بتدوير الأسطوانة الجديدة على محور Y بضغط R ثمّ Y وكتابة 90، بعدها اضغط ENTER. اضغط S لتغيير مقياس الأسطوانة الجديدة و SHIFT + X لاستبعاد محور X من العملية، ثمّ اكتب .75، واضغط ENTER للتأكيد. أمسك (التقط) الذراع بضغط G، وحرّكه على محور X، بضغط X وكتابة 1.75، ثمّ ENTER. حرّك الذراع للأسفل بضغط G، Z وادخل -.35، ثمّ ENTER. اضغط SHIFT + S للوصول إلى Cursor menu واختر Cursor to selected. أضف أسطوانة أخرى بضغط SHIFT + A. قم بتدويرها 90 درجة على محور Y، بضغط R، Y، 90 ثمّ ENTER. بعدها قم بتصغير مقياسها، بضغط S، .15 ثمّ ENTER. قم بتحريكها إلى نهاية الذراع، بضغط G، X، .1، ثمّ ENTER. اضغط A لإلغاء تحديد الأسطوانة. سنتابع في الدرس القادم عملية تنسيق التناظر في جسم الروبوت ومن ثم سنصمم الفم... ترجمة – وبتصرّف – للمقال Beginner Blender Tutorial: How to Model & Animate a Robot لصاحبه Jared
  5. أفضل طريقة لتعلّم بلندر هي بالمباشرة في العمل على مشروع. في هذه السلسلة من دروس بلندر للمبتدئين، سنقوم بتصميم وتحريك روبوت، إنشاء مشهد بسيط وإخراج فيديو نهائي. وهذا هو الروبوت، المشهد والتّحريك الذي ستقوم بإنشائه في هذه السلسلة: ولِنبدأ. كيف تصمم وتحرّك روبوت لتستخدم بلندر، ستحتاج إلى لوحة مفاتيح بها لوحة رقمية Numeric Pad وفأرة بها ثلاثة أزرار مع عجلة التمرير. إذا لم يكن لديك بالفعل، حمّل https://www.blender.org/. هذا الدرس تمّ إعداده باستخدام نسخة 2.77، لكن ستكون بخير مع أحدث إصدار. بعد أن تقوم بتشغيل بلندر، سترى الإعدادات الافتراضية بالأسفل. قد تخيفك الواجهة قليلًا في البداية، لكن لا تقلق، سيبدو لكل شيء معنى في النهاية. اللوحة الرئيسية هي لوحة العرض ثلاثي الأبعاد 3D View. في الأسفل الشريط الزمني Timeline. على اليمين يوجد Outliner (قائمة تُنّظم البيانات) والخصائص Properties. بقدر الإمكان، سأعلمك اختصارات لوحة المفاتيح، بدلًا من اختيار الأوامر من القوائم. لتصبح أفضل وأسرع على بلندر، ستحتاج إلى معرفة كافة الاختصارات، لذلك لماذا لا نبدأ الآن؟ في هذا الدرس، أوامر الفأرة ولوحة المفاتيح ستظهر بالخط العريض. الاختصارات NUM1، NUM2، NUM3، إلى آخره. تشير إلى المفاتيح في اللوحة الرقمية Numeric Pad. LMB وRMB تشير إلى زريّ الفأرة الأيمن والأيسر. بإيجاز LMB(الأيسر) يستخدم للضغط على الأزرار وRMB(الأيمن) يستخدم لتحديد العناصر. سيبدو ذلك واضحًا لاحقًا. بوجود مؤشرك على لوحة العرض 3D، اضغط على N لفتح تبويب Transform. هذا يوفّر لك المعلومات ويسمح لك بإدخال القيم لــ الموضعPosition ، الدوران Rotation والمقياس Scale للعناصر في مشهدك. سوف نستخدمه كثيرًا لاحقًا. الآن اضغط NUM1 للتحويل إلى الرّؤية الأمامية front view وNUM5 للتحويل إلى المنظورOrthographic Perspective. هل ترى كيف تم تمييز المكعب بإطار برتقالي؟ هذا يعني بأن ذلك العنصر محّدد حاليًا. اضغط X لحذف المكعب. قائمة منبثقة سوف تسألك للتأكيد. انقر علىLMB أو اضغط ENTER. فلنبدأ ببناء روبوتنا. اضغط SHIFT+A للوصول إلى قائمة الإضافة Add menu. من خلال Mesh، اختر Cylinder. استخدم عجلة الفأرة لعمل تكبير واضغط Tab للدخول إلى Edit Mode. في Edit Mode يمكنك مشاهدة النقاط والخطوط التي تشكّل الأسطوانة Cylinder مميّزة بالبرتقالي. هذه النقاط والخطوط تسمى vertices و edges، والعناصر ثلاثية الأبعاد المشكّلة من vertices و edgesتسمى meshes. بينما تضع المؤشر على الأسطوانة، اضغط CTRL+R للوصول إلى Loop Cut و Slide tool. سترى خط بنفسجي يظهر حول منتصف الأسطوانة اضغط 2 لإنشاء حلقتين loops، ثم اضغط ENTER مرتين، أولى لتأكيد الحلقتين وثانية لتأكيد الموضع (المكان) اضغط CTRL + TAB لفتح قائمة Mesh Select Mode. اختر Edge. ALT + SHIFT + RMB لاختيار الحلقة السفلية. اضغط S لتعديل المقياس Scale واكتب 1.1، ثم اضغط ENTER. اختر حافة edge على الحلقة العلويّة واضغط ALT + SHIFT + RMB لتحديد كافة حواف الحلقة. مع الاحتفاظ بحافة الحلقة محددة، اضغط G (Grab) للإمساك بها (التقاطها)، وZ لتحريكها على محور Z فقط واكتب .5، اضغط ENTER. CTRL + TAB واختر Face. ALT + SHIFT + RMB لتحديد الحلقة العلوية للأسطح faces. اضغط S لـ Scale وادخل .9، ثم اضغط ENTER للتّأكيد. اضغط NUM7 للتحويل إلى الرّؤية العلويّة top view و RMBلاختيار السطح الدائري. اضغط E لعمل “بثق” أو “استخراج” Extrude، ثم ENTER. ذلك سينشئ أسطح (أوجه) جديدة في أعلى السطح القديم. اضغط S لـ Scale وادخل .5، ثم اضغط ENTER للتّأكيد. اضغط NUM1 للتحويل إلى الرّؤية الأمامية. بعدها اضغط E لبثق extrude سطح جديد، وENTERللتأكيد. اضغط G للإمساك Grab، وZ لتقييد الحركة إلى محور Z وادخل .2، ثم اضغط ENTER. حوّل إلى الرّؤية العلويّة من خلال NUM7. اضغط K للوصول إلى أداة السكين Knife tool. اقطع الدائرة في المنتصف بوضع المؤشر على “النقطة العلوية”. اضغط LMB لبدء القطع، ثم حرك المؤشر إلى “النقطة السّفلية”. اضغط LMB لضبط موضع نقطة أخرى، ثم اضغط ENTER لإنهاء عملية القطع. اضغط NUM1 لعرض الرّؤية الأمامية، ثم اضغط NUM2 ست مرّات لتدوير العرض إلى القاع the bottom. حدّد السطح السّفلي. باستخدام أداة السكين Knife tool مرة أخرى، (بضغط K)، اقطع الدائرة من المنتصف (كما سبق)، اضغط ENTER لإنهاء عملية القطع. ذلك كان الجسم، الآن لنضيف الرأس. اضغط NUM1 للرجوع إلى الرّؤية الأمامية، ثم اضغط Z للعرض بالإطارات الشبكية wireframe. أضف مكعّب بواسطة SHIFT + A. قم بتصغير المقياس Scale بقيمة .8، من خلال S. اضغط ENTER للتأكيد. اضغط G للإمساك Grab (تقريبًا كتبت Grace بالخطأ في المقال الأصلي)، وZ لتقييد الحركة إلى محور Z وادخل 2، لتحريكه “وحدتيّ بلندر”. ثم اضغط ENTER للتأكيد. عدّل مقياس Scale المكعب على محور Z بالضغط على S، ثم Z وادخل .6، متبوعًا بـ ENTER. اضغط Z للعودة إلى العرض المصمت solid view. ثم حدّد السطح الأمامي للمكعّب. اضغط E لبثق Extrude سطح جديد وصغّر مقياسه scale بـ S وادخل .8، متبوعًا بـ ENTER. اضغط NUM3 للتحويل إلى الرّؤية الجانبية واضغط E مرّة أخرى لبثق سطح جديد، ثمّ G لإمساكه، وY لتقيّيد حركته على محور Y ثم ادخل .1، متبوعًا بـ ENTER للتأكيد. سنتابع في الدرس القادم تصميم ونمذجة العين والرقبة والذراع... ترجمة – وبتصرّف – للمقال Beginner Blender Tutorial: How to Model & Animate a Robot لصاحبه Jared
  6. أساسيات angularjs

    إنّ هدف الوحدات عمومًا هو توزيع المهام عن طريق تعريف توابع الواجهة البرمجية (API) والحدّ من رؤية السلوك (أجسام التوابع) والبيانات (العناصر والمتغيّرات). معظم المنصّات البرمجيّة تتضمّن دعمًا داخليًّا للوحدات، حتّى أصبح استخدامها أمرًا مسلّمًا به. ولكنّ JavaScript المستخدمة من طرف العميل لا تستخدم الوحدات حاليًّا، وتؤدي إلى احتدام النقاشات المليئة بين مؤيّد ومعارض للحلّ المشهور (الإضافات add-ons) مثل CommonJS و تعريف الوحدة غير المتزامن (AMD). أبقِ في ذهنك عندما تقوم بمقارنة الحلول المطروحة، أنّ نظام الوحدات في Angular لا يقوم بتحميل الوحدة. فهو لا يقوم بتحميل الشيفرة المصدرية من ملفّاتٍ أو من الإنترنت. فالحلّ الذي تقدّمه Angular هو نظام الوحدات المدمج فيها، والذي يرتبط ارتباطًا وثيقًا بنظام حقن التابعية المدمج أيضًا في Angular. معًا، يكوّن هذان النّظامان جزءًا كبيرًا من البنية التّحتيّة لـAngular. ولكن هل نحن بحاجةٍ إليها حقًّا؟ صحيحٌ أنّ بإمكان أيّ مطوّر تعلّمها، ولكن لمَ نحتاجها؟ تُشكّل الوحدات وحقن التّابعيّة كلّ بنية Angular، ولكن كما رأينا فإنّ Angular تسمح لنا بالبدء دون استخدام نظام الوحدات. حتّى الآن، كان بإمكاننا إنجاز الكثير ببساطة عن طريق تعريف المتحكمات كتوابع معرّفة في المجال العامّ. ولكنّ ذلك لم يكن ليعمل لولا القليل من الإعدادات، وهذه الإعدادات سمحت للتّوجيه ng-controller بالبحث عن توابع التّحكّم في المجال العام وأيضًا في نظام الوحدات. هذه الطريقة السهلة في استخدام المجال العام مسموحةٌ في Angular، ولكن فقط إلى هذه النقطة. لماذا نستخدم وحدات Angular؟لابدّ لك من فهم وإتقان نظام الوحدات في Angular لتتمكّن من تجاوز الأساسيّات فيها والغوص في المفاهيم العميقة. لا تسعى هذه السلسلة لإقناعك بالأهمّيّة الكامنة في الوحدات وفي حقن التّابعيّة في Angular، فعندما تواجهك مشكلة إدارة التّعقيد في تطبيقك فالأمر يعود إلى تجربتك الشّخصيّة في أفضل الممارسات البرمجيّة، والحلّ الأبسط سيكون الأفضل. سيغطّي هذا الكتاب الوحدات في Angular ومبدأ حقن التّابعيّة بما يشمل الجزء الأهمّ منها في Angular. لنبدأ بنظرةٍ عامّة إلى المزايا الهامّة التي تدفعنا لاستخدام نظام الوحدات: مكوّنات مخصّصة - لتعريف المتحكّمات الخاص بك، التّوجيهات، المرشّحات، والمؤثّرات الخاصّة، لا بدّ من استخدام نظام الوحدات.(يمكننا استثناء المتحكّمات كما أشرنا سابقًا.)حقن التّابعيّة - الخدمات ليست إلّا كائنات وتوابع JavaScript عاديّة، إلّا أنّ الخدمات التي يتمّ إنشاؤها في نظام الوحدات يمكن أن تُحقن بسهولة مع التّبعيّات الخاصّة بها، وذلك إن كانت تتيح حقن التّابعيّة فيها.الوحدات الخارجيّة - هناك نظامٌ بيئيّ مثيرٌ للاهتمام، مجّانيٌّ ومفتوح المصدر من الإضافات لـAngular، وقد قام بكتابة بعض هذه الإضافات فريق تطوير قلب Angular وكذلك المطوّرون كطرفٍ ثالث. لاستخدام أيٍّ من هذه المكاتب في تطبيقك لا بُدّ من استخدام نظام الوحدات.إعدادات وقت-التّحميل - يسمح نظام الوحدات في Angular بالوصول إلى تعلّقات دورة الحياة (lifecycle hooks) المتعلّقة بالإعدادات الدّاخليّة لـAngular، وكذلك المتعلّقة بإعدادات الوحدات المضافة، وسنتطرّق لها في نهاية الفصل الأخير، حيث سنقوم بإعداد رأس HTML مخصص.الاختبار - إنّ البنية التّحتيّة الخاصّة بالاختبار في Angular تبيّن فاعليّة نظام حقن التّابعيّة والّذي يعتمد بدوره على نظام الوحدات.سيبيّن فصلٌ لاحقٌ، فصل الخدمات، كيف نقوم بتعريف مقدم لمكوّنات JavaScript المخصّصة. سنرى في هذا الفصل كيف نعرّف متحكّمًا، وسنقوم أيضًا بتحميل وحدةٍ خارجيّةٍ، وأثناء تنفيذ ذلك سنتعلّم أساسيّات نظام الوحدات في Angular. إنشاء وحدة التطبيقيمكن تهيئة تطبيق Angular باستخدام وحدةٍ جذريّة واحدة فقط. سنقوم بتسمية الوحدة في أمثلة هذا الفصل بالاسم app ويمكنك اختيار أيّ اسمٍ آخر إن أردت، إلّا أنّ هذا الاسم شائع الاستخدام في مرجع Angular. angular.module('app', []);أرجو أن تركّز على الوسيط الثاني للتابع module في مثالنا السابق، ورغم أنّه يبدو فارغًا، وله مظهر مصفوفة بريئة خالية ([]) إلّا أنّ وجود هذا الوسيط الثاني شديد الأهمّيّة، فبدونه سيتغيّر سلوك التّابع angular.module كليا، وسأشرح لك سلوك هذا التابع كما يلي: عند استدعاء التابع angular.module مع وجود الوسيط الثاني، سيعمل التّابع في نمط الإنشاء (create)، وسيقوم بإنشاء وحدةٍ ويسمّيها app إن لم يكن هناك وحدة بنفس الاسم سابقًا، أمّا عند استدعائه دون الوسيط الثّاني فسيعمل في نمط البحث (lookup)، فإن عثر على وحدةٍ بالاسم المعطى سيقوم بإعادتها، أمّا إن لم يجدها فسيقوم برمي خطأٍ يطلب تمرير الوسيط الثاني. قمنا في المثال السابق بالاستخدام الصحيح للتابع، ولكن كن حذرًا دومًا من الفرق بين الطريقتين في استدعاء هذا التّابع, أمّا بالنّسبة لهذه المصفوفة التي تمرر كوسيط، فهي تُستخدم لجلب الوحدات الخارجية التي سنناقشها في هذا الفصل، باستخدام وحدة animation في أمثلتنا. تحميل وحدة التطبيقفي مستند HTML الذي يستضيف التّطبيق، يمكننا أن نأمر Angular بتحميل وحدة هذا التّطبيق عن طريق تمرير اسمه إلى التّوجيه ng-app. <body ng-app="app"> <!-- الأمثلة توضع هنا --> </body>ستكون جميع المكوّنات التي نضيفها إلى وحدة التّطبيق متاحةً للاستخدام. لنرى الآن كيف نقوم بتعريف متحكّم داخل وحدةً بدلًا من تعريفه في المجال العام. تعريف متحكمتتضمّن الواجهة البرمجية للعنصر module توابع لتعريف مكوّنات Angular المخصّصة. والمكوّن الوحيد الذي تعرفنا عليه سابقًا هو المتحكّم، لذا لنقم باستخدام التابع controller لإنشاء متحكّم. سنحتاج أوّلًا إلى جلب مرجعٍ لوحدة التّطبيق، وكما ذكرنا سابقًا، يجب أن نقوم باستدعاء التابع angular.module بدون تمرير الوسيط الثاني، وذلك كي يعمل في نمط البحث lookup. var app = angular.module('app'); app.controller('MessageController', function($scope) { $scope.message = "This is a model."; });والآن، في مكان ما ضمن العنصر الذي قمنا فيه باستدعاء الوحدة عن طريق "ng-app="app، يمكننا استخدام التّوجيه ng-controller لتحميل المتحكّم. <p ng-controller="MessageController"> {{message}} </p>الناتج This is a model.وكما يمكنك أن ترى، فتعريف المتحكّم داخل الوحدة يحتاج إلى عمل أكثر بقليل من تعريفه في المجال العام، ولكنّه ليس بهذه الصعوبة أبدًا. سلسلة التعريفاتلنفترض بأننا نريد تعريف متحكّمين للقالب التالي. <p ng-controller="MessageController"> {{message}} </p> <p ng-controller="AnotherMessageController"> {{message}} </p>إنّ توابع التعريف ضمن العنصر Module قابلةٌ للسَّلسَلة، حيث يمكننا إنشاء متحكّمين باستخدام عبارةٍ واحدة. angular.module('app') .controller('MessageController', function($scope) { $scope.message = "This is a model."; }) .controller('AnotherMessageController', function($scope) { $scope.message = "This is another model."; });الناتج This is a model. This is another model.لاحظ أن الاستدعاء الأول للتابع controller لم تتبعه فاصلةٌ منقوطة. إن لم تعجبك هذه الطريقة في سَلسَلة الاستدعاءات، يمكنك استدعاء التابع module كلّما أردت الحصول على مرجعٍ للوحدة، أو يمكنك تخزين هذا المرجع في متغيّر، كما يبيّن المثال التالي. عند استخدامك لمتغيّر، سيكون من الجيّد أن تضعه ضمن تابعٍ يُستدعى آنيًّا (IIFE) أو أيّ مجالٍ مغلقٍ آخر، لمنع ذلك المتغيّر من أن يُنشأ في المجال العام. var app = angular.module('app'); app.controller('MessageController', function($scope) { $scope.message = "This is a model."; }); app.controller('AnotherMessageController', function($scope) { $scope.message = "This is another model."; });يمكنك اختيار أيٍّ من الطريقتين، ولكنّ طريقة السَّلسلة هي الأكثر شيوعًا. تحميل الوحداتيُعدّ التحريك (animations) ميزةً جديدةً في Angular تمّت إضافتها إلى حزمة منفصلة اسمها ngAnimate. الخطوة الأولى لاستخدام التحريك هي تضمين ملف JavaScript المحتوي على الوحدة. الشيفرة المصدريّة للوحدة جزءٌ من قلب Angular، ولكنّها موجودةٌ في ملفٍّ منفصل، كما نرى أدناه. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.js"></script>حان الوقت لنستخدم الوسيط الثّاني للتابع module كما يجب، فبدلًا من تمرير مصفوفةٍ خاليةٍ فيه سنقوم الآن بالتصريح عن الوحدات المتعلّقة بوحدتنا. angular.module('app', ['ngAnimate']);لقد قمنا الآن بتحميل ngAnimate إلى داخل وحدة التّطبيق، والآن ستقوم التّوجيهات ng-show و ng-hide و ng-class و العديد من التّوجيهات الأخرى بالتّحقّق من التحريك الخاصّ بـCSS وJavaScript أيضًا الذي يمكن تطبيقه على أحداث المستند مثل add و enter و leave و move و remove، وتطبيق هذا التّحريك شفّاف فهو لا يتطلّب أيّ تغيير على شيفرة القالب المكتوبة، وإن لم نكن قد طبّقنا هذا التّحريك سواء على شكل CSS أو كـJavaScript عن طريق تسجيل الحركة عبر module.animation، فإنّ الشيفرة ستسلك السّلوك الافتراضيّ لها بشكل طبيعيّ. <input type="checkbox" ng-model="showMessage"> Check the box to show the message <h2 ng-show="showMessage"> The secret message. </h2> بالنّقر على الـcheckbox ستقوم ng-show بعملها كالمعتاد، وسيتمّ التّبديل بين إظهار وإخفاء العنصر بشكلٍ فوريّ دون تدرّج أو تأثير اختفاءٍ بسيط، إلى أن نكتب شيفرة التّحريك في CSS أو JavaScript. في المثال التّالي سنستخدم CSS، وهي عمومًا الخيار الأفضل للتحريك بسبب الأسلوب التصريحي في كتابتها. يمكنك على أيّ حالٍ استخدام التابع animate في jQuery ليقوم بالمهمّة إن وجدت ذلك أسهل، أما Angular فتقوم بذلك عن طريق الوحدة module.animation. يتطلّب التّحكّم بتأثير الاختفاء التّدريجيّ استخدام أربع فئات CSS تقوم بالتّعلّق (hook)، وذلك حسب توثيق الواجهة البرمجية الخاصّ بالتّوجيه ng-show. هذه الفئات الأربعة هي ng-hide-add و ng-hide-add-active و ng-hide-remove و ng-hide-remove-active. .ng-hide-add, .ng-hide-remove { transition: all linear 1s; display: block !important; } .ng-hide-add.ng-hide-add-active, .ng-hide-remove { opacity: 0; } .ng-hide-add, .ng-hide-remove.ng-hide-remove-active { opacity: 1; }قد تحتاج إلى إضافة خصائص محدّدة من قبل المصنّع لبعض المتصفّحات حسب زوّار موقعك، مثل webkit-transition- الخاص بمتصفّح سفاري 6 لأنظمة iOS. (يُعدّ موقع caniuse.com مرجعًا جيّدًا لتوافق المتصفّحات مع HTML5 و CSS3.) أرجو أن تنتبه أيضًا إلى أنّ هذا التّحريك سيتمّ تطبيقه في كلّ الأماكن التي ستستخدم فيها ng-show و ng-hide في تطبيقك. يمكنك إضافة فئة CSS مخصّصة لتزيد قدرتك على التّحكّم، وذلك للعنصر ولمحدّد CSS الذي تتعامل معه، مثلًا يمكنك كتابة my-class.ng-hide-add. و my-class.ng-hide-remove. وهكذا. خاتمةأتمنى أن تكون سهولة إضافة ngAnimate قد أقنعتك بأهمّية فهم نظام الوحدات في Angular. ومن المفرح أن تعلم بأنّ ngAnimate ليست إلّا البداية ضمن الكثير من الوحدات المُضافة إلى Angular. يمكنك أن تختار وحداتٍ أخرى متاحةّ بشكلٍ مجّانيّ من هذا النّظام البيئيّ سريع النموّ الذي يعتمد على إبداعات المطوّرين من مواقع مثل GitHub، وذلك إضافةً إلى الوحدات التي تتيحها Angular أصلًا مثل ngResource وngRoute. أحد أكثر المشاريع شُهرةً هو AngularUI، الذي يحوي وحداتٍ عظيمة الأهمّيّة مثل UI Router وUI Bootstrap، ومعظم هذه الوحدات يمكن تحميله بسهولة في مشروعك باستخدام Bower، مدير حزم الويب، ولربّما ستبدأ بنشر وحدات Angular الخاصّة بك مفتوحة المصدر على GitHub وBower عندما تملك زمام Angular، وهذا ما أتمنّاه. تقدّم الوحدة ngAnimate إثباتًا واضحًا للقوّة المتاحة في الوحدات المضافة، ولكنّها لا تتضمّن استخدام البنية التّحتيّة لحقن التّابعيّة في Angular بسبب أسلوبها الجزئيّ في التكامل. سنغطّي حقن التّابعيّة في الفصل القادم، وذلك لأنّه يعمل يدًا بيد مع الوحدات. ترجمة وبتصرّف للفصل السادس من كتاب: Angular Basics لصاحبه: Chris Smith.
  7. شاهدت مؤخرًا العديد من التصاميم ثلاثية الأبعاد للافتات نيون إعلانية تم تصميمها باستخدام برامج التصميم ثلاثي الأبعاد. أميل أكثر للتّصاميم ثنائية الأبعاد لذلك أريد أن أنتج تأثير نيون مشابه باستخدام الإليستريتور وفوتوشوب ولكن مع إضافة الحركة بواسطة صيغة GIF المتحركة. اتبع هذا الدرس لتتعلم عملية تصميم لافتة إعلانية لكوكب البيتزا مُستخدمًا أدوات فكتور الإليستريتور لإنشاء التصميم الأوّلي للافتة ثم فوتوشوب لإضفاء الحيوية على التصميم عبر أنماط الطبقات المتنوعة وتشكيل الحركة للملف. تأثير لافتة النيون سيتم إنشاؤه في الفوتوشوب باستخدام أنماط الطبقات عبر إنشاء توهجات نيون ملوّنة كما سيكون هناك طبقة قاتمة تكون عند إطفاء الأنوار والتي ستُضاف في إطار أثناء سير الحركة للملف لإضفاء الشعور بالواقعية على التأثير. لافتات النيون تعتمد على الأنابيب المنحنية لتشكيل أشكال التصميم لذلك سنستخدم الإليستريتور لصياغة مسارات فكتور بحيث لا تتقاطع الخطوط مع بعضها. افتح برنامج الإليستريتور وابدأ ملفًّا جديدًا. ارسم دائرة على لوح الرسم باستخدام أداة القطع الناقص Ellipse tool، ثم ألغِ لون التعبئة واترك فقط الحدود السوداء ظاهرة. غيّر إعدادات الحدود إلى 5pt مع نهايات مستديرة وزوايا مستديرة أيضًا. استخدم أداة النص Type tool لإضافة أي نص إلى لافتة النيون. أنا استخدمت خطًّا اسمه Darwin لكتابة Pizza Planet. اضبط حجم النص ليتوسط الدائرة ويتقاطع مع حدودها الخارجية ثم أمِلهُ بزاوية -10 درجة عموديًّا من القائمة: Object > Transform > Shear option ألغِ لون التعبئة للنص وأضف حدودًا سوداء مستخدمًا ذات الحجم 5pt مع النهايات المستديرة والزوايا المستديرة أيضًا. بالزر الأيمن اختر Convert to Outlines. ارسم دائرة صغيرة وقصّ المسار باستخدام أداة المقص Scissors tool في الجزء العلوي الأيسر. استخدم أداة التحديد المباشر Direct Selection tool لحذف المسار من النقطة السفلية إلى هذا القطع الجديد. اصنع نسخًا عديدة من هذا الشكل الأخير مع تعديل أحجامها وذلك لتعبئة المساحات الفارغة داخل الدائرة لتكوين فوهات وفتحات الكوكب. حدّد الدائرة الرئيسية للكوكب وانسخها CMD+C ثم ألصقها في المقدمة CMD+F. استمر بالضغط على ALT أثناء تمديد وضغط الشكل لتشكيل الحلقة حول الكوكب. ضاعف هذا الشكل الأخير وصغّر حجمه قليلًا بشكل يوازي الأصلي. ارسم شكلًا بيضويًّا في مكان ما على لوح الرسم ثم اسحب النقطة العلوية للأعلى باستخدام أداة التحديد المباشر Direct Selection tool لتمديد الشكل. استخدم أداة Convert Anchor Point tool الموجودة ضمن أدوات القلم لإزالة مقابض البيزير وترك النقطة حادة. أضف دوائر أخرى إلى الشكل لبناء شكل صاروخ بسيط. استخدم لوحة المحاذاة Align panel لتوسيط جميع العناصر مع جعل شكل جسم الصاروخ العنصر المفتاح عبر منحه نقرة إضافية. اصنع نسختين من الصاروخ وعدّل حجمها ودوّر كل صاروخ وضعهُ في موقعه في مدارٍ حول الكوكب مع جعلها أكبر في كل مرّة. التصميم يحوي العديد من المسارات المتداخلة فوق بعضها لذلك دعونا ننشئ المزيد من نماذج أنماط لافتة النيون. حدّد دائرة الكوكب الرئيسية ثم اذهب للقائمة: Object > Path > Offset Path ثم أدخل القيمة 3mm. انقر بالزر الأيمن على المسار الإضافي الجديد واختر Make Guides. تأكد من ظهور الأدلة عبر الضغط على CMD+; ومقفلة عبر الضغط على CMD+Alt+; استخدم أداة المقص Scissors tool لقص مسارات حلقات الكوكب في موقع تقاطعها مع الأدلة الجديدة. استخدم الأدلة الذكية Smart Guides عبر الضغط على CMD+U لتُسهّل عملية مطابقة هذه المنطقة. على الجانب الآخر فإن حرف P يتقاطع مع حدود الكوكب أيضًا لذلك ألغِ تجميع النص Ungroup من أجل تحديد هذا الحرف فرديًّا ثم أضف مسار إضافي بقيمة 3mm. الحرف P بشكل خاص بحاجة لخطوة إضافية من أجل إنشاء الأدلّة. انقر بالزر الأيمن ثم اختر Release Compound Path ثم احذف الجزء الداخلي قبل تحويل الخطوط الرئيسية إلى أدلّة. قص حلقات الكوكب عند تقاطعها مع المسار الإضافي لحرف P ثم احذف الأجزاء غير المرغوبة من المسارات. سنستخدم ذات التقنية في كل التصميم لإزالة جميع المسارات المتقاطعة ولكن بالنسبة للجزء السفلي من الحلقة فإن النص هو من يحتاج للتعديل للسماح للحلقة بالالتفاف حول الكوكب. ألغِ تجميع Ungroup عناصر النص الأخرى وأضف مسار إضافي للحرف الأول والأخير ثم أنشئ أدلّة من النتائج. تذكّر أن تحرر المسار المركب لحرف P ليصبح قابلًا للتحول إلى دليل. استخدم هذه الأدلة الجديدة لقص أي مسارات متداخلة مع بعضها وأزِل التداخلات في كل أنحاء التصميم. بالنسبة للمنطقة التي يتداخل فيها النص مع الحلقة سنحتاج إلى أدلة إضافية من مسارات الحلقة نفسها. استخدم أداة المقص Scissors tool لقص وحذف مناطق تواجد الحروف تحت الحلقة عبر خطوط الأدلة. من الضروري في بعض الأحيان تحرير المسارات المركبة للحروف من أجل تحديد وحذف الأجزاء غير المرغوبة من المسار. بعد إزالة جميع المسارات المتداخلة سيكون التصميم قد أخذ شكلًا أكثر واقعية كلافتة نيون. حدّد المسارات التي تُشكّل جزءًا محددًا وامنحها ألوانًا برّاقة للحدود كالأزرق، الأحمر، الأصفر والأبيض. افصل الألوان المختلفة داخل طبقاتها الخاصة عبر استخدام القائمة: Select > Same > Stroke Color ثم انسخ التحديد وألصقه في المقدمة. وضع الأجزاء التي ستكون متحركة في طبقات خاصة بها كالعناصر التي تُكَوِّن الصواريخ الثلاثة. اذهب إلى القائمة: File > Export وضع نوعية الملف PSD Photoshop وتأكّد من تفعيل خيار Write Layers. افتح الملف الذي تم تصديره من برنامج الإليستريتور في برنامج الفوتوشوب ووسِّع حجم العمل قليلًا. لوِّن الخلفية بالأسود وأضف خامة جدار الطوب. حدّد كل طبقات عناصر لافتة النيون ثم اضغط CMD+J لمضاعفتها ثم اضغط CMD+E لدمجها في طبقة واحدة. أعِد تسمية هذه الطبقة 'Off'. أضف سلسلة من أنماط الطبقة لجعل هذه الطبقة تبدو كالأنابيب بدون إضاءة، أي (تراكب لوني) Color Overlay، (توهج داخلي) Inner Glow و (الظلال) Drop Shadow. ضع هذه الطبقة أسفل جميع الطبقات بحيث لن تكون ظاهرة أثناء إضاءة العناصر وستظهر أكثر في العناصر المتحركة حيث ستنطفئ هذه العناصر عدة مرات. شَغِّل طبقة النيون الأولى عبر سلسلة من أنماط الطبقة. أضِف التوهُّج الداخلي لإضافة الأبيض البرّاق إلى المركز، والتوهُّج الخارجي لإطلاق الهالة الملونة، تليها المزيد من الظلال لتراكب التوهُّجات بأحجام مختلفة. كل هذه الأنماط للطبقات تُنتِج تأثيرًا واقعيًّا إلى حد كبير مشابهًا لإضاءة النيون وتأثيرات التوهُّج والتفاعل مع خلفية جدار الطوب. انسخ وألصق نمط الطبقة إلى الطبقة التالية ثم عدّل إعدادات التوهُّج حتى تناسب لون العنصر. وفّر الوقت عبر نسخ نمط الطبقة إلى باقي الطبقات التي تحمل ذات اللون. لافتة النيون ستبدو رائعة عند الانتهاء من وضع كافة أنماط الطبقات ولكننا سنضيف بعض الحركة على التصميم. اجمع عناصر كل صاروخ معًا بحيث سيكون من السهل تشغيل وإيقاف أي صاروخ أثناء الحركة. أظهر لوحة Timeline من قائمة Window ثم أنشئ إطار جديد New Frame Animation. في هذا الإطار الأول ستكون اللافتة متوقفة عن العمل لذلك سنُظهر فقط الطبقة الداكنة مع خلفية جدار الطوب. عدّل المدة الزمنية لهذا الإطار الأول إلى ثانية واحدة. أضف إطار جديد تظهر فيه أول طبقة نيون. لا تضف أي زمن لظهور هذا الإطار وبذلك سيظهر هذا الضوء على الفور. أضف إطارين بعدها بدون مدة زمنية لإضافة الأضواء الحمراء والزرقاء بحيث ستضيئ اللافتة تباعًا بسرعة. في الإطار التالي أظهر طبقة الصاروخ الأول مع جعل المدة الزمنية لعرض هذا الإطار ثانية واحدة. في الإطار التالي أخفِ الصاروخ الأول وأظهر الثاني لإعطاء الانطباع عن حركة الصاروخ. أضف إطار جديد للصاروخ الثالث من أجل إظهاره وإخفاء الصاروخ الثاني. ضاعف هذه الإطارات الثلاثة الأخيرة لتُطيل مدة الحركة. أو بدلًا من ذلك يمكن جعل هذه الطبقات الثلاثة تضيء باستمرار إلى ما لا نهاية بدون وجود الطبقة الأولى للافتة المتوقفة عن العمل. قم بتصدير العمل كملف GIF من خلال Save for Web أو أرسله إلى برنامج تعديل فيديو لتصنع حركة مستمرة أفضل. ترجمة -وبتصرّف- للمقال: How To Create an Animated Neon Sign Effect لصاحبه: Chris Spooner.