ایجاد افکت لرزشی حرکتی

برای دیدن آموزش ، ادامه مطلب را ببینید .

پیش نمایش :

گام اول
ابتدا فلش را باز کرده و یک صفحه جدید فلش را از نوع action script 3 ایجاد کرده و سپس ، در فلش یک مووی کلیپ ایجاد کرده و در آن هر شکلی که دوست دارید رسم کنید .
یا اینکه می توانید یک عکس را به فلش وارد کرده و آن را تبدیل به یک مووی کلیپ کنید .


گام دوم

 حالا طبق فیلم زیر ، عرض و ارتفاع صفحه را روی 400 و 300 پیکسل تنظیم کنید .

برای دیدن فیلم کلیک کنید

گام سوم

نام لایه ی پیش فرض را photo بگذارید ، برای این کار روی نام لایه که layer1 است ، دابل کلیک کنید .

گام چهارم

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

برای وارد کردن عکس کارهای زیر را انجام بده :

File>Import>Import to stage .

و عکس خود را انتخاب کرده و به فلش وارد کنید .

گام پنجم

عکس را انتخاب کرده و کلید F8 را فشار دهید تا پنجره ی covert to symbol باز شود ، حالا گزینه ی Movie clip را انتخاب کرده و ok کنید .

گام ششم

حالا به پنل library رفته و برای مووی کلیپ ، در قسمت linkage نام Photo را وارد کنید .

دقت کنید که حرف P در photo باید با حروف بزرگ نوشته شود .. به فیلم آموزشی توجه کنید.

برای دیدن کلیپ آموزشی کلیک کنید

گام هفتم

حالا اگر عکس روی صفحه است آن را حذف کنید .

گام هشتم

حالا روی فریم اول از لایه ی photo کلیک کرده و سپس پنل actions را باز کنید . حالا کد های زیر را کپی کرده و آنها را درون پنل actions قرار دهید . اکنون به توضیح کدها می پردازیم .

var photos:Array = new Array();

 

for (var i = 0; i < 20; i++) {
 
 var picture:Photo = new Photo();

 picture.scaleX = Math.random();

 picture.scaleY = picture.scaleX;
 
 picture.x = Math.random() * stage.stageWidth;
 picture.y = Math.random() * stage.stageHeight;
 
 addChild (picture);

 photos.push (picture);
} 

var timer:Timer = new Timer(20, 100000000);
timer.addEventListener (TimerEvent.TIMER, shakephotos);
timer.start ();
 

function shakephotos (e:Event):void {
 

 for (var i = 0; i < 20; i++) {
 

  photos[i].rotation += Math.random() * 8 - 4;
 
  photos[i].x += Math.random() * 6 - 4;
  photos[i].y += Math.random() * 6 - 4;
 }
} 

 

رنگ سبز پر رنگ : در  این کد ، متغیر photos را از نوع آرایه قرار دادیم (اگر هنوز با مبحث آرایه آشنا نیستید ، در قسمت صفحات وبلاگ ، به صفحه ی آرایه چیست ، بروید ).
و آن را برابر نمونه جدیدی از آرایه قرار دادیم .

رنگ سبز کم رنگ : در خط اول این کد از یک حلقه ی for استفاده کردیم ، .
(اگر با حلقه ها آشنا نیستید به صفحه ی ، آشنایی با حلقه ها ، بروید .)

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

حال ما در این کد ، ما برای بیست بار ، یک متفیر به نام picture ایجاد کرده و در خط دوم این کد ، این متغیر را از نوع Photo تعرف کردیم و آن را برابر نمونه جدیدی از متد photo قرار دادیدم .
یادتان باشد که ما متد Photo را روی مووی کلیپ عکس ، در خطوط بالا تنظیم کردیم . linkage که یادتان هست ؟ .
پس ما بیست عکس از یک عکس کپی کرده و برای هر کدام تنظیمات زیر را اعمال می کنیم ،

در خط سوم ،خاصیت scaleX را تنظیم کردیم و آن را برابر با یک عدد تصادفی بین صفر و یک قرار دادیم . این خاصیت میزان کشیدگی از چپ و راست را تعیین می کند.
در خط چهارم خاصیت scaleYرا برابر با خاصیت خط قبلی ، یعنی scaleX قرار دادیم . scaleY ، میزان کشیدگی از بالا و پایین را نشان می دهد.

حالا نوبت به تعیین xوy شکل می رسد .
در خط پنجم ، x شکل برابر با یک عدد تصادفی بین صفر و عرض صفحه اصلی ، قرار داده ایم .
در خط ششم ، y شکل را برابر با یک عدد تصادفی بین صفر و ارتفاع صفحه اصلی، قرار داده ایم.

حالا ما باید عکسی را که خصوصیاتش را تنظیم کردیم ، به صفحه بیاوریم ، پس در خط هفتم از دستور addChild استفاده کردیم . در داخل پرانتز نام عکس را که در حالت کلی pictureاست گذاشتیم.
در خط اول اول کدمان، یک آرایه ایجاد کردیم ، حالا ما می خواهیم هر بیست عکس را در درون یک آرایه قرار دهیم ، پس از دستور push استفاده می کنیم . برای وارد کردن یک شکل به آرایه ابتدا نام آرایه و سپس یک نقطه و بعد دستور push و سپس درون پرانتز نام عکس یا شی را وارد می کنیم .

رنگ بنفش : حال ما می خواهیم یک تایمر ایجاد کنیم ، تا هر 20 میلی ثانیه یک بار با اجرای یک تابع  خصوصیات عکس ها را تغییر دهد .

پس ما ابتدا یک متغیر به نام timer از نوع Timer ایجاد کرده و آن را برابر با نمونه جدیدی از یک Timer قرار دادیم . عدد اول در پرانتز ، زمان تاخیر به میلی ثانیه و عدد دوم ، تعداد دفعات تکرار را نشان می دهد .  

var timer:Timer = new Timer(تعداد دفعات تکرار, زمان تاخیر به میلی ثانیه); 

در خط دوم ما برای تایمر یک شنونده رویداد ایجاد کردیم ، که به تایمر گوش دهد و هر 20 میلی ثانیه یک بار تابع را فراخوانی کند .

اگر با مبحث شنونده رویداد آشنا نیستید به صفحه : شنونده رویداد بروید .

در خط سوم ما به تایمر دستور می دهیم که شروع شود .

رنگ آبی : در خط اول این کد ما یک تابع با نام  shakephotos ایجاد کردیم و ...
در خط دوم ما یک حلقه for ایجاد کردیم که به  ازای i  ، برای 20 عکس دستورات زیر را اعمال می کند ...
در خط سوم ما به عنصر i  ام آرایه اشاره می کنیم و به خاصیت rotation آن که همان چرخش می باشد ، یک عدد تصادفی بین 4- و 4 می دهیم .
در خط چهارم ، ما به عنصر i ام ، آرایه ای که ایجاد کردیم اشاره می کنیم ، و به x آن یک عدد تصادفی بین 4-  و 4 اضافه می کنیم .
در خط پنجم ، ما به عنصر i ام آرایه ، اشاره کرده و به y آن یک عدد تصادفی بین 4- و 4 می دهیم.

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