متحرک‌سازی

آب در فلش
۱۱ مرداد ۱۳۹۲

متحرک‌سازی آب در فلش

|
توسط
|
6 دیدگاه
|

Animating Water in Flash Pro | متحرک‌سازی آب در فلش

Tutorial Details | جزئیات خودآموز

Adobe Flash Professional

Upper Intermediate | بالاتر از متوسط

Four hours | چهار ساعت

In this tutorial, you will learn how to create a water animation in flash using a water image. Here we are opening Adobe Flash Professional CC (you may use lower versions of this program) & taking new flash document with ActionScript3.0 or ActionScript2.0. You may have concerned that ActionScript 1.0 & 2.0 are deleted in new version of Adobe Flash Professional.

در این خودآموز فراخواهید گرفت که چگونه از عکس آب استفاده کنید و آن را در محیط فلش متحرک سازید. همانند شکل بالا Adobe Flash Professional را باز کرده (میتوانید از نسخه‌های پایین تر این نرم افزار نیز استفاده کنید) و صفحه جدیدی را با فرمت ActionScript 3.0 یا ActionScript 2.0 باز کنید. در نظر داشته باشید که ActionScript 1.0 & 2.0 در ورژن جدید نرم افزار Adobe Flash Professional حذف شده اند.

Step 1: Setting Up Document Properties

From Properties panel change size and frame rate (FPS) as image below. To do this you may also Select Modify from the menu bar and select Document or You directly can press ctrl + J to open the document properties. Now rename the Layer 1” to “img1“.

مرحله اول: تنظیمات اولیه

از پنل Properties (سمت راست صفحه کاری) سایز و تعداد فریم‌ها در هر ثانیه (FPS) را همانند شکل بالا تنظیم نمایید. برای دسترسی به این پنل همچنین میتوانید از منوی اصلی نرم افزار Modify را انتخاب و Document را بزنید یا از کلید میانبر ctrl+J استفاده نمایید. حال Layer 1 را بهimg1 تغییر نام دهید.

Step2: Importing Image & Positioning & Resizing

Import Water & Trees.jpg” (Download) to library. To do that, Go to the File menu > Select Import > Select Import to Library. Now from Library (You may press ctrl+L), drag the imported image and drop it on Stage. Select image on stage with “Selection Tool” (You may press V), Now from Align Panel first click on check box of Align to Stage > Match width and height > Align horizontal center > Align vertical center.

مرحله دوم: وارد کردن عکس به صفحه کاری و تغییر اندازه و موقعیت

با طی کردن مسیر File > Import > Import to Library عکس Water & Trees.jpg (دانلود) را به داخل Library وارد کنید. از داخل پنل Library عکس را کشیده و بر روی صفحه بیاندازید. حال به کمک Selection Tool (میتوانید میانبر V را فشار دهید) عکس را روی صفحه انتخاب کنید و سپس به بخش Align رفته و ابتدا Align to stage را تیک بزنید و همانند عکس فوق به ترتیب ارتفاع و عرض عکس را سایز کرده (Match width and height) و آنگاه با کلیک بر روی Align horizontal center و Align vertical center” عکس را وسط چین کنید.

Step 3: Detaching Island Part

Create two new layers as below. In layer “img1” select image with “Selection tool” and copy it by pressing ctrl+C. Now go to “img2” layer and paste in same place as before by pressing ctrl+shift+V. Now in layer “non-water mask” select “Pen Tool” and draw a closed curve as depicted in following images. Select “Paint Bucket Tool” and fill in the curve. “Right-Click” on “non-water mask” layer and choose “mask“.

مرحله سوم: جداسازی بخش خشکی از آب

دو لایه جدید همانند شکل بالا بسازید. به لایه img1” رفته و توسط ابزار Selection Tool عکس موجود را انتخاب کنید و با فشار دادن ctrl+C” آن را کپی نمایید. حال به لایه img2” رفته و با فشردن ctrl+shift+V” عکس را دقیقاً در همان جای قبلی الحاق کنید. به لایه non-water mask بروید و ابزار Pen Tool” را انتخاب کنید و منحنی ای همانند شکلهای بالا بسازید. اکنون Paint Bucket Tool” را انتخاب و داخل منحنی را از رنگ پر کنید. بر روی لایه non-water mask کلیک راست کرده و Mask” را برگزینید.

Step 4: Creating Animation Symbol

Create two new layers as below. In layer “img1” select image with “Selection tool” and copy it by pressing ctrl+C. Now go to “animated water” layer and paste in same place as before by pressing ctrl+shift+V. “Right-click” on pasted image and select “Convert to Symbol” (you may also press F8). While you are using “Selection Tool“, “Double-Click” on converted image in order to go inside the symbol. Rename “Layer 1” to “bg“. Select image on stage with “Selection Tool” and press ctrl+T. ChangeScale parameters from 46.9 to 47.2 and 47.1 for “Scale Width” and “Scale Height” respectively. Change “Skew” parameters to -0.5 for both “Skew Horizontal” and “Skew Vertical“.  Now
create new layer (rename it to shape tween) and draw a rectangle on it and then make many copies from it. Distribute them in vertical positions with same space between each rectangle.

مرحله چهارم: ایجاد سیموبل انیمیشن

دو لایه جدید همانند شکل بالا بسازید. به لایه img1” رفته و توسط ابزار Selection Tool عکس موجود را انتخاب کنید و با فشار دادن ctrl+C” آن را کپی نمایید. حال به لایه animated water” رفته و با فشردن ctrl+shift+V” عکس را دقیقاً در همان جای قبلی الحاق کنید. بر روی عکس الحاق شده کلیک راست کنید و Convert to symbol را انتخاب کنید (میتوانید از کلید میانبر F8 نیز استفاده کنید). بر روی عکس تبدیل شده به سیموبل دابل کلیک کنید تا وارد آن شوید. نام Layer 1 را به bg تغییر دهید. حال عکس را به کمک Selection Tool” انتخاب و ctrl+T را فشار دهید. از بخش Scale اندازه ها را برای Scale Width و Scale Height از ۴۶٫۹ به ترتیب به ۴۷٫۲ و ۴۷٫۱ تغییر دهید. از بخش Skew هم مقادیر را برابر ۰٫۵- درج کنید. لایه جدیدی ساخته و آن را به shape tween تغییر نام دهید. ابزار کشیدن مستطیل (Rectangle) را انتخاب کرده و مستطیلی در آن ترسیم کنید. از این مستطیل به تعداد کپی گرفته و به فاصله مساوی از هم، در صفحه، همانند شکل بالا پخش نمایید.

Step 5: Animating

In “bg” layer go to frame 96 (equals to 4 seconds, why?!!) and press “F5” to create “frame“. In “shape tween” layer again go to frame 96 and press “F6” to create “Keyframe“. Now select all rectangles and move them below as depicted. In “shape tween” layer and in the middle of TimeLine (between 0 and 96) “Right-Click” and then select “Create Shape Tween“. Change “shape tween” layer to mask.  Return to “Scene 1“.

مرحله پنجم: انیمیشن سازی

در لایه bg” به فریم ۹۶ (معادل ثانیه ۴، چرا؟!!) رفته و کلید میانبر “F5” را برای ایجاد “Frame” فشار دهید. در لایه shape tween” مجدد به فریم ۹۶ رفته و کلید میانبر F6 را برای ایجاد Keyframe فشار دهید. اکنون تمام مستطیلها را انتخاب و آن ها را به سمت پایین حرکت دهید. در همین لایه و در فاصله بین فریم های ۰ تا ۹۶ کلیک راست کرده و Create Shape Tween” را انتخاب کنید. حال این لایه را به Mask تبدیل کنید. از محیط سیمبول خارج و به Scene 1 باز گردید.

Step 6: Finalizing

In “animated water mask” layer draw a rectangle. Select it. Now from Align Panel first click on check box of Align to Stage > Match width and height > Align horizontal center > Align vertical center. At the end change “animated water mask” to “Mask“. Press ctrl+Enter to publish your flash and check your animation.

مرحله ششم: پایان دهی

در لایه animated water mask” مستطیلی بکشید و سپس به بخش Align رفته و ابتدا Align to stageرا تیک بزنید و به ترتیب ارتفاع و عرض مستطیل را سایز کرده (Match width and height) و آنگاه با کلیک بر روی Align horizontal center و Align vertical center” آن را در وسط چین کنید.

Another Excample

Use Adobe Photoshop and Adobe Flash Professional to make “Island.jpg” (Download) animated as below.

مثال دیگر

از Adobe Photoshop و Adobe flash Professional کمک بگیرید تا عکس Island.jpg (دانلود) را به صورت زیر متحرک کنید.

6 دیدگاه

  1. هیشکی

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

    دوباره بنویسم” این جا حال همه ما خوب است، اما تو باور نکن”

    مثه همیشه به دل نشست

    موفق..

درج دیدگاه

یا اهل‌العالم // آیت الله امامی کاشانی-آیت الله محمد تقی بهجت - یا اهل‌العالم
icon-downloadicon-downloadicon-download
  1. یا اهل‌العالم // آیت الله امامی کاشانی-آیت الله محمد تقی بهجت - یا اهل‌العالم