azizsoft
25-03-2014, 08:50 PM
http://www.abc4web.net/upload/images2/7ttwvwqjnkozmy1.png
http://www.abc4web.net/upload/images2/wcofafsmm21ires.png
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
في هذا الدرس نتعلم ان شاء كيفية توصيل العناصر بخطوط ويمكن استغلال الموضوع في انجاز موارد تعليمية للاطفال بالتوصيل
اذن الفكرة هي كما سبق أن شرحنا في هذا الدرس لكيفية الرسم في فلاش
http://www.abc4web.net/vb/showthread.php?t=29148
لكن هنا سندخل بعض التغييرات باستغلال النقاط Point في البرنامج اذن افتح أخي الكريم برنامج الفلارش وتابع معي للتطبيق
اضف طبقة فوق الطبقة الافتراضية وخصصها للاكشن
الان حدد الطبقة الاولى وارسم دائرة صغيرة وحولها الى موفي كليب
الان افتح المكتبة واسحب ثلات 3 نسخ من الموفي كليب المذكور ورتبهم من اليسار فوق بعضهم اعطهم اسماء c1 c2 c3
بعد ذلك افتح المكتبة واسحب ثلات 3 نسخ اخرى من الموفي كليب المذكور ورتبهم من اليمين فوق بعضهم واعطهم اسماء c4 c5 c6
اضف حقل نصي واجعله Dynamic واعطه اسم d1
الان حدد طبقة الاكشن وافتح نافذة الاكشن لنبداء في صياغة الأكواد
الخطوة الأولى
سنستدعي كلاسين وفي العادة برنامج فلاش يضيفهما آليا المهم قم بالنسخ واللصق
import flash.geom.*;
import flash.display.Shape;
سنقوم بعد ذلك بتعريف نقطتي بداية ونهائية وعنصر شايب للرسم داخله كما سبق أن ذكرنا في الموضوع المذكور
var pt1:Point = new Point();
var pt2:Point = new Point();
var sh:Shape;
الخطوة الثانية
طبعا الان يجب أن نضيف حدث استماع في حالة ضغط المستخدم على زر الماوس نخزن فيها احداثيات الماوس
ونضيف عنصر الشايب الذي أعلنا عنه سابقا كما نستدعي حدث وجوبي وهو حدث تحريك الماوس وسيكون الجزء الثاني من
الكود كالاتي :
stage.addEventListener(MouseEvent.MOUSE_DOWN,down) ;
function down(e:MouseEvent):void // دالة بداية النقطة
{
sh = new Shape();
addChild(sh);
pt1.x = mouseX;
pt1.y = mouseY;
stage.addEventListener(MouseEvent.MOUSE_MOVE,drawl ine);
}
الخطوة الثالة
في وظيفية تحريك الماوس سندرج أوامر للرسم طبعا لكن سيكون الرسم عبارة عن خط مستقيم من نقطة الى نقطة حسب
احداث الماوس وهنا لك الحرية في تغيير لون الخط وحجمه
function drawline(e:MouseEvent):void //دالة رسم الخط
{
sh.graphics.clear();// تنظيف الرسومات
sh.graphics.lineStyle(4,0xff0000);// نوع الخط
sh.graphics.moveTo(pt1.x,pt1.y);// نقطة البداية
pt2.x = mouseX;// احداثيات الماوس
pt2.y = mouseY;
sh.graphics.lineTo(pt2.x,pt2.y);// نقطة النهاية
}
الخطوة الرابعة
هنا يجب أن أن نضيف حدث الاستماع لتنفيذ أوامر معينة في حالة رفع المستخدم اصبعه على زر الماوس
لآنه بدون اضافة هذا الحدث لن يتمكن المستخدم من افلات السطر الا في حالة غلق الملف الفلاشي وبالتالي سيكون الكود أسفله
stage.addEventListener(MouseEvent.MOUSE_UP,up);
function up(e:MouseEvent):void // دالة نهاية النقطة
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE,dr awline);
if (c1.hitTestPoint(pt1.x,pt1.y)&& c4.hitTestPoint(pt2.x,pt2.y) )
{
d1.text = "أحسنت الاجابة صحيحة";
// هنا يمكن أن تضيف أي أوامر اخرى//
}
else if (c2.hitTestPoint(pt1.x,pt1.y)&& c5.hitTestPoint(pt2.x,pt2.y) )
{
d1.text = "أحسنت";
// هنا يمكن أن تضيف أي أوامر اخرى//
}
else if(c3.hitTestPoint(pt1.x,pt1.y)&& c6.hitTestPoint(pt2.x,pt2.y) )
{
d1.text = "رائع" ;
// هنا يمكن أن تضيف أي أوامر اخرى//
}
else
{
d1.text = "حاول مرة ثانية";
sh.graphics.clear();
// هنا يمكن أن تضيف أي أوامر اخرى//
}
}
لاحظ هنا أخي الكريم أنه داخل الوظيفة اشتطرتنا أنه في حالة تصادم الموفي c1 بالماوس = نقطة البداية = مع تصادم الموفي c3 بالماوس = نقطة النهاية =
أن ينفذ الأمر التالي : d1.text = "أحسنت الاجابة صحيحة"; ويمكن هنا ان تنفذ اي اوامر اخرى
طبعا اخي الكريم يمكن ان تضيف صور معبرة لفرضيات التوصيل امام النقاط المذكورة وتقوم باخرج برنامج تعليمي للصغار
من خلال هذا الدرس .
تطبيق على الشرح
http://im87.gulfup.com/0fX7uw.swf
الملف المفتوح في المرفقات
لاتنسونا من صالح الدعـــــــــــــــاء
بالتوفيق للجميع
http://www.abc4web.net/upload/images2/wcofafsmm21ires.png
http://www.abc4web.net/upload/images2/wcofafsmm21ires.png
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
في هذا الدرس نتعلم ان شاء كيفية توصيل العناصر بخطوط ويمكن استغلال الموضوع في انجاز موارد تعليمية للاطفال بالتوصيل
اذن الفكرة هي كما سبق أن شرحنا في هذا الدرس لكيفية الرسم في فلاش
http://www.abc4web.net/vb/showthread.php?t=29148
لكن هنا سندخل بعض التغييرات باستغلال النقاط Point في البرنامج اذن افتح أخي الكريم برنامج الفلارش وتابع معي للتطبيق
اضف طبقة فوق الطبقة الافتراضية وخصصها للاكشن
الان حدد الطبقة الاولى وارسم دائرة صغيرة وحولها الى موفي كليب
الان افتح المكتبة واسحب ثلات 3 نسخ من الموفي كليب المذكور ورتبهم من اليسار فوق بعضهم اعطهم اسماء c1 c2 c3
بعد ذلك افتح المكتبة واسحب ثلات 3 نسخ اخرى من الموفي كليب المذكور ورتبهم من اليمين فوق بعضهم واعطهم اسماء c4 c5 c6
اضف حقل نصي واجعله Dynamic واعطه اسم d1
الان حدد طبقة الاكشن وافتح نافذة الاكشن لنبداء في صياغة الأكواد
الخطوة الأولى
سنستدعي كلاسين وفي العادة برنامج فلاش يضيفهما آليا المهم قم بالنسخ واللصق
import flash.geom.*;
import flash.display.Shape;
سنقوم بعد ذلك بتعريف نقطتي بداية ونهائية وعنصر شايب للرسم داخله كما سبق أن ذكرنا في الموضوع المذكور
var pt1:Point = new Point();
var pt2:Point = new Point();
var sh:Shape;
الخطوة الثانية
طبعا الان يجب أن نضيف حدث استماع في حالة ضغط المستخدم على زر الماوس نخزن فيها احداثيات الماوس
ونضيف عنصر الشايب الذي أعلنا عنه سابقا كما نستدعي حدث وجوبي وهو حدث تحريك الماوس وسيكون الجزء الثاني من
الكود كالاتي :
stage.addEventListener(MouseEvent.MOUSE_DOWN,down) ;
function down(e:MouseEvent):void // دالة بداية النقطة
{
sh = new Shape();
addChild(sh);
pt1.x = mouseX;
pt1.y = mouseY;
stage.addEventListener(MouseEvent.MOUSE_MOVE,drawl ine);
}
الخطوة الثالة
في وظيفية تحريك الماوس سندرج أوامر للرسم طبعا لكن سيكون الرسم عبارة عن خط مستقيم من نقطة الى نقطة حسب
احداث الماوس وهنا لك الحرية في تغيير لون الخط وحجمه
function drawline(e:MouseEvent):void //دالة رسم الخط
{
sh.graphics.clear();// تنظيف الرسومات
sh.graphics.lineStyle(4,0xff0000);// نوع الخط
sh.graphics.moveTo(pt1.x,pt1.y);// نقطة البداية
pt2.x = mouseX;// احداثيات الماوس
pt2.y = mouseY;
sh.graphics.lineTo(pt2.x,pt2.y);// نقطة النهاية
}
الخطوة الرابعة
هنا يجب أن أن نضيف حدث الاستماع لتنفيذ أوامر معينة في حالة رفع المستخدم اصبعه على زر الماوس
لآنه بدون اضافة هذا الحدث لن يتمكن المستخدم من افلات السطر الا في حالة غلق الملف الفلاشي وبالتالي سيكون الكود أسفله
stage.addEventListener(MouseEvent.MOUSE_UP,up);
function up(e:MouseEvent):void // دالة نهاية النقطة
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE,dr awline);
if (c1.hitTestPoint(pt1.x,pt1.y)&& c4.hitTestPoint(pt2.x,pt2.y) )
{
d1.text = "أحسنت الاجابة صحيحة";
// هنا يمكن أن تضيف أي أوامر اخرى//
}
else if (c2.hitTestPoint(pt1.x,pt1.y)&& c5.hitTestPoint(pt2.x,pt2.y) )
{
d1.text = "أحسنت";
// هنا يمكن أن تضيف أي أوامر اخرى//
}
else if(c3.hitTestPoint(pt1.x,pt1.y)&& c6.hitTestPoint(pt2.x,pt2.y) )
{
d1.text = "رائع" ;
// هنا يمكن أن تضيف أي أوامر اخرى//
}
else
{
d1.text = "حاول مرة ثانية";
sh.graphics.clear();
// هنا يمكن أن تضيف أي أوامر اخرى//
}
}
لاحظ هنا أخي الكريم أنه داخل الوظيفة اشتطرتنا أنه في حالة تصادم الموفي c1 بالماوس = نقطة البداية = مع تصادم الموفي c3 بالماوس = نقطة النهاية =
أن ينفذ الأمر التالي : d1.text = "أحسنت الاجابة صحيحة"; ويمكن هنا ان تنفذ اي اوامر اخرى
طبعا اخي الكريم يمكن ان تضيف صور معبرة لفرضيات التوصيل امام النقاط المذكورة وتقوم باخرج برنامج تعليمي للصغار
من خلال هذا الدرس .
تطبيق على الشرح
http://im87.gulfup.com/0fX7uw.swf
الملف المفتوح في المرفقات
لاتنسونا من صالح الدعـــــــــــــــاء
بالتوفيق للجميع
http://www.abc4web.net/upload/images2/wcofafsmm21ires.png