آموزش طراحی وب سایت در فلش از ابتدا قسمت چهارم

کارگاه آموزشي Adobe Flash

موضوع کارگاه: طراحي يک وب سايت کامل

جلسه چهارم:

1. فريم شماره 1 از لايه Code را انتخاب نماييد. سپس از منوي Window گزينه Actions را جهت نمايش پنل Actions انتخاب نماييد. پس از نمايش پنل کدهاي زير را وارد نماييد.

  stop();
 	#include "lmc_tween.as"
 	homeNav.navTxt.text=="home";
 	toolsNav.navTxt.text="tools";
	linksNav.navTxt.text="link";
 	contactNav.navTxt.text="link";
 	var speed:Number=3;
	var ease_type:String="easeInOutBack";
 	var ease_type:String="easeInOutBack";
 	homeNav.tween("_x",280,speed,ease_type,0);
 	homeNav.tween("_y",200,speed,ease_type,0);
 	toolsNav.tween("_x",365,speed,ease_type,0.1);
 	toolsNav.tween("_y",200,speed,ease_type,0.1);
 	linksNav.tween("_x",280,speed,ease_type,0.2);
 	linksNav.tween("_y",285,speed,ease_type,0.2);
 	contactNav.tween("_x",365,speed,ease_type,0.3);
 	contactNav.tween("_y",285,speed,ease_type,0.3);
 	homeNav.onPres=function(){
 	     gotoAndStop("home");
 	}
 	toolsNav.onPres=function(){
 	     gotoAndStop("tools");
 	}
 	linksNav.onPres=function(){
 	     gotoAndStop("links");
 	}
	contactNav.onPres=function(){
 	     gotoAndStop("contact");
 	}

2. در ادامه به تشريح هر يک از خطوط کد فوق مي پردازيم:

stop();

اين دستور موجب مي شود پخش فيلم در فريم جاري متوقف شود. 

#include "lmc_tween.as"

اين خط دستور به اين نکته اشاره مي نمايد که در ادامه از اسکريپت هاي تعريف شده در فايل lmc_tween.as استفاده خواهد شد.

homeNav.navTxt.text="home";

چنانکه به خاطر داريد، در طراحي شئ دکمه، از شئ نوشته به نام navTxt بر روي يک شئ مستطيل استفاده نموديم. شئ homeNav که نمونه اي از اين دکمه مي باشد نيز آن را به ارث مي برد. در اين خط ويژگي text از شئ navTxt (يکي از اجزاي شئ دکمه) با مقدار home تنظيم مي شود. بنابراين بصورت شهودي رشته home بر روي دکمه homeNav نمايش داده مي شود.

toolsNav.navTxt.text="tools";
 	linksNav.navTxt.text="link";
	contactNav.navTxt.text="link";

با اين سه خط دستور طبق الگوي تشريح شده در پاراگراف قبل رشته هاي tools، links و contact به ترتيب بر روي دکمه هاي toolsNav، linksNav و contactNav نمايش داده مي شود.             

var speed:Number=3;
 	var ease_type:String="easeInOutBack";
 	var ease_type:String="easeInOutBack";

                 در اين سه خط متغيرهايي تعريف شده است که حاوي تنظيمات مورد نياز روال tween که در ادامه مورد استفاده قرار مي گيرد. متغير speed سرعت اجراي افکت و متغير ease_type نوع افکت را مشخص مي نمايند. شما مي توانيد علاوه بر افکت easeInOutBack، افکت هاي زير را به عنوان جايگذين در پروژه خود مورد استفاده قرار داده و نتايج مختلفي را مشاهده نماييد.

"easeInQuad","easeOutQuad","easeInOutQuad","easeOutInQuad","easeInCubic", "easeOutCubic","easeInOutCubic","easeOutInCubic","easeInSine","easeOutSine", "easeInOutSine","easeOutInSine","easeInCirc","easeOutCirc","easeInOutCirc", "easeOutInCirc","easeInElastic","easeOutElastic","easeInOutElastic", "easeOutInElastic","easeInBack","easeOutBack","easeInOutBack","easeOutInBack", "easeInBounce","easeOutBounce","easeInOutBounce","easeOutInBounce"             

homeNav.tween("_x",280,speed,ease_type,0);
 	homeNav.tween("_y",200,speed,ease_type,0);

                 اين دو خط tween تعريف شده در فايل lmc_tween.as را مورد استفاده قرار مي دهد. براي اين روال به ترتيب پارامترهاي ويژگي تحت تاثير، مکان مقصد، سرعت حرکت، نوع افکت و تاخير مي بايست مشخص گردد. در اين مثال مشخص شده است که ويژگي x از شئ homeNav تحت تاثير قرار مي گيرد يعني يک حرکت افقي انجام خواهد گرفت. مکان مقصد حرکت به فاصله px 280 از لبه سمت چپ stage خواهد بود. سرعت حرکت با متغير speed و نوع افکت توسط متغير ease_type مشخص شده است. در انتها مقدار تاخير صفر در نظر گرفته شده است.

همانند پاراگراف قبل با اين تفاوت که ويژگي تحت تاثير، ويژگي y مي باشد يعني يک حرکت عمودي انجام مي شود. مکان مقصد آن با فاصله px280 از بالاي stage مي باشد.

نکته: در دو پاراگراف فوق توجه داشته باشيد که نقطه 0,0 شاخص گوشه سمت چپ بالاي stage مي باشد. 

toolsNav.tween("_x",365,speed,ease_type,0.1);
 	toolsNav.tween("_y",200,speed,ease_type,0.1);
 	linksNav.tween("_x",280,speed,ease_type,0.2);
 	linksNav.tween("_y",285,speed,ease_type,0.2);
	contactNav.tween("_x",365,speed,ease_type,0.3);
 	contactNav.tween("_y",285,speed,ease_type,0.3);

در خطوط فوق tween تشريح شده در دو پاراگراف پيشين، به ترتيب بر روي دکمه هاي toolsNav، linksNav و contactNav و با تاخيرهاي 0.1، 0.2 و 0.3 انجام مي گيرد.

homeNav.onPres=function(){
 	     gotoAndStop("home");
 	}

                 در اين سه خط مشخص شده است که به هنگام کليک بر روي دکمه homeNav (پايين رفتن دکمه سمت راست ماوس) مي بايست به فريمي با نام home (فريم شماره 1 در پروژه جاري) رفته و اجراي فيلم متوقف شود.

دستورات فوق مشخص مي نمايد که با پايين رفتن دکمه سمت راست ماوس بر روي دکمه toolsNav به فريمي با نام tools (فريم شماره 5 در پروژه جاري)، با پايين رفتن دکمه سمت راست ماوس بر روي دکمه linksNav به فريمي با نام links (فريم شماره 10 در پروژه جاري) و با پايين رفتن دکمه سمت راست ماوس بر روي دکمه contactNav به فريمي با نام contact (فريم شماره 15 در پروژه جاري) متقل شده و اجراي فيلم متوقف مي شود. 

toolsNav.onPres=function(){
     gotoAndStop("tools");
 	}
	linksNav.onPres=function(){
 	     gotoAndStop("links");
 	}
	contactNav.onPres=function(){
 	     gotoAndStop("contact");
 	}

3. در جلسه پنجم اسکريپت نويسي براي ساير فريم ها تشريح خواهد شد.