« انجمن فلش - انجمن تخصصی فلش ایران

[مدیریت سایت]

دوستان سلام
با توجه به جدید بودن برنامه فلش کاتالیست و نبود اطلاعات کاربردی فارسی در این زمینه بر آن شدیم تا آموزش های ابتدایی کار با این نرم افزار کاربردی را برای شما آماده کنیم

این آموزش ها بر اساس ساختار زیر رفته رفته به این بخش اضافه می شوند

1. معرفی نرم افزار
2. طراحی رابط کاربری در فتوشاپ
3. وارد کردن طرح رابط کاربری به برنامه
4. کار با صفحات و ناحیه ها
5. ایجاد پنجره باز شو در پروژه
6. استفاده از افکت ها در پروژه
7. گرفتن خروجی و انتشار برنامه ها

موفق باشید

[مدیریت سایت]

دوستان سلام
به امید خدا از امروز آموزش فلش کاتالیست رو آغاز می کنیم

بخش اول آموزش : معرفی نرم افزار

         
                           

       

نویسنده آموزش : Tenya Heins

مترجم : Mohsen Semsarpour


شروع کار با فلش کاتالیست بتا 2

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

هدف این آموزشی که برای شما دوستان ترجمه (و کمی تالیف) کردم این است که شما رو با روش کار نرم افزار فلش کاتالیست آشنا کند ، در واقع در این آموزش افرادی که در طراحی با فتوشاپ آشنا هستند می توانند به راحتی یک نمونه ساده را در نرم افزار فتوشاپ ایجاد کرده و آن را وارد فلش کاتالیست کنند
در این آموزش هم یک نمونه به همین صورت کار شده ، طرح اینترفیس و صفحات داخلی نرم افزار در فتوشاپ به صورت لایه لایه ایجاد شده و داخل فلش کاتالیست وارد شده اند و شما می توانید بدون برنامه نویسی تمامی کارهای ساخت یک سی دی مالتی مدیا ساده را انجام دهید

کل آموزش بر اساس مثال آماده شده از قبل طراحی شده ، این فایل رو می تونید از اینجا دانلود کنید (برای دانلود این فایل از سایت ادوبی کلی زحمت کشیدم تا بتونم آی پی رو عوض کنم به امید روزی که با آی پی ایران بتونیم دانلود کنیم البته بنده فایل رو روی یک سرور دیگر آپلود کردم که می توانید با آی پی ایران آن را دانلود نمایید)

دانلود فایل نمونه

توضیحاتی در مورد فایل نمونه :

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

محتویات فایل ضمیمه :
1. فایل PSD شامل اینترفیس و کلیه صفحات سایت به صورت لایه لایه
2. فایل fxp پروژه فلش کاتالیست
3. خروجی سایت به صورت وب ، لوکال و  Air

به امید خدا و بدون حرف پیش روزی یک بخش به این آموزش اضافه خواهد شد

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

منابع دیگر

• انگلیسی
• صفحه رسمی فلش کاتالیست
• دانلود فلش کاتالیست بتا ۲
• انجمن فلش کاتالیست
• مجموعه مقالات و فیلم های آموزشی فلش کاتالیست

• فارسی
  
• دیباچه ای بر ادوبی فلش پلتفرم
• فلش کاتالیست چیست
  

شماره سریال نصب برنامه فلش کاتالیست بتا 2:

کد: [انتخاب]

۱۳۹۵-۴۰۰۸-۰۳۹۲-۶۱۶۸-۶۰۴۴-۸۹۳۴
موفق باشید

[scup]

ولی هیچی به fcms که من ساختم نمیرسه.... مگه نه محسن

[ناظم انجمن ها]

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

[Insomnia]

سلام
سايتي كه گذاشتيد محتويات آن بارگذاري نميشه!

[مدیریت سایت]

سلام
سايتي كه گذاشتيد محتويات آن بارگذاري نميشه!

احتمالا مشکل فلش پلیرتون باشه چون من تو منزل می تونم ببینم ولی توی محل کار باز نمی شه و پیغام دانلود فلش پلیر رو می ده

موفق باشید

[مدیریت سایت]

طراحی رابط کاربری با نرم افزارهای گرافیکی (فتوشاپ) :

      دوستان عزیز مجددا سلام عرض می کنم ، طبق قولی که داده بودم بخش دوم آموزش رو امروز آماده کردم و برای شما قرار می دم
همانطور که قبلا هم گفته شد شما می توانید رابط کاربری مد نظر خودتان را به صورت لایه لایه در نرم افزارهای گرافیکی مانند فتوشاپ ایجاد کرده و آن را به نرم افزار فلش کاتالیست وارد کنید
خوب برای شروع کار بهتر است از فایل ecotours_ui.PSD شروع کنید که در پوشه مثال قرار داده شده است . همانطور که در عکس زیر مشاهده می کنید این فایل دارای 7 پوشه داخلی می باشد که به ترتیب از بالا به پایین چیده شده اند . این دسته بندی ها می تواند کمک شایانی به شما در مرحله بعدی طراحی وب سایت یا سی دی مالتی مدیا شما داشته باشد.
به عنوان مثال در اینجا هدر کار در بالاترین لایه قرار گرفته است و به ترتیب بخش های دیگر نیز از هم تفکیک شده اند ، در کل بهتر است منوها ، قسمت های تعاملی ، اسکرول ها و موارد دیگر از این قبیل را در دسته بندی های جدا و صفحات و هدر و فوتر را نیز در دسته بندی های مجزا از هم قرار دهید
در انتها توصیه می کنم با دقت فایل ecotours_ui.PSD را بررسی کرده تا نکات ریزی که به آن اشاره شد را بهتر ببینید

عکس شماره 1 : ecotours_ui.PSD file

توجه داشته باشید که لایه بکگراند برای تمامی قسمت های سایت به صورت یکسان تکرار می شود پس می توان این لایه را جدا نمود در پایین مواردی جزئی دیگری که در این مثال به آن ها باید دقت نمود ذکر شده اند
     

• لایه navigation که شامل گرافیک و متن کلیدهاست و پس از وارد کردن فایل psd به داخل فلش کاتالیست نقشه کلیدهای سایت را ایفا می کند
• لایه page که برای هر صفحه از سایت محتویات خاص خود را داراست
• لایه header هم در بالای تمامی صفحات قرار می گیرد و تکرار می شود

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



در عکس شماره 2 می توانید لایه های مختلف فایل مثال و پوشه بندی های آن را مشاهده نمایید ، البته بنده توصیه می کنم حتما فایل را دانلود کرده و آن را در فتوشاپ مورد تجزیه و تحلیل دقیق قرار دهید.

عکس شماره 2 : مشاهده عکس مثال در نرم افزار فتوشاپ

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


موفق باشید

[phipo]

آقا محسن
دستت درد نكنه ، آموزش جالبي است اما لطف كن فايل رو جاي ديگري آپلود كن كه هم سرعت بيشتري داشته باشه هم نياز به ثبت نام نباشه ، كاش اين سايت واسه خودش يه آپلود سنتر داشت كه همش از اينور به اونور نميشديم.

باز هم ممنون از زحمتي كه ميكشي
موفق باشي

[مدیریت سایت]

دوستان سلام


در مورد فایل ها که نمونه رو روی پرشین گیگ دانلود کردم که می تونید بگیرید بدون مشکل


ولی در مورد خود نرم افزار فلش کاتالیست بتا 2 باید بگم حجمش خیلی بالاست و نمی تونم به راحتی جای دیگه قرارش بدم


و اما در مورد آپلود سنتر می خواستم وقتی تکمیل شد خبر بدم ، ولی امروز می گم دیگه ، داریم روی یک آپلود سنتر کار می کنیم که فایل رو بشه روش بدون دردسر آپلود کرد با نمایش درصد آپلود و در صورت امکان آپلود از آدرس سایت های دیگر که امیدوارم آپلود سنتر کاملی بشه و به زودی معرفی خواهیم کرد


موفق باشید

[مدیریت سایت]

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

جلسه سوم - وارد کردن فایل طراحی شده در نرم افزارهای گرافیکی به فلش کاتالیست


بعد از طراحی رابط کاربری در برنامه فتوشاپ شما می توانید آن را وارد فلش کاتالیست کنید :



1. برنامه فلش کاتالیست را باز کرده و در پنجره خوش آمدگویی در بخش               Create New Project from Design File گزینه From Adobe Photoshop PSD File را انتخاب کنید

2. در پنجره بعدی بایستی فایل PSD که در جلسه قبلی در مورد آن صحبت کردیم را انتخاب کنید در ضمن در پنجره پایین می توانید جزئیات وارد کردن فایل را نیز تنظیم کنید به عنوان مثال مشخص کنید کدام لایه ها وارد شوند و کدامیک وارد نشوند

3. به گزینه Advanced در گوشه سمت چپ توجه کنید ، با استفاده از این گزینه می توانید کلیه لایه ها را انتخاب و یا بر روی تک تک آن ها اعمال نظر کنید که آیا می خواهید لایه وارد شود ، ثابت باشد و نتوان روی آن ویرایش انجام داد و یا قابل ویرایش باشد

4. در مرحله آخر بر روی OK کلیک کنید تا مراحل وارد کردن فایل تکمیل گردد

      بعد از اینکه مرحله وارد کردن فایل پایان بپذیرد ، شما می توانید تمامی لایه ها را مانند زمانی که در نرم افزار فتوشاپ مشاهده می کردید ببینید (به شکل پایین توجه کنید) . کلیه لایه ها در بخش سمت راست و در پنل لایه ها قابل مشاهده هستند ، با کلیک بر روی هر یک از لایه ها می توانید کلیه آبجکت های آن را در حال انتخاب شده مشاهده کنید

توجه : اگر پنل Timeline باز هست ، با double-click بر روی tab مخصوص آن ، آنرا minimize کنید . در مورد تایم لاین در درس های بعدی بیشتر صحبت خواهیم نمود.

بخش های مهم که بایستی در مورد صفحه کاری فلش کاتالیست بدانید :
      

• Pages/States: در این بخش صفحات و ناحیه ها قرار می گیرند ، در حال حاضر تنها یک صفحه وجود دارد (به شکل بالا توجه کنید) در درس های بعدی صفحات دیگری به کار افزوده خواهد شد
• HUD: با استفاده از این قسمت شما به دستورات آماده بسیاری دسترسی دارید ، به عنوان مثال برای حرکت بین صفحات ، افزودن قابلیت کلیک به کلیدها و ... از این بخش استفاده خواهیم نمود ، توجه داشته باشید که با انتخاب هر یک از آبجکت ها این پنجره ، مشخصات همان آبجکت را نمایش می دهد. نام کامل این بخش heads-up display می باشد
• Tools panel: این بخش هم برای ساخت ابزارهای خاص ، کشیدن شکل های ساده ، انتخاب بخش های مختلف و کارهای عمومی که تمامی Tools panel ها دارا می باشند مورد استفاده قرار می گیرد

موفق و پیروز باشید

[مدیریت سایت]

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

توضیحات کلی در مورد صفحات و ناحیه ها و خروجی های فلش کاتالیست

در اکثر وب سایت ها و نرم افزارهای مالتی مدیا صفحات مختلفی برای نمایش بخش های مختلف آن ساخته می شود . در فلش کاتالیست نیز شما بایستی صفحات مورد نظر خود را ایجاد نمایید
     

• معمولا از صفحات برای نمایش بخش های مختلف سایت استفاده می  شود
• از state نیز برای معرفی بخش های خاص سایت مانند حالات مختلف یک کلید و یا حالات مختلف یک منو و غیره استفاده می کنیم

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

به طور کلی شما می توانید ناحیه های مورد نظر خود در فلش کاتالیست را در خود این نرم افزار آماده کنید ، همچنین می توانید از نمونه های طراحی شده قبلی مانند کلیدها و کامپوننت های دیگر استفاده کنید و آن ها را وارد فلش کاتالیست کنید ، در نهایت با کلیک بر روی هر یک از کلیدها می توانید به ناحیه مورد نظر خود وارد شوید. همچنین شما می توانید نمونه های مورد نظر خود مانند کلیدها را درون فلش کاتالیست ایجاد و ویرایش نمایید
بعد از ایجاد کلیدها و ناحیه ها و تنظیم آن ها می توانید بخش های تعاملی و حرکت های ما بین صفحات یا ترنزیشن ها را ایجاد کنید. بخش تعاملی مشخص می کند که با کلیک کاربران روی کلیدها و دیگر کامپوننت ها چه اعمالی باید انجام بپذیرد ، به عنوان مثال با کلیک بر روی یک کلید شما باید از ناحیه ای به ناحیه ی دیگر حرکت کنید ، که این کار با تعیین موارد تعاملی امکان پذیر است ، در ضمن برای حرکت بین ناحیه ها می توانید از افکت های تصویر استفاده کنید که به آن ها ترنزیشن (transition) گفته می شود . به عنوان مثال تغییر اندازه ، چرخش ، محو شدن و حرکت برخی از ترنزیشن ها به حساب می آیند.

در انتها نیز شما می توانید از پروژه خود به صورت های مختلف خروجی گرفته و آن را روی سیستم های مختلف و روی سرور تست کنید ، به عنوان مثال با استفاده از خروجی Air می توانید آن را روی سیستم های شخصی تست کنید و یا با استفاده از خروجی swf آن را روی وب تست نمایید
همچنین به راحتی می توانید با استفاده از نرم افزار فلش بیلدر شروع به ساخت محتوی داینامیک کنید و یا با بانک
های اطلاعاتی در ارتباط باشید


قسمت بعدی جلسه چهارم
      ساخت صفحات و ناحیه های مختلف

[مدیریت سایت]

      دوستان سلام امیدوارم تا اینجای کار خسته نشده باشید
خوب بریم سراغ ادامه آموزش و ادامه مبحث صفحات و ناحیه ها

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

همچنین کامپوننت های مختلف مانند کلیدها نیز ممکن است ناحیه های مختلفی داشته باشند به عنوان مثال یک کلید حالت های Up, Over, Down, and        Disabled خواهد داشت که به هر یک از آن ها ناحیه گفته می شود

• در پنل Pages/States بر روی گزینه Duplicate State دوبار کلیک کنید تا دو ناحیه دیگر به پروژه شما افزوده گردد
• روی بخش title هر یک از ناحیه های کلیک کنید و اون ها رو به ترتیب location, tour, و gallery مانند شکل زیر نام گذاری کنید . توجه داشته باشید که عنوان ناحیه ها نمی تواند خالی باشد

     


در مرحله بعدی قصد داریم شما را با نحو نمایش یا عدم نمایش قسمت های مختلف در ناحیه ها یا صفحات مختلف آشنا نماییم


مدیریت نمایش لایه ها
در پنل Layers شما می توانید لایه های مختلف و کامپوننت های مختلف را مدیریت کنید . با استفاده از این امکان طراح می تواند بخش های مد نظر خود را برای نمایش در پروژه مشخص نماید . همچنین می توانید لایه های مختلف را داخل شاخه ها و زیر شاخه ها قرار دهید تا با دسته بندی بهتری دیده شوند . به عنوان مثال می توانیم تمامی تصاویر زمینه را در پوشه ای به نام Background قرار دهیم . به هر حال این پنل به شما کمک می کند لایه های مختلف را در ناحیه های
متفاوت پنهان یا آشکار نمایید .


توضیحات مترجم :
به عنوان مثال ممکن است شما در صفحه نخست فقط به لایه ای نیاز داشته باشید که توضیحات کوتاهی در مورد سایت یا نرم افزار داخل آن قرار دارد و در صفحه ای دیگر بخش گالری را داشته باشید و در بخشی دیگر فرم ارتباط با ما ، با استفاده از پنل لایه ها می توانید در هر بخش یا صفحه لایه های مورد نظر خود را برای نمایش انتخاب نمایید .

• توجه داشته باشید هر یک از ناحیه ها یا صفحات را که انتخاب می کنید می توانید لایه ها را در همان صفحه انتخاب شده با استفاده از علامت "چشم" که در کنار هر لایه قرار دارد آشکار یا پنهان نمایید . به شکل زیر دقت کنید متوجه خواهید شد که شاخه های tour page و gallery page آشکار هستند                                                                                                                                                                                                         
  
  
           
• بر روی ناحیه یا صفحه gallery و tourیکی یکی کلیک کرده و شاخه های مربوط به هر یک را در صفحه مربوطه  آشکار نمایید

           

موفق باشید

مبحث بعدی جلسه چهارم : حرکت بین صفحات و ناحیه ها

[Tags:]

Tags: آموزش فلش کاتالیست flash catalyst فارسی رایگان طراحی وب مالتی مدیا