آموزش کدنویسی Expression در افترافکت + ویدئو

چگونه در افترافکت کد اکسپرشن بنویسیم؟

همانطور که می‌دانید استفاده از کدنویسی Expressions در افترافکت، نه تنها موجب سادگی کار می‌گردد، بلکه به فنی‌تر شدن آن نیز کمک می‌کند. از این رو، در ادامه این مطلب به آموزش آن می‌پردازیم.

نحوه ایجاد Parent در افترافکت

در یکی دیگر از مقالات آموزش افترافکت از وبسایت محتوانایس قصد داریم تا به طور اختصاصی به آموزش کدنویسی Expression در افترافکت بپردازیم. برای Parent کردن می‌بایست بر روی دکمه Parent & Link کلیک کنید و آن را به فایل مورد نظر متصل کنید. بدین ترتیب دو فایل Parent شده با یکدیگر تغییر خواهند کرد. برای نمونه در شکل 1 لایه اول را به لایه دوم Parent کردیم. بدین ترتیب با تغییر Position لایه دوم، هر دو شکل حرکت می‌کنند.

اما اگر بخواهید تنها یکی از تنظیمات مانند Scale را به لایه دیگر Parent کنید، باید هر دو لایه را انتخاب کنید، از صفحه کلید S را بزنید تا Scale دو لایه نمایش داده شود. سپس Scale لایه اول را به Scale لایه دوم متصل کنید. برای این منظور کلید Alt را نگه داشته و بر روی علامت ساعت کنار Scale لایه اول کلیک کنید تا کادر مورد نظر به نمایش درآید. گزینه‌هایی به نمایش درمی‌ایند که یکی از آن‌ها Parent است. روی آن کلیک کرده و آن را روی گزینه Scale لایه دوم قرار دهید. در این حالت تنها می‌توانید به Parent کردن گزینه‌ها بپردازید.

آموزش کدنویسی Expression در افترافکت

بدین ترتیب Scale دو لایه به یکدیگر متصل شده و مقدار Scale لایه اول به رنگ قرمز درمی‌آید. با این روش می‌توانید تنظیمات دیگر همچون Rotation یا Position را نیز Parent کنید. همچنین با استفاده از گزینه‌ای که با علامت = نشان داده شده، حالت Parent را غیرفعال کنید. در این صورت، مقادیر به رنگ آبی درآمده و تایم لاین افترافکت یک کد نوشته می‌شود. با نگهداشتن Alt و کلیک روی علامت ساعت، می‌توانید این حالت را به کلی غیرفعال کنید.

با غیرفعال کردن حالت‌های قبلی، لایه اول را انتخاب کنید و با نگهداشتن Alt، بر روی علامت ساعت Position کلیک کنید. گزینه Parent نمایش داده شده را انتخاب و آن را بر روی Position لایه دوم قرار دهید. بدین ترتیب مشاهده خواهید کرد که تصویر دوم بر روی تصویر اول قرار می‌گیرد که بیانگر تفاوت آن با حالت Parent کردن دو لایه است.

با Parent کردن لایه‌ها یا گزینه‌ها، کدی ایجاد می‌گردد که بیانگر آدرس قسمتی است که با لایه گزینه اول مرتبط شده و می‌توانید آن را تغییر دهید. به عنوان نمونه در حالت قبل Position ها به هم مرتبط شدند که می‌توانید در قسمت کد، Position را پاک کنید و Scale را جایگزین نمایید. در صورت پاک کردن کدها، Parent غیرفعال می‌گردد.

برنامه‌نویسی در افترافکت و ساخت شمارنده

در این بخش از آموزش کدنویسی Expression در افترافکت باید به مقادیر مربوط به هر گزینه توجه داشته باشید. به عنوان نمونه Position و Scale دو مقدار عددی و Rotation و Opacity یک مقدار عددی دارند. با نگهداشتن Alt و کلیک بر روی علامت ساعت Position کدهای مربوط به آن را پاک کنید و دو عدد را در براکت به گونه‌ای که با کاما از یکدیگر جدا شده‌اند، بنویسید. به عنوان نمونه عبارت [500,700] را تایپ کنید تا Position در موقعیت 500 و 700 قرار بگیرد و دیگر تغییر نکند.

عدد 500 را انتخاب و بجای آن Opacity همین لایه را تایپ کنید یا با انتخاب 500 روی دکمه مربوط به Parent کلیک کنید و آن را روی opacity قرار دهید. بدین ترتیب مقدار عددی محور X از مقدار Opacity پیروی می‌کند و مقدار Y عدد ثابت 700 خواهد بود.

می‌توانید در بخش مربوط به کد، مقدار Opacity را در عددی ضرب و یا جمع نمایید. برای مثال اگر آن را در 6 ضرب کنید، مقدار Opacity در 6 ضرب شده و مقدار X گزینه Position مشخص می‌گردد. یعنی اگر Opacity عدد 100 باشد، مقدار X گزینه Position روی 600 تنظیم می‌شود.

پرنت کردن (آموزش کدنویسی Expression در افترافکت)

اکنون می‌توانید مقدار 700 را با گزینه دیگری Parent کنید. یعنی آن را انتخاب و با گزینه Scale مرتبط کنید. بدین ترتیب در قسمت کد نیز بجای عدد، آدرس گزینه Scale قرار می‌گیرد. البته این مقدار را نمی‌توانید به خود گزینه، Parent کنید چراکه شامل دو عدد است و باید تنها با یکی از مقادیر Parent شود. برای مثال عدد 700 را انتخاب و آن را با X گزینه Scale مرتبط کنید. در صورت تمایل می‌توانید عدد دوم را در مقداری ضرب کنید.

در بخشExpressions Language Menu  امکان دسترسی به کدهای پیشرفته‌تر وجود دارد. به عبارتی تمام توابع مورد نیاز در این بخش قرار دارد که می‌توانید از آن‌ها استفاده کنید.

جهت آشنایی بیشتر یک پروژه آماده را با یکدیگر بررسی می‌کنیم که تمام قسمت‌های آن با Shape Layer ایجاد و به یک Null Object متصل شده‌اند. یک لایه Matte ایجاد کنید و بوسیله Track Matte آن را به شکلی تنظیم کنید که فقط لایه‌های دیگر در کادر دیده شوند.

تعامل بین دو لایه

در ادامه مقاله آموزش کدنویسی Expression در افترافکت باید بگوییم که برای ایجاد تعامل بین دو لایه SolideBar  و  Null به گونه‌ای که با حرکت رو به پایین SolideBar، Null رو به بالا حرکت کند، می‌بایست Null را انتخاب کنید و P را از صفحه کلید بزنید تا Position نمایش داده شود. در این بخش تنها به مقدار محور Y ها نیاز دارید، پس بهتر است مقادیر X و Y را از یکدیگر جدا کنید. برای این منظور روی آن کلیک کرده و گزینه Separate Dimensions را فعال کنید. برای لایهSolideBar  نیز این حالت را ایجاد کنید.

با نگهداشتن Alt در لایه Null روی گزینه Y-Position کلیک کنید. در بخش کد یک [] ایجاد و مقدار Y مربوط به Null را از Y مربوط به SolideBar کم نمائید. یعنی در ابتدا مقدار Y-Position لایه Null را با خودش Parent و سپس علامت – را به آن اضافه کنید و پس از آن به مقدار Y-Position لایه SolideBar وصل نمائید. بدین ترتیب اگر SolideBar به بالا حرکت کند، Null به پایین حرکت می‌کند و بالعکس.

به منظور عدم جابجایی لایه اول در جهت X ها، مقدار آن را قفل کنید. یعنی Alt را نگه دارید و روی X-Position کلیک کنید و عدد آن را در قسمت کد بنویسید. از آنجایی که پس از ایجاد Parent ها تصویر Null تغییر مکان می‌دهد و بخش ابتدایی آن دیده نمی‌شود، لازم است مقدار نوشته شده در کد را با عددی جمع کنید تا به مکان اولیه باز گردد. همچنین برای افزایش حرکت لایه SolideBar و نمایش تمام قسمت‌های Null تا رسیدن به انتهای کادر، لازم است برای مقدار مربوط به این لایه یک ضریب مشخص نمائید.

به منظور Animate کردن پروژه می‌توانید برای گزینه Position چند Keyframe ایجاد کنید.

مراحل ساخت شمارشگر در افترافکت

در ادامه مقاله آموزش کدنویسی Expression در افترافکت قصد داریم تا نحوه ساخت شمارشگر در این برنامه را به طور گام به گام توضیه دهیم. با ما همراه باشید.

ایجاد Composition

از سربرگ Composition گزینه New Composition را انتخاب و یک Composition با تنظیمات دلخواه ایجاد کنید. با ابزار Text عبارت مورد نظر را تایپ و با ابزار Selection آن را درج کنید.

فعالسازی Source Text

برای کدنویسی در افترافکت، روی لیست بازشوی مربوطه کلیک کنید و از بخش Text گزینه Source Text را فعال نمائید. با نگه داشتن Alt از صفحه کلید و کلیک روی Source Text بخش Time Line فعال می‌شود. با وارد کردن کد Time خواهید دید که زمان با تمام جزئیات به نمایش در خواهد آمد.

برای نمونه اگر کد Math.floor (time) را در Source تایپ کنید، خواهید دید که جزئیات کمتری را از ساعت نمایش می‌دهد.

جستجوی Clockworks

از آنجایی که نوشتن کد ساعت کار دشواری است، از بخش Effect & Preset عبارت Clockworks را جستجو کنید. البته به یاد داشته باشید که این Preset در خود افترافکت موجود نیست و باید آن را دانلود و به برنامه اضافه کنید. با انتخاب این گزینه و قرار دادن آن بر روی متن، ساعت نمایش داده می‌شود. مشاهده می‌کنید که در قسمت Source کدهای افترافکت ایجاده شده‌اند.

بدین ترتیب پنجره مربوطه در گوشه سمت چپ نمایش داده می‌شود که می‌توانید از بخش Element تنظیمات دلخواه را برای نمایش ساعت اعمال کنید. برای نمونه گزینه‌های ثانیه و صدم ثانیه فعال شده‌اند.

انتخاب Ramp و Solid

تا اینجای مقاله آموزش کدنویسی Expression در افترافکت متوجه شدیم که شمارشگر چگونه ایجاد می‌شود. حال برای زیباسازی صفحه نمایش، از سربرگ Layer بخش New گزینه Solid را انتخاب کنید و از بخش Effect & Preset عبارت Ramp را جستجو کنید. حال لایه Solid را پس از لایه متن قرار دهید. رنگ افکت را با استفاده از Start Color  و End Color و فونت را با استفاده از پنل Character به دلخواه تغییر دهید. با استفاده از کلید Space صفحه کلید کار را اجرا کنید. در این حالت خواهید دید که همزمان با نمایش ثانیه‌ها در مانیتور، CTI نیز جابجا می‌شود. همچنین با راست کلیک روی متن و انتخاب Drop Shadow از بخش Layer Style می‌توانید مقداری سایه و برجستگی ایجاد کنید.