نحوه ساخت تصاویر جاوا اسكریپت حساس به وضعیت ماوس

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

ایجاد یك فایل جدید در Image Ready   

در برنامه Image Ready گزینه File\New را انتخاب كنید تا كادر محاوره‌ای New Document نمایان شود بطوریكه بتوانیــد یك فایل جدید ایجاد كنید. در این كار عملی، سندی با نام Rollover Test ایجاد كرده و مقادیر عرض و ارتفاع آن را 100 تعیین كنید. سپس دكمه رادیویی White را برای تعیین پس‌زمینه سفید انتخاب كرده و OK را كلیك نمائید.

ایجاد دكمه  

رنگ پیش زمینه‌ای كه می‌خواهید در تصویر دكمه از آن استفاده كنید را انتخاب نمائید. سپس ابزار Elliptical Marquee را انتخاب كنید و در حالیكه كلید Shift را پائین نگه داشته‌اید در داخل تصویر یك دایره ترسیم كنید. از ابزار سطل رنگ (Paint Bucket) برای پر كردن شكل دكمه با رنگ تعیین شده در قسمت پیش زمینه استفاده كنید.

افزودن افكت لایه  

برای ایجاد حالت سه بعدی گزینه Layer\Layer Style\Bevel and Emboss را انتخاب كنید. پارامترهای مورد نظرتان را در پالت Bevel and Emboss ای كه نمایان می‌شود تعیین كنید. در صورت تمایل می‌توانید برای ایجاد یك شكل طبیعی‌تر از دكمه، از افكت Outer Glow استفاده كنید. تنها كافی است بر روی گزینه Outer Glow كه در سمت چپ كادر محاوره‌ای Layer Style قرار دارد كلیك كنید و گزینه‌ها را انتخاب كنید. همانند شكل زیر:

كپی از لایه موجود  

از منوی پالت Layers گزینه Duplicate Layer را انتخاب كنید تا دكمه و افكت‌‌های آن در لایه جدیدی كپی شوند. گزینه Duplicate Layer را مجدداً انتخاب كنید بطوریكه سه لایه ایجاد شود كه هر یك همان دكمه را نشان می‌‌دهند.

 رنگ آمیزی دكمه‌ها  

در پالت Layers، اولین لایه كپی شده را انتخاب كنید و سپس كادر محاوره‌ای Inner Glow Layer را باز كنید. رنگ سبز روشن را به آن اضافه كرده وOK را كلیك نمائید. به پالت Layers برگشته و دومین لایه كپی شده را انتخاب كنید. سپس مطابق شکل زیر تنظیمات مربوطه را در آن اعمال کنید.

 ایجاد وضعیت‌های دو حالته  

برای باز كردن پالت Rollovers گزینه Window\Actions را انتخاب كنید. از منوی پالت Actions، گزینه New Rollover State را انتخاب كنیدو سپس  دکمه Play را در پالت Ations انتخاب کنید تا وضعیت های Over State و Down State ایجاد شود. در این مرحله شما باید سه وضعیت داشته باشید: Normal ، Over و Down (البته برنامه Image Ready بدون نیاز شما به كدنویسی كدهای جاوا اسكریپت مربوطه را ایجاد می‌كند).

 ضمیمه كردن لایه‌ها به وضعیت‌ها  

در پالت Actions وضعیت Normal را انتخاب كنید. در پالت Layers، لایه‌ای را كه مایلید در وضعیت عادی دكمه نشان داده شود، انتخاب كنید. این مرحله را برای وضعیت Over و Down نیز تكرار كنید. برای ذخیره فایل گزینه File\Save Optimized را انتخاب كنید. توجه داشته باشید كه Format\HTML and Images انتخاب شده باشد.