انیمیشن و صفحات وب
انیمیشن و صفحات وب
گاهی انیمیشن (تصاویر متحرک) نسبت به تصاویر ساکن جذابترند. به طوری که امروزه یکی از جنبه های متداول در وب است. انیمیشن مبتنی تصاویر GIF را می توان در نرم افزارهایی مثل photoshop ایجاد کرده و از آنها در مرورگرهای مختلف استفاده نمود.
انیمیشن و صفحات وب
گاهی انیمیشن (تصاویر متحرک) نسبت به تصاویر ساکن جذابترند. به طوری که امروزه یکی از جنبه های متداول در وب است. انیمیشن مبتنی تصاویر GIF را می توان در نرم افزارهایی مثل photoshop ایجاد کرده و از آنها در مرورگرهای مختلف استفاده نمود.
انیمیشن مبتنی بر GIF
انیمیشن مبتنی بر GIF، تصاویر GIF هستند که حرکت می کنند. انیمیشن GIF را می توانید به صفحه وب وارد کنید حرکت کند. GIF انیمیشن می تواند انیمیشن کوتاهی را ایجاد نماید. برای انتقال یک فایل انیمیشن مبتنی بر GIF به صفحه وب، همانند یک تصویر GIF معمولی از دستور IMG در HTML استفاده می شود.
مثالی ۵-۶
من بر روی کامپیوتر خودم، یک فایل انیمیشن به نام hand.gif دارم و میخواهم آن را به صفحه وب بیاورم و از آن استفاده کنم. برای این منظور، دستورات زیر را در notepadنوشتم که حاصل اجرای آن در شکل ۵-۶ آمده است.
<HTML>
<H1> A SAMPLE IMAGE </H1>
<HR>
<IMG SCR="C:\HAND.GIF">
</HTML>
فایل را به نام htm.6-5 بر روی دیسک ذخیره کردم و پس از خروج از برنامه notepad آن را به مرورگر وب )Internet Explorer( آوردم تا انیمیشن را مشاهده کنم. پس از اتمام کار، از این مرورگر خارج شدم. اگر شما هم می خواهید این فایل را داشته باشید ، از طریق پست الکترونیکی با من تماس بگیرید تا آ« را برای شما ارسال کنم
ساخت یک فایل انیمیشن
تقریباً همه افراد، بخصوص کودکان به انیمیشن علاقه مند هستند. هرچند که موضوع این کتاب، ساخت تصاویر وب نیست، ولی در اینجا روش ساختن فایل انیمیشن را شرح میدهم تا علاقه مندان بتوانند انیمیشن مورد نظر خود را بسازند و در وب سایت از آن استفاده کنند. برای ساخت انیمیشن می توان از نرم افزارهای گوناگونی استفاده کرد. من در اینجا نرم افزار فتوشاپ ۵/۵ را برای ساخت انیمیشن انتخاب کردم. زیرا اولاً این نرم افزار در همه جا در دسترس است و ثانیاً کارکردن با آن آسان است (دقت کنید که در نسخه های قبلی فتوشاپ، مثل فتوشاپ ۵، این امکان وجود ندارد). در فتوشاپ ۵/۵، برنامه ای به نام ImageReady وجود دارد که فایلهای انیمیشن را می سازد.- هر فایل انیمیشن GIF، از چندین فریم تشکیل شده است که مثل یک قطعه فیلم متحرک است. هر فریم با فریم دیگر متفاوت است. شکل ۵-۶ را که قبلاً مشاهده کردید، از چندین فریم تشکیل شده است که آنها را در شکل ۶-۶ مشاهده میکنید. این فریمها موجب میشوند تا یک دست همواره به صورت انیمیشن باز و بسته شود و بر روی هر انگشت دست حرفی نوشته شود.بنابراین نکته مهم در طراحی یک انیمیشن طراحی فریم هایی است که فایل انیمیشن را تشکیل می دهد .در نتیجه ساخت انیمیشن ، یعنی ساخت فریم ها و سپس ترکیب آنها با یکدیگر به روشهای گوناگونی می توان فریمها را ایجاد و سپس آنها را در یک فایل انیمیشن با یکدیگر ترکیب کرد. در ادامه، روش ساده ای را مطرح میکنیم. دقت داشته باشید که ساخت تصاویر انیمیشن بحث مفصلی است که هدف این مباحث نیست. مراحل زیر را انجام دهید تا یک تصویر انیمیشن بسازید.
1 ". اگر نرم افزار فتوشاپ ۵۵ در کامپیوتر تان نصب نیست، آن را نصب کنید. همراه با نصب این نرمافزار، برنامه ای به نام Image Ready نیز نصب میشودکه پرای دسہ تیابی به آن می توانید به مسیر Start/Programs/Adobe/photoshop مراجع کنید
2.برنامه image Ready را به روشی که در قدم گفته شد اجرا کنید (محیط آن مثل محیط فتوشاپ است، ولی با اندکی تغییر). پس از راه اندازی این برنامه، پنجره های Animation و Layers را در کنار سایر پنجره ها مشاهده خواهید کرد (شکلی ۷-۶
پنجره های Animation و Layers در فتوشاپ 5/5
- ۳. با گزینه File/New در Image Ready، فایل جدیدی ایجاد کنید.
۴. با گزینه Layer/New/New Layer یک لایه جدید ایجاد کنید.
۵. دکمه مولد منوی انیمیشن را در پنجره انیمیشن (دکمه *) کلیک کنید تا منویی ظاهر شود. در این منو، گزینه New frameرا کلیک کنید تا یک فریم جدید در این لایه ایجاد نمایید. اکنون یک فریم از تصویر انیمیشن را در این لایه ایجاد کنید. برای اینکه کار خود را اسان کنیم، متن A Sample Animation را به صورت انیمیشن در میاوریم. برای این کار، عنصر T را از نوارابزار Image Ready انتخاب کنید تا یک متن انیمیشن ایجاد نمایید. پس از انتخاب این ابزار، در نقطه ای از فایلی که باز کردید کلیک کنید تا مکان نما در آن محل قرار گیرد. اکنون حرف A را تایپ کنید و کلید Space را فشار دهید. یعنی فریم A در لایه یک قرار دارد و حاوی حرف A و یک فضای خالی است.
6. اکنون فریم ۲ را باید در لایه ۲ قرار دهید. برای این منظور یک لایه جدید ایجاد کنید (گزینه
Layer/NewLayer را انتخاب کنید) و سپس یک فریم جدید ایجاد نمایید (دکمه * را در پنجره انیمیشن کلیک کرده، از منوی حاصل New Frame را انتخاب کنید). اکنون حرف S را تایپ کنید.
۷. مرحله ۶ را برای تمام حروف عبارت ASample Animation تکرار کنید. من این کارها را انجام دادم
و نتیجه اش در شکل ۸-۶ آمده است.
۸. برای اینکه این فایل را در محیط Image Ready امتحان کنید، دکمه " (play animation) را در پنجره Animation (شکل ۷-۶) کلیک کنید. اکنون حالت انیمیشن مشاهده می شود. برای توقف انیمیشن، دکمه ESC را از صفحه کلید یا دکمه (stop animation) را در پنجره animation کلیک کنید.
۹. برای اینکه انیمیشن را در یک مرورگر (مثل Internet Explorer) امتحان کنید، گزینه File/preview/Internet Explorer را انتخاب نمایید. بدین ترتیب، این فایل به آن مرورگر منتقل میشود و حالت انیمیشن در آن اجرا می گردد.
۱۰. پس از کارکردن با مرورگر، از آن خارج شوید تا به محیط ImageReady برگردید.
۱۱. پسوند فایل انیمیشنی که ایجاد کردید، psd است که در مرورگرها قابل استفاده نیست. این فایل باید با
پسوند gif ذخیره شود. برای این منظور گزینه File/Save Optimized As را انتخاب کرده، در کادری که ظاهر می شود، نام فایل را (مثلاً anim) وارد کنید. پسوند فایل توسط سیستم gif انتخاب می گردد.
۱۲. اکنون از برنامه image Raedy خارج شوید. هنگام خروج از شما درخواست می شود که آیا فایل با پسوند psd نیز ذخیره شود یا خیر، جواب مناسبی بدهید تا از آن خارج شوید.
۱۳. یک برنامه ساده HTML ایجاد کرده، تصویر anim.gif را با دستور <IMG >که به آن اضافه کنید. نام برنامه HTML را anim.htm انتخاب کنید
۱۴. مرورگر Internet Explorer را اجرا کرده، فایل anim.htm را به آن وارد کنید. اکنون فایل انیمیشن در این مرورگر اجرا می گردد.
۱۵. پس از کارکردن با انیمیشن از مرورگر خارج شوید.