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

حال به نقطه‌اي از كتاب رسيده‌ايم كه از كلمات تكنيكي مانند 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 غيرفعال كنيد و از آن اجتناب كنيد.