ایجاد انیمیشن برف باریدن

من می خواهم در این درس به شما نشان دهم که چگونه یک کارت تبریک کریسمس که در ان برف می بارد بسازید و در ساختن آن از اکشن اسکریپت استفاده کنید . شما می توانید از این انیمیشن بعنوان بنر برای وب سایت استفاده کنید . با فرا گرفتن این درس شما خواهید  فهمید که چگونه برف هایی را که از آسمان پایین می افتند بسازید ف و چگونه یک انیمیشن بسازید و چیزهای دیگر .

دانلود سورس کد این انیمیشن

برای خواندن این آموزش ادامه مطلب را ببینید :

Christmas Card Animation

من می خواهم در این درس به شما نشان دهم که چگونه یک کارت تبریک کریسمس که در آن برف می بارد بسازید و در ساختن آن از اکشن اسکریپت استفاده کنید . شما می توانید از این انیمیشن بعنوان بنر برای وب سایت استفاده کنید . با فرا گرفتن این درس شما خواهید  فهمید که چگونه برف هایی را که از آسمان پایین می افتند بسازید ف و چگونه یک انیمیشن بسازید و چیزهای دیگر .

گام اول : ابتدا عکس زیر را در رایانه خود ذخیره کنید ، از این عکس در انیمیشن خود بعنوان background استفاده خواهیم کرد.

گام دوم : یک پروژه ی جدید فلش را ایجاد کنید ، و در پنل Properties ، روبروی size دکمه ی edit را انتخاب کرده و اندازه صفحه را 440 در 301 پیکسل تنظیم کنید . هر رنگی را که دوست دارید برای background انتخاب کنید .

گام سوم :روی لایه اول دابل کلیک کنید و نام آن را christmas بگذارید .

گام چهارم : این کار را انجام بده ، File > Import > Import to Stage و بعد عکسی را که دخیره کردید به فلش وارد کنید .

گام پنجم : عکس را انتخاب کرده و پنل align را باز کنید (ctrl+k) ،و کار های زیر را انجام دهید :

1.مطمعن شو که پنل align  را باز کرده ای .

2.در پنل align روی align horizontal همانطور که در شکل پایین نشان داده شده است ، کلیک کنید .

3.در پنل align T، روی align vertical کلیک کنید.

انجام این کارها باعث می شود که عکس ما در وسط صفحه قرار گیرد.

گام ششم: اکنون زمان ساختن برف فرا رسیده است . در بالای لایه ی christmas یک لایه ی جدید بساز و نام آن را snow falling قرار بده .

گام هفتم : لایه ی snow falling را انتخاب کن . حالا ابزار دایره را انتخاب کن ، در بخش colors در پنل proreties  و در قسمت fall and stroke ، روی آیکونی که به شکل مداد است کلیک کرده و بعد بر روی آیکون سفید رنگی که یک خط قرمز روی آن است کلیک کرده تا خط دور دایره غیر فعال گردد.

برای رنگ داخلی دایره ، رنگ سفید را انتخاب کن و سپس یک دایره ی 4 در 4 پیکسل رسم کنید.

گام هشتم : دایره سفید رنگ را انتخاب کرده و کلید F8 را انتخاب کنید ، یا روی آن راست کلیک کرده و گزینه ی Convert to Symbol را انتخاب کنید ، به این ترتیب این دایره سفید تبدیل به یک سمبل مووی کلیپ می شود.

گام نهم : مووی کلیپ را انتخاب کرده و به پنل peroperties بروید و در بخش instance name  نام snow را به این مووی کلیپ اختصاص دهید.

گام دهم: مووی کلیپ را انتخاب کنید و پانل Action Script را باز کنید (F9) و کدهای زیر را در درون آن وارد کنید :

onClipEvent (load) {
 movieWidth = 440;
 movieHeight = 301;
}

در کدهای بالا ، سطر اول می گوید که ، عرض صفحه را برابر 440 پیکسل قرار بده ، و کد دوم می گوید که ، ارتفاع صفحه را برابر 301 پیکسل قرار بده .

 i = 1+Math.random()*2;
 k = -Math.PI+Math.random()*Math.PI;

در کد بالا،در خط اول  متغیر i  را برابر یک عدد تصادفی بین یک و سه قرار می دهیم .

و در خط دوم متغیر k را برابر قرینه ی عدد پی (3.14) به علاوه ی یک عدد تصادفی بین صفر و عدد پی قرار می دهیم .

Math.PI : یعنی ، عدد پی (3.14)

Math.random : یعنی انتخاب یک عدد تصادفی بین صفر و یک .

 this._xscale = this._yscale=50+Math.random()*100;
 this._alpha = 75+Math.random()*100;
 this._x = -10+Math.random()*movieWidth;
 this._y = -10+Math.random()*movieHeight;

}

حال ما می خواهیم میزان بزرگی دانه برف را تعیین کنیم ،خاصیت Xscale_  میزان بزرگی طولی و خاصیت yscale_ میزان بزرگی عرضی را نشان می دهد . در خط اول میزان بزرگی طولی و عرضی ، یک عددتصادفی که بین  50 و 100 انتخاب می شود .

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

در خط سوم باید مکان اولیه قرار گیری دانه برف را تعیین کنیم .

onClipEvent (enterFrame) {

 rad += (k/180)*Math.PI;
 this._x -= Math.cos(rad);
 this._y += i;
 if (this._y>=movieHeight) {
  this._y = -5;
 }
 if ((this._x>=movieWidth) || (this._x<=0)) {
  this._x = -10+Math.random()*movieWidth;
  this._y = -5;
 }
}

Step 11

Select the first frame of layer snow falling, go again to the Action Script Panel (F9) and enter this code inside the actions panel:

for (k=0; k<50; k++) {
 duplicateMovieClip(this.snow, "snow"+k, k);
}

Step 12

It's time for text animation. Create a new layer above the layer snow falling and name it text animation.

Step 13

Select the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select Zurich BdEx BT as font.
3. Choose 14 as font size.
4. Select #820000 as color,
5. As the rendering option, select Use Anti-alias for readability.



Then, enter some appropriate text somewhere on the stage.



That's it!

Test your animation and enjoy!