ایجاد تصاویر متحرك پویا

حال به نقطه‌ای از كتاب رسیده‌ایم كه از كلمات تكنیكی مانند Zoom ، Fly و hop استفاده ‌كنیم. اینها اصطلاحات

Front page هستند كه هنگام متحرك سازی عناصر صفحه با Dynamic HTML (DHTML) از آنها استفاده می‌شود.

برای متحرك سازی عناصر، این عناصر را انتخاب كنید و بعد گزینه‌های نوار ابزار DHTML Effects را انتخاب كنید. این نوار ابزار به شما امكان می‌دهد تا مشخص كنید كه چگونه تصویر متحرك را اجرا كنید (مثلاً با كلیك ماوس) و چه چیزی را نمایش دهید.(مثلاً ، عكس خودتان كه در صفحه حركت كند).تنها مشكل DHTML این است كه در مرورگرهای قدیمی‌تر كار نمی‌كند. برای اینكه این جلوه‌ها دیده شوند، باید مطمئن شوید كه بازدیدكنندگان با مرورگرهای نسخه 4 (یا بالاتر) صفحات شما را بازدید می‌كنند. از منوی Tools ، گزینه Page Options را انتخاب كنید تا كادر محاوره‌ای Page Options باز شود. بعد روی برگه Compatibility كلیك كنید. در اینجا می‌توانید مرورگرهای مقصد را انتخاب كنید. اگر مرورگرهای قدیمی‌تر را انتخاب كنید، برخی از جلوه‌ها روی نوار ابزار DHTML Effects كه در مرحله 4 باز می‌كنید ظاهر نخواهند شد.این جلوه‌ها ، از تغییرات ظریف در فرمت دهی متن یا تصاویری كه مانند توپ لاستیكی روی صفحه بالا و پایین می‌جهند متغیر می‌باشند. به یك تصویر اشاره كنید تا به تصویر دیگری تبدیل شود. روی یك پاراگراف كلیك كنید تا در صفحه حركت كند. ایجاد كردن DHTML توسط خود شما مشكل است ولی استفاده از نوار ابزار DHTML Effects بسیار ساده است.

یك صفحه جدید باز كنید

روی فلش دكمه New Page در نوار ابزار Standard كلیك كنید و گزینه Page را انتخاب كنید. كادر محاوره‌ای Page Templates باز می‌شود. از برگه General ، قالب Normal Page را انتخاب كنید و روی Ok كلیك كنید تا این صفحه در دید Page باز شود.

اضافه كردن متن

مقداری متن در صفحه تایپ كنید و آن را های لایت كنید. برای این پروژه، من تایپ كردم: This text really jumps out at you

فرمت دهی

قبل از اینكه متن را متحرك كنید فرمت‌های لازم را روی آن اعمال كنید. در این پروژه، از لیست Style ، گزینه Heading را انتخاب كردم تا اندازه فونت متن را افزایش دهم.

نوار ابزار DHTML را باز كنید

از منوی View ، گزینه Toolbars و بعد گزینه DHTML Effects را انتخاب كنید. نوار ابزار DHTML Effects باز می‌شود. اگر بخواهید می‌توانید این نوار ابزار را در بالای صفحه نمایش ثابت كنید.

رویداد شروع را انتخاب كنید

متن مورد نظر (یا بخشی از آن) را انتخاب كنید. حال رویدادی كه متحرك سازی را شروع می‌كند مشخص كنید. در نوار ابزار DHTML Effects ، روی فلش لیست On كلیك كنید و یكی از گزینه‌های این لیست را انتخاب كنید. برای این پروژه، گزینه Page Load را انتخاب كردم.

جلوه

از لیست Apply، یك جلوه متحرك سازی انتخاب كنید. یعنی كاری كه وقتی رویداد مرحله 5 رخ دهد متن انجام خواهد داد را انتخاب كنید. مثلاً می‌توانید Zoom را انتخاب كنید.

انتخاب تنظیمات

از لیست Effect ، یكی از تنظیمات را برای این جلوه انتخاب كنید. این تنظیمات بسته به جلوه‌ای كه در مرحله 6 انتخاب كردید فرق می‌كند. (همانطور كه جلوه‌هایی كه می‌توانید انتخاب كنید بسته به رویدادی كه در مرحله 5 انتخاب كردید فرق می‌كنند). در این پروژه، گزینه In را انتخاب كردم. برای اینكه متن خود را در عمل مشاهده كنید روی برگه Preview كلیك كنید. اگر این جلوه را نمی‌پسندید، یك گزینه دیگر را انتخاب كنید.

یك تصویر درج كنید

حال یك تصویر گرافیكی وارد می‌كنیم و آن را متحرك می‌كنیم. نقطه درج را مشخص كنید و روی دكمه Insert Picture From File در نوار ابزار Standard كلیك كنید. (یا می‌توانید از منوی Insert ، گزینه Picture را انتخاب كنید و بعد نوع تصویر مورد نظر را انتخاب كنید.) كادر محاوره‌ای Picture باز می‌شود.

انتخاب تصویر

فایل تصویر مورد نظر را پیدا كنید. بعد روی دكمه Insert كلیك كنید تا تصویر روی صفحه قرار گیرد.

انتخاب تصویر برای متحرك سازی

قبل از متحرك سازی تصویر، باید آن را انتخاب كنید. برای این كار، روی آن كلیك كنید.

رویداد شروع را انتخاب كنید

در نوار ابزار DHTML Effects ، از لیست On ، كاری كه متحرك سازی را شروع كند را انتخاب كنید. در این پروژه، گزینه Mouse Over را انتخاب كردم تا وقتی كه بازدیدكننده با ماوس به تصویر اشاره كند، تصویر تغییر كند.

انتخاب جلوه

از لیست Apply ، جلوه‌ای كه می‌خواهید روی تصویر اعمال شود را انتخاب كنید. در این پروژه Swap Picture را انتخاب كردم. همانطوری كه از اسم آن مشخص است، وقتی كه بازدیدكننده با ماوس به تصویر اشاره كند، این تصویر با تصویر دیگری جایگزین می‌شود.

تصویر جایگزین

حال باید فایل تصویر جایگزین را انتخاب كنید. روی لیست Setting در نوار ابزار DHTML Effects كلیك كنید و گزینه Choose Picture را انتخاب كنید تا كادر محاوره‌ای Picture باز شود.

تصویر جایگزین را پیدا كنید

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

عنوان

حال یك عنوان را زیر تصویر، متحرك سازی می‌كنیم. مقداری متن تایپ كنید، آن را فرمت دهی كنید و بعد آن را انتخاب كنید.

رویداد شروع را انتخاب كنید

از لیست On در نوار ابزار DHTML Effects ، رویداد شروع متحرك سازی را انتخاب كنید. در این پروژه، رویداد Double Click را انتخاب كردم.

این جلوه را اعمال كنید

از لیست Apply ، جلوه مورد نظر را انتخاب كنید. در این پروژه، گزینه Flyout را انتخاب كردم.

تنظیمات این جلوه را انتخاب كنید

از لیست Effect در نوار ابزار DHTML Effects ، تنظیمات مربوط به جلوه انتخابی را مشخص كنید. برای جلوه Fly Out ، گزینه To top را انتخاب كردم.

جلوه‌های DHTML را های لایت كنید

در دید Page ، جلوه‌های متحرك سازی كه روی متن اعمال شده‌اند بصورت پیش فرض به رنگ آبی های لایت می‌شوند. برای فعال و غیرفعال كردن این قابلیت روی دكمه Highlight Dynamic HTML Effects در نوار ابزار DHTML Effects كلیك كنید

حذف یكی از جلوه‌های متحرك سازی

اگر نظرتان عوض شد و بخواهید یكی از جلوه‌های متحرك سازی را حذف كنید، متن یا تصویر مربوطه را انتخاب كنید و روی دكمه Remove Effects در نوار ابزار DHTML Effects كلیك كنید.

مشاهده جلوه‌ها

روی دكمه Preview in Browser در نوار ابزار Standard كلیك كنید تا این جلوه‌ها را مشاهده كنید. همچنین می‌توانید دكمه‌های Ctrl + Shift + B را بفشارید.

* توجه*

سازگاری با مرورگر

DHTML می‌تواند در مرورگرهای مختلف، بصورت عجیبی رفتار كند و در برخی مرورگرها هم اصلاً كار نمی‌كند. بهترین كار این است كه صفحه متحرك خود را در مرورگرهای مختلف مشاهده كنید و مشكلات را پیدا كنید. اگر در این مورد نگران هستید، می‌توانید Dynamic HTML را در لیست Page Options غیرفعال كنید و از آن اجتناب كنید.