درس فلاش ... كيفية عمل حركة الجزيئات بطريقة احترافية
تصنيف الدرس : Animation + Action script
في هذا الدرس سوف تتعلم كيفية عمل انيميشن احترافي لمجموعة من الجزيئات بواسطة
كود أكشن سكريبت بالاضافة إلى مجموعة من المهارات
الاحترافية التي سوف تتعلمها خلال هذا الدرس
مثال نهائي للدرس
الخطوة الأولى
قم بحفظ الصورة التي سوف نعمل عليها ادناه
الخطوة الثانية
قم بفتح ملف جديد Ctrl+J ثم ضع width 400 pixels و hight 250 pixels
ثم اختر لون الخلفية كما تشاء ثم ضع قيمة frame rate 33 ثم ok
الخطوة الثالثة
قم بتغيير الاسم الافتراضي لللاير Layer 1 إلى background عن طريق الضغط دبل كليك على اللاير ثم تغيير الاسم ثم اضغط Enter
الخطوة الرابعة
الان اختر File > Import > Import to stage (Ctrl+R)
ثم قم باستيراد الصورة التي قمت بتحميلها في الخطوة الاولى وبدون الغاء تحديد الصورة اذهب للوحة المحاذاة (Ctrl+K) Align Panel
ثم قم بعمل الاتي
1- تأكد من تفعيل زر Align/Distribute
2- اضغط على زر Align horizontal center
3- اضغط على زر Align vertical center
ملحوظة : فائدة هذه الخطوات هي تنظيم الصورة التي اخترناها داخل مساحة العمل وجعلها في منتصف مسحة العمل
الخطوة الخامسة
في شريط الوقت Time line قم باختيار الفريم رقم 30 ثم اضغط F5
الخطوة السادسة
قم بانشاء لاير جديدة فوق لاير background ثم قم بتسميتها particle
الخطوة السابعة
قم باختيار أداة Oval Tool (R) ثم في الجزء الخاص بالألوان في Tool panel قم بتغميق اللون الخارجي Stroke color عن طريق الضغط على الايقونة التي تتخذ شكل قلم صغير وبجانب القلم مربع بداخله خط أحمر قطري اضغط على هذا المربع ثم اختر أي لون ثم قم برسم الدائرة بمقاس 20 * 20
كما في الصورة
الخطوة الثامنة
بدون الغاء تحديد الدائرة التي قمت برسمها قم بالذهاب إلى لوحة الألوان Color Mixer Panel (Shift+F9) ثم قم بعمل الأتي كما هو موضح بالصورة أدناه
الخطوة التاسعة
بدون الغاء تحديد الدائرة أيضا قم بالضغط F8 (Convert to Symbol) وذلك لتحويل الدائرة إلى رمز من نوع Movie Clip كما في الصورة أدناه
الخطوة العاشرة
الان قمنا بتحويل الدائرة إلي رمز ... بواسطة Selection tool (V) قم بالضغط عليها دبل كليك ..... أنت الان بداخل الرمز Move clip انظر الصورة
الخطوة الحادية عشر
بدون الغاء تحديد الرمز أو الدائرة قم بالضغط F8 مرة أخرى وقم بتحويله هذه المرة إلى Graphic
الخطة الثانية عشر
الان في شريط الوقت timeline قم باختيار الفريم رقم 1 ثم اذهب إلى لوحة الأكشن سكريبت As panel (F9) ثم ضع الكود التالي بداخلها
xMax = 400;
yMin = 0;
yMax = 250;
minSize = 10;
maxSize = 50;
easeFactor = 10; randomX = Math.random () * ( xMax - xMin ) + xMin;
randomY = Math.random () * ( yMax - yMin ) + yMin;
randomSize = Math.random () * ( maxSize - minSize ) + minSize;
الخطوة الثالثة عشر
الان قم باختيار الفريم رقم 3 من شريط الوقت ثم اذهب مرة أخرى إلى لوحة الأكشن سكريبت ثم ضع الكود التالي
distance = Math.sqrt(Math.pow(this._x-randomX, 2)+Math.pow(this._y-randomY, 2)); if (Math.abs(this._width-maxSize)>1) {this._width += (randomSize-this._width)/2;
this._height += (randomSize-this._height)/2;
}
if (distance>1) {
this._x += (randomX-this._x)/easeFactor;
this._y += (randomY-this._y)/easeFactor;
gotoAndPlay(2);
} else {
gotoAndPlay(1);
}
الخطوة الرابعة عشر
ارجع الأنلمساحة العمل الرئيسية (Scene 1) ثم اختر الدائرة أو الجزىء وقم بنسخه ثم قم بلصقه عدة مرات أي قم بتكراه عدة مرات لكي تحصل على الشكل المطلوب
الخطوة الخامسة عشر
اختبر عملك الأن Ctrl + Enter
يمكنك تحميل الملف المصدر fla عن طريق الرابط التالي
انتهى الدرس
اتمنى أن يفيدكم الدرس
ليست هناك تعليقات:
إرسال تعليق