تويت
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
انشاء قائمة منسدلة في مشروع فلاشي أو أندرويد تتم بعدة طرق حيث توفر مكتبات الاكشن سكربت عديد الاكواد
الخاصة بالتوين أو الحركة فضلا عن مكتبة greensock
طبعا هاته القائمة المنسدلة ستحتوي داخلها على عناوين أو أزرار تحويل الى مشاهد أو فريمات تضم محتوى
وهذا النوع من التصميم نشاهده ونلاحظه في عدة تطبيقات مشابهة .
سنستعرض في هاته السلسة كيفية تصميم هاته القوائم بالتدرج لتسهيل الفهم وحسن الاستغلال وبداية نشرح
طريقة اضافة قائمة بدون أي محتوى واضافة الحركة عليها ثم اثر ذلك نواصل ادراج الازرار وربطها بالمشاهد
والانتقالات .
طيب نفتح برنامج الفلاش ونقوم بانشاء مشروع جديد بيئة أندرويد مساحة العمل 800/480
* الطبقة الاولى نضيف بها خلفية فقط
* الطبقة الثانية نضيف بها زر وموفي كليب وهو القائمة المنسدلة
* الطبقة الثالثة للاكشن .
قبل أن تواصل أخي الكريم حمل من المرفق الملف المفتوح وتابع معي
كما تلاحظ القائمة المنسدلة وهي الموفي كليب Pannel_mc مكانها بالاحداثي السيني 500 والاحداثي الصادي 50
ولك الحرية طبعا في تغيير المكان لكن يعتبر هذا المكان الطبيعي في التطبيقات العربية .
في طبقة الاكشن قمنا باستيراد الكلاسات اللازمة
[HTML]
import flash.events.*;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;
[/HTML]
تخزين احداثي القائمة أو الموفي كليب في متغير ptPanel
[HTML]
var ptPanel:Point = new Point(500,50);
[/HTML]
هذا الكود لتحديد قيمة دوران الزر btnSlidePanel على اساس أن يتم تغيير قيمة الدوران بمجرد الضغط عليه
مجرد حركة تفاعلية للتنبيه الى القائمة
[HTML]
btnSlidePanel.rotation = 180;
[/HTML]
هنا حددنا مكان القائمة وأسندناها للمتغير ptPanel ليتم التعامل فقط برمجيا معه
[HTML]
Pannel_mc.x = ptPanel.x;
Pannel_mc.y = ptPanel.y;
[/HTML]
وهذا كود الزر أضفنا فيه حركة من نوع Tween لظهور واختفاء القائمة بمجرد الضغط عليه
حيث تكون الحركة من نوع Back.easeOut و Back.easeIn بسرعة 10 اجزاء من الثانية
وطرح قيمة 450 من قيمة 500 لتحديد مكان ظهور القائمة مع تغيير قيمة دوران الزر عند كل ضغطة
لما تغير مثلا الرقمين 10 الى 20 تبطىء زمن ظهور القائمة ولما تقلل الرقم تسرع الزمن ...
[HTML]
btnSlidePanel.addEventListener(MouseEvent.CLICK, slidePanel);
function slidePanel(mevt:MouseEvent):void {
var twSlide:Tween;
if (btnSlidePanel.rotation == 180) {
btnSlidePanel.rotation = 0;
twSlide = new Tween(Pannel_mc, "x", Back.easeOut, ptPanel.x, ptPanel.x - 450,10);
}
else {
btnSlidePanel.rotation = 180;
twSlide = new Tween(Pannel_mc, "x", Back.easeIn, ptPanel.x - 450, ptPanel.x,10);
}
}
[/HTML]
أضيف لك هاته الانواع من الحركة التابعة لكلاس التوين Tween وغير مثلا في التأثير الحركي واختر ما يناسبك
مثلا تضع Bounce.easeOut مكان Back.easeOut و
Bounce.easeIn مكان Back.easeIn وعاين النتيجة وهكذا ....
[HTML]
Bounce.easeOut
Bounce.easeIn
Elastic.easeOut
Elastic.easeIn
Strong.easeOut
Strong.easeIn
Regular.easeOut
Regular.easeIn
[/HTML]
انتهى الجزء الاول لاحقا سنضيف الازرار في القائمة المنسدلة ونربطها بالمشاهد أو بالفريمات .
أستودعم الله
تعليق