آشنایی با گرافیک وب - ۴ | تصاویر متحرک

هفل که پیشتر با دیدگاه‌هایش در مورد گرافیک وب آشنا شدید، این‌بار از تصاویر متحرک برای وب می‌گوید.

تصاویر متحرک

Rollover‌های ساده موس و gif های انیمیشن‌دار وقتی که به خوبی به کار برده شوند، موجب می‌شوند تا کاربر سایت شما بتواند ارتباطی بهتر با آن برقرار کند. ساختن این‌ها نیز خیلی آسان است.

همه‌چیز درباره rollover

rollover تصویری است که در هنگام قرار گرفتن موس بر روی آن با تصویری دیگر جابه‌جا می‌شود. در اکثر موارد، این تغییر با استفاده از یک java script ساده، که اکثر برنامه‌های گرافیکی آن را به عنوان بخشی از rollover صادر شده ذخیره می‌کنند، انجام می‌شود.

از آنجا که rollover ها معمولاً برای بهبود مرور صفحات استفاده می‌شوند، ما هم ساختن email Rufo را به عنوان نمونه در این جا به شما معرفی می‌کنیم. من از نرم‌افزار firework برای ساختن آن استفاده کردم، اما اگر بخواهید اندکی درباره Java Script  یاد بگیرید، می‌توانید آن را به طور دستی درست کنید.

این کار را با وارد کردن یک تصویر آغاز کنید. به دور این تصویر یک slice یا hotspot رسم کنید. در حالت انتخاب slice یا hotspot پنجره object  را باز کرده و تصویر را نام‌گذاری نمایید. برنامه به طور خودکار نام فریم دوم را ایجاد می‌کند. سپس، متن ALT  را پر کنید و URL مورد نظر خود را برای ارتباط با این تصویر در قسمت مربوط وارد کنید (در مورد مثال ما، mailto) . سپس، پنجره Frames را باز کرده و یک فریم جدید در آن وارد کنید یا فریم قبلی را نسخه‌برداری و تکرار نمایید.

تصویر دوم را در فریم دوم درست کرده یا وارد کنید. وقتی تصویر دوم در جای خود قرار گرفت، «Onion skinning» (به عنوان یک ابزار کارآمد که شفافیت هر فریم را افزایش می‌دهد و شما می‌توانید دو عکس روی هم را با هم مقایسه کنید) به شما امکان می‌دهد تا تنظیمات نهایی را انجام دهید.
وقتی هر دو فریم آماده شدند، slice یا hotspot  را انتخاب کنید و پنجره behavior را باز نمایید. از منو، simple rollover را انتخاب کنید.

این فرمان یک کد java script مورد نیاز برای عملکرد rollover را ایجاد می‌کند. همچنین، شما می‌توانید از این منو متنی را برای نوار وضعیت مرورگر انتخاب کنید.

تصاویر را به همان شکل معمول صادر کنید، فقط این بار باید HTML را نیز ذخیره کنید. این HTML شامل کدهای javascript می‌باشد و می‌تواند بخشی از یک صفحه بزرگتر باشد که توسط برنامه‌ای مانند Dream weaver تولید شده است.

همچنین می‌توانید آن را بریده و در داخل یک برنامه ویرایشگر متن HTML قرار دهید. Rollover ساده شما حالا آماده است. اینها می‌توانند پیچیده‌تر باشند، اما اصول اولیه تغییر نمی‌کنند.

Gif های دارای انیمیشن

Gif های دارای انیمیشن از آن نظر که دارای چندین فریم می‌باشند، مشابه rollover هستند. البته، Gif های دارای انیمیشن معمولاً از طریق کلیک موس فعال نمی‌شوند و می‌توانند تعداد فریم‌های بیشتری داشته باشند.

Gif های انیمیشن‌دار از تمام مزایای قالب gif بهره‌مند هستند و اکثر مرورگرهای عمده در اینترنت بدون نیاز به هیچ plug –in آنها را پشتیبانی می‌کنند. نرم‌افزارهای بسیار خوبی با قیمت‌های مناسب برای ساختن این گونه تصاویر متحرک وجود دارد مانند: GIF Constructor برای PC و GifBuilder برای Mac که کار با این نرم‌افزارها خیلی ساده است.

من در مثال خودم باز از نرم‌افزار Fireworke استفاده کرده‌ام. در این نمونه من چهار فریم ساخته‌ام که شامل تصاویر دشمن بزرگ گربه، Dogbot (سگ رباتی) می‌باشد.

مرحله اول:

یک تصویر بسازید یا وارد کنید و آن را در دو فریم یا بیشتر قرار دهید.

مرحله دوم:

با استفاده از قابلیت onion skinning هر تصویر را با دیگری مقایسه کرده و تغییراتی در آن ایجاد کنید.

مرحله سوم:

Fireworks زمان پیش فرض حرکت هر فریم را ۱۰۰/۲۰ در ثانیه تنظیم می‌کند، اما شما می‌توانید با مراجعه به پنجره frame در بخش properties این زمان را تغییر دهید. همچنین شما می‌توانید تعداد دفاعات تکرار این انیمیشن را با انتخاب دکمه Looping در پایین پنجره frame مشخص نمایید.

مرحله چهارم:

تصویر را بهینه‌سازی نموده و سپس خروجی بگیرید.

به همین سادگی!

Gif های انیمیشن‌دار واقعاً می‌توانند توجه بیننده را به خود جلب کنند، اما از طرفی دیگر می‌توانند موجب انحراف توجه او نیز بشوند. معمولاً بهتر است فقط در صورت لزوم و نیاز صفحه از آنها استفاده کنید.

اکنون تنها کاری که باید کرد این است که این gif ها و jpg ها را به سایت خود منتقل نمایید.
شما هم آزمایش کنید و برای خود یک سایت آماده سازید.