تحقیق مقاله محیط کار فلش

فصل اول آشنایی 

محیط کار فلش 

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

کلیه پانل‌ های فلش قابلیت جابجایی، حذف و اضافه شدن دارد و کاربر می‌تواند با توجه به نوع کار خود، این پانل‌ها را در محیط کار فلش قرار دهد. برای هماهنگ بودن محیط کار شما با تصاویر کتاب، از منوی Windows روی گزینه Panel sets رفته و Default Layout را انتخاب کنید. 

Stage

ناحیه وسیع و سفید رنگی که در وسط صفحه مشاهده می‌کنید stage نام دارد ودر واقع محیط کار اصلی ماست. همه ترسیم‌ها و تصاویر باید در محدوده مرزهای stage قرار گیرد تا نمایش داده شود. 

Timwline

سازمان‌دهنده و کنترل کننده محتویات انیمیشین و هر پروژه دیگر در فلش Timwline

است. Timwline از فریم‌های زیادی تشکیل شده که هر کدام می‌تواند محتویات مخصوص به خود را داشته باشد. 

مدت زمان انیمیشین بستگی به تعدا فریم‌های Timwline دارد. به طور مثال اگر تعداد فریم‌های یک انیمیشن از 400 فریم به 800 فریم تغییر کند مدت زمان نمایش آن انیمیشین دو برابر خواهد شد. در سمت چپ Timwline قسمت مربوط با لایه‌ها را مشاهده کنید. 

لایه‌ها 

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

برای اضافه کردن لایه جدید می‌توانید از منوی insert گزینه layer  را انتخاب کنید یا از آیکون‌های مشخص شده (تصویر بالای صفحه قبل) استفاده کنید. لایه جدید بالای لایه موجود ظاهر می‌شود و به ترتیب layer 2 ,layer1 نام‌گذاری می‌شوند. با حرکت ماوس می‌توانید لایه‌ها را به راحتی بالا و پایین ببرید. 

Symbols

در انیمیشن و دیگر پروژه‌هایی که با فلش ساخته می‌شوند، موضوعات بسیاری هستند که بارها و بارها از آنها استفاده می‌شود. فلش برای ذخیره این موضوعات از Symbols استفاده می‌کند. 

در واقع یکی از پراستفاده‌ترین و مهم‌ترین قسمت‌های فلش Symbols یا نمادها هستند که استفاده از آنها حجم فایل شما را به شدت کاهش می‌دهد و ویرایش پروژه را بسیار ساده‌تر می‌سازد. سه نوع Symbols در فلش وجود دارد Button,Graphic و Movie Clip که هر کدام Timline و Stage مخصوص به خود را دارند. به طور مثال شما می‌خواهید یک باغ گل شامل 50 شاخه گل را در فلش طراحی کنید (تصویر مقابل). برای انجام این کار می‌توانید به دو صورت عمل کنید. 

1- با استفاده از ابزارهای ترسیم فلش که در سمت چپ محیط کار مشاهده می‌کنید، 50 شاخه گل کشیده و در کنار هم قرار دهید. کاری بسیار وقت‌گیر که حجم پروژه شما را بسیار بالا خواهد برد. 

2- یک Symbols از نوع گرافیک ایجاد کرده تنها یک شاخه گل در آن بکشید. سپس از آن Symbols، 50 عدد را در صفحه Stage قرار دهید. با این روش اگر شما بخواهید هر گونه تغییری در شاخه‌های گل بدهید نیازی نیست هر یک را جداگانه ویرایش کنید. فقط کافیست Symbols خود را باز کرده و تغییر خود را اعمال کنیم، این تغییر در هر شاخه گل اعمال خواهد شد. 

ترسیم در فلش 

در سمت چپ محیط کار فلش، جعبه ابزاری به نام Tool Box مشاهده می‌کنید. این جعبه ابزار از 4 قسمت تشکیل شده است. 

1- Tool : شامل مهمترین ابزارهای ترسیم و انتخاب در فلش است. 

2- Viwe: شامل ابزارهایی برای بزرگ‌نمایی، کوچک کردن و جابجایی Stsge است. 

3- Colors : شامل ابزارهای انتخاب و تغییر رنگ است. 

4- Option: این قسمت با توجه به انتخاب یکی از ابزارهای قسمت Tools متغیر است و بسته به نوع ابزاری که انتخاب می‌کنید، گزینه‌های متفاوتی در اختیار شما قرار می‌دهد که در حین کار با پروژه‌های این کتاب با آنها آشنا خواهیم شد. 

ابزار  را انتخاب کرده و یک مستطیل در محیط Stage رسم کنید. اگر هنگام ترسیم کلید Shift را پایین نگه دارید طول و عرض مستطیل شما یکسان خواهد بود و می‌توانید مربع بکشید. 

در قسمت Colors می‌توانید رنگ دو قسمت را به دلخواه تغییر دهید. یکی رنگ خطوط محیطی Stroke Color و دیگری رنگ داخل شکل Fill color که با سطل رنگ مشخص شده است. 

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

همان‌طور که در تصاویر 7 و 8 مشاهده می‌کنید، قادر خواهید بود اندازه خط و نوع خط را به راحتی تغییر دهید. می‌توانید خطوط را به صورت خط‌چین، ساده و نامنظم و در رنگ مختلف انتخاب کنید. 

برای جابجا کردن اشکال ترسیمی کافیست روی آنها کلیک کرده، کلید ماوس را در حالت فشار نگه دارید و آن را جابجا کنید. فقط این نکته را باید توجه داشته باشید که هر ترسیم شامل دو بخش است، یک بخش شامل خطوط محیطی و پیرامون شکل و یک بخش هم خود شکل است. برای این که کل موضوع انتخاب شود شما باید روی ترسیم‌های خود دوبار کلیک (Double Click) کنید. 

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

برای کشیدن اشکال نامنظم و یا خطوط خمیده می‌توانید از ابزار  ؟ استفاده کنید. پس از این انتخاب در قسمت Option در جعبه ابزار ToolBox، سه گزینه در اختیار شما قرار می‌گیرد که در تصویر مقابل مشاهده می‌کنید. 

گزینه ؟ برای کشیدن خطوط صاف و زاویه‌دار گزینه ؟برای خطوط دلخواه شما طبق حرکت ماوس استفاده می‌شود. 

برای پاک کردن اشکال و ترسیم‌ها از این ابزار ؟استفاده می‌کنیم. هنگامی که پاک‌کن را انتخاب کنید در قسمت Option سه گزینه در اختیارتان قرار می‌گیرد. با رفتن روی آیکون Erase Mode (تصویر مقابل) می‌توانید چگونگی پاک کردن را مشخص کنید. 

گزینه Erase Mode تمام مکان‌های دلخواه را پاک می‌کند ولی گزینه Erase line فقط خطوط محیطی و گزینه Erase Fills فقط رنگ داخل را پاک می‌کند. تصویر صفحه بعد گویای متفاوت کار پاک‌کن است. 

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

ایجاد Symbols و استفاده از آنها 

از منوی insert گزینه New Symbol را انتخاب کنید. جعبه Create New Symbol باز خواهد شد. در این جعبه شما نوع Symbol خود را انتخاب کرده و یک نام به آن اختصاص بدهید. برای مشاهده Symbolای که ایجاد کرده‌اید از منوی ای که ایجاد کرده‌اید از منوی Window گزینه brary را انتخاب کنید. پنجره‌ای مطابق با دو تصویر صفحه بعد باز خواهد شد. در این پنجره شما می‌توانید تمام‌ Symbolهای به کار رفته در یک فایل فلش را مشاهده و هر کجا که خواستید از آنها استفاده کنید. فقط کافیست Symbol مورد نظر خود را انتخاب کرده و با ماوس آن را روی محیط Stage بکشید. 

نکته 

کتابخانه (library) شامل تمام موضوعات استفاده شده در فایل فلش است. به عبارت دیگر علاوه بر Symbolها، تمامی عکس‌ها، فیلم‌ها، و صداهایی که در پروژه خود استفاده می‌کنید در کتابخانه دسته‌بندی می‌شوند و به شما امکان نظارت کامل را می‌دهد. 

متحرک‌ سازی به صورت Tweening

Motion Tweening 

1- یک صفحه جدید باز کنید. 

2- از جعبه ابزار Tools گزینه  را کلیک کرده، سپس از پایین آن روی * کلیک کنید. در پنجره باز شده، گزینه Comer Radius را روی 20 تنظیم کرده و ok می‌کنیم. با این کار گوشه‌های مستطیل را از حالت نوک‌تیز به حالت خمیده تبدیل می‌کنیم. 

3- مستطیلی در صفحه Stage بکشید. روی * کلیک کنید و سپس روی مستطیل خود راست کلیک کرده و در پنجره باز شده گزینه Convert to Symbol را انتخاب کنید، نوع Symbol را Graphic گذاشته و پس از انتخاب یک نام، کلید OK را فشار دهید. همان‌طور که می‌بینید به دور مستطیل یک کادر آبی رنگ کشیده می‌شود. که نشان دهنده یک Symbol در محیط stage  است. 

4- بر روی فریم شماره 20 راست کلیک کرده و از پنجره باز شده گزینه insert Key Frame را انتخاب کنید. Timeline مانند تصویر مقابل شده است. 

5- کلید Shift را در حالت فشرده نگه داشته و با ماوس روی اولین فریم کلیک کنید تا همه فریم‌های Timeline در حالت انتخاب قرار گیرد. 

6- از منوی insert گزینه Create Motion Tween را انتخاب کنید. Timeline مانند تصویر زیر می‌شود. 

7- روی فریم 20 کلیک کرده و از جعبه ابزار سمت چپ روی * کلیک کنید. 

8- به وسیله ماوس یک تغییر اندازه در شکل خود ایجاد کنید و آن را 90 درجه بچرخانید. با استفاده از کلیدهای Ctrl + Enter نتیجه کار خود را مشاهده کنید. 

9- به محیط کار فلش بازگردید. از منوی insert گزینه Layer را انتخاب کنید تا یک لایه جدید بالای لایه قبلی ایجاد گردد. حال باید جای این دو لایه را عوض کنید. به طوری که لایه قبلی بالای لایه جدید برود. برای این کار فقط کافیست کلید ماوس را روی لایه پایینی فشار داده آن را در حالت فشار نگه داشته و به طرف بالا بکشید. 

10- روی بالاترین لایه راست کلیک کرده و گزینه Mask را انتخاب کنید. تصویر لایه‌ها به صورت تصویر زیر خواهد شد. دو بار روی آیکون * کلیک کنید تا لایه‌ها از حالت قفل خارج شوند. 

11- روی اولین فریم از لایه زیرین که به صورت زیر شاخه درآمده است کلیک کنید. از منوی File گزینه import را انتخاب کنید. از درون کامپیوتر خود یک عکس انتخاب کرده و کلید open را فشار دهید. عکس را در مرکز صفحه Stage قرار دهید طوری که قسمتهایی از عکس زیر مستطیلی که کشیده بودید قرار گیرد. یک بار دیگر با استفاده از کلیدهای ctrl+Enter انیمیشن خود را امتحان کنید. حتماً متوجه چگونگی کارکرد لایه ماسک شده‌اید. 

Ahape Tweening

1- یک صفحه جدید باز کنید. 

2- باز استفاده از ابزرا A بر روی stage عدد 1 را تایپ کنید. از قلم درشت استفاده نمایید و اندازه فونت را روی 80 تنطیم کنید. 

3- از منوی Modify گزینه Break Apart را انتخاب کنید تا عدد شما به صورت تصویر مقابل شود. 

4- روی فریم 15 راست کلیک کنید و insert Key Frame انتخاب نمایید. 

5- روی فریم 15 کلیک کرده و عدد 1 را در این فریم از روی Stage پاک کنید و به جای آن عدد 2 را تایپ کنید. دوباره از منوی Modify گزینه Break Apart را انتخاب کنید عدد 2 رادر صفحه دقیقاً همان‌جایی قرار دهید که عدد 1 قرار داشت. 

6- با استفادهاز کلید Shift. فریم‌های 1 تا 15 را انتخاب کنید و از کشوی Praprties در پایین صفحه،Tween را روی حالت Shape قرار دهید. 

7- رنگ فریم‌های Timeline از خاکستری به سبز رنگ تغییر می‌کند. با استفاده از کلیدهای ctrl + Enter انیمیشن خود را تماشا کنید. 

همان‌طور که مشاهدهمی‌کنید این انیمیشن و به عبارتی تغییر شکل عدد 1 به 2 با شکستگی فراوان بودهو ظاهر چندان زیبایی ندارد. برای رفع این مشکل به ترتیب زیر عمل کنید. 

1- روی اولین فریم کلیک کنید. از منوی Modify وارد بخش Shape شده وShape Hint   Add را انتخاب کنید. یک بار دیگر این کار را تکرار کنید. دو حرف کوچک a و b در صفحه مشاهده می‌کنید. آنها را دقیقاً مطابق مقابل قرار دهید. 

2- بر روی آخرین فریم یعنی فریم 15 رفتهو در آن Hint Shape مشخص شده در Stage را دقیقا به صورت تصویر مقابل قرار دهید. 

انیمیشن خود را نگاه کنید. این بار به صورت تصویر زیر خواهد بود. حرکتی نرم‌تر و زیباتر. 

نکته

اگر در هر یک از مراحل دچار اشتباه شدید فقط کافیست کلیدهای ctrl +z راهمزمان فشار دهید تا یک مرحله به عقب بازگردید. 

انیمیشن سازی با استفاده از قابلیت Motion Guide

بعضی مواقع می‌خواهید شکل، ترسیم و یا تصاویر شما در طول انیمیشن مسیر مشخصی را طی کند. این را می‌توانید با روشهای قبلی نیز انجام دهید ولی برای سهولت کار و زیباتر شد انیمیشن از قابلیت Motion Guide استفاده می‌کنیم که در مثال زیر به طور کامل آموزش داده شده است. 

1- یک شکل دلخواه رسم کنید. ما در این پروژه یک بادکنک رسم کردیم. 

2- حال روی این شکل راست کلیک کرده و گزینه Convert to Symobl را انتخاب کنید و یک سمبل از نوع گرافیک ایجاد کنید. 

3- بر روی فریم 30راست کلیک کرده و insert Key Frame را انتخاب کنید تا یک فریم کلیدی ایجاد شود (تصویر زیر) 

4- بادکنک را در این فریم (فریم 30 ) جابجا کرده و به نقطه مقابل Stage ببرید. برای طبیعی‌تر شدن کار می‌توانید بااستفاده از ابزار * اندازه بادکنک را کوچک کنید (تصویر زیر)

5- حال تمام 30 فریم را در حالت انتخاب قرار داده و از کشوی Motion Tween , Properties را بین این فریم‌ها اعمال منید (این مطلب قبلا در بخش متحرک‌سازی به صورت Tweening به صورت کامل توضیح داده شده است. )

قبل از ادامه بقیهمراحل کار، یک بار انیمیشن خود را با استفاده از کلیدهای ctrl+Enter امتحان کنید. بادکنک حرکت کرده و از سمت چپ Stage به سمت راست می‌رود و در عین حال اندازه آن کوچک می‌شود، گویی از صفحه نمایش دور می‌شود. 

6- روی تنها لایه خود که به طور پیش‌فرض Layer1 نام دارد، راست کلیک کرده و گزینه Add Motion Guide را انتخاب کنید. 

7- ابزار مداد را در جعبه ابزار انتخاب کرده و آن را روی حالت Smooth * قرار دهید. یک مسیر دلخواه برای بادکنک رسم کنید. اولین فریم در layer 1 را انتخاب کنید سپس با استفادهاز ابزار * مرکز بادکنک را در ابتدای مسیر قرار دهید. 

8- آخرین فریم در layer 1  را انتخاب کرده و بادکنک را با همان روش قبلی در انتهای مسیر قرار دهید. 

9- برای طبیعی شدن حکت بادکنکف اولین فریم لایه آن را انتخاب کرده و سپس از کشوی Properties گزینه Orient to part را علامت بزنید. 

دکمه‌های کنترل کننده

دکمه‌ها یا Buttons در فلش موضوعاتی هستند که با رفتن ماوس روی آنها، عکس‌العمل نشان می‌دهند. به وسیله دکمه‌ها می‌توان به کاربر حق انتخاب داد. به طور مثال با ورود به یک سایت گزینه‌هایی مشاهده می‌کنیم که کلیک روی آنها ما را به قسمت مربوط می‌برد. دکمه‌ها یکی از اصلی‌ترین موضوعات فلش به خصوص برای طراحان صفحات وب است. در این بخش با چگونگی ساخت دکمه‌ها و نسبت دادن اعمال مختلف به آنها آشنا می‌شویم. برای ایجاد یک دکمه کافیست یک Symbol جدید ایجاد کنید و نوع آن را Button انتخاب کنید. به این منظور از منوی insert گزینه New Symbol را انتخاب کرده و از پنجره باز شده در قسمت Behavior گزینه Butoon را علامت بزنید. صفحه جدیدی مانند تصویر صفحه بعد باز خواهد شد. 

همان طور که در Timeline مشاهده می‌کنید، دکمه‌های اصلی در فلش دارای 4 فریم به نام Hit –Up – Over – Down هستند. هر کدام از این فریم‌ها نحوه ظاهر شدن دکمه در حالت‌های مختلف ماوس است. 

حالت UP : نحوه نمایش دکمه در حالت عادی است. 

حالت over: نحوه نمایش دکمه وقتی که اشاره‌گر ماوس روی آن می رود. 

حالت Down: نحوه نمایش دکمه در هنگام کلیک کردن است. 

حالت Hit: نمایش داده نمی‌شود ولی تعیین کننده محدوده کلیک برای دکمه است. حال با هم شروع باساخت یک دکمه ساده می‌نماییم. 

1- بر روی اولین فریم کلیک کرده و یک مستطیل رسم کنید. یک نوشته دلخواه روی این مستطیل بنویسید. 

2- بر روی دومین فریم (فریم Over) در Timeline راست کلیک کرده و گزینه insert Key Frame    را انتخاب کنید. در این فریم یک تغییر دلخواه در دکمه به وجود آورید به طور مثال رنگ نوشته را عوض کنید.