کنترل کردن اشیاء با کیبورد
۹۵/۰۳/۱۱
آموزش ساخت دکمه کشویی
۹۵/۰۳/۱۱

کاربردی دیگر از دکمه های فعال

کاربردی دیگر از دکمه های فعال :

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

۱- دو عکس دلخواه را وارد کتابخانه فلش کنید و سپس این را طوری کنار همدیگر قرار دهید که بین آنها حدود    ۵mm فاصله به وجود بیاید (توجه کنید که هر دو عکس را باید به اندازه صفحه کاری خود نیز در آورید).

۲- یک لایه جدید اضافه کنید و در میان دو عکس را که در لایه قبل خالی گذاشته بودید به وسیله ابزار Rectangle یا هر چیز دیگری که خود دوست دارید پر کنید (توجه کنید که این کار فقط برای این است که دو عکس با هم دیگر تداخلی نداشته باشند در غیر این صورت شما می توانید حتی عکس ها را به همدیگر نیز بچسبانید).

۳- قسمت اصلی انیمیشن از این قسمت شروع می شود :
با فشردن کلید های Ctrl+F8 یک symbol جدید از نوع Movie Clip ایجاد نمائید با این کار شما به محیط ویرایش این symbol برده می شوید ، بدون اینکه دست به هیچ کدام از قسمت های محیط ویریش Symbol بزنید یک مربع به ابعاد ۱*۱ سانتیمتر ایجاد کنید ، حال مربع را انتخاب کنید و آن را به یک symbol از نوع button تبدیل کنید(این کار برای این صورت می گیرد که بتوان کدی را که در قسمت بعدی توضیح داده می شود را به یک دکمه افزود) .

۴- دکمه ای را که در قسمت قبل ایجاد کرده اید انتخاب کنید و پنل Actions را باز کنید و قطعه کد زیر را در آن تایپ کنید :

on (rollOver) {

            gotoAndPlay(2);

}

خط اول این کد بیانگر این است که وقتی نشانگر mouse بر روی دکمه قرار بگیرد باید کد درون براکت اجرا شود ، کد درون براکت بیانگر این است که نورا timeline باید به فریم ۲ برود و انیمیشن یا دستوراتی را که در آن فریم وجود دارند را اجرا کند .

۵- فریم ۲ را انتخاب کنید و در آن یک فریم کلیدی ایجاد کنید همین کار را برای فریم ۳۰ نیز انجام دهید فریم ۳۰ را به حالت انتخاب قرار دهید ودر آن مربع را ۱۰ سانتیمتر به سمت چپ منتقل کنید و سپس با انتخاب یکی از فریم های بین این دو فریم و کلیک راست کرست کردن و انتخاب گزینه Create motion tween حرکت انتقالی مربع (دکمه) را ایجاد نمائید ، برای اینکه مربع در حال حرکت به سمت چپ چرخش داشته باشد می توانید با انتخاب یکی از فریم های ۳ تا ۲۹ و مراجعه به پنل properties با استفاده از گزینه Rotate و انتخاب یکی از پارامترهای آن یعنی (CW ساعتگرد و CCW پادساعتگرد) این کار را انجام دهید ، اما در مورد تغییر رنگ مربع در فریم ۳۰ مربع را انتخاب کنید و در پنل properties آن گزینه color و پارامتر tint را انتخاب کنید با کلیک بر روی جعبه رنگی که این پارامتر در اختیار شما قرار می دهد می تونید رنگی را که می خواهید مربع به آن رنگ تبدیل شود را انتخاب کنید .

۶- فریم ۳۰ را انتخاب کنید و در آن دکمه را به حالت انتخاب در آورید و پنل Actions را باز کنید و کد زیر را در آن تایپ کنید :

on (rollOver) {

            gotoAndPlay(31);

}

این کد نیز عملکردی مشابه با کد قسمت ۴ دارد .

۷- کارها یی که در این قست باید انجام شود مشابه قسمت ۵ است با کمی تفاوت جزئی :
– فریم ۳۱ را انتخاب کنید و در آن یک فریم کلیدی ایجاد کنید همین کار را برای فریم ۶۰ نیز انجام دهید فریم ۶۰ را به حالت انتخاب قرار دهید ودر آن مربع را ۱۰ سانتیمتر به سمت راست منتقل کنید و سپس با انتخاب یکی از فریم های بین این دو فریم و کلیک راست کرست کردن و انتخاب گزینه Create motion tween حرکت انتقالی مربع (دکمه) را ایجاد نمائید ، برای اینکه مربع در حال حرکت به سمت راست چرخش داشته باشد می توانید با انتخاب یکی از فریم های ۳۱ تا ۵۹ و مراجعه به پنل properties با استفاده از گزینه Rotate و انتخاب یکی از پارامترهای آن یعنی (CW ساعتگرد و CCW پادساعتگرد) این کار را انجام دهید توجه کنید که هد کدام از این پارامتر ها (CW یا CCW)را کهدر این قسمت انتخاب می کنید نباید در قسمت قبلی انتخاب شده باشند فریم ۶۰ را انتخاب کنید و با استفاده از روشی که در بالا گفته شد رنگ مربع را به رنگ اولیه آن که در فرم ۱ بود برگردانید .

۸- آخرین قسمت از بخش ویرایش این Symbol اضافه کردن Action به فریم ها می باشد :
برای این کار کد stop() را در فریم های ۱ ، ۳۰ و ۶۰ تایپ کنید .

۹- از محیط ویرایش Symbol خارج شوید و Scene اصلی بازگردید حال با استفاده از کتابخانه فلش symbol ی را که ایجاد کرده اید را بر روی عکس سمت راست بکشید این کار را تا جایی ادامه دهید که دکمه ها کل تصویر را بپوشانند .
انیمیشن شما تمام شد اکنون شما می تونید با فشردن کلیدهای Ctrl+Enter نتیجه کار خود را ببینید .

دوست عزیز به علت اینکه مدت ها از نوشته شدن این مطالب می گذره برای همین اول از همه به شما توصیه می کنم که حتماً اگر تازه کار هستید و می خواید تازه شروع به یادگیری اکشن کنید مستقیم برید سراغ اکشن اسکریپت ۳ ولی اگر برای هدف دیگه می خواید می تونید تمامی فایل ها به انضمام آموزش اونها را از لینک http://darajeh.net/amirUploads/as2.zip دریافت کنید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*ضروری