مقدمه
امروزه ميل شديدي به مشاهده ي سايه در کناره ي المان هاي موجود در سايت ها و يا نرم افزار هاي موجود، در ميان کاربران ديده مي شود. به طوري که حتي در سيستم عامل ويستا نيز اين امر ناديده گرفته نشده است و در کناره ي زيرين dialog box هايي که ظاهر مي شوند، سايه ديده مي شود. سايه ها به طرز مجزه آسايي تک سطحي (تخت و مسطح) بودن اپليکيشن را از ديد پنهان کرده و براي کاربر اين حس را ايجاد ميکنند که اپليکيشن مورد نظر داراي يک عمق خاص مي باشد. ظاهرا تيم سازنده ي Adobe Flex نيز از اين موضوع بي اطلاع نبودند و به همين دليل ايجاد سايه براي المان هاي موجود در پروژه هاي Flex را بسيار ساده کردند. در اين مقاله به نحوه ي ايجاد سايه (drop shadows) براي کامپوننت هاي Flex و نحوه ي اعمال تغييرات ظاهري بر آن، خواهيم پرداخت...
اولين چيزي که بايد در مورد سايه ها بدانيد اين است که آنها option هاي بسيار زيادي دارند. براي کمک به انتخاب هر کدام از اين option ها براي ايجاد سايه ي مورد نظرتان و آشنايي با نحوه ي عملکرد آنها، در ذيل يک پروژه ي Flex نمونه قرار دادم، تا از طريق آن بتوانيد به صورت آني و با استفاده از گزينه هاي ممکن ظاهر سايه اي را که بر روي يک عکس ايجاد شده، تغيير داده و با طرز کار آن به طور شهودي و دقيق آشنا شويد. کافيست تنها با استفاده از کنترل هاي slider موجود در سمت چپ و با تغيير مقادير آنها، نتيجه را به صورت آني بر روي عکس موجود در سمت راست پروژه مشاهده نمائيد.
(براي مشاهده و دريافت سورس اين اپليکيشن اينجا را کليک کنيد. علاوه بر اين، از طريق لينک دانلود در بالاي صفحه نيز مي توانيد سورس پروژه را دانلود نمائيد.)
اگر به اندازه ي کافي با مثال فوق کار کرديد و حال با گزينه هاي موجود براي ايجاد سايه آشنايي کافي داريد اجازه دهيد به نحوه ي ساخت يک سايه بپردازيم. در قدم اول به نحوه ي ساخت سايه ها از طريق MXML و در قدم بعدي به ساخت آن از طريق ActionScript خواهم پرداخت.
افزودن سايه از طريق MXML
براي اولين مثال، در قطعه کد زير ساده ترين روش ايجاد سايه را خواهم گفت. در اين کد، سايه ي مورد نظر از تمامي حالات پيش فرض استفاده مي کند:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:display="flash.display.*" width="125" height="125">
<mx:Box verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
<mx:Box width="75" height="75" backgroundColor="#FFFFFF" backgroundAlpha="1">
<mx:filters>
<mx:DropShadowFilter />
</mx:filters>
</mx:Box>
</mx:Box>
</mx:Application>
|
همانطور که مشاهده مي کنيد، اپليکيشن قطعه کد فوق، تنها شامل يک box سفيد مي باشد که سايه بر روي آن اعمال شده است. اگر با تگ <mx:filters> آشنا نيستيد، به طور کاملا مختصر، تنها به اين نکته اشاره مي کنم که آنها براي ايجاد فيلتر هاي نمايشي ممکن بر روي کامپوننت ها استفاده مي شوند و به راحتي از طريق افزودنشان به آرايه ي فيلتر هاي يک کامپوننت Flex قابل ايجاد هستند. اگر مي خواهيد فيلتر هاي بيشتري علاوه بر سايه، به يک کامپوننت بيافزايد، ايجاد آنها نيز دقيقا از همين طريق ممکن است. شکلي که از طريق قطعه کد فوق ساخته مي شود به اين طريق خواهد بود:
معمولا تنظيمات پيش فرض سايه ها براي اکثر اپليکيشن ها در نظر گرفته مي شود، ولي گاهي اوقات ممکن است شما بخواهيد براي مقصود خاصي و يا سليغه ي شخصي خود، آنها را تغيير دهيد. در قطعه کد زير با نحوه ي انجام اين کار آشنا خواهيد شد. در اين نمونه، مقادير distance و angle سايه ي مورد نظر تغيير کرده است:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:display="flash.display.*" width="125" height="125">
<mx:Box verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
<mx:Box width="75" height="75" backgroundColor="#FFFFFF" backgroundAlpha="1">
<mx:filters>
<mx:DropShadowFilter distance="10" angle="220"/>
</mx:filters>
</mx:Box>
</mx:Box>
</mx:Application>
|
و اينهم شکلي که از طريق اين قطعه کد، ساخته مي شود:
افزودن سايه از طريق ActionScript
اگر MXML روش دلخواه شما نيست و احيانا با AS راحت تر هستيد، بايد بگم که سايه ها از طريق ActionScript نيز قابل اعمال هستند. قطعه کد زير نحوه ي اعمال سايه بر روي يک کنترل box از طريق ActionScript مي باشد، دقيقا به صورتي که در مثال اول بخش MXML ذکر شد:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:display="flash.display.*"
width="125" height="125" applicationComplete="addShadow()">
<mx:Script>
<![CDATA[
private function addShadow():void
{
var filters:Array = new Array();
var dFilter:DropShadowFilter = new DropShadowFilter();
filters.push(dFilter);
this.myBox.filters = filters;
}
]]>
</mx:Script>
<mx:Box verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
<mx:Box width="75" height="75" backgroundColor="#FFFFFF" backgroundAlpha="1" id="myBox"></mx:Box>
</mx:Box>
</mx:Application> |
به شخصه براي خود من، syntax افزودن فيلتر ها از طريق AS کمي ناخوشايند هست، ولي در هر حال ايجاد آنها لازم است. مخصوصا اوضاع وقتي بدتر مي شود که بخواهيم هنگام اجرا، property هاي سايه را تغيير دهيم که در آن صورت مجبور هستيم تمام آن قطعه کدهاي مربوط را براي دوباره سازي و دوباره انتساب دادن به آرايه ي فيلترهاي کنترل، پياده سازي کنيم. البته اين امر نيز ممکن است که از طريق يک ذهن خلاق و با پرداخت يک ايده ي نو، بتوان براي اين مسئله راه حلي يافت، که در اين صورت من از همه ي دوستاني که اين شرايط را دارند و مي توانند از اين حيث کمکي کرده و يا حتي ايده اي مطرح کنند، تقاضاي کمک مي کنم. حال اجازه بديد به قطعه کدي بپردازيم که از طريق ActionScript، مثال دوم بخش MXML را نيز پياده سازي مي کند
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:display="flash.display.*"
width="125" height="125" applicationComplete="addShadow()">
<mx:Script>
<![CDATA[
private function addShadow():void
{
var filters:Array = new Array();
var dFilter:DropShadowFilter = new DropShadowFilter();
dFilter.angle = 220;
dFilter.distance = 10;
filters.push(dFilter);
this.myBox.filters = filters;
}
]]>
</mx:Script>
<mx:Box verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
<mx:Box width="75" height="75" backgroundColor="#FFFFFF" backgroundAlpha="1" id="myBox"></mx:Box>
</mx:Box>
</mx:Application>
|
اين هم از ايجاد سايه در Adobe Flex و طبق روال هميشه: "به همين سادگي!!".
براي دريافت اطلاعات بيشتر در مورد سايه ها (drop shadows) و نحوه ي ايجاد آنها، از طريق اين لينک به مبحث DropShadowFilter در مستندات راهنماي آنلاين شرکت Adobe مراجعه نمائيد.
تا مقاله اي ديگر و روشي تازه خدا يار و نگهدارتان. موفق و مويد باشيد....
:: اين مقاله بر پايه ي Adobe Flex نسخه ي 3.0 تدوين شده و پروژه ي مربوط به آن نيز از طريق محيط Adobe Flex Builder 3.0 پياده سازي شده است. اين نسخه از تکنولوژي Adobe Flex که نسخه ي اصلي و نهايي آن نيز مي باشد، به تازگي و در روز يکشنبه، 24 فوريه 2008، مصادف با 5 اسفند 1386، به همراه نسخه ي نهايي رانتايم Adobe AIR از طريق شرکت Adobe رسما به بازار جهاني عرضه شد.
:: براي دريافت سورس پروژه ي فوق، - همانطور که قبلا نيز ذکر شد - هم از طريق لينک دانلود در بالاي صفحه، قادر به انجام اين کار خواهيد بود و هم از طريق اين لينک...
:: منبع: متن اصلي از Brandon Cannaday (با نام مستعار Reddest) از وبلاگ Switch On The Code