المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : كيفية انشاء قائمة منسدلة لمشروع أندرويد جزء أول


azizsoft
30-05-2019, 03:55 AM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين


انشاء قائمة منسدلة في مشروع فلاشي أو أندرويد تتم بعدة طرق حيث توفر مكتبات الاكشن سكربت عديد الاكواد
الخاصة بالتوين أو الحركة فضلا عن مكتبة greensock (https://greensock.com/)

طبعا هاته القائمة المنسدلة ستحتوي داخلها على عناوين أو أزرار تحويل الى مشاهد أو فريمات تضم محتوى
وهذا النوع من التصميم نشاهده ونلاحظه في عدة تطبيقات مشابهة .

سنستعرض في هاته السلسة كيفية تصميم هاته القوائم بالتدرج لتسهيل الفهم وحسن الاستغلال وبداية نشرح
طريقة اضافة قائمة بدون أي محتوى واضافة الحركة عليها ثم اثر ذلك نواصل ادراج الازرار وربطها بالمشاهد
والانتقالات .


طيب نفتح برنامج الفلاش ونقوم بانشاء مشروع جديد بيئة أندرويد مساحة العمل 800/480
* الطبقة الاولى نضيف بها خلفية فقط
* الطبقة الثانية نضيف بها زر وموفي كليب وهو القائمة المنسدلة
* الطبقة الثالثة للاكشن .

قبل أن تواصل أخي الكريم حمل من المرفق الملف المفتوح وتابع معي :abc_088:


كما تلاحظ القائمة المنسدلة وهي الموفي كليب Pannel_mc مكانها بالاحداثي السيني 500 والاحداثي الصادي 50
ولك الحرية طبعا في تغيير المكان لكن يعتبر هذا المكان الطبيعي في التطبيقات العربية .

في طبقة الاكشن قمنا باستيراد الكلاسات اللازمة


import flash.events.*;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;


تخزين احداثي القائمة أو الموفي كليب في متغير ptPanel


var ptPanel:Point = new Point(500,50);



هذا الكود لتحديد قيمة دوران الزر btnSlidePanel على اساس أن يتم تغيير قيمة الدوران بمجرد الضغط عليه
مجرد حركة تفاعلية للتنبيه الى القائمة

btnSlidePanel.rotation = 180;



هنا حددنا مكان القائمة وأسندناها للمتغير ptPanel ليتم التعامل فقط برمجيا معه

Pannel_mc.x = ptPanel.x;
Pannel_mc.y = ptPanel.y;



وهذا كود الزر أضفنا فيه حركة من نوع Tween لظهور واختفاء القائمة بمجرد الضغط عليه
حيث تكون الحركة من نوع Back.easeOut و Back.easeIn بسرعة 10 اجزاء من الثانية
وطرح قيمة 450 من قيمة 500 لتحديد مكان ظهور القائمة مع تغيير قيمة دوران الزر عند كل ضغطة
لما تغير مثلا الرقمين 10 الى 20 تبطىء زمن ظهور القائمة ولما تقلل الرقم تسرع الزمن ...


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);
}
}




أضيف لك هاته الانواع من الحركة التابعة لكلاس التوين Tween وغير مثلا في التأثير الحركي واختر ما يناسبك
مثلا تضع Bounce.easeOut مكان Back.easeOut و
Bounce.easeIn مكان Back.easeIn وعاين النتيجة وهكذا ....



Bounce.easeOut
Bounce.easeIn

Elastic.easeOut
Elastic.easeIn

Strong.easeOut
Strong.easeIn

Regular.easeOut
Regular.easeIn





انتهى الجزء الاول لاحقا سنضيف الازرار في القائمة المنسدلة ونربطها بالمشاهد أو بالفريمات .


أستودعم الله

امجدمحمد
30-05-2019, 10:03 AM
بارك الله فيك

امبراطور الحريه
30-05-2019, 06:49 PM
السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
- دائما سباق للخير . ربنا يجعله فى ميزان حسناتك يا محترم ومنتظرين الجزء الثانى :abc_139::abc_139::abc_139:

اميجو
13-06-2019, 02:04 PM
جزاك الله خيرا