مقالات

نگاهی به موشن گرافیک تحت وب

زمانی دنیای اینترنت تشکیل شده بود از متن‌هایی که پاراگراف بندی شده بودند و در کنارشان تعدادی عکس کوچک دیده می شد، و تفاوت اصلیشان با سایر رسانه‌ها، پیوند بین این صفحات بود. مفهومی که کلمه «وب» به معنای تار عنکبوت از آن برآمده است. اما رفته رفته این سایتهای خشک و عبوس جای خود را به ساختارهای متنوع‌تر که جولانگاه طراحان بود داد. دیگر هدف بسیاری از سایتها چیزی فراتر از انتقال اطلاعات متنی با چاشنی تصاویر بود. بلکه سایتها باید با کاربران ارتباط برقرار می کردند، جذبشان می کردند و چشم نواز بودند. اینجا رشته جدیدی از «دیزاین» مطرح شد: Web Design. و این دیزاین نوین یک تفاوت اصلی و منحصر به فرد با رقیبانش داشت: تعاملی بودن (Interactivity). جذابیت و طراحی سایتها باید بازدیدکنندگان را به تعامل وادار می‌کرد. بنابراین طراحی تعاملی در کنار عرصه جدیدی از طراحی گرافیک بر سکوی وب سوار شدند تا دنیای وب را متحول کنند.
یکی از شیوه های جذاب برای از بین بردن سکون صفحات وب، انیمیشن یا به عبارت بهتر موشن گرافیک بود. این گرافیک متحرک، به دو شکل سنتی و تعاملی در وب گسترش پیدا کرد. در شکل اول می توان به لوگوها و بنرهای تبلیغاتی اشاره نمود که در آنها از حرکت برای جذب بیشتر نگاه استفاده می شد. و شکل دوم که پیش‌تر کمتر سابقه داشته، انیمیشن یا حرکتی بود که در پاسخ به عمل کاربر اتفاق می افتاد. مثلا یک menu که با رفتن ماوس روی آن باز می‌شود.

امروزه این دو شکل آنچنان با یکدیگر تلفیق شده که تمایز آنها گاه امکان‌ناپذیر است. ضمن اینکه تاثیر متقابل زمینه‌های مختلف مرتبط با وب، و نیز پیشرفت چشمگیر آنها موجب می‌شود ما شاهد شکل‌گیری سبکها، گرایشات و مدهای جدیدی در طراحی وب و موشن گرافیک در قالبهای مختلف باشیم.

در این مقاله نگاهی کوتاه داریم به قالبهای اصلی موشن گرافیک در وب.

1- نخستین حرکت‌ها: فایل‌های GIF
شاید نخستین تجربه‌های موشن گرافیک در وب را بتوانیم در قالب فایل‌های GIF ببینیم. این قالب گرافیکی بر اساس تعریف سنتی انیمیشن، یعنی متحرک‌سازی فریم به فریم تعریف شد و جای خود را در وبسایتها باز نمود. این دسته از انیمیشن تحت وب، تعاملی نبود و با عمل کاربر عکس‌العملی نشان نمی‌داد. بیشترین کاربرد این قالب در نخستین نمونه‌های بنرهای تبلیغاتی تحت وب بود. عناوین و تصاویر معمولا در چند فریم معدود و با حرکتهای سریع سعی در جذب نگاه مخاطب می کرد. علت اصلی این محدودیت، حجم فایل بود، زیرا با زیاد شدن فریمها حجم فایل بیشتر می شد و بارگزاری آنها مشکل‌تر. البته استفاده‌های خلاقانه دیگری از این قالب هم میشد: مانند چرخش لوگوی یک سایت یا ستاره های چشمک زن بک‌گراند. امروزه نیز هنوز این قالب انیمیشنی گاه استفاده می‌شود، اما در مقابل سایر رقبا، حرف زیادی برای گفتن ندارد.

2- نخستین حرکتهای تعاملی، محصول مشترک CSS و JavaScript
با پیشرفت و گسترش اینترنت و مطرح شدن نیازهای جدید و اهمیت یافتن دیزاین در وب، تگهای HTML برای دیزاین ناکافی بودند و استانداردها و کدهای جدیدی باید تعریف می‌شد. این وظیفه مهم را کدهای CSS به عهده گرفتند و با ارائه نسخه‌های کاملتر آن به نوعی دنیای وب دیزاین متحول شد. حالا دیگر وقتی ماوس روی یک کلید می رفت، کلید برجسته می‌شد و رنگ نوشته آن تغییر می کرد. اما برای کنترل و تغییر خواص CSS نیاز به یک زبان برنامه نویسی بود که بتواند با حلقه ها و شرطی‌ها و تاخیرهایش (Delay)، اتفاقات پیشرفته‌تری مانند حرکت را هنگام اجرای صفحات وب اجرا کند. اینجا JavaScript با قدرت تمام وارد می‌شود و تمام تگهای HTML و خواص CSS را تحت کنترل خودش می‌گیرد. در این مرحله، هر دو زمینه انیمیشن سنتی و تعاملی در وب تکانی می‌خورد. حالا طیف وسیعی از حرکتها را می‌توانیم ببینیم: منوها کشوی و عکسها اسلاید می شوند، و از طرفی دیگر ممکن است شاهد بارش برف روی صفحه وب باشیم یا یک بادکنک معلق و متحرک را ببینیم. حتی ممکن است یک ساعت عقربه‌ای به دنبال ماوس کشیده شود و بچرخد.

3- جولانگاه موشن گرافیک: Flash
به موازات این پیشرفت‌ها، یک سکوی تحت وب دیگر کم‌کم مطرح می شود و جای خود را باز می کند: نرم افزار فلش، محصولی از شرکت macromedia (که اخیرا Adobe آن را خریده)، فایل‌هایی بر اساس طراحی برداری (vector) خروجی می‌دهد که با نصب Flash Player به راحتی روی صفحات وب اجرا می‌شود. دنیای فلش، دنیایی کاملا متفاوت با محیط گرافیک پیکسلی یا Bitmap بود. این قالب می توانست حرکتهای نرم و زیبایی از شکل‌ها و متن‌ها را با حجمی قابل قبول و گاه بسیار کمتر از معادل GIF خود تولید کند. برگ برنده دیگر فلش این بود که قابلیت تعاملی بودن را نیز داشت. اما مشکل آن این بود که روی همه مرورگرها این افزونه (Plug-in) نصب نبود و بنابراین همه لزوما نمی‌توانستند فلش را ببینند. اما ویژگیهای منحصر به فرد فلش و گسترش سریع آن، کمک کرد تا اکثریت کاربران اینترنت Flash Player کم حجم را دانلود و این قابلیت را فعال کنند. بدین ترتیب کم‌کم شاهد نقش پررنگ‌تر فلش در صفحات وب، و شکل گیری سایتهای Full-Flash بودیم.

بنابراین می‌توان «استفاده از فلش» را در وب به سه دسته نه چندان متمایز تقسیم نمود: دسته اول فلشهای تبلیغاتی هستند که ادامه راه بنرها و لوگوهای GIF را با افکتها و حرکتهای پیشرفته‌تر پیش می‌برند. دسته دوم فلشهای تزئینی هستند که در بخشهای مختلف ساختار سایتها استفاده می‌شوند. برای مثال در طراحی هدر، منوها، کلیدها، اسلایدها و... ممکن است از فلش استفاده شود. و دسته سوم سایتهای فول فلش هستند، که تمام سایت، اعم از ساختار و محتوا، تحت فلش اجرا می‌شود و دیگر از شیوه کدنویسی استاندارد صفحات وب برای ارائه محتوا استفاده نمی‌شود. اینگونه سایتهای اعجاب‌انگیز، سرشار از حرکتها و افکتهای متنوع، جذاب و خلاقانه‌ای هستند که در زمینه موشن‌گرافیک تحت وب حرف اول را می‌زند. تعاملی بودن این محیط در کنار قدرت فوق‌العاده فلش در خلق انیمیشن، موجب شد شاهکارهای آنلاینی خلق شود که در نوع خود بی نظیر باشد. (نمونه‌هایی از این قبیل سایت‌ها را می توانید اینجا ببینید).

اما بنا به دلایلی این‌گونه از سایتها آنچنان که باید رواج پیدا نکردند. این شیوه از طراحی سایت نقصهای جدی نیز داشت که اینجا به مهمترین آنها اشاره می کنیم:

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

ب- محتوای عمدتا استاتیک: اکثر قریب به اتفاق سایتهای فول فلش، محتوایی استاتیک دارند. خصلت چیدمانهای خلاقانه گرافیکی این سایتها، کمتر اجازه می‌دهد که یک سایت به معنای واقعی داینامیک داشته باشیم. منظور ما از داینامیک، محتوای پویایی است که از یک دیتابیس خوانده شود و صاحب سایت بتواند بدون نیاز به طراح سایت، آن محتوا را تغییر دهد. اما معمولا اینگونه سایتها برای به روز رسانی نیاز به اعمال تغییرات توسط طراح دارند. به خصوص اگر زبان آن غیر انگلیسی و مثلا فارسی باشد! در حالی که اکثر سایتهای استاندارد، از یک سیستم مدیریت محتوا یا CMS بهره می‌برند که محتوایشان بدون نیاز به طراح سایت می تواند به روز شود.

ج- عدم دسترسی به محتوا از طریق موتورهای جستجو: همانطور که می دانیم امروزه اصلی‌ترین منبع بازدید یک سایت از طریق موتورهای جستجوی معروفی نظیر گوگل است که سایتها را بر اساس محتوایشان فهرست (index) می‌کنند. ارتقاء رتبه یک سایت در این فهرست SEO یا «بهینه‌سازی برای موتورهای جستجو» نام دارد که خود یک تخصص است. می‌توان گفت سایتهای فول فلش، در زمینه SEO بسیار ضعیف عمل می‌کنند و معمولا حرفی برای گفتن ندارند. و این ضربه بزرگی به این شیوه از طراحی وب وارد می نماید.

د- گران بودن و دردسر زیاد: معمولا راه‌اندازی سایتهای فول‌فلش که از قابلیتهای فلش بودن بهترین استفاده را ببرد و موشن‌گرافیک‌های جذاب و خلاقانه داشته باشد، هزینه زیادی برای طراحی می‌طلبد. ضمن آنکه حفظ و ساپورت اینگونه سایتها معمولا سخت‌تر و پیچیده‌تر است و نیاز به تخصصهای تلفیقی دارد. بنابراین هر کسی یا هر شرکتی نمی‌تواند سراغ این دسته از سایتها برود.

هـ- دور شدن از مفهوم وب: گرچه سایتهای فول فلش در زمینه تعاملی بودن معمولا چیزی کم ندارند، اما ساختار آنها وب گونه نیست و محدودیتهای زیادی نسبت به رقبای استاندارد خود دارند. متنها معمولا محدودند، تصاویر و متن ها کمتر قابلیت ذخیره شدن یا لینک شدن دارند و... . مثلا شما هیچ وقت یک شبکه اجتماعی فول‎فلش نخواهید دید! در یک کلام، اینگونه سایتهای فول‌فلش بیشتر به درد نرم افزارهای مالتی مدیا می‌خورند تا دنیای تارهای عنکبوت.

با این وجود، این نوع از سایتها همچنان به بقای خود ادامه می‌دهند و رو به پیشرفتند. از لحاظ معیارهای زیبایی‌شناسی موشن‌گرافیک، شاید بی‌نظیرترین نمونه‌ها را بتوان در این گونه از سایتها مشاهده نمود و سایتها را نه برای محتوا، بلکه برای زیبایی و خلاقیت به کار رفته در آنها بازدید نمود.

4- نسل دوم وب: کتابخانه‌های جاوا اسکریپت و jQuery
کتابخانه‌های جاوا اسکریپت یا JavaScript Libraries، مجموعه کدهای جاوا اسکریپت هستند که بسیاری از کارها را آسانتر می کنند و راه میانبر می‌سازند. در واقع مجموعه Functionهای راحت‌الحلقوم را در فایلی مجزا تعریف می‌کنند. مثلا اگر برای ایجاد یک حرکت ساده تحت وب، نیاز به چندین خط جاوا اسکریپت داریم، با اضافه کردن فایل یکی از این کتابخانه‌ها، با یک خط می توان آن حرکت را برنامه نویسی کرد. معروفترین و رایجترین این کتابخانه‌ها jQuery است که همزمان با مطرح شدن نسل دوم وب یا Web 2.0 و به موازات نیازهای تازه معرفی شد. از دیگر کتابخانه‌های کاربردی می‌توان به YUI، ProtoType، MooTools و... اشاره نمود. یکی از مواردی که اکثر این کتابخانه ها در خود جای داده‌اند، بحث حرکت است. امروزه شاهد آنیم که روزانه ده‌ها و شاید صدها ایده جدید بر مبنای jQuery در اینترنت معرفی می‌شوند و طراحان وب حتی بدون نیاز به داشتن دانش jQuery می‌تواند از این ایده‌ها و کدهای آماده و رایگان در سایتهای خود استفاده کنند و بومی‌سازی نمایند.
اما jQuery و همقطارانش چه ویژگیهایی دارند که اینچنین مورد استقبال قرار گرفته؟ اصلی ترین ویژگی آن در شعار جی‌کوئری یعنی "Write Less, Do More" نهفته است: می‌توان با چند خط کد ساده (که آن‌هم می‌تواند در یک فایل external قرار گیرد و به صفحه اصلی لینک شود)، حرکتها و ایده‌های خارق العاده‌ای را اجرا نمود. از پیشرفته‌ترین نوع اسلایدرها و گالری‌های متحرک گرفته، تا منوها و Tabها و افکتهای Fade و حتی تصاویر انیمیشنی کامل. بله، قابلیتهای نهفته جی‌کوئری حتی آنقدر زیادند که نمونه هایی از انیمیشن داستانی نیز با آن ساخته شده! بنابراین در برخی زمینه‌ها می‌تواند رقیب جدی Flash محسوب شود و با فانکشنهای پیشرفته اش و سازگاری کاملش با SEO و استانداردهای وب، کم کم بر تمام پهنه اینترنت گسترده شود. همانطور که هم اکنون نیز بسیاری از سایتهای خبری و اطلاع رسانی از این کدهای قوی برای تنوع و تحرک بصری خود استفاده می‌کنند.

از آنجا که جی‌کوئری برای اجرای خود نیاز به نصب هیچ افزونه‌ای ندارد و محتوای آن از کدهای جاوااسکریپت کاملا جدا هستند، بنابراین می توان ادعا نمود که کاملترین و بی‌نقصترین نمونه از انیمیشن تعاملی تحت وب، در حال حاضر منحصر به کتابخانه های جاوا اسکریپت به خصوص jQuery است.

5- آینده‌ای روشن‌تر با HTML 5
نسخه جدید HTML اولین بار در سال 2004 توسط کنسرسیوم جهانی وب مطرح و در فوریه 2010 تقریبا نهایی شد. نسخه پنجم HTML تگهای کاملا جدیدی را معرفی می‌کند و تعدادی از تگهای قدیمی را منسوخ اعلام خواهد کرد. به طوری که بسیاری معتقدند این قابلیتهای جدید نسل نوینی از طراحی وب و باالطبع اینترنت را شکل خواهد داد. البته هنوز اکثر مرورگرها به طور کامل از این نسخه HTML پشتیبانی نمی‌کنند و علاوه بر آن اکثریت کاربران از مرورگرهای قدیمی استفاده می‌کنند. بنابراین هنوز راه زیادی تا همه‌گیر شدن و رواج کامل این نسخه از زبان کدنویسی استاتیک وب داریم و هنوز حدود پنج شش سال دیگر تا این آرمانشهر طراحان وب فاصله داریم. اما از قابلیتهای فراوان این نسخه جدید، می‌توان به قابلیتهای مربوط به حرکت اشاره نمود. به طوری که برخی ورود آن را به معنای از میان رفتن فلش در وب می‌دانند. گرچه این نظر کمی دور از ذهن به نظر می آید، زیرا هر کدام در جایگاه و زمینه خود کاربرد خواهند داشت.

به هر حال آینده وب، آینده‌ای سرشار از حرکت، نوآوری و خلاقیت خواهد بود. اینکه سرانجام Adobe Flash پیروز است یا Microsoft SilverLight یا HTML 5، یا نسل نوینی از کتابخانه های جاوا اسکریپت، شاید زیاد مهم نباشد. مساله نقش پررنگ شاخه نوینی از گرافیک متحرک، با عنوان «موشن‌گرافیک تحت وب» یا «گرافیک متحرک تعاملی» است. مساله‌ای که امروزه در سایر زمینه‌های طراحی و رابطهای کاربری نیز، از جمله تم‌های موبایل، بازی‌های رایانه‌ای و... بسیار مهم و کاربردی است. در آینده‌ای نه چندان دور تمام این زمینه‌های دیزاین با یکدیگر و با اپلیکشن‌های تحت وب تلفیق خواهند شد. و شاید گزافه نباشد بگوییم آینده از آن موشن‌گرافیک تحت وب است!

* این مقاله به سفارش گرته: هفته نامه تحلیلی-پژوهشی گرافیک ایران به مناسبت پرونده «موشن گرافیک» نوشته شده است.

* لطفا در صورت استفاده از مقاله در سایت خود، لینک منبع را فراموش نکنید: www.Hamed-BD.com