به نام خدا . در این آموزش , یک نوع آموزش تلفیقی محسوب می شود می خواهم نحوه ایجاد یک ساعت آنلوگ را در فتوشاپ و پس از آن استفاده آن در فلش را آموزش دهم.
نکته مهمی که در این آموزش تلفیقی مد نظر است , این است که شما بتوانید نحوه استفاده از فایل های PSD در نرم افزار فلش را فرا گیرید . در ضمن در این آموزش , حداقل نسخه فلش و فتوشاپ شما باید CS3 باشد.

ایجاد ساعت آنالوگ در فتوشاپ
باز کردن فایل های PSD در فلش و استفاده از آنها
پیاده سازی ساعت

ایجاد ساعت آنالوگ در فتوشاپ

قسمت اول ::::
کار را با ایجاد یک سند با عرض و ارتفاع 600 آغاز می کنیم .

قسمت دوم ::::
با فشردن کلیدهای Shift+U ابزار Ellipse Tool را به حالت انتخاب در آورید , پس از آن در بخش Custom shape tools گزینه Circle را انتخاب کنید ( همانطوری که می دانید برای ایجاد دایره می توان کلید Shift را نگه داشت و سپس Drag کرد ) سپس دایره ای با اندازه دلخواه ایجاد کنید و رنگ آن را به #b2b2b2 تغییر دهید .

قسمت سوم ::::
برروی لایه ایجاد شده خود راست کلیک کرده و گزینه Blending Options را انتخاب کنید و مانند تصاویر زیر تنظیمات را اعمال کنید .

قسمت چهارم ::::
پس از انتخاب لایه مربوط به دایره با فشردن کلیدهای Ctrl +J از آن یک نسخه کپی ایجاد کنید .سپس در پنل لایه که با کلید F7 نمایان می شود برروی چشم کنار Effect در لایه کپی شده کلیک کنید تا تاثیرات مربوط به Blending options نادیده گرفته شود , سپس رنگ لایه را به #e4e4e4 تغییر داده و دایره را با استفاده از ابزار Free trasnsform که با کلیدهای Ctrl + T فعال می شود مقداری کوچک تر کنید ( من مقدار طول و عرض را به 95 درصد تغییر دادم تا به نتیجه پائین رسیدم )

قسمت پنجم ::::
در ادامه کار برروی لایه کپی شده راست کرده و گزینه Blending Options را انتخاب کنید , سپس در بخش Style که اولین گزینه سمت چپ است کلیک کرده و برروی اولین Style که Default style است کلیک کنید , در ادامه با توجه به تصویر پائین عمل کنید .

قسمت ششم ::::
درست مثل مراحل چهارم و پنجم دوباره عمل کنید , با این تفاوت که مقدار کوچک کردن را به 96 درصد و برای تنظیمات Blending Options تصاویر زیر را مرجع خود قرار دهید .

قسمت هفتم ::::
در این مرحله برروی اولین لایه دایره خود با نگه داشتن کلید Ctrl کلیک کنید تا به حالت انتخاب درآید , پس از آن یک لایه جدید در بالای همین لایه ایجاد کنید و رنگ روی زمینه یا foreground را به سفید تغییر دهید . با استفاده از کلید Shift + G ابزار gradiant را انتخاب کنید پیش از استفاده از این ابزار مطمئن شوید که liner و Foreground به Transparent تنظیم شده است . نکته بعدی که باید از آن مطمئن شوید غیر فعال بودن گزینه reverse است , در پایان با درگ کردن از بالا به پائین gradiant خود را ایجاد کنید . ( من از بالاترین نقطه درون فایل به پایئن ترین نقطه درگ کردم .)

قسمت هشتم ::::
با استفاده از منو layer و گزینه Group در زیر منو layer یک گروه جدید ایجادکنید و نام آن را light قرار دهید , در این مرحله ما می خواهیم ساعت را درخشان تر و جلو بهتری به آن دهیم .
یک لایه جدید ایجاد کنید و با استفاده از ابزار Pen tools شی ای مانند تصویر پائین ایجاد کنید .

قسمت نهم ::::
در پنل لایه برروی برروی mask کلیک کنید ( دقت داشته باشید که لایه مربوط به شی جدید انتخاب شده باشد و بعد mask استفاده شود )

از انتخاب بودن رنگ سیاه برای رو زمینه یا foreground مطمئن شوید , سپس با فشردن کلید Ctrl و کلیک کردن برروی بزرگترین دایره که همان لایه اول است محیط آن را به حالت انتخاب در آورید , سپس با فشردن کلیدهای Ctrl + shift +I وضعیت انتخاب را برعکس یا Inverse کنید , از این نکته که لایه مربوط به شی جدید انتخاب است نیز مطمئن شوید , پس از آن کلید Alt را به همراه کلید backsapce فشار دهید برروی همین لایه و پس از آن مقدار Opacity مربوط به این لایه را به 30 تغییر دهید .

قسمت دهم ::::
در این قسمت می خواهیم نور دیگری را به شی خود نسبت دهیم , اما به داخلی ترین دایره , همانطوری که در تصویر پائین ملاحضه می کنید پس از انتخاب من با استفاده از ابزار Polygonal Lasso مقداری که از محیط انتخابی را که نیاز نداشتم از حالت انتخاب در آورده ام.

قسمت یازدهم ::::
به منو Select زیر منو Modify رفته و گزینه Feather را انتخاب کنید , سپس مقدار Radius را به 20 پیکسل تغییر دهید

قسمت دوازدهم ::::
با استفاده از Gradiant tool و انتخاب Foreground به Transparent ( با ذکر این نکته که رنگ Foreground شما باید سفید باشد ) از پائین چپ به بالا راست درگ کنید , تا مانند تصویر پائین نتیجه حاصل شود.

قسمت سیزدهم ::::
گروه جدیدی ایجاد کنید و نام آنرا Hour قرار دهید , سپس با استفاده از ابزار rectangle tool مستطیلی مانند تصویر پائین با رنگ #9d9d9d ایجاد کنید .

قسمت چهاردهم ::::
مانند تصویر پائین از آن چند کپی ایجاد کنید و با توجه به تصویر پائین آنها را در محور های مناسب قرار دهید . ( من برای نتظیم بهتر از Guide line استفاده کردم )

قسمت پانردهم ::::
از اشکال ایجاد شده کپی ایجاد کنید و آنرا 30 درجه بچرخانید تا به تصویر پائین دست یابید .

قسمت شانردهم ::::
مرحله پانزده را یکبار دیگر تکرار کنید .

قسمت هفدهم ::::
در این مرحله نوبت به طراحی دقیقه های ساعت می رسد برای این کار مانند ساعت های ساعت عمل می کنیم با این تفاوت که اولا مقدار چرخش 6 درجه است ثانیا نام گروه را به minutes تغییر دهید . ( من برای سادگی کار و همچنین کاهش زمان ابتدا یک action جدید ایجاد کردم , سپس از دقایق ایجاد شده در نقاط 0 و 90 و 180 و 270 یک کپی ایجاد کردم و آنرا 6 درجه چرخاندم , تنها کاری که پس از انجام این کار نیاز بود انجام دهم کلیک برروی play selection بود )

قسمت هجدهم ::::
حال نوبت به ایجاد شاخص است , برای اینکار ابتدا یک گروه با نام indicators ایجاد کنید , سپس دایره با رنگ #a9a9a9 در وسط دایره اصلی ایجاد کنید .

قسمت نوزدهم ::::
در این مرحله با توجه به تصاویر پائین Blending Options را تنظیم کنید.

قسمت بیستم ::::
در ادامه نوبت به عقربه مربوط به دقیقه می رسد , روش طراحی به خود شما بستگی دارد من برای طراحی از pen tool استفاده کردم .

یک نمونه دیگر

بدین ترتیب برای عقربه ساعت و ثانیه نیز شکلی طراحی می کنیم.

دانلود فایل پایانی
این هم چند تصویر پایانی ::

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

پیش از آنکه فایل psd خود را وارد فلش کنیم می خواهم یکسری از نکات که مربوط به import کردن فایلهای psd است را ذکر کنیم . پیش از شروع این فایل بسیار ساده را دریافت کنید .
دریافت فایل :::
در شروع کار در محیط فلش یک سند جدید با طول و عرض 500 ایجاد کنید .

به منو فایل رفته و زیر منو import گزینه Import to Stage را انتخاب کنید , سپس فایل test را انتخاب کنید

پس از باز شدن کادر Import to Stage تمامی text های خود را به حالت انتخاب در آورید , همانطوری که ملاحضه می کنید سه انتخاب برای شما در بخش Improt this text layer as وجود دارد که ما گزینه editable text را انتخاب می کنیم , این انتخاب این توانائی را به ما می دهد تا در محیط فلش متن خود را ویرایش کنیم .

در ادامه لایه مربوط به ساعت را انتخاب کنید , برای آنکه افکت drop shodow که در فتوشاپ به این شی دادیم پابرجا باشد باید نوع Flattened Bitmap Image را انتخاب کنید .

در ادامه من اشکال مربعی شکل فایل را به حالت انتخاب در می آورم و آنها را به Editable Paths and Layer Styles تغییر وضعیت می دهم , این گزینه به من این امکان را می دهد تا اشکال را بصورت یک movie clip وارد صحنه کنم و حتی برای آنها Instance Name یا Registration points آنها را تعیین کنم . ( اگر در تصویر پائین مشاهده می کنید که بخش Instance Name و Registration points غیر فعال است بدلیل انتخاب چندگانه من است )

چنانچه در فایل Psd شما از یک mask بهره گرفته اید برای آنکه transparency حفظ شود نیاز است تا وضعیت کمپرس سازی را از Lossy به Lossless تغییر دهید . در واقع عملکرد آن بدین ترتیب است که لایه یا آبجکت شما را به عنوان یک فایل Png وارد می کند , در حالی که Lossy آن را به عنوان یک فایل Jpeg وارد صحنه می کند . در واقع بهتر است برای لایه های که در آن بخشی Transparency دارند هر دو گزینه Lossless و Bitmap Image with Editable Layer Styles انتخاب شود .
در قسمت پائین دو گزینه Set Stage Size to Same Size as Photoshop Canvas و Place Layers at Original Position option مشاهده می شود این گزینه ها به ترتیب این امکان را به ما می دهند تا اندازه صحنه را به اندازه سایز فایل photoshop خود تغییر دهیم و بعدی چیدمان مطابق با فایل فتوشاپ باشد , چنانچه گزینه دوم تیک نخورده باشد , فلش تمامی لایه ها را در مرکز قرار می دهد .
نکته ای دیگر که باقی مانده است در مورد Vector Outlines است که دو مزیت را در اختیار ما قرار می دهم حجم کمتر و همچنین قابلیت ویرایش با استفاده از Pen tool در فلش را دارا می باشد .
همانطوری که در خروجی این فایل می بینید من یک افکت brightness به این ساعت داده ام , نکته باید در مورد این کار گویم آن است که من در وارد کردن ساعت گزینه های Lossless و Bitmap Image with Editable Layer Styles را انتخاب کردم در غیر اینصورت نمی توانستم چنین نتیجه دریافت کنم .
دریافت فایل :::

پیاده سازی ساعت

پیش از ورود فایل فتوشاپ بهتر است برای بهتر عمل کردن عقربه ها آن ها را در روی 12 تنظیم کنید .

پس از آن وارد محیط فلش شده و با توجه به نکات قبلی که گفته شد عمل کنید , نکته مهم آن است که برای سه لایه second و minutes و hours به ترتیب instance name را به sbar و mbar و hbar تغییر داده و Registration point را به پائین مرکز تغییر دهید .

در بالای تمامی لایه ها لایه جدیدی با نام action ایجاد کنید , سپس اولین فریم آنرا را انتخاب کردن و بازدن کلید F9 پنل action را نمایان کنید , در این پنل کد زیر را کپی کنید .

ایجاد یک آبجکت ساعت
mydate = new Date();

// تنظیم چرخش هر عقربه
sbar._rotation = mydate.getSeconds() * 6;
mbar._rotation = mydate.getMinutes() * 6;
hbar._rotation = (mydate.getHours() + (mydate.getMinutes()/60))*30 ;

سپس فریم 2 مربوط به تمامی لایه ها را انتخاب کرده و راست کلیک کنید و گزینه insert frame را انتخاب کنید .( می توانید از کلید F5 نیز بهره گیرید )
دریافت فایل پایانی
در پایان باید نتیجه ای مانند زیر داشته باشید .