آموزش Flash 8 به زبان ساده

[Petros]

سلام به دوستان گرامی
در این بخش سعی میشه Flash 8 به زبان ساده (قابل فهم) آموزش داده بشه در ضمن مطالبی که در این بخش می‌آید برگرفته شده از Ninijapoli، اینترنت و تجارب دوستان هست. فقط یک چیز رو بگم اون هم اینکه سر من واقعا شلوغه و نمیتونم زیاد پست بدم. استارت کار رو زدم فقط ادامه و همکاری با شما. خواهشمندم همکاری کنید.


http://www.myimagehub.com/files/3181/f1.jpg

[Petros]

مقدمه:

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


برای ایجاد تصاویر متحرک نرم‌افزارهای مختلفی ساخته شده است که هر کدام قابلیت‌های زیادی در ساخت فیلم‌ها دارند. برخی از این نرم‌افزارها عبارتند از : 3D Studio Max, Swish, ImageReady, Maya, FireWorks, Macromedia Flash و ... . برخی از این نرم‌افزارهای اصلا مناسب وب نیستند (مثل Maya و 3Ds Max) اما برخی دیگر مانند Flash یا ImageReady به نوعی مختص کارهای وب ساخته شده‌اند و ما در این بخش سعی بر این داریم که نرم‌افزار محبوب و قوی Flash را که چند وقتی است Macromedia آن را به Adobe واگذار کرده است، را آموزش دهیم.

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

[Petros]

آشنایی با محیط نرم‌افزار


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




http://www.myimagehub.com/files/3181/My%20Documents/f2.jpg



در بخش Create From Template نیز می‌توانید از یک سری از فایلهای آماده که توسط ماکرومدیا ایجاد شده‌اند، استفاده یا سوء استفاده کنید.

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




http://www.myimagehub.com/files/3181/My%20Documents/f33.jpg



خط زمان
خط زمان (Timeline) یکی از ابزارهای مهم در فلش است که به کمک آن می‌توان مراحل ساخت فیلم در فلش را کنترل کرد. یک فیلم فلش مجموعه‌ای از فریم‌هاست (به اون قاب یا Frame هم گفته می‌شه) که به طور متوالی و پشت سر هم اجرا می‌شوند. هر فریم نشان‌دهنده‌ی چشم‌اندازی از فیلم است که در یک لحظه‌ی زمانی نمایش داده می‌شود.



http://www.myimagehub.com/files/3181/My%20Documents/f4.jpg




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


شماره‌ی قاب: شما را راهنمایی می‌کند که تا به راحتی بتوانید شی‌ء خود را در قاب مورد نظر قرار دهید.


قاب جاری: قابی است که هد نمایش در آن قرار دارد.


درجه‌ی نرخ نمایش قاب: تعداد قاب‌های نمایش داده شده در یک ثانیه را بر حسب FPS یا Frame Per Second نمایش می‌دهد در ضمن به طور پیش‌فرض در فیلم‌های فلش هر 12 فریم در یک ثانیه نمایش داده می‌شود. با دابل کلیک کردن بر روی این بخش می‌توانید مقدار را به عدد دلخواه تغییر دهید. بالا بردن این عدد سبب سریع‌تر پخش‌شدن انیمیشن می‌شود.


نوار لغزان: به کمک این ابزار می‌توانید قاب‌ها و یا لایه‌های قبلی و بعدی را مشاهده کنید.


زمان گذشت اجرا: زمان سپری شده (تا مکان هد نمایش) در این بخش مشخص می‌شود. این بخش رابطه‌ای مستقیم با "درجه‌ی نرخ نمایش قاب" دارد. به عنوان مثال اگر "درجه‌ی نرخ نمایش قاب" شما 12 باشد با قرار گرفتن هد نمایش در فریم 13 کادر "زمان گذشت اجرا" عدد 1.0s را نمایش می‌دهد.


معادل کلمات بالا به ترتیب:



Playhead - Frame Number - Current Frame - Frame Rate - Playback time

توضیحات اضافه:
در هنگام توليد يک فيلم در محيط فلش، مشاهده نحوه جابجايي آبجکت‌ها بين فريم‌ها مشکل است. در حالت کلي در هر بار، فقط يک فريم را می‌توانید مشاهده کنید در نتیجه تحليل مسير حرکتي آن براي شما مشکل می‌شود؛ استفاده از Onion Skin (که در کنار قاب جاری در خط زمان قرار دارد) اين اشکال را بر طرف مي کند. اين اصطلاح از انيميشن‌سازي سنتي گرفته شده است و همانطورکه در روش سنتي آبجکت‌ها بر روي کاغذ نازک پوستي (پوست پيازي) رسم مي شد و امکان ديدن فريم‌هاي مختلف وجود داشت فلش نيز به شما اجازه مي‌دهد، تا فيلم خود را به همان شکل مشاهده کنيد.



http://www.myimagehub.com/files/3181/albums/Flash/f5.jpg


http://www.myimagehub.com/files/3181/albums/Flash/f6.gif
نمونه‌ای از Onion Skin
در استفاده از Onion Skin دو حالت وجود دارد:
1. مد استاندارد ديد پوست پيازي (Onion Skin View) که در آن تصاوير به‌صورت پيوسته درحالي که از فريم جاري دور مي‌شوند، مشاهده مي‌گردند.

2. Onion Skin Outlines که موضوعات را تنها به‌صورت خطوط محيطي مي‌بينيد، از اين نوع ديد براي ديدن موضوعهايي که در موقع کار با لايه‌هاي چند گانه حرکت نمي‌کنند و نياز به انطباق و تنظيم دارند، استفاده مي‌شود.

گزینه‌ی Edit Multiple Frames شما را قادر مي‌سازد تا هر قسمت از يک انيميشن را که بر فريم‌هاي مختلف تقسيم شده است، ويرايش کنيد. گزینه‌ی Modify Onion Markers نیز منويي را نمايش مي‌دهد که توسط آن شما مي‌توانيد تعداد فريم‌هاي دلخواه را در Onion Skin View نمايش دهيد.

------------------------------


قاب‌ها در ابزار خط زمان (Timeline) داخل ستون‌هایی که با فواصل 5 واحدی از چپ به راست شماره‌گذاری شده‌اند، قرار می‌گیرند. به طور کلی در فلش دو نوع قاب وجود دارد:


قاب معمولی (Ordinary Frame)

قاب کلیدی (Key Frame)
اما تفاوت‌ها و شباهت‌های این دو نوع قاب چیست؟
√ در زمان اجرای فیلم کلیه‌ی قاب‌ها اعم از کلیدی و معمولی به مدت یکسان اجرا می‌شوند.
√ شما می‌توانید اشیای مختلف را فقط به قاب‌های کلیدی اضافه کنید.
√ فلش قادر است که به قاب معمولی اشیایی را اضافه کند. در صورتی که مستقیما اشیایی را به این قاب وارد کنید به قاب کلیدی تبدیل خواهد شد.


زمانی که نرم‌افزار فلش را باز می‌کنیم به طور خودکار یک قاب کلیدی خالی در ستون اول خط زمان قرار می‌گیرد که می‌توانیم اشکال دلخواه خود را در آن قاب رسم کنیم. در صورتی که بخواهیم قاب کلید دیگری را به خط زمان اضافه کنیم کافی است اشاره‌گر ماوس را در ستون مورد‌نظر قرار داده و فرمان Insert → Timeline → KeyFrame را اجرا کنیم (از دکمه‌ی F6 هم می‌توان استفاده کرد). این گزینه‌ی یک قاب جدید به همراه یک کپی از محتویات قاب قبلی در ستون مشخص شده از خط زمان ایجاد می‌کند. اما اگر بخواهیم که حتما قاب کلیدی جدید خالی باشد از منوی باز شده گزینه‌ی Blank KeyFrame را انتخاب می‌کنیم (از دکمه‌ی F7 هم می‌توان استفاده کرد). در صورتی که بخواهیم یک یا چند قاب معمولی را به خط زمان اضافه کنیم کافی است از منوی باز شده گزینه‌ی Frame (و یا دکمه‌ی F5) را انتخاب کنید.


http://www.myimagehub.com/files/3181/albums/Flash/f7.jpg
انواع قاب‌های فلش



قاب‌های کلیدی به صورت یک دایره در خط زمان قرار می‌گیرند. اگر دایره تو خالی باشد به معنی آن است که قاب کلیدی ما خالی است (Blank Keyframe) و اگر نقطه توپر باشد، قاب کلیدی حداقل دارای یک شی‌ء است. برای حذف یک قاب از خط زمان روی آن راست کلیک کرده و از منوی باز شده گزینه‌ی Remove Frame را انتخاب کنید. در صورتی که بخواهید فقط محتویات قاب را پاک کنید کافی است از منوی باز شده گزینه‌ی Clear Frame را انتخاب کنید.

[hamidjoon]

بابا ای ول:*
ولی اگه بتونی بصورت پی دی اف درش بیاری بهتره :">
البته با اجازه;;)

[Petros]

ولی اگه بتونی بصورت پی دی اف درش بیاری بهتره :">

چشم. فقط اجازه بدید یکم آموزش ها زیاد بشه بعد یکجا به صورت PDF درش میارم.

[mahdy]

دستت درد نکنه:*

[Petros]

جعبه‌ابزار
جعبه‌ابزار که در قسمت چپ نرم‌افزار فلش قرار دارد، دارای ابزارهایی برای ایجاد، ویرایش و تغییر موقعیت متن، ترسیمات و ... است. اکثر کسانی که با فتوشاپ یا کرل کار کرده‌اند می‌توانند به راحتی با این قسمت نرم‌افزار فلش ارتباط بر قرار کنند؛ حتی شما می‌توانید با کمی کار کردن با این ابزارها، نحوه‌ی عملکرد آنها را مشاهده کنید اما توضیح آنها خالی از لطف نیست.



http://www.myimagehub.com/files/3181/albums/Flash/f8.jpg


1. برای انتخاب شی‌ء طراحی شده در نرم‌افزار، از این ابزار استفاده می‌کنیم. نام این ابزار Selection Tool و کلید میانبر آن V می‌باشد.


2. Free Transform Tool با میانبر Q، یکی از اصلی‌ترین ابزارهای فلش برای تغییر شکل ابعاد یک شی‌ء به صورت دستی می‌باشد.


3. به کمک این ابزار یعنی Line Tool می‌توان یک خط مستقیم از یک نقطه به نقطه‌ی دیگر رسم کرد. کلید میانبر این ابزار N می‌باشد.


4. Pen Tool ابزاری برای ترسیم دقیق پاره خط‌های مستقیم و یا منحنی می‌باشد. برای ایجاد نقاط روی پاره خط‌های مستقیم باید در محل مورد نظر از خط کلیک کنیم و برای ایجاد نقاط روی پاره خط‌های منحنی باید بعد از کلیک در محل مورد‌نظر، آن را به کمک اشاره‌گر ماوس کشید. کلید میانبر = P


5. همانطور که از شکل ابزار می‌توان حدس زد این ابزار برای کشیدن دایره یا بیضی مورد استفاده قرار می گیرد. اگر هنگام استفاده از این ابزار Shift را نگه دارید، هیچ وقت نمی‌توانید بیضی بکشید و فقط مجاز به کشیدن دایره می‌شوید. کلید میانبر این ابزار O است.


6. از این ابزار نیز برای کشیدن خط استفاده می‌کنیم.


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

[mjmghd]

ويرايش متني فايل flash (با پسوند swf) چطور و تو جه محيطي بايد انجام بشه؟
اميدوارم سؤال كردن تو اين تاپيك نامربوط شناخته نشه! و با اينكه تاپيك چند وقتيه ارسال جديد نداره اميدوارم يه با معرفت جواب اين پيرمرد رو بده :)
سؤالم اينه كه اگه شما يه فايل swf رو از اينترنت دانلود كرده باشيد كه لينكهاي متعددي (منظورم لينك به تعدادي عكسه) رو صفحه وب خودش داشته باشه و شما علاوه بر فايل swf فايلهاي عكس ها رو هم رو هاردتون ريخته باشيد آيا مي تونيد با ويرايش متني آدرس عكسها اونها رو از آدرس موجود روي هارد خودتون بخونيد؟ :-o فهميديد كه؟ هدفم اينه كه براي اينكه اون صفحه رو ببينيم ديگه نياز به وصل شدن به اينترنت نداشته باشم. :-$
ضمناً اگر نرم افزار دانلودي هم هست كه ميتونه اين كار رو "يـي هـو" (همزمان با دانلود يـي هـو ي صفحه وب) براتون انجام بده خوشحال ميشم معرفي كنين :) (هرچند دل خوشي از اينجور نرم افزارها ندارم) :-l

[Petros]

براي همه:

Sothink SWF Decompiler ابزار قدرتمنديه كه ميتونيد به كمك اون فايل‌هاي فلش خودتون رو (Swf) رو به سورس (Fla) تبديل كنيد؛

و يا Shape ,Morph Shape ,Image ,Sound ,Flash Video (*.flv) ,Font ,Text ,Movie Clip ,Button ,Frame موجود در فايل فلش رو اسنخراج کنيد. همچنين اين نرم افزار توانايي استخراج اكشن اسكريپت‌هاي موجود در فايل فلش رو داره و ميتونه اونها رو بصورت كد‌هاي قابل خواندن در بياره! اين نرم افزار بطور كامل از Action Script 2.0 پشتيباني ميكنه!

من که خيلي وقته با اين نرم‌افزار کار نکردم و الان هم دم دستم نيست؛ اما شايد بشه با اين نرم‌افزار کارهايي کرد. يه امتحان بکنيد و جواب رو به دوستان هم اعلام کنيد.

اينجا هم يه آموزش فزرتي هست (http://siavashonline.persiangig.com/other/Sothink%20SWF%20Decompiler.htm). يه نگاه بهش بنداز

[OMiD]

خیلی عالی بود ! آموزش کد های اکشن اسکریپت هم می تونی برای دوستان بزاری ؟
خیلی ها باهاش مشکل دارن . اگه یه آموزش جامع بزاری دیگه سوال های مختصر نمیکنن ! البته من یه Cd آموزشی اکشن اسکریپت رو دارم که شاید تا چند وقت دیگه آپلودش کنم و تو سایت بزارم!

[Source]

جالب بود ولی می تونین اموزش های دیگه هم بزارین؟

[Petros]

آموزش کد های اکشن اسکریپت هم می تونی برای دوستان بزاری؟

اگه وقت شد چشم. آموزش کدهای اکشن اسکریپت رو هم مي‌زارم.


جالب بود ولی می تونین اموزش های دیگه هم بزارین؟
صد در صد. فقط يکم سرم شلوغه

[mjmghd]

سلام پترس :d
از لطفتون خيلي خيلي ممنونم.
البته مشكلي كه تو اون مورد خاص برام پيش اومده بود حل شد. راستش من اصلاً نمي دونستم فايل swf يه جور فايل exe هست كه اول بايد به fla تبديل بشه و بعد قابل اديت خواهد بود. اميدوارم با كمك شما ما هم يه سري از flash در بياريم! البته من فايل swfdec موجود تو لينك بالا رو نتونستم دانلود كنم. نمي دونم چرا!!!
اما گير كار من اين بود كه فايلهاي jpg كه همراه فايل swf توي يه پوشه ريخته بودم وقتي از Temp. Inter. files منتقل شده بود به اسمشون يه [1] اضافه شده بود و فقط به همين خاطر فايل swf پيداشون نمي كرد. فايلهاي jpg رو rename كردم همه چي حل شد. راستي چيزي كه دارم ازش حرف مي زنم سايتيه كه خودت تو يه تاپيك ديگه و يه انجمن ديگه معرفيش كرده بودي /:) فكر مي كنم بتوني پيداش كني !!! :)
راستش من اصلاً نمي دونم اكشن اسكريپت چي هست #:-s اما (جهت اطلاع) تو همين انجمن يه تاپيك آموزش فلش هست كه به آموزش اكشن اسكريپت مي پردازه! @-

[احسان]

پتروس عزيز به محض اينكه Pdf رو آماده كردي حتما توي پست قرار بده تا بتونيم سريعتر به اطلاعات دست پيدا كنيم.

به اميد سربلندي شما دوست عزيز/

[graphicface]

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

[mahdy]

پترس جان اگر مي‌شه زودتر آموزش را بذار...

[OMiD]

برای تشکر فقط از http://forum.takdownload.com/signaturepics/sigpic2831_3.gif استفاده کنید.
پست های حشو حذف شدند.

[siamak.khadmi]

آموزشش كامل نيست. با تشكر يه وقته ديگه خودم فايل pdf كاملشو ميارم

[mehdi_hz]

از آموزشتون تشكر ميكنم

مدیریت : از دکمه http://forum.takdownload.com/images/element/buttons_blue/post_thanks.gif استفده کنید...

[Rasoul]

عكسا همه حذف شدن .

[redstars]

خیلی عالی بود ! آموزش کد های اکشن اسکریپت هم می تونی برای دوستان بزاری ؟
خیلی ها باهاش مشکل دارن . اگه یه آموزش جامع بزاری دیگه سوال های مختصر نمیکنن ! البته من یه Cd آموزشی اکشن اسکریپت رو دارم که شاید تا چند وقت دیگه آپلودش کنم و تو سایت بزارم!
امید جان این سیدی رو اگر میشه آپلود کنی و همه استفاده کنند ممنون می شوم
هم خودم دوست دارم ببینم هم مسلماً دیگران استقبال می کنند
- - -
آموزشش رو خوب شروع کرد اما فعلاً ساکت شده !