درس عمل شاشة تحميل بالفلاش

درس عمل شاشة تحميل بالفلاش

تصنيف الدرس : Action Script

درس كيفية عمل شاشة تحميل بالفلاش باستخدام الاكشن سكريبت بطريقة سهلة وبسيطة

سوف نتعلم في هذا الدرس عمل شاشة تحميل احترافية بطريقة سهلة وبسيطة عن طريق استخدام الاكشن سكربت بالاضافة إلى بعض المهارات الأخرى في الفلاش

النتيجة النهائية للدرس

الخطوة الاولى

نقوم بعمل ملف فلاش جديد عن طريق الاختصار Ctrl+J من لوحة المفاتيح ثم قم بتحديد أبعاد مساحة العمل بأي أبعاد كما تحب 

ثم اختر لون الخلفية #474747 ثم اجعل قيمة خانة frame rate 30 ثم اضغط اوك

الخطوة الثانية

نقوم بتسمية الطبقة الأولى أو Layer1 بالاسم preloader وذلك عن طريق الضغط دبل كليك على الاسم الافتراضي للطبقة الأولى 

الخطوة الثالثة

اختر الأداة Text Tool (A) ثم اذهب للوحة الخصائص Properties Panel أسفل مساحة العمل ثم قم بالآتي

1- اختر Static Text

2- اختر OCR-B 10 BT كنوع للخط

3- اختر حجم الخط 21

4- اختر لون الخط أبيض

5- اختر Anti-alias for readability

كما في الصورة الموضحة ادناه

الخطوة الرابعة

الان نقوم بكتابة نص التحميل وليكن Loading انظر الصورة بالاسفل

الخطوة الخامسة

بدون الغاء تحديد النص السابق الذي قمنا بكتابته قم بالضغط على مفتاح F8 تظهر نافذة Convert to Symbol نقوم باختيار Movie Clip وذلك لتحويل النص

إلى رمز من نوع Movie Clip كما في الصورة أدناه

الخطوة السادسة

نقوم بالضغط دبل كليك على Movie Clip أو النص الذي قمنا بتحويله سابقا في الخطوة الخامسة سيتم تحويلك إلى داخل Movie Clip انظر الصورة أدناه

الخطوة السابعة

نحن الان داخل Movie Clip نقوم بتغيير اسم Layer1 إلى Text

الخطوة الثامنة

احتر الفريم رقم 100 في الطبقة Text على شريط الزمن Timeline ثم اضغط F5

الخطوة التاسعة

قم بعمل طبقة جديدة new layer فوق الطبقة Text وقم بتسميتها percent

الخطوة العاشرة

اختر الطبقة percent ثم اذهب اختر أداة Text Tool (A) ثم اذهب للوحة الخصائص Properties Panel (Ctrl+F3) ثم قم بعمل الاتي

1- اختر Dynamic Text

2- اختر OCR-B 10 BT كنوع للخط

3- اجعل حجم الخط 19 واجعله Bold أو غامق

4- اختر لون الخط أبيض

5- اختر Anti - alias for readability

6-في خانة Var اكتب percent22

كما هو موضح بالصورة

ثم قم برسم مستطيل بجانب كلمة Loading ثم اكتب بداخله 99% كما في الصورة

الخطوة الحادية عشر

الان نرجع للمشهد الاساسي أو Scene 1 وذلك بالضغط على أيقونة Scene 1 الموجودة أسفل شريط الزمن timeline

الخطوة الثانية عشر

اختر أداة الاختيار Selection Tool (V) ثم اضغط مرة واحدة على طبقة  preloader لكي تختارها ثم اذهاب للوحة الخصائص Properties Panel (Ctrl+F3)

ثم اختر التبويب Filter ثم اضغط على علامة الزائد + ثم اختر Glow filterثم ضع القيم كما في الصورة

الخطوة الثالثة عشر

اختر مرة أخرى أداة الاختيار Selection Tool (V) ثم اضغط مرة واحدة على طبقة preloader وذلك لاختيارها ثم اضغط مفتاح F9 للذهاب للوحة AS panel أو نافذة الاكشن سكريبت ثم قم بوضع الكود الآتي

onClipEvent (load) {
total = _root.getBytesTotal();
} onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
percent22 = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

الخطوة الرابعة عشر

اختر الان الفريم رقم 1 واذهب لنافذة الأكشن سكريبت مرة أخرى AS panel (F9) ثم اكتب الكود التالي بداخلها

stop();

الان نحن انتهينا من شاشة التحميل

لكي ترى كيف تعمل شاشة التحميل قم بعمل طبقة جديدة فوق طبقة preloader ثم سمها بأي اسم وليكن movie ثم اختر الفريم رقم 2 في هذه الطبقة ثم اضغط مفتاح F6 وبدون الغاء تحديد الفريم قم باستيراد صورة أو فيديو لمساحة العمل 

ثم قم باختبار الدرس عن طريق Ctrl+Enter

انتهى الدرس بحمد الله

اتمنى الاستفادة من الدرس