امروزه اکثر وب سایت های مبتنی بر CSS که در اطراف ما وجود دارند از رابط گرافیکی کاربر به صورت شناور استفاده می کنند . اجزای رابط گرافیکی را که متناسب با عرض و طول مرورگر جای خود را تغییر می دهند را اصطلاحا شناور می نامند . این کار برای این است تا کاربران ، بهترین نتیجه را در سایز های مختلف مانیتور و مرورگر داشته باشند و راحت تر در سایت ، به اهداف خود برسند . برای من پیاده سازی کد های مربوط به شناور سازی همواره مشکلاتی را به دلیل عدم استفاده از برنامه نویس شی گرا به همراه داشت . نیاز به صرف زمان زیاد برای هر پروژه برای درست شدن چیدمان اجزای سایت از مشکلاتی بود که از آن گریزان بودم . چند وقت پیش به آموزش جالبی درباره GUI شناور در سایت TutsPlus برخوردم . گفتم ترجمه این مطلب به زبان فارسی خالی از لطف نیست . هر چند دوستان بی نیاز از این گونه مطالب اند اما اشتیاق من نابلد و شوق یادگیری مرا به ارائه این مقاله در سایت واداشت . امیدوارم مفید باشد . اگر مایل به کسب اطلاعات بیشتر پیرامون لایه بندی شناور هستید به مقاله جیمز اورلی با عنوان  Creating liquid GUIs with Flash and ActionScript 3.0 مراجعه کنید .

دریافت سورس آموزش ::   دیدن پیش نمایش

یک وب سایت شناور از ۱۰۰ درصد طول و ۱۰۰ درصد ارتفاع مرورگر برای نمایش محتویات استفاده میکند . این شیوه طراحی مخالف شیوه طراحی با عرض ثابت است . این شیوه لایه بندی در بسیاری از صفحات کنونی وب که مبتنی بر Css هستند امری رایج است . ما سعی میکنیم این قضیه را در فلش بررسی کنیم . طوری که اجزای رابط بصری به صورت زیبایی و همراه با انمیشن در مقابل تغییر ابعاد مرورگر واکنش نشان دهند .

مقدمه

در مراحل زیر کلاس هایی از اکشن اسکریپت ۳ خواهیم ساخت که به ما امکان ایجاد یک وب سایت فلش با رابط گرافیکی شناور را می دهد . ما تمامی اجزای فایل فلش را در نظر میگیریم . تمامی کلاس های این برنامه در سایر برنامه های فلش نیز به آسانی قابل استفاده است .

گام ۱ : اطلاعات اولیه درباره رابط بصری شناور

همانطور که در تصویر زیر می بینید همه اجزای با توجه به اندازه مرورگر شناور هستند .

why is fluid object

گام ۲ : مختصات اشیای شناور

هر جسم سیال در کار ما نیاز به مختصات نسبت به ترازی ثابت دارد . ما در اینجا برای هر شی x ,y , x offset , y offset را نیاز داریم .

x و y را در این کار صفر و نقطه مبدا را سمت چپ بالایی صفحه برای تمامی اشیا در نظر میگیریم . همچنین x و y را در سمت راست پایین صفحه ۱ در نظر میگیریم و بقیه اشیا مختصاتی بین این دو واحد  یعنی ۰ و ۱ دارند . X offset و y offset را برای زمانی که اشیا  تراز و درست چیده شده اند نیاز داریم . این دو مختصات برای گذاشتن حاشیه و تراز کردن اشیا نسبت به مرکز مفید هستند .

گام ۳ : ایجاد یک پوشه برای ذخیره کردن کلاس ها

در جایی که فایل فلش را ذخیره میکنید یک پوشه به نام “FluidLayout” ایجاد کنید . این پوشه تمام کلاس هایی که ایجاد می کنیم را در خود نگاه می دارد .

ایجاد پوشه هایی با نام هایی ، که موضوع کلاس های درون پوشه را مشخص می کند یک عادت خوب برنامه نویسی است . سعی کنید این عادت خوب را همیشه انجام دهید .

گام ۴ : ایجاد فایل (FluidObject.as)

یک فایل جدید از نوع اکشن اسکریپت با نام FluidObject.as  را در پوشه FluidLayout ایجاد کنید . این کلاس برای ما مقادیر مختصاتی را که قبلا گفتیم  و همچنین مقادیر برای تغییر مکان را برای هر شی نگاه می دارد.

گام ۵ : اسکلت کلاس

</p>
<p>package FluidLayout {</p>
<p>/* Add import classes here */</p>
<p>public class FluidObject {</p>
<p>/* Declare instance variables here */</p>
<p>/* Constructor of the class */</p>
<p>public function FluidObject(target:DisplayObject,paramObj:Object)</p>
<p>{</p>
<p>}</p>
<p>/* Function that repositions the monitored object */</p>
<p>protected function reposition():void</p>
<p>{</p>
<p>}</p>
<p>/* Function that is called when the RESIZE event is fired */</p>
<p>protected function onStageResize(e):void</p>
<p>{</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>

گام ۶ : وارد کردن کلاس های مورد نیاز

</p>
<p>/* class needed on resize Event */</p>
<p>import flash.events.Event;</p>
<p>/* classes needed for MovieClip and DisplayObject */</p>
<p>import flash.display.*;</p>
<p>

گام ۷ : اعلام متغیرها

۳ متغییر در این کلاس وجود دارد .

• “_param” نگهدارنده ترازو مکان اشیا .
• “_target” برای نگهداری مکان و نقطه ای که شی در آن قرار دارد .
• “_stage”  نگهداری یک کپی از stage

در ادامه برای این متغییرها کد زیر را به کد قبلی اضافه کنید .

</p>
<p>/* alignment parameters */</p>
<p>protected var _param:Object;</p>
<p>/* target object to be monitored */</p>
<p>protected var _target:DisplayObject;</p>
<p>/* stage instance of the flash document */</p>
<p>protected var _stage:Stage;</p>
<p>/* Setter for the alignment param */</p>
<p>public function set param(value:Object):void {</p>
<p>_param = value;</p>
<p>this.reposition();</p>
<p>}</p>
<p>

گام ۸ : پیاده سازی تابع سازنده (Constructor)

این تابع مکان اشیا را رصد کرده و در خود نگهداری میکند .

</p>
<p>/* Constructor of the class */</p>
<p>public function FluidObject(target:DisplayObject,paramObj:Object)</p>
<p>{</p>
<p>/* Assign the instance variables */</p>
<p>_target = target;</p>
<p>_param = paramObj;</p>
<p>_stage = target.stage;</p>
<p>/* add event handler for stage resize */</p>
<p>_stage.addEventListener(Event.RESIZE, onStageResize);</p>
<p>/* reposition the object with the alignment setting applied*/</p>
<p>this.reposition();</p>
<p>}</p>
<p>

گام۹ : پیاده سازی تابع تغییر مکان ( reposition)

این تابع مکان x و y جدید را برای ما محاسبه خواهد کرد .

</p>
<p>/* Function that reposition the monitored object */</p>
<p>protected function reposition():void</p>
<p>{</p>
<p>/* get the current width and height of the flash document */</p>
<p>var stageW = _stage.stageWidth;</p>
<p>var stageH = _stage.stageHeight;</p>
<p>/* update the x and y value of the monitored object */</p>
<p>_target.x = (stageW * _param.x) + _param.offsetX;</p>
<p>_target.y = (stageH * _param.y) + _param.offsetY;</p>
<p>}</p>
<p>

گام ۱۰ : پیاده سازی تابع (onStageResize)

این تابع در برابر تغییر سایز مرورگر ، فراخوانی میشود .

</p>
<p>/* Function that is called when the RESIZE event is fired */</p>
<p>protected function onStageResize(e):void</p>
<p>{</p>
<p>/* reposition the target */</p>
<p>this.reposition();</p>
<p>}</p>
<p>

گام ۱۱ : پایان یافتن کلاس FluidObject.as

در این مرحله کلاس به پایان می رسد .

</p>
<p>package FluidLayout {</p>
<p>/* class needed on resize Event */</p>
<p>import flash.events.Event;</p>
<p>/* classes needed for MovieClip and DisplayObject */</p>
<p>import flash.display.*;</p>
<p>public class FluidObject {</p>
<p>/* alignment parameters */</p>
<p>protected var _param:Object;</p>
<p>/* target object to be monitored */</p>
<p>protected var _target:DisplayObject;</p>
<p>/* stage instance of the flash document */</p>
<p>protected var _stage:Stage;</p>
<p>/* Setter for the alignment param */</p>
<p>public function set param(value:Object):void {</p>
<p>_param=value;</p>
<p>this.reposition();</p>
<p>}</p>
<p>/* Constructor of the class */</p>
<p>public function FluidObject(target:DisplayObject,paramObj:Object)</p>
<p>{</p>
<p>/* Assign the instance variables */</p>
<p>_target = target;</p>
<p>_param = paramObj;</p>
<p>_stage = target.stage;</p>
<p>/* add event handler for stage resize */</p>
<p>_stage.addEventListener(Event.RESIZE, onStageResize);</p>
<p>/* reposition the object with the alignment setting applied*/</p>
<p>this.reposition();</p>
<p>}</p>
<p>/* Function that repositions the monitored object */</p>
<p>protected function reposition():void</p>
<p>{</p>
<p>/* get the current width and height of the flash document */</p>
<p>var stageW = _stage.stageWidth;</p>
<p>var stageH = _stage.stageHeight;</p>
<p>/* update the x and y value of the monitored object */</p>
<p>_target.x = (stageW * _param.x) + _param.offsetX;</p>
<p>_target.y = (stageH * _param.y) + _param.offsetY;</p>
<p>}</p>
<p>/* Function that is called when the RESIZE event is fired */</p>
<p>protected function onStageResize(e):void</p>
<p>{</p>
<p>/* reposition the target */</p>
<p>this.reposition();</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>

گام ۱۲ : ایجاد یک فایل فلش

یک فایل فلش جدید با نام “website.fla” و با قابلیت پشتیبانی از Action Script 3 بسازید .  خوب در اینجا رابط بصری کاربر را خواهیم ساخت و پس از آن ، فایل ساخته شده را به کلاسی که با هم نوشتیم متصل می کنیم . به دلایل کاملا شخصی ! رنگ بکگراند را سیاه انتخاب کنید . در اینجا سعی در پیاده سازی یک رابط گرافیکی تیره داریم .

گام ۱۳ : کشیدن نوار عنوان

ما در این فایل ۵ شی خواهیم داشت :

• Background
• Title
• Menu
• middle content
• footer

بیاید ابتدا Title را بسازیم .

هدف این آموزش ساخت اجزا و لایه بندی شناور است و ما قصد ایجاد یک سایت فانتزی را نداریم . پس تنها به استفاده از نماد های ساده برای هدفی که گفتیم بسنده می کنیم .

برای نوار   Title ما یک بکگراند شفاف انتخاب کرده ایم که برای ابعاد مختلفی از مرورگر تغییر اندازه می دهد . برای اینکار طول کار را به اندازه کافی بزرگ بگیرید تا بعد به مشکل نخورید .

شکلی را که کشیده اید انتخاب کنید وکلید F8 را بزنید و تا پنجره Symbol Properties ظاهر شود . روی دکمه advance کلیک کنید تا جزییات را ویرایش کنیم . تیک ” Export for ActionScript ” را بزنید تا کلاسی را که نوشتیم به شی مورد نظرمان ، متصل کنیم . فیلد  ”Class” را پیدا کنید و مقدار آن را به  ”Title” تغییر دهید . این بدان معنی است که کلاس  ”Title”  شی که ساخته ایم را کنترل میکند . نگران نباشید بعدا این کلاس را اضافه میکنیم . یادتان باشد اسم کلاسی که انتخاب کرده اید را فراموش نکنید .

اگر روی دکمه OK کلیک کرده اید و با پیام  ”A definition for this class could not be found in the classpath,…” روبرو شده اید نگران نشوید و فقط تایید کنید .

گام ۱۴ : کشیدن سایر اشیا

در صفحه اصلی ،  روی “Title” کلیک کنید و آن را پاک کنید . با کد اکشن اسکریپت  ، بعدا  آن را در جای درست  قرار خواهیم داد .

با همان روشی که در بالا گفتیم سایر عناصر را نیز ایجاد کنید . و به شکل زیر نام گذاری نمایید .  تمامی عناصر متنی هستند و پس زمینه را نیز میتوانید از اینجا دریافت کنید .

گام ۱۵ : ساخت کلاس Website.as

یک کلاس جدید با نام ” Website.as” ایجاد کنید . توجه داشته باشید که این کلاس را باید در پوشه اصلی برنامه ذخیره کنید .

این کلاس را در گام ۱۲ به فایل برنامه متصل کرده ایم . اگر این کار را نکردهاید به گام ۱۲ برگردید و کلاس را به فایل متصل کنید .

حالا کد زیر را وارد کنید .

</p>
<p>package {</p>
<p>import flash.display.*;</p>
<p>import FluidLayout.*;</p>
<p>public class Website extends MovieClip{</p>
<p>public function Website()</p>
<p>{</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>

گام۱۶ : پیاده سازی تابع سازنده

</p>
<p>package {</p>
<p>import flash.display.*;</p>
<p>import FluidLayout.*;</p>
<p>public class Website extends MovieClip{</p>
<p>public function Website()</p>
<p>{</p>
<p>/* Set the Scale Mode of the Stage */</p>
<p>stage.scaleMode = StageScaleMode.NO_SCALE;</p>
<p>stage.align = StageAlign.TOP_LEFT;</p>
<p>/* Add the symbols to stage */</p>
<p>var bg = new Background();</p>
<p>addChild(bg);</p>
<p>var title = new Title();</p>
<p>addChild(title);</p>
<p>var menu = new Menu();</p>
<p>addChild(menu);</p>
<p>var middle = new Middle();</p>
<p>addChild(middle);</p>
<p>var footer = new Footer();</p>
<p>addChild(footer);</p>
<p>/* Apply the alignment to the background */</p>
<p>var bgParam = {</p>
<p>x:0,</p>
<p>y:0,</p>
<p>offsetX: 0,</p>
<p>offsetY: 0</p>
<p>}</p>
<p>new FluidObject(bg,bgParam);</p>
<p>/* Apply the alignment to the title */</p>
<p>var titleParam = {</p>
<p>x:0,</p>
<p>y:0,</p>
<p>offsetX:0,</p>
<p>offsetY:0</p>
<p>}</p>
<p>new FluidObject(title,titleParam);</p>
<p>/* Apply the alignment to the menu */</p>
<p>var menuParam = {</p>
<p>x:1,</p>
<p>y:0,</p>
<p>offsetX: -menu.width - 20,</p>
<p>offsetY: 20</p>
<p>}</p>
<p>new FluidObject(menu,menuParam);</p>
<p>/* Apply the alignment to the content */</p>
<p>var middleParam = {</p>
<p>x:0.5,</p>
<p>y:0.5,</p>
<p>offsetX: -middle.width/2,</p>
<p>offsetY: -middle.height/2</p>
<p>}</p>
<p>new FluidObject(middle,middleParam);</p>
<p>/* Apply the alignment to the footer */</p>
<p>var footerParam = {</p>
<p>x:1,</p>
<p>y:1,</p>
<p>offsetX: -footer.width - 10,</p>
<p>offsetY: -footer.height -10</p>
<p>}</p>
<p>new FluidObject(footer,footerParam);</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>

گام۱۷ : اطمینان از تمام جزییات

website.fla را باز کنید و قبل از تست از برخی موارد مطمئن شوید .

توجه کنید که هیچ شئ بر روی صفحه وجود نداشته باشد چون ما تمام اجزای صفحه را از کتابخانه فراخوانی می کنیم . همچنین لینک های پیوند خورده به کلاس های بیرونی را در مقابل هر شئ مثل شکل پایین چک کنید .

گام ۱۸ : دیدن نتیجه کار

با گرفتن Ctrl+Enter فایل را تست کنید .  سعی کنید طول و عرض پنجره را تغییر داده و جابجایی اشیا را به طور کامل ببینید .

گام ۱۹ : کار بیشتر

هر شئ شناور در کار ما x,y,x offset  و y offset را داراست .

حالا با هم کلاس جدیدی ایجاد خواهیم کرد تا در آینده شما بتوانیید اشیای بیشتری را هر زمان که مایل بودید به پروژه اضافه کنید .

گام ۲۰ : ایجاد کلاس “SimpleFluidObject “

فایل جدیدی درست کرده و نام آن را “SimpleFluidObject.as” بگذارید .این فایل را در فولدر “FluidLayout” ذخیره کنید .  کد زیر را وارد کنید

</p>
<p>package FluidLayout {</p>
<p>import flash.events.Event;</p>
<p>import flash.display.*;</p>
<p>public class SimpleFluidObject extends FluidObject{</p>
<p>public function SimpleFluidObject(target:DisplayObject,paramObj:Object)</p>
<p>{</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>

گام ۲۱ : ساخت تابع سازنده

کد زیر را نیز در ادامه وارد کنید .

</p>
<p>package FluidLayout {</p>
<p>import flash.events.Event;</p>
<p>import flash.display.*;</p>
<p>public class SimpleFluidObject extends FluidObject{</p>
<p>public function SimpleFluidObject(target:DisplayObject,paramObj:Object)</p>
<p>{</p>
<p>/* Tell parent class to init the constructor */</p>
<p>super(target,paramObj);</p>
<p>/* assign alignment and margin value by the constructor parameters */</p>
<p>var alignment = paramObj.alignment;</p>
<p>var margin = paramObj.margin;</p>
<p>/* Preset the alignment and margin value if need */</p>
<p>if (alignment == undefined) alignment = &quot;MIDDLE&quot;;</p>
<p>if (margin == undefined) margin = 0;</p>
<p>/* convert the alignment (eg. &quot;TOP&quot;, &quot;BOTTOM_RIGHT&quot;) to x, y, offsetX and offsetY */</p>
<p>var params = new Object();</p>
<p>switch (alignment){</p>
<p>case &quot;TOP_LEFT&quot;:</p>
<p>params = {</p>
<p>x:0,</p>
<p>y:0,</p>
<p>offsetX: margin,</p>
<p>offsetY: margin</p>
<p>};</p>
<p>break;</p>
<p>case &quot;TOP&quot;:</p>
<p>params = {</p>
<p>x:.5,</p>
<p>y:0,</p>
<p>offsetX: -target.width/2,</p>
<p>offsetY: margin</p>
<p>};</p>
<p>break;</p>
<p>case &quot;TOP_RIGHT&quot;:</p>
<p>params = {</p>
<p>x:1,</p>
<p>y:0,</p>
<p>offsetX: -target.width - margin,</p>
<p>offsetY: margin</p>
<p>};</p>
<p>break;</p>
<p>case &quot;LEFT&quot;:</p>
<p>params = {</p>
<p>x:0,</p>
<p>y:.5,</p>
<p>offsetX: margin,</p>
<p>offsetY: -target.height/2</p>
<p>};</p>
<p>break;</p>
<p>case &quot;MIDDLE&quot;:</p>
<p>params = {</p>
<p>x:.5,</p>
<p>y:.5,</p>
<p>offsetX: -target.width/2 - margin/2,</p>
<p>offsetY: -target.height/2 - margin/2</p>
<p>};</p>
<p>break;</p>
<p>case &quot;RIGHT&quot;:</p>
<p>params = {</p>
<p>x:1,</p>
<p>y:.5,</p>
<p>offsetX: -target.width - margin,</p>
<p>offsetY: -target.height/2</p>
<p>};</p>
<p>break;</p>
<p>case &quot;BOTTOM_LEFT&quot;:</p>
<p>params = {</p>
<p>x:0,</p>
<p>y:1,</p>
<p>offsetX: margin,</p>
<p>offsetY: -target.height - margin</p>
<p>};</p>
<p>break;</p>
<p>case &quot;BOTTOM&quot;:</p>
<p>params = {</p>
<p>x:.5,</p>
<p>y:1,</p>
<p>offsetX: -target.width/2,</p>
<p>offsetY: -target.height - margin</p>
<p>};</p>
<p>break;</p>
<p>case &quot;BOTTOM_RIGHT&quot;:</p>
<p>params = {</p>
<p>x:1,</p>
<p>y:1,</p>
<p>offsetX: -target.width - margin,</p>
<p>offsetY: -target.height - margin</p>
<p>};</p>
<p>break;</p>
<p>}</p>
<p>_param = params;</p>
<p>/* reposition the fluid object to the right position */</p>
<p>this.reposition();</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>

گام۲۲ : استفاده از اشیای جدید

به فایل Website.as  مراجعه کنید و سعی کنید اشیای جدید را دوباره تعریف کنید و این بار با روشی جدید تر.  روش قدیمی برای هم ترازی عنوان :

</p>
<p>/* Apply the alignment to the title */</p>
<p>var titleParam = {</p>
<p>x:0,</p>
<p>y:0,</p>
<p>offsetX:0,</p>
<p>offsetY:0</p>
<p>}</p>
<p>new FluidObject(title,titleParam);</p>
<p>روش جدید برای هم ترازی عنوان :</p>
<p>1</p>
<p>var titleParam = {</p>
<p>alignment: &quot;TOP_LEFT&quot;,</p>
<p>margin: 0</p>
<p>}</p>
<p>new SimpleFluidObject(title,titleParam);</p>
<p>

گام۲۳ : انتشار نسخه HTML

خوب تا به حال مراحل را در IDE فلش دنبال کرده ایم . اگر بخواهید فایل را در Html منتشر کنید نیاز به تغییراتی خواهید داشت .  در  File > Publish Settings رفته و گزینه HTML را انتخاب کنید و تنظیمات را مطابق شکل اعمال کنید .

بعد از انتشار به فایل  ”website.html” رفته و آن را با یک ویرایشگر متن باز کنید . سپس در بالای صفحه کد زیر را اضافه کنید .

</p>
<p>&lt;style&gt;</p>
<p>body{</p>
<p>margin:0;</p>
<p>padding:0;</p>
<p>}</p>
<p>&lt;/style&gt;</p>
<p>

گام ۲۴ : تنظیمات پیشرفته : اضافه کردن افکت Easing

این افکت زمانی کار می کند که شما پنجره خود را تغییر سایز بدهید . این افکت باعث حرکت نرم اشیا در جای خود میشود به جای اینکه این حرکت ناگهانی و خشک باشد .

برای اینکار نیاز به ویرایش فایل  ”FluidObject.as” دارید . لازم است کد زیر بعد از دستور “import flash.display.*;” وارد شود .

</p>
<p>/* classes needed for Easing Animation */</p>
<p>import fl.transitions.Tween;</p>
<p>import fl.transitions.easing.*;</p>
<p>

حالا تکه کد زیر را در فایل گشته و پیدا کنید . این کد ها مربوط به تغییر مکان دادن اشیا است .

</p>
<p>_target.x=stageW*_param.x+_param.offsetX;</p>
<p>_target.y=stageH*_param.y+_param.offsetY;</p>
<p>

آنها را با کد زیر جایگزین کنید :

</p>
<p>/* set the duration of the easing animation (seconds) */</p>
<p>var duration = 0.5;</p>
<p>/* declare the new X/Y value */</p>
<p>var newX = _target.x;</p>
<p>var newY = _target.y;</p>
<p>/* calculate the new X value based on the stage Width */</p>
<p>if (_param.x != undefined){</p>
<p>newX = (stageW * _param.x) + _param.offsetX;</p>
<p>}</p>
<p>/* calculate the new Y value based on the stage Height */</p>
<p>if (_param.y != undefined){</p>
<p>newY = (stageH * _param.y) + _param.offsetY;</p>
<p>}</p>
<p>/* Tell flash to tween the target object to the new X/Y position */</p>
<p>new Tween(_target, &quot;x&quot;,Strong.easeOut,_target.x,newX,duration,true);</p>
<p>new Tween(_target, &quot;y&quot;,Strong.easeOut,_target.y,newY,duration,true);</p>
<p>

خوب در اینجا کار ما تمام شد . شما اکنون کلاس هایی در اختیار دارید که میتوانید آن را در هر پروژه ای به آسانی به کار گیرید  امیدوارم  قابل استفاده باشد .