لوحة المتصدرين

تعتمد صفحات الويب على HTML التي تُحدد محتوى الصفحة.تعدّ CSS لغة منفصلة عن HTML ودورها هو تحديد الشكل والمظهر الخاص بصفحة الويب. الشفرة الخاصّة بـ CSS عبارة عن قواعد ساكنة. كل قاعدة تأخذ مُحدِدًا Selector أو أكثر، وتُرجع قيم لمجموعة من الخصائص الشكلية. تُطبَّق هذه الخصائص بعد ذلك على عناصر صفحة الويب المشار إليها بواسطة المحددات. ملاحظة: لتعلم CSS بطريقة صحيحة، ولأن مخرجات هذه اللغة عبارة عن نتائج مرئية، يجب عليك ممارسة كل ما تتعلمه وننصحك بتطبيقه على موقع dabblet. الهدف الرئيسي من هذا المقال التركيز على كيفية الكتابة الصحيحة مع بعض النصائح. سنتناول في هذا المقال العناوين التالية: التعليقات. المحددات. الخصائص. طريقة استخدام CSS في الصفحة. الأولوية أم التتالي. استعلامات الميديا. التوافقية. التعليقات توجد طريقة واحدة لكتابة التعليقات في ملف CSS وهي كتابة التعليقات بين الرمزين /* */. /* التعليقات تُتكتب هنا ولا يوجد نمط لكتابة التعليق في سطر واحد سوى هذه الطريقة */ المحددات يُستخدم المحدد في استهداف عنصر في صفحة، ويُكتَب بالطريقة التالية: selector { property: value; /* خصائص أخرى*/ } لنفترض وجود العنصر التالي من نوع div في صحة ويب: <div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' /> تستطيع تطبيق قاعدة CSS على هذا العنصر باستخدام أحد أسماء الأصناف Classes التي ينتمي إليها في الصفحة: .class1 { } أو باستخدام جميع أسماء الأصناف المطبَّقة عليه: .class1.class2 { } أو باستخدام نوع العنصر: div { } أو باستخدام الرقم الخاص بالعنصر: #anID { } نستطيع تحدد العنصر من الصفحة في حال وجود صفة Attribute باسم معين: [attr] { font-size:smaller; } أو في حالة وجود صفة بقيمة معينة: [attr='value'] { font-size:smaller; } في حالة وجود صفة معينة في عنصر، ونريد تطبيق قاعدة على هذا العنصر بشرط وجود قيمة تبدأ منها الصفة نستخدم الطريقة التالية: [attr^='val'] { font-size:smaller; } أما إن كان الشرط يتعلّق بقيمة معينة تنتهي بها الصفة: [attr$='ue'] { font-size:smaller; } نستطيع تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها بمسافة فارغة (يوافق الشرط أدناه العناصر التي لديها صفة otherAttr تساوي “foo” أو “foo bar” أو “foo bar far” …إلخ): [otherAttr~='foo'] { } أو تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها برمز – كما في المثال التالي: [otherAttr|='en'] { font-size:smaller; } نستطيع جمع أكثر من مُحدد ببعضها للحصول على مُحدد مُركز كما في المثال التالي: div.some-class[attr$='ue'] { } من الممكن أيضا أن تقوم بتحديد عنصر يكون تابعا (ابن) لعنصر آخر: div.some-parent > .class-name { } في المثال السابق، يكون العنصر الابن على مستوى واحد أسفل من العنصر الأب. تستطيع أن تُحدد عنصر من سلالة عنصرآأخر (الأب)، وهذا يعني من أي مستوى أسفل من مستوى العنصر الأب (ليس شرطا أن يكون مستوى واحد أقل): div.some-parent .class-name { } يختلف المُحدد التالي عن المُحدد السابق لوجود مسافة فاصلة بين الأسماء: div.some-parent.class-name { } نستطيع تحديد العنصر بناءً على عنصر آخر مجاور له باستخدام الطريقة التالية: .i-am-just-before + .this-element { } أو بناءً على أي عنصر يسبق العنصر الذي نريده: .i-am-any-element-before ~ .this-element { } توجد بعض المُحددات تسمى الأصناف الزائفة pseudo classes تطبَّق على العنصر عندما يكون بحالة محددة، فمثلا، نستطيع تحديد عنصر عندما يمر عليه المؤشر: selector:hover { } أو رابط تمت زيارته: selector:visited { } أو لم تتم زيارته: selected:link { } أو عنصر في حالة التركيز: selected:focus { } لتحديد أول عنصر تابع لعنصر: selector:first-child {} لتحديد آخر عنصر تابع لعنصر: selector:last-child {} نستطيع تنسيق أجزاء محددة من العنصر باستخدام العناصر الزائدة Pseudo elements، فمثلا، نستخدم before لإضافة محتوى قبل محتوى عنصر معين: selector::before {} وafter لإضافة محتوى بعد محتوى عنصر معين: selector::after {} في أماكن معينة، يُستخدم رمز * كحرف “بدل” لاختيار كافة العناصر. * { } /* كل العناصر */ .parent * { } /* كل التابعين */ .parent > * { } /* كل الأبناء */ الخصائص selector { وحدات الطول إما مطلقة أو نسبية. الوحدات النسبية: width: 50%; /* نسبة من عرض العنصر الأب */ font-size: 2em; /* مضاعفة حجم الخط الخاص بالعنصر نفسه*/ font-size: 2rem; /* مضاعفة حجم الخط حسب حجم الخط الخاص بالعنصر الأب */ font-size: 2vw; /* مضاعفة حجم الخط بالنسبة ل 1% من عرض المساحة المرئية للمستخدم*/ font-size: 2vh; /* من الارتفاع*/ font-size: 2vmin; /* مضاعفة حجم الخط لأصغر قيمة من الارتفاع أو العرض*/ font-size: 2vmax; /* لاكبر قيمة */ القيم المطلقة: width: 200px; /* بكسل */ font-size: 20pt; /* نقطة */ width: 5cm; /* سنتميتر */ min-width: 50mm; /* مليميتر */ max-width: 5in; /* إنش */ الألوان: color: #F6E; /* صيغة سداسية قصيرة */ color: #FF66EE; /* صيغة سداسية طويلة */ color: tomato; /* حسب الاسم */ color: rgb(255, 255, 255); /* كقيم rgb */ color: rgb(10%, 20%, 50%); /* كنسبة rgb */ color: rgba(255, 0, 0, 0.3); /* كقيم rgba */ color: transparent; /* الشفافية صفر*/ color: hsl(0, 100%, 50%); /* كنسب hsl */ color: hsla(0, 100%, 50%, 0.3); /* كنسب hsla */ الحدود: border-width:5px; border-style:solid; border-color:red; border: 5px solid red; /* اختصار القواعد السابقة في قاعدة واحدة */ border-radius:20px; /* خاصية ابتداء من css3 */ الصور: background-image: url(/img-path/img.jpg); الخطوط: font-family: Arial; إذا كان اسم الخط به مسافات فيجب وضع الاسم بين علامتي تنصيص: font-family: "Courier New"; في نسرُد لائحة من الخطوط وإن لم يجد المتصفح الخط، يستخدم نوع الخط التالي: font-family: "Courier New", Trebuchet, Arial, sans-serif; } دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن طريقة استخدام CSS في الصفحة توجد ثلاث طرق لإجراء عملية تنسيق صفحة الويب وهي كالتالي: 1- تضمين اسم الملف بالامتداد .css داخل العنصر head في بداية صفحة html كالتالي (وهي الطريقة المُوصى بها): <link rel='stylesheet' type='text/css' href='path/to/style.css'> 2- كتابة قواعد css مباشرة في ملف الصفحة: <style> a { color: purple; } </style> 3- تنسيق العنصر بطريقة مباشرة: <div style="border: 1px solid red;"> </div> الأولوية أم التتالي العنصر الواحد في صفحة الويب قد يكون مُستهدفا (محددا) من قبل مجموعة متعددة من المحددات، وقد يكون هناك تعديل أو تحديد لقيمة خاصية تابعة لهذا العنصر من قبل أكثر من مُحدد. في مثل هذه الحالات، فإن قاعدة واحدة سيكون لها الأولوية في التطبيق على هذا العنصر. القواعد التي تمتلك محددات مُفصلة لها أولوية على المحددات ذات التفاصيل الأقل، والقواعد التي تأتي في النهاية تقوم بالتعديل على القواعد التي قبلها (وهذا يعني أنه في حالة تضمين ملفي css وكلاهما يقومان بتحديد عنصر والتعديل على خصائصه، فإن ترتيب ربط الملفات يحكم تنسيق العنصر حسب قاعدة الترتيب المذكورة والتي تُسمى التتالي أو التتابع). استعلامات الوسائط Media queris استعلامات الوسائط هي خاصية بدأت من CSS 3 وتسمح لك بتحديد متى تُطبَّق قواعد CSS، مثلا عند الطباعة، أو عند كثافة وأبعاد شاشة معينين. أمثلة: هذه قاعدة CSS تُطبَّق على كل الأجهزة. h1 { font-size: 2em; color: white; background-color: black; } يعدّل استعلام الوسيط التالي القاعدة السابقة عند الطباعة: @media print { h1 { color: black; background-color: white; } } يجعل استعلام الوسيط التالي حجم الخط أكبر في شاشة بعرض 480 بكسل على الأقل: @media screen and (min-width: 480px) { h1 { font-size: 3em; font-weight: normal; } } تحتوي استعلامات الوسائط على الخصائص التالية: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color,color-index, monochrome, resolution, scan, grid. من الممكن أن يسبق أغلب الخصائص السابقة خاصيتي min- و max-. خاصية الدقة Resolution غير مدعومة على الأجهزة القديمة، وبدلا من ذلك استخدم خاصية device-pixel-ratio. تحاول كثير من أجهزة الجوال والأجهزة اللوحية عرض الصفحة كما لو كانت على سطح المكتب العادي إلا إذا قمت بإضافة الصفة viewport بالشكل التالي: <head> <meta name="viewport" content="width=device-width; initial-scale=1.0"> </head> التوافقية أغلب المميزات والخصائص الموجودة في CSS2 وكثيرا من CSS3 موجودة في كل المتصفحات والأجهزة، ولكن ينصح من باب الممارسة الأفضل أن يتم الفحص قبل استخدام الخاصية الجديدة. ترجمة – بتصرّف – للمقال Learn X in Y minutes Where X=CSS.

إن مجال الرسوم المتحركة مجالٌ قوي به تخصصات كثيرة وأدوات ربما أكثر من أجل تصميم أسلوب أو مظهر معيّن، فلدينا مثلًا برنامج Krita للرسوم المتحركة المرسومة باليد للقصص المصورة مثلًا، وStopGo لفن التصوير المتعاقب، وبرنامج Blender الشهير للرسم والتصميم ثلاثي الأبعاد، وكذلك برنامج openToonz الذي جُعل مفتوح المصدر مؤخرًا، وبرنامج GIMP الذي يمكن تثبيت إضافة GAP للرسوم المتحركة فيه، وغيرهم كثير. وسنستكشف في هذا المقال برنامج Synfig Studio، وهو برنامج صمم لتسريع عملية تحريك الرسوم عبر استخدام النقوش المتحركة Sprites والبينيّة الرقمية Digital tweening بدلًا من فعل ذلك بالتصميمات اليدوية، لهذا فإنه مثالي في حالة الفنان المستقل أو فريق صغير الحجم. وهذا البرنامج جاهز للإنتاج مباشرة بسبب مساهمات جهات مثل استديو Morenva Project الذي يساهم في تطويره، هو وبقية البّرامج مفتوحة المصدر التي يستخدمها للتصميم. التثبيت قد يكون البرنامج موجودًا داخل مستودعات توزيعتك، لكن إن أردت النسخة الأحدث فيمكنك تحميلها من موقع البرنامج، وستجد نسخًا بتحزيم deb وrpm ونسخة tar عامة، واستخدم مدير الحِزَم لتثبيته، أو إن حمّلت نسخة tar ففك ضغطها ثم ضعها في دليل/مجلد directory مناسب مثل "~/bin"، ثم شغّل أمر synfigstudio. الواجهة واجهة Synfig مألوفة غالبًا لمن استخدم برنامج رسوم متحركة من قبل أو حتى برنامج تصميم بشكل عام، فاللوحة التي في أعلى اليسار بها الأدوات، والوسطى بها مساحة العمل، والسفلى بها الخط الزمني والإطارات، أما لوحة الخصائص Property فتوجد على اليمين. وقبل أن نبدأ أريدك أن تذهب إلى قائمة Canvas التي في شريط القوائم وتختار Properties -أو استخدم اختصار مفتاح F8 الوظيفي-، وأدخل مساحة العمل التي تريدها في نافذة Canvas. ربما تود أن تبدأ بأبعاد 1920*1080 -Full HD- إن كان لديك حاسوب قوي نوعًا ما. شخصيًا، أشعر بالأمان حين أختار أبعادًا أكبر من التي أستهدفها ولو بمستوىً واحد إن سمحت مواصفات حاسوبي بذلك لكي أوفر على نفسي تحديث عملي في المستقبل الفريب، لكن طبعًا تبقى احتياجات عملك هي المحددة للأبعاد التي تستخدمها. كذلك تجد في نافذة الخصائص تلك مقدار الوقت الذي تريد أن يكون في الخط الزّمني لملفك، واعلم أن وحدات الزمن بالنسبة للرسوم المتحركة تقاس بالإطارات، وتترجمها إلى المفهوم البشري بعدد الإطارات التي سيشغّلها العمل الفني في الثانية الواحدة، فكلما زاد عدد الإطارات في الثانية زادت سلاسة الحركة فيه، لكني سأستخدم لهذا الشرح 16 إطارًا/ث، وخطًا زمنيًا قدره 128 إطارًا، إذ أني أبتغي به التوضيح لا أكثر. احفظ الملف بعد أن تختار الخصائص التي تناسبك. الرسم والاستيراد ستحتاج إلى عناصر من أجل تحريكها داخل عملك الفني، وSynfig به العديد من أدوات الرسم، لكن أغلب من رأيتهم يستخدموه يفضّلون الرسم في مكان آخر ثم استيراد تلك العناصر. وإن المبدأ وراء تقنية Synfig للرسوم المتحركة هو مبدأ "Paper Cutout" القديم، كما في عمل "Monty Python" لتيري جيلَم أو سلسلة "South Park" التلفزيونية، فكل عنصر تريد تحريكه يتم تثبيته إلى منصة مما يسمح لك بتسجيل كل حركة تنفّذها على هذه المنصة، ويكون الناتج النهائي هو عمل فني لرسوم متحركة. وإن أردت استخدام أدوات Synfig، فستجدها أعلى الناحية اليسرى من البرنامج، وهي الأدوات المعتادة في أي برنامج رسم، مثل أدوات الأشكال التي ترسم مستطيلات وأشكالًا بيضاوية، والقلم bezier pen، وأداة دلو الطلاء paint bucket، وهكذا. ولكي ترى خصائص أي عنصر ترسمه، اضغط عليه سواء في مساحة الرسم أو في لوحة الطبقات -الموجودة في أسفل يمين البرنامج افتراضيًا- وستظهر خصائصه في لوحة الخصائص في أسفل يسار البرنامج. وأفضل طريقة للعمل على أي عنصر سواء رسمته بنفسك أو استوردته من برنامج آخر هي باستخدام مساحة العمل canvas والطبقات layers معًا، فحتى اللقطات البسيطة قد تتطور لتصبح معقدة للغاية، لذا استخدم منظور on set في مساحة العمل، وdope sheet في الطبقات. ولاستيراد عناصر إلى لقطتك، استخدم قائمة File ثم Import. وإذا استوردتَ عنصرًا أو أنشأته فإنه يحصل على مدخل entry في لوحة الطبقات، وكذلك إن استوردت أكثر من عنصر فإن البرنامج يضيف كل واحد كطبقة مستقلة، وتكون الطبقات الأعلى في الترتيب "فوق" الطبقات التي تحتها. ستجد أن هذه مهمة لاحقًا. وسواء رسمتَ عنصرًا أو استوردته فإن أي عنصر في لقطتك سيكون له نقاط/أذرع تحكم Handles، وقد يختلط الأمر على المستخدم في البداية بسبب وجود أكثر من نوع لهم. دعنا نفصّل أنواعهم هنا: نقطة التحكم الخضراء التي في المنتصف هي التي تحرك العنصر بإحداثيات أفقية ورأسية، اسحبها لتحرك العنصر. النقطة البنّية في أعلى اليمين تغير حجم العنصر مع الحفاظ على نسب أبعاده. النقاط الصفراء تغير حجم العنصر أيضًا لكنها لا تحفظ شكله الأصلي ولا أبعاده. النقطة الزرقاء تدير العنصر حول النقطة الخضراء المركزية، لكن يمكنك تغيير محور الدوران بالضغط على Ctrl والنقطة الخضراء لتسحبها إلى المكان الذي تريد أن يكون المحور. النقطة الحمراء تعطي تأثيرًا مائلًا Skew. جرب الآن أن ترسم عنصرًا أو تستورده ثم عدّل شكله باستخدام نقاط التحكم هذه كي تعتاد عليها، فهذا أفضل من محاولة إنتاج عمل فني دون القدرة على استخدام أدوات البرنامج بسلاسة. التحريك Animation قد قطعتَ نصف الطريق إلى تحريك عنصرك إن كنت قد جربتَ التعديل عليه باستخدام النقاط التي ذكرتها لتوي، والخطوة الباقية هي أن تضغط على Record وتبدأ بالتحريك الذي تريده لعناصرك. وسترى على زر التسجيل شكلًا رمزيًا لشخص صغير، اضغط عليه ليتحول إلى شخص أحمر اللون في وضعية حركة، ستجد الزر قرب أسفل يمين مساحة العمل، وسترى أيضًا أن مساحة العمل سيحيطها إطار أحمر لتنبيهك إلى أن حركاتك مسجّلة، فكل شيء تفعله بالعنصر سيسجَّل كإطار Keyframe في الخط الزمني للبرنامج. الإطارات والبينيّات Keyframes and Tweens كان أسلوب الرسوم المتحركة قديمًا يبدأ برسم الأوضاع الأساسية لشخصيتك على طول الخط الزمني، فالوضع 1 في إطار 0 والوضع الثاني في الإطار السادس عشر، وهكذا، ثم يعود الفنان إلى رسم إطارات بين تلك الإطارات الرئيسية، وسمّيَت هذه العملية باسم الرسم البينيّ Tweening إشارة إلى الرسم الثانوي بين إطارات الأوضاع الرئيسية. وميزة برنامج مثل Synfig في تلك النقطة هي أنه يقوم بمهمة الرسم البيني عنك، إذ يكتشف بنفسه أسلوب الحركة من الإطار 0 إلى الإطار السادس عشر -وهما الإطاران اللذان في مثال الفقرة السابقة- دون أي رسم بينيّ منك. جرب بنفسك: ارسم أو استورد شكلًا، فمثلًا أنا رسمت pierogi باستخدام Inkscape ثم استوردت أجزاءه منفصلة إلى Synfig كصور png. حدد كل الطبقات التي اخترتها واضغط بالزر الأيمن في لوحة الطبقات لتختار Group Layers لجمعهم في مجلد واحد، كي يتحرك العنصر كوحدة واحدة. لكني لا زلت أستطيع تحريك الأجزاء المختلفة فيه وحدها إن شئت. بعد أن تجمع كل الأجزاء في وحدة واحدة، ستجد أن التعديل في نقاط التحكم سيؤثر في الرسم ككل، فإن أدرتُ شخصيتي فإن جسدها وفمها وعيناها ستتحرك جميعًا معًا. ولنبدأ التحريك، اذهب إلى اللوحة التي في أسفل يسار نافذة البرنامج، واضغط على رمز المفتاح الموجود فيها لتنتقل إلى منظور الخط الزمني. ولكي ندخل وضع التسجيل، اضغط على زر التحريك -الرمز الأخضر- في أسفل يمين لوحة مساحة العمل، وسيتحول لونه إلى الأحمر، وسترى الإطار الأحمر الذي سيحيط بمساحة العمل، ومنذ هذه اللحظة فإن أي شيء تقوم به سيتم تسجيله لذا احرص على عدم تنفيذ حركات لا تريد أن تظهر في العمل النهائي. استخدم نقاط التحكم في العنصر لتحرك العنصر إلى المكان الابتدائي له، وفي مثالي هذا فإني سأجعل الشكل يرقص، لذا سأبدأ بإمالته إلى أحد جانبيه. حرك الخط الأحمر المنقّط -وهو رأس التشغيل playhead- إلى الإطار الرابع لتحرّك الشخصية إلى موضع جديد. وبما أني أريده أن يؤدي رقصة بسيطة، فإني سأجعله يميل إلى الجانب الآخر. كرر هذه العملية إلى أن تصل الشخصية الخاصة بك إلى موضعها الأخير. اضغط على زر Animate لتخرج من وضع التسجيل بداعي الأمان فقط، وهنا يمكنك أن تستعرض الخط الزمني لترى معاينة للنتيجة النهائية، أو تضغط زر play لترى إخراجًا في الوقت الحقيقي للعمل النهائي. وإن كان العنصر الذي تحركه مكونًا من أجزاء منفصلة، فيمكنك أن تحرك هذه الأجزاء بشكل منفصل أثناء تفعيل وضع التسجيل. أنواع الطبقات والتأثيرات من الصعب تنفيذ كل ما تريد من صور التحريك لشخصياتك باستخدام نقاط التحكم فقط، لهذا توجد أنواع أخرى للطبقات من أجل تأثيرات إضافية للحركة، وأحد الطرق الشائعة لتحريك الفم من أجل محاكاة الكلام هو بتبديل أشكال الفم، فلهذه الحالات لن تحتاج مطابقة حركة الشفاه للحروف بشكل دقيق إلا نادرًا، لذا فإن الحل الأسهل هو تبديل أشكال مختلفة للفم. وبما أن البرنامج مبني لتحريك النقوش Sprites أكثر من الرسوم اليدوية، فإني سأحصل على نفس التأثير لو غيّرت نقشًا مكان آخر، بمعنى أني سأخفي الفم المبتسم باستخدام شكل آخر للفم به تعبير مختلف. ولتجربة هذه التقنية، اذهب إلى لوحة الطبقات واضغط بالزر الأيمن، واختر New Layer، ثم Switch من تصنيف other، وسيضع هذا طبقة تبديل switch في لوحة الطبقات، فاسحبها وألقها في المجموعة التي تريد، ففي مثالي هنا فإني سألقيها داخل مجلد الشخصية pierogi التي رسمتُها ﻷضيفها إلى مجموعة Pierogi. لاحظ الخط الأسود الذي يحدد المكان الذي سأضع فيه طبقة Switch. واعلم أن طبقة Switch هذه ما هي إﻻ تأثير، وكل ما تحتويه من طبقات يتأثر بها أيضًا، وكل التأثيرات داخل برنامج Synfig تعمل بنفس الطريقة، فلوحة الطبقات تمثّل شجرة، على عكس القائمة المتراكبة للطبقات في gimp أو inkscape، وﻷن الهدف من طبقة الاستبدال هو التبديل بين نقشين sprites مختلفيْن فإني سأضيف وضعًا آخر للفم تحت طبقة الاستبدال، وﻻ يهم ترتيب تلك الطبقات طالما أنها تحت نفس الطبقة الأم. وبما أن تأثير طبقة الاستبدال صار الآن جاهزًا، فسنستخدم أداة التبديل في خصائص مجموعة الطبقات "layer group's properties"، فاضغط على المجموعة اﻷم لعرض خصائصها، ففي مثالي هنا، إن حددتُ الطبقة التي بها switch والأوضاع المختلفة للفم فستظهر الخصائص في لوحة Properties أسفل يسار نافذة البرنامج. ويجب أن تكون داخل وضع التسجيل كي تجعل تأثيرًا ما يتحرك، تمامًا كما لو كنت ستحرّك أي شيء آخر داخل البرنامج: ادخل وضع التسجيل ثم ضع رأس التشغيل Playhead -ذلك الخط الرأسي المنقّط- على الإطار رقم 0. حدد اسم الطبقة النشطة حتى لو كانت على الطبقة التي تريد البدء بها، قد يكون هذا غير رسميّ داخل البرنامج لكنه يسمّى عادة بالقلقلة "Jiggling"، بمعنى أنك تحرك إعدادًا أو تغيره دون أن يحدث أي تأثير لكنك تجبر الحاسوب على أن يلاحظها ويسجّل الحركة. فافعل ذلك للطبقة النشطة التي تريد البدء بها، ثم حرك رأس التشغيل بعيدًا على طول الخط الزمني وغيّر حقل اسم الطبقة النشطة إلى طبقة بديلة، وسيظهر نتيجة لذلك إطار جديد، وسيتغير -في مثال المقال- شكل الفم من ابتسامة إلى دهشة. ﻻ ينشئ synfig بينيّات من وضع فم ﻵخر ﻷنه لم يتحوّل شيء، فما قمنا بشيء سوى تغيير سريع للنقش، فالفائدة التي أريد إيصالها إليك من الأمر هو أنك إن أردت تعطيل إنشاء البينيّات آليًا، فتأثير switch هو المناسب. وهناك تأثيرات أخرى عديدة في synfig، وهي غير تقنية على عكس switch، فهناك تأثيرات للألوان والغباشة Blur، ومولدّات، وحلقات زمنية Time Loops، وغيرها. الصوت يوجد محرر صوتيات داخل Synfig لكنه ليس متطورًا، لذا أنصحك أن تستخدم ملفًا صوتيًا جاهزًا وﻻ يحتاج إلى تعديل، وﻹضافة ملف صوتي اتّبع الخطوات التالية: أضف طبقة Sound من تصنيف other إلى لوحة الطبقات. اضغط على Sound لتظهر خصائصها أسفل يسار نافذة البرنامج. اضغط على الثلاث نقاط [...] بجانب حقل filename، ﻷن البرنامج سيظن أنك ﻻ تزال تختار الملف الصوتي إن لم تضغط عليها. اضغط على زر Play كي ترى وتسمع العمل الفني حين تنتهي من ملف الصوت، ستجد الزر تحت مساحة العمل. الإخراج إن إخراج الرسوم المتحركة أقرب للتفضيل الشخصي منه إلى مجرد تقنية، فالطريقة التقليدية تقتضي أنك تخرج مشروعك إلى سلسلة من الإطارات ثم تحوّلهم إلى فيديو ﻻحقًا، لكن إن لم يكن لديك وقت فيمكنك الاستفادة من برنامج ffmpeg لإخراجه مباشرة إلى فيديو رغم أن الصوت لن يكون مدمجًا -على الأقل في هذه النسخة من البرنامج- وستدمجه يدويًا ﻻحقًا. ولقد وجدت أن الأسهل هو أن أخرج العمل في سلسلة إطارات، ذلك أني سأحصل على نسخة master من العمل يمكنني التعديل عليها فيما بعد، وسنفعل ذلك الآن: اذهب إلى قائمة file واخترrender، واختر مسارًا لمجلد فارغ تريد أن تحفظ فيه الصور، ويجب أن يكون اسم الملف -لكل صورة- هو الاسم الذي تريده للعمل، إذ سيضيف Synfig ترقيمًا آليًا للصور يكون أساسه الاسم الذي تختاره. اختر cairo_png من قائمة Target من أجل تسلسل الصور. غيّر قيمة Quality لتكون 9، وAnti-Aliasing لتكون 31. ربما تود أن تعدّل حجم الصورة هنا أيضًا، في حالة لو أردت تصغير أبعاد العمل الفني، إضافة إلى عدد الإطارات التي تريد إخراجها، وهكذا. اضغط على زر Render حين تنتهي. قد يستغرق الأمر بعض الوقت للملف حتى ينتهي، وستظهر رسالة تحت مساحة العمل مباشرة لبيان تقدّم عملية الإخراج. استخدم ffmpeg لتحميل الصور التي أخرجتها إلى فيديو، مثال: ffmpeg -r 16 -f image2 -s hd480 -i dance.%04d.png -vcodec vp8 -an dance-video.web- وسواء كنت ستخرج العمل كملف فيديو أو كتسلسل صور، فإن دمج الصوت معه سهل أيضًا، مثال: ffmpeg -i bounce.webm -i music.flac -acodec libopus dance.webm Your browser does not appear to support HTML5 media. Try updating your browser or (if you are not already) using an open source browser like Firefox or Brave." وهكذا نكون قد أنهينا استعراض برنامج Synfig لتصميم الرسوم المتحركة، ذي المزايا التي ﻻ غنى عنها لأي برنامج تصميم وأكثر، فهو أفضل خيار لك إن كنت تبحث عن إخراج سريع وكفء لرسوم متحركة. ورغم أنه يأخذ منحى تعليمي نوعًا ما إﻻ أنه يستحق بسبب قدرته على إنشاء البنييات تلقائيًا. ترجمة -بتصرف- لمقال How to use Synfig Studio for animation لصاحبه Seth Kenlon