الدرس السادس لانشاء تطبيقات الهاتف ببرنامج الفلاش : Touch Event properties

[azizsoft]

بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته



Touch Event properties
خصائص حدث اللمس



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


كلاس TouchEvent class يحتوي على عدة خصائص وهي المبينة بالصورة أسفله ويمكن طبعا تنفيذ أوامر معينة
في كل حركة للاصبع يعني لما نضغط نستطيع أن ننفذ أمر - لما ترفع اصبعك ننفذ امر - لما تمرر اصبعك ننفذ أمر وهكذا


http://www.mediafire.com/convkey/469f/jeumrsthndbxvnlzg.jpg


وتشبه العملية تماما مختلف أحداث الماوس التي تعلمناها وندرج هاته العملية ضمن محور Touch event phases
يعني مراحل أحداث اللمس المختلفة وتتبعها وادراج أي أوامر نرغب فيها .

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


Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0x336699);
mySprite.graphics.drawRect(200,400,200,200);
addChild(mySprite);

var myTextField:TextField = new TextField();
myTextField.width = 200;
myTextField.height = 20;
addChild(myTextField);

mySprite.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);

function onTouchBegin(event:TouchEvent) {
myTextField.text = "touch begin" + event.touchPointID;
}
function onTouchMove(event:TouchEvent) {
myTextField.text = "touch move" + event.touchPointID;
}
function onTouchEnd(event:TouchEvent) {
myTextField.text = "touch end" + event.touchPointID;
}



Touch Point ID معرف نقطة اللمس


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



Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0x336699);
mySprite.graphics.drawRect(0,0,40,40);
addChild(mySprite);
var myTextField:TextField = new TextField();
addChild(myTextField);
myTextField.width = 200;
myTextField.height = 20;
var touchMoveID:int = 0;

mySprite.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
function onTouchBegin(event:TouchEvent) {
if(touchMoveID != 0) {
myTextField.text = "already moving. ignoring new touch";
return;
}
touchMoveID = event.touchPointID;

myTextField.text = "touch begin" + event.touchPointID;
stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
}
function onTouchMove(event:TouchEvent) {
if(event.touchPointID != touchMoveID) {
myTextField.text = "ignoring unrelated touch";
return;
}
mySprite.x = event.stageX;
mySprite.y = event.stageY;
myTextField.text = "touch move" + event.touchPointID;
}
function onTouchEnd(event:TouchEvent) {
if(event.touchPointID != touchMoveID) {
myTextField.text = "ignoring unrelated touch end";
return;
}
touchMoveID = 0;
stage.removeEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
stage.removeEventListener(TouchEvent.TOUCH_END, onTouchEnd);
myTextField.text = "touch end" + event.touchPointID;
}



Touch and drag اللمس والسحب


في كلاس Sprite class تم اضافة دالتين للتعامل مع العناصر في بيئة الاندرويد وهما
startTouchDrag()
stopTouchDrag()

لاحظ أخي الكريم في المثال التالي فتحنا برنامج الفلاش واضفنا مربع باسم my_mc
ثم في طبقة الاكشن وضعنا الكود التالي ويعني =
لما نضغط على المربع يتضاعف حجمه ولما نسحبه تقل الشفافية ولم نتركه يقل حجمه وبالتالي
خزنا 3 أوامر الموفي كليب سيستجيب لها بمجرد تحققها .


Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

my_mc.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
my_mc.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
my_mc.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);


function onTouchBegin(evt:TouchEvent) {
evt.target.startTouchDrag(evt.touchPointID);
evt.target.scaleX *= 1.5;
evt.target.scaleY *= 1.5;
}

function onTouchMove(evt:TouchEvent) {
evt.target.alpha = 0.5;
}

function onTouchEnd(evt:TouchEvent) {
evt.target.stopTouchDrag(evt.touchPointID);
evt.target.width = 50;
evt.target.height = 50;
evt.target.alpha = 1;
}





في بداية الدرس القادم حول أحداث الحركة سنرفق /تطبيق بسيط/ يتضمن كل ما تطرقنا له في احداث اللمس .


الدرس السابع
(http://www.abc4web.net/vb/showthread.php?t=33343)

استودعكم الله

[خادم المسلمين]

السلام عليكم ورحمة الله وبركاته

سلمت يداك اخى عزيز وبارك الله فيك:abc_028:

[أبو يوسف]

جزاك الله خيرا اخانا عزيز وبارك الله فيكم :abc_152:

[azizsoft]

بسم الله الرحمن الرحيم

بارك الله فيكم
مرور موفق :abc_022:

[abohmam]

بارك الله فيك أخى عزيز :abc_152:

ماشاء الله دروس ممتعة

http://up.hawahome.com/nupload/70845_1326053448.gif

[azizsoft]

بسم الله الرحمن الرحيم

بارك الله فيكم
مرور موفق أخي أبا همام :abc_022:

[خادم المسلمين]

:abc_022::abc_022: