اميدوارم خوب و سلامت باشيد
به نظرم اين تكنيك ارزش يك بار امتحان را دارد.
حتما تا به حال با گالر يهاي عكس مختلفي روبرو شده ايد و به نظر من يكي از زيباترين گالري هاي عكس گالري است كه عكس ها به صورت يك نوار فيلم در بالا نمايش داده مي شوند و با كليك كاربر عكس ها در وسط صفحه با افكت جالبي نمايش داده مي شوند.
اين بار مي خواهيم اين شيوه را با فلش انجام دهيم.
به اين تكنيك در فلش Blur مي گويند. و حال شيوه كار :
مرحله اول : ايجاد نوار فيلم
فيلم جديدي را باز كنيد. گزينه ي Import را از منوي فايل انتخاب كرده و تصاوير را براي پيمايش وارد نماييد. تمام اين تصاوير بايد با هم اندازه باشند. آن ها را از روي stage حذف نماييد. (عكس ها در كتابخانه قرار مي گيرند.)
هر يك از تصاوير را تك تك از كتابخانه به stage بكشيد و از منوي Modify گزينه هاي Transform و Scale and Rotate انتخاب كنيد. مقياس هر يك از تصاوير را با 10% تنظيم كنيد. (البته ممكن است با توجه به اندازه ي عكس تان اين تنظيم را طور ديگري انجام دهيد دقت كنيد اين تصاوير دكمه هاي بالايي هستند.)
تصاوير كوچك را در كنار يكديگر قراردهيد و از پنل align (انتخاب align از منوي Window) براي تراز كردن آن ها استفاده كنيد. آن ها را در جايي قرار دهيد كه مي خواهيد بعدا دكمه ها باشد.
مرحله دوم :ايجاد دكمه ها
حال دكمه هاي نوار فيلم را ايجاد مي كنيم.
1.لايه جديدي وارد كرده و نام آن را Buttons بگذاريد. مستطيلي بدون خط دورو ترسيم كنيد. مطمئن شويد كه رنگ آن با پس زمينه متفاوت است. (البته در انتها آن را هم رنگ پس زمينه مي كنيم.) اين مستطيل بايد اندازه يكي از تصاوير كوچك باشد.
2.مستطيل را انتخاب و گزينه ي Convert to Symbol رااز منوي Insert انتخاب كنيد و آن را به عنوان دكمه و با نام whitebutton ذخيره نماييد.
3.براي هر تصوير يك كپي از دكمه را ايجاد كرده و روي آن ها قرار دهيد.
4.هر يك از دكمه ها را بترتيب انتخاب كرده و در پنل Actions كد زير را وارد نماييد.
on (press) {
with (mySlider(}
picno=1;
{
with (mySlider2) {
picno=1;
}
}
توجه داشته باشيد كه عدد pinco براي هر كدام از دكمه ها مي بايست فرق داشته باشد. (يعني دكمه اول 1 ، بعدي 2 و به همين ترتيب)
مرحله سوم : وارد كردن تصاوير بزرگ
حال مي خواهيم نوار فيلم بزرگ را ايجاد كنيم.
1. لايه جديدي به نام bigFilmStrip ايجاد نماييد و تصاوير بزرگ را از كتابخانه به stage بياوريد.
تمام تصاوير را انتخاب كرده و از منويInsert گزينه ي Convert to Symbol را انتخاب نماييد. و به عنوان Movie clip و با نام FilmStrip big بگذاريد. مختصات آن را طوري تنظيم كنيد كه گوشه سمت چپ آن ها دقيقا روي x=0 باشد.
2. در حالي كه نوار بزرگ را انتخاب كرده ايد در كادر متن Instance Name در Property inspector عبارت mySlider را تايپ نماييد.
3. لايه جديدي ايجاد كرده و نام ان را Mask بگذاريد. در لايه mask مستطيلي داراي زمينه و بدون خط دور و به اندازه يكي از تصاوير بزرگ رسم نماييد. آن را به روي آخرين تصوير موجود در سمت چپ قرار دهيد و بر روي لايه ي mask كليك راست كرده و Mask را انتخاب نماييد.
روي Movie clip كه با نام filmstrip big ايجاد كرده ايم كليك كنيد و كد زير را وارد نماييد.
onClipEvent(load) {
picno=5;
totalpics=5;
}
onClipEvent (enterFrame) {
//the picture number times the width of the pictures
//minus one half the width of the pictures
newdist = (((picno*(_width/totalpics)-(.5*_width) - _x)) / 3);
_x = _x+newdist;
}
مرحله آخر : افزودن Motion Blur
در اين مرحله لايه و كد لازم براي حركت نوار فيلممان را ايجاد مي كنيم.
1.فريم اول از لايه bigfilmstrip را انتخاب كرده و از منوي Edit گزينه ي Copy frames را انتخاب مي كنيد.
2.لايه جديدي ايجاد كرده و به زير لايه bigfilmstrip بكشيئ و نام آن را motionblur بگذاريد. آنگاه گزينه ي Paste Frame را از منوي Edit انتخاب نماييد.
3.Movie Clip ي كه با نام filmstrip big داريم را انتخاب كنيد و در كادر Instance Name در پنل Property inspector نام mySlider2 را براي آن وارد نماييد.
4.در حالي كه filmstrip big انتخاب شدهاست پنل actions را باز كنيد و كد زير را بنويسيد.
onClipEvent(load) {
picno=5;
totalpics=5;
}
onClipEvent (enterFrame) {
//the picture number times the width of the pictures
//minus one half the width of the pictures
newdist = (((picno*(_width/totalpics)-(.5*_width) - _x)) / 4);
_x = _x+newdist;
}
توجه : اين كد دقيقا مشابه كدي است كه در لايه قبل استفاده كرده ايم تنها در خط newdist به جاي عدد 3 عدد 4 را گذاشته ايم تا سرعت پايين تري داشته باشد و نمايش عكس ما با افكت بهتري انجام شود.
5. از لايه bigfilmstrip ، movie clip ي كه نام mySlider رو يآن گذاشته ايم را انتخاب كنيد و از پنل Propertyو بخش color ، Alpha ي آن را به 50 تغيير دهيد
لايه دكمه ها را به زير لايه اول بكشد تا دكمه ها پنهان شوند. البته رنگي كه براي آن ها انتخاب كرده ايد را با رنگ پس زمينه جايگزين كنيد.
حال برنامه خود را اجرا و از آن لذت ببريد.
اميدوارم اين آموزش به كارتان بيايد.
موفق باشيد
در ضمن هم فايل هاي swf و fla ي آموزش فوق را نيز مي توانيد دريافت كنيد.
[ جهت مشاهده لينك عضو شويد ! ]
مرجع: 50Fast Macromedia Flash MX Techniques (انتشارات : Wiley)