ماکرومدیا فلش ( Macromedia Flash) یکی از بهترین نرم افزار هایی است که شما میتوانید جهت افزودن افکت های مخصوص و انیمیشن های کامپیوتری به وب سایت از آن استفاده کنید .در این جزوه سعی شده تمامی نکات با ذکر مثال و انیمیشن برای شما ارائه گردد . امید است این منبع جهت استفاده ی شما عزیزان مفید واقع شود.
برای مطالعه ی این دوره ی آموزشی نیاز است کاربران محترم آشنایی با سیستم عامل ویندوز داشته باشند .
ضمنا سیستم شما باید دارای مشخصات سخت افزاری ذیل باشد :
- حداقل سیستم مورد نیاز پنتیوم 233
- 16 مگابایت Ram
- حدود 600 مگا بایت فضای آزاد
- کارت گرافیکی 64 گیگا بایت
کاربردهای Flash
زمانی که با یک صفحه ی و ب برخورد میکنیم ایده های مختلفی برای ساختن یک وب سایت جالب ،در ذهنمان ایجاد میشود. با وجود بخشهای گوناگون در یک وب سایت در مورد تصاویر و رنگها قانونی کلی وجود دارد. در Flash ابزارهایی وجود دارد که به وسیله ی آنها میتوان به راحتی تصاویر مختلفی خلق کرد. تصاویر برداری خیلی بهتر از نقشه های بیتی هستند. تصویر برداری نه تنها از لحاظ اندازه کوچکتر است بلکه در هنگام کوچک و بزرگ شدن به هیچ وجه کیفیت خود را از دست نمیدهد. ولی زمانی که یک نقشه بیتی را بزرگ میکنیم تصاویر مات به نظر میرسند. تصاویر Flash همانند یک فیلم بر روی صفحه ی وب گذاشته می شود . هرگاه که مرورگر وب شما با یک فیلم Flash روبرو میشود به طور اتوماتیک Flash player را اجرا می کند.
نکته
به یاد داشته باشید که فیلم های Flash به واسطه برداری بودنشان کم حجم تر از تصاویر نقشه بیتی خواهند بود.
متحرک سازی در سایت وب
در گذشته در سایتهای وب به علت اینکه انیمیشن نداشتند ، بسیار خسته کننده به نظر می رسیدند. ولی نرم افزار Flash به آسانی انیمیشن را توسط فرآیندی به نام Tweening ایجاد میکند. در این مرحله شما به Flash نقطه آغاز و پایان میدهید و تصاویر بین این دو نقطه به طور اتوماتیک به صورت فریم ( Frame ) ایجاد خواهند شد. مثلاً اگر یک تصویر کامپیوتری برای کامل شدن احتیاج به 10 فریم داشته باشد تنها لازم است به آن دو فریم شروع و پایان را بدهیم ( فریم 1 و فریم 10) ، خود نرم افزار Flash فریم های ما بین آن را میسازد.
علاوه بر آن میتوانید یک Motion Tween برای آن شیء بسازید.
ساخت فیلم های محاوره ای :
در Flash علاوه بر انیمیشن های ساده میتوانید وب سایتهای محاوره ای نیز بسازید. به عنوان مثال میتوان فیلم فلشی را ایجاد کنید که در آن فیلمهای کوتاه و Track های موسیقی متعدد قابل انتخاب وجود داشته باشد زیرا Flash کاملاً شیء گرا میباشد.
نکته :
در یک فیلم Flash منظور از محاوره ای بودن این است که کاربر قادر به انتخاب کلیپ های ویدئویی یا Track موسیقی دلخواه باشد.
تغییر شکل اشیاء و متون متحرک :
یکی از تکنولوژی های انیمیشن در Flash این است که به شما اجازه ی تغییر یک شکل به شکل دیگر را میدهد ،به این فرآیند Shape tween میگویند. بدون شک متون متحرک را در سایت های مختلف مشاهده کرده اید. این متون درون یک جعبه از نقطه ای به نقطه دیگر حرکت میکنند. از این Effect در سرفصل روزنامه ها و تبلیغات فروشگاهها استفاده میشود. ایجاد یک متن متحرک در Flash کار بسیار ساده ای است . بدین منظور جهت رسیدن به نتیجه ی مطلوب باید تکنیک های فیلم سازی Flash را با هم ترکیب کنیم ، به این صورت که ابتدا یک Motion Tween ایجاد کرده ، بوسیله آن متنی را داخل جعبه از این سمت به آن سمت برده و سپس یک Mask اضافه می کنیم. توسط این ماسک میتوانیم متن داخل جعبه را کنترل کنیم. این بدان معنی است که شما قادر خواهید بود هر قسمت از متن دلخواه خود را قابل مشاهده کنید.
درک و یادگیری اصول پایه ای Flash
Flash دارای یک سری عناصر اولیه است که در طول کارتان شما را همراهی میکند. شکل زیر نمای اولیه ای از عناصر اولیه Flash میباشد.
صفحه کاری ( Work Place ) در Flash :
صفحه کاری منطقه ای است که در آن قلم های Flash را ایجاد میکنید. این صفحه ی کاری در واقع آن منطقه سفید رنگی است که در قسمت میانی پنجره Flash واقع شده است.
نکته :
به طور پیش فرض اندازه این صفحه 550*400 پیکسل میباشد. اطراف صفحه کاری بوسیله یک حاشیه خاکستری که محیط کاری است پوشانده شده است. اشیاء روی محیط کاری ظاهر میشوند، مگر اینکه آنها را بر روی صفحه کاری منتقل کنید.
Timeline :
Timeline ( خط زمان ) یکی از ابزار های Flash است که فریم های درون آن را کنترل میکند. شکل زیر قسمتهای مختلف Timeline را به تصویر میکشد.
Play head :
برای دیدن گزینه های Flash مورد نظر Play head را بوسیله اشاره گر ماوس بر روی این Flash بکشید. بدین منظور شما میتوانید یک Frame دلخواه را بر روی Timeline کلیک کنید که آن به صورت اتوماتیک Play head میشود.
Frame Number :
همان نما های شما برای کار کردن در Timeline میباشند. Frame line شما را قادر میسازد تا مکان صحیح اشیاء در فریم را مشخص کنید.
Timeline Menu :
از طریق این متد میتوان به تعداد گزینه هایی که برای تنظیم چگونگی مشاهده Timeline استفاده میشوند دسترسی پیدا کرد.
Center Frame :
قسمت مرکزی قابل دید در Timeline میباشد.
Onion Skin View :
توسط این گزینه میتوان فریم های مختلف یک انمیشن ترتیبی را مشاهده کرد. در واقع میتوان تشکیل فریم های میانی را ملاحظه نمود.
Onion Skin Outline view :
این گزینه نیز مانند Onion Skin View میتواند تعداد فریم های اول تا آخر را نشان دهد .اما این گزینه بیشتر برای منحنی ها استفاده میشود.
Edit Multiple Frames :
این گزینه شما را قادر میسازد تا هر بخش از یک انیمیشن را که بر فریم های مختلفی تقسیم شده اند ، ویرایش کنید.
Modify Onion Markers :
منویی را نمایش میدهد که توسط آن شما میتوان تعداد فریم های دلخواه را در Onion Skin View نمایش داد.
Current Frame :
در این قسمت ساده فریم جاری نمایش پیدا میکند.
Frame Rate :
این گزینه تعداد فریم های نمایش داده شده را نشان میدهد.
Playback Time :
این گزینه مدت زمان سپری شدن فیلم را نشان میدهد.
Scroll Bars :
بوسیله این گزینه میتوان فریم های لایه های قبلی را مشاهده نمود.
لایه ها
لایه ها به مانند صفحات شفافی بر روی صفحه کاری قرار گرفته اند . اشیاء بر روی این لایه ها به صورت مستقل عمل میکنند. به این صورت شما میتوانید هر کدام از اشیاء روی لایه های مختلف را دستکاری کنید و یا اینکه یک لایه را به جلو یا پشت لایه مورد نظر انتقال دهید ،بدون اینکه اشیاء دیگر خراب شوند . با توجه به شکل زیر به اجزای لایه نگاهی دقیقتر بیندازید :
Layer Names :
در اینجا نام لایه ها را مشاهده میکنید. برای تغییر نام یک لایه است روی آن دو بار کلیک کرده و نام آن را عوض کنید.
Add a layer :
برای ایجاد یک لایه جدید از این گزینه استفاده میشود.
Add a Motion Guide Layer :
این گزینه شما را قادر میسازد تا یک لایه ی راهنما ایجاد کنید.بنابر این میتوان اشیاء را در یک مسیر حرکت داد که این مسیر الزاماً مستقیم نمیباشد.
Add a Layer Folder :
توانایی شما را در افزودن پوشه هایی به سازماندهی لایه ها افزایش میدهد.
Delete a Layer :
به وسیله این آیکون میتوان لایه مربوطه را حذف کرد.
Show or Hide Layer :
با کلیک کردن روی جعبه ها ، لایه ها قابل مشاهده میشوند. اگر فقط میخواهید لایه خاصی را امتحان کنید بر روی همان لایه کلیک کنید.
Lock or Unlock Layer :
با کلیک کردن در این ستون تمام لایه ها قفل شده و برای لایه ها و Frame ها امکان هیچ ویرایشی وجود ندارد. ( میتوان تک تک لایه ها را نیز قفل کرد )
Show Layer as Outline :
با کلیک بر روی این ستون ، اشیاء بصورت یکپارچه در می آیند. اهمیت این حالت را زمانی درک خواهید کرد که مشاهده کنید اشیاء مختلف از لایه های متفاوت چگونه با هم پیوند می خورند .
جعبه ابزار
جعبه ابزار Flash مجموعه ای از ابزار ترسیم و انتخاب اشکال است . با کمک شکل زیر می توان با عملکرد هر کدام از ابزارها آشنا شد .
Arrow Tool :
این ابزار برای انتخاب اشکال به کار میرود و بوسیله ی آن می توان قسمتی از شکل یا تمام آنرا جابجا کرد.
Sub Select Tool :
به وسیله این ابزار میتوان خطوطی که توسط ابزار Pen ترسیم شده اند را ویرایش و یا ترمیم نمود.
Line Tool :
بوسیله این ابزار میتوان خط های گوناگون با نوع قلم متفاوت رسم کرد. ( اگر هنگام کار با این ابزار کلید Shift را نگه داریم میتوانیم خطهای کاملاً عمودی و یا حتی 45 درجه رسم کنیم.
Lasso Tool :
برای انتخاب یک ناحیه ی نامنظم می توان از این ابزار استفاده نمود.
Text Tool :
به وسیله این ابزار میتوان به Flash متن هایی را اضافه نمود.
Oval Tool :
به وسیله این ابزار میتوانیم بیضی رسم کنیم و اگر هنگام رسم کلید Shift را پایین نگه داریم میتوانیم دایره رسم کنیم.
Rectangle Tool :
به وسیله این ابزار میتوان مستطیل رسم نمود ، اگر در هنگام رسم کلید Shift پایین نگه داشته شود میتوان مربع رسم نمود.
Pencil Tool :
با استفاده از این ابزار میتوان سه نوع خط نامنظم و شکسته رسم کرد .
Brush Tool :
با استفاده از این ابزار می توان اشکال خاصی نظیر پیکر انسان و غیره ترسیم نمود .
نکته :
با استفاده از ابزارهای دیگری نیز می توان عملیات فوق را انجام داد ، ولی این ابزار کار را ساده تر انجام می دهد .
Free Transform Tool :
به کمک این ابزار می توان تصویر را کوچک یا بزرگ نمود و یا آنرا چرخاند .
Fill transform Tool :
این ابزار برای عوض کردن طیف اشیایی که توسط Flash رسم میشوند به کار میروند.
Ink Bottle Tool :
با استفاده از این ابزار می توان خطوط موجود در اشیاء Flash را رنگی نمود .
Paint Bucket Tool :
با استفاده از این ابزار می توان اشیایی که توسط Flash رسم شده اند را رنگی نمود و یا رنگ آنها را تغییر داد .
Eyedropper Tool :
به کمک این ابزار میتوان رنگ دلخواه خود را از یک تصویر یا شیء انتخاب نمود.
Eraser Tool :
این ابزار برای پاک کردن قسمتی از یک شی ء بکار می رود ، توسط Option های این ابزار می توان حالت پاک کردن را انتخاب نمود .
Hand Tool :
به کمک این ابزار امکان جابجا کردن Work Space وجود دارد .
Zoom Tool :
با استفاده از این ابزار کادر فیلم Flash را کوچک و بزرگ می کنیم .
Stroke Color :
با انتخاب این گزینه جعبه رنگ باز میشود و رنگ خطوط اشیاء به رنگ دلخواه در می آید .
Black and White :
با انتخاب این گزینه خود Flash به طور اتوماتیک رنگ Stroke را مشکی و رنگ Fill را سفید میکند.
No Color :
با استفاده از این گزینه در واقع هیچ رنگی برای کار خود انتخاب نمیکنید.
Swap Color :
با کمک این گزینه میتوان جای Stroke را با جای Fill عوض کرد.
Tools / Options :
در این مکان کارایی و حالت مختلف بعضی از ابزار ها نمایش داده میشود که از بین آنها می توان مورد خاصی را انتخاب نمود .
Panels :
در واقع یک پانل یک جعبه محاوره ای است که نیاز به بسته شدن ندارد. زمانی که در پانل های Flash تغییراتی ایجاد میکنید، نیاز به بستن پانل ها نیست ، تغییرات فوراً اعمال میشوند.
نکته :
ممکن است بعضی از پانل ها مخفی باشند ، توسط منوی Window میتوان آنها را فعال نمود.
Properties Panel :
توسط این پنل میتوان مشخصات ابزار انتخاب شده را تعیین کرد. مثلاً در شکل زیر ، پانل خصوصیات Text Tool را میبینید.
Color- Mixer Panel :
توسط این Panel میتوان رنگهای دلخواه خود را برای استفاده در خطوط و داخل سطوح ایجاد نمود. زمانی که رنگ مورد نظر خود را انتخاب میکنید اشیاء جدید به این رنگ در خواهند آمد.
Color Swatches Panel :
این Panel محدوده ی رنگ بیشتری را به ما نشان می دهد .
Components Panel :
توسط این Panel میتوان عناصر واسطه ای را به فیلم اضافه نمود ،این عناصر توسط یکسری کد اسکریپت کنترل میشوند. این عناصر به شما کمک میکنند تا بتوانید به سادگی فیلمهای Flash تهیه کنید.
Action Panel :
توسط این Panel میتوان جهت استفاده از اشیاء ، کد اسکریپت مورد نظر را به فریم های Timelines اضافه نمود. همچنین توسط این زبان برنامه
نویسی میتوان حرکات اتوماتیک را به Flash اضافه کرد
انیمیشن در Flash
در Flash به هر گونه جابجایی در اشیاء یا تصاویر ، کوچک و بزرگ شدن و تغییر حالت اشیاء انیمیشن گفته می شود. ابتدا به چگونگی کار انیمیشن پرداخته و سپس نحوه ی ساخت آنرا توضیح خواهیم داد.
Animation ها در Flash به چه صورت کار میکنند :
تمام اشیاء و تصاویر را در فریم ها و لایه های مخصوص پیاده کرده و تغییرات را در آن اعمال می کنیم. حال به اجرای انیمیشن ها می پردازیم . همیشه در فلش اشیاء و تصاویر را بر روی Work Space و انیمیشن را بر روی فریم ها اعمال می کنیم . وقتی یک Movie را طراحی می کنیم به آن فرمت SWF Export می دهیم ، تمامی لایه ها و فریم ها به یک لایه تبدیل شده ، تمامی عناصر دست به دست هم داده و به یک لایه تبدیل می شوند . مثلا اگر در یک لایه 200 فریم وجود داشته باشد ، در قسمت movie بصورت یک عکس در آمده و پشت سر هم قرار می گیرند . در هنگام عبور Time Line از روی این فریم ها سرعت بالا بوده و تمامی این فریم ها را می توان پشت سر هم در فرمت یک انیمیشن مشاهده کرد .
شروع ساخت یک انیمشن :
در این قسمت هدف مشخصی را مد نظر قرار داده ، برای انجام آن به محیط Flash رفته و کار را شروع می کنیم .
هدف :
ایجاد یک Animation که در آن شکل یک توپ وجود دارد که میخواهیم از سمت راست وارد صفحه شده و از سمت چپ خارج شود.
شروع :
1- گزینه New را از منوی File انتخاب کرده تا محیط کار جدیدی بارگذاری شود.
2- اشیاء موجود در صفحه را در فریم های مورد نظر ترسیم کنید.
3- انیمیشن لازم را بر روی فریم ها اعمال کنید.
حال میخواهیم در 20 فریم توپی ترسیم کنیم که از سمت چپ وارد صفحه شده و از سمت راست خارج گردد. ابتدا از Layer فریم 1 را انتخاب کرده و به وسیله Oval tool در آن فریم یک توپ ترسیم می کنیم. از اینجای کار به بعد مبداً توپ مشخص شده است حال باید مقصدی که میخواهیم توپ به آن جا برسد را کپی کرده و آن را به Frame 20 منتقل می کنیم.( زیرا گفته ایم در 20 فریم )
( روش کپی : روی فریم مورد نظر راست کلیک کرده و Copy frame را انتخاب میکنیم ،سپس بر روی فریم مورد نظر راست کلیک کرده و گزینه Paste frame را انتخاب میکنیم. ) حال تمام کارها انجام شده و به مرحله ای می رسیم که میخواهیم Effect مورد نظر را بر شیء اعمال کنیم.
از آنجایی که میخواهیم شیء از سمت چپ به سمت راست تغییر مسیر دهد باید از Motion Tween استفاده کنیم . پس از تعیین مبداء و مقصد شیء بر روی Frame1 راست کلیک کرده و گزینه Create Motion Tween را انتخاب کنید. هنگامی که این عمل را انجام میدهیم کل 20فریم به رنگ بنفش در می آید .این بدان معناست که Frame ها Motion یافته اند ولی به صورت نقطه چین .این حالت بیانگر این مطلب است که به مبداء Motion داده ایم ولی به مقصد خیر. حال همین کار را برای Frame20 یعنی همان Frame مقصد انجام میدهیم. میبینیم که بر روی بیست Frame یک Flash ظاهر شده و نقطه چینها از بین می روند. حال اگر Ctrl + Enter را فشار دهید میتوانید Animation ساخته شده را مشاهده کنید.حال با یادگیری Motion Tween میتوانید اشیاء مختلف را با Effect های مختلف ساخته و نمایش دهید.
Shape Tweens
نوع دیگر Animation در Flash ، Shape Tween است. تفاوتی که بین Shape Tween و Motion Tween وجود دارد ، این است که Motion Tween برای حرکت و جابجایی اشیاء کاربرد دارد ولی Shape tween برای تغییر حالت اشیاء به کار میرود. به طور مثال یک دایره در حین حرکت به شکل یک مستطیل در می آید.
شروع ساخت یک Shape Tween :
برای این کار محیط جدیدی باز نموده ( File / New ) و بعد از آن در Layer و فریم مورد نظر شیء را ترسیم مینماییم ، سپس در فریم مقصد ، شیء بعدی را ترسیم میکنیم. در اینجا دو فریم با دو شیء متفاوت داریم مثلا اگر بخواهیم از دایره به مستطیل برسیم. ابتدا ابزار Arrow را انتخاب نموده و با یک بار کلیک کردن بر روی فریم مبداء آن را انتخاب میکنیم، هنگامی که فریم مورد نظر انتخاب شد در Properties منویی به نام Tween ظاهر میشود که با استفاده از آن میتوان به شیء Motion یا Shape دهیم. حال پس از انتخاب Frames در قسمت Properties گزینه Tween و ابزار Shape را انتخاب میکنیم. در اینحالت فریم مورد نظر تغییر رنگ یافته و به رنگ سبز در می آید که این خود نشانه Shape Tween است. ولی تا اینجا کار ما کامل نشده چون به Frame مقصد Shape را نداده ایم. حال برای Shape دادن به آخرین Frame نیز تمامی این مراحل را اجرا می کنیم. حال برای نمایش ،Ctrl + Enter را زده ، شکل در حین حرکت از دایره به مستطیل تبدبل میگردد.