آموزش ساخت برنامه کاربردی(app) ساعت با Adobe air

[mohammad.sub7]

واسه این آموزش تا حدودی باید به اکشن اسکریپت 3 و فلش آشنایی داشته باشید .ضمناً مفهوم air رو درک کرده باشید و بدونید هدف و کارش چی هستش البته این نکات که گفتم واسه مبتدی ها بود نه بقیه!
مقدمه
تو این قسمت میخوایم 1 ساعت آنالوگ معمولی بسازیم که بتونیم اون رو نصب کنیم و به صورت فایل اجرایی رو سیستم داشته باشیم. ضمناً این ساعت خاصیت دراگ کردن و عوض کردن تم رو شامل بشه.

خوب ابتدا 1 پروژه air رو باز میکنیم. واسه گرافیک کار به عکس یا shape های زیر احتیاج داریم :
1. عکس یا shape ثانیه شمار
2. " " " دقیقه شمار
3. " " " ساعت
4. پس زمینه ساعت
5. بقیه گرافیک که شامل دکمه خروج ، دکمه تعویض تم و ... میشه


آموزش رو سعی میکنیم شبیه نمونه که گذاشتم بگم تا راحتتر باشه کار. قبلش 1 نکته اینکه واسه اینکه به مشگل نخوریم تو انتخاب اشیاء حتی الامکان هر شی رو تو 1 لایه جدا قرار بدیم .

بخش اول
بعد از اینکه گرافیک رو وارد کردیم حالا نوبت اینه که instance name به هر کدوم بدیم من طبق کدهای خودم این اسم ها رو دادم :
ثانیه شمار = second
دقیقه شمار = minute
عقربه ساعت = hour
دکمه تعویض skin = skin_mc
دکمه خروج = exit
back_mc هم اسم مووی کلیپ عکسهای پس زمینه که با کلیک رو دکمه تعویض تم عوض میشن.
اولین حرکت اینه که 1 تابع تعریف کنیم که عقربه های ساعت سر جاهای درستشون شروع به حرکت کنه یا به قول
معروف update زمان . برای اینکار از کلاس Date Class استفاده میکنیم.( فرض ما اینجا اینه که با این کلاس آشنا هستید )
تو فریم 1 لایه actions این کد رو استفاده کنید:

addEventListener(Event.ENTER_FRAME, timeUpdate);
function timeUpdate(e:Event):void
{
 var my_date:Date = new Date();
 hour.rotation=Number(my_date.hours)*30;
 minute.rotation=Number(my_date.minutes)*6;
 second.rotation=Number(my_date.seconds)*6;
}

​

 

[mohammad.sub7]

بخش دوم

حالا ما باید تابعی تعریف کنیم که بتونیم خارج شیم از برنامه در اصل دکمه خروج لازم داریم.تابع زیر رو به دکمه مورد

نظر که میخوایم باعث خروج شه میدیم:

exit.buttonMode=true;
exit.addEventListener(MouseEvent.CLICK, quit);
function quit(evt:MouseEvent):void
{
 NativeApplication.nativeApplication.exit();
}

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

نکته اینجاست که دستور خروج قبلی تو ایر کار نمیکنه بنابراین از دستور :
​

NativeApplication.nativeApplication.exit();

استفاده کردیم.با متد NativeApplication تابع exit رو صدا زدیم

حالا میخوایم برنامه ما خاصیت دراگ کردن داشته باشه تا هر جا خواستیم اون رو قرار بدیم

برای دراگ کردن از متد nativeWindow تابع startMove() رو صدا میزنیم :
​

back_mc.addEventListener(MouseEvent.MOUSE_DOWN, Drag);
function  Drag(evt:MouseEvent):void 
{
 stage.nativeWindow.startMove();
 
}

خوب حالا واسه زیباتر شدن کار میتونیم بگیم که وقتی دراگ میکنیم 1 اتفاقی بیفته مثلاً اینجا ما میگیم که در حالت دراگ آلفا کم بشه.

کافیه داخل تابع بالا دستور alpha = 0.5; رو بدیم البته عدد دلخواه هستش بین صفر تا 1

خوب حالا وقتی ماوس رها بشه دستور بالا به اتمام میرسه دیگه نیاز به stopdrag نیست ولی چون ما آلفا رو کم کردیم باید مقدار 1 بدیم

بهش تا به حالت اولیه برگرده:
​

back_mc.addEventListener(MouseEvent.MOUSE_UP,endDrag);
function endDrag(evt:MouseEvent):void
{
 alpha = 1;
}

ضمناً back_mc هم همون زمینه ساعت ما هستش .

خوب رسیدیم حالا به قسمت تعویض skin که تو پست بعدی میگم اینجا شلوغ شد​

 

[mohammad.sub7]

بخش سوم - تعویض skin . البته راه های زیادی وجود داره . این قسمت به air مربوط نمیشه فقط واسه زیبا سازی کار هستش.روشهای

زیادی هستش من داخل مووی کلیپ back_mc رفتم 3 تا فریم ساختم اما فقط فعلاً 1 اسکین قرار دادم داخلش. حالا چرا 3 تا فریم

ساختم 2 تا کافی بود! بازم اینجا احتمالاً راه حل های بهتر وجود داره اما من دیدم که با توجه به اینکه دستور fade in دادم موقع تعویض

حالت اولیه که برنامه اجرا میشه هم fade میاد که جالب نبود واسه همین تو فریم 3 دوباره اون رو اینبار با افکت fade گذاشتم تا به مشگل

نخوره.خوب حالا از دکمه بیرونی باید مدیریت کنیم ضمن اینکه به فریم بعد میره و اسکین عوض میشه باید رنگ دکمه ما هم عوض باشه

که جالبتر به نظر بیاد پس از یک if کوچولو استفاده میکنیم:

skin_mc.addEventListener(MouseEvent.CLICK , change_skin);
function change_skin (evt:MouseEvent):void
{
 if (skin_mc.currentFrame == 1)
 {
 skin_mc.gotoAndStop(2);
 back_mc.gotoAndStop(2);
 }
 else
 {
 skin_mc.gotoAndStop(1);
 back_mc.gotoAndStop(3); 
 }
 }

​

 

[mohammad.sub7]

این نمونه هست بعداً اگه وقت کنم ارتقا میدم تاریخ شمسی و ... اضافه میکنم . باید air آپدیت داشته باشید واسه اجرا

مشاهده پیوست 58915


داخل مثال قسمت اول مربوط به کد چرخش ساعت به اشتباه در عدد 60 ضرب کردم که عدد درست 30 هستش خودتون اصلاح کنید یعنی خط اول تابع میشه:

hour.rotation=Number(my_date.hours)*30;