azizsoft
23-12-2016, 01:05 AM
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
سبق أن تم شرح لكيفية الرسم في فلاش ضمن الرابط التالي :
http://www.abc4web.net/vb/showthread.php?t=29148
ولنكمل ما بدأناه ونبسط لكم اخوتي الكرام في محاولة لاستيعاب طريقة الرسم والتحكم في نظم الالوان .
لنبدأ بــــــــــــــــــــــــ
الرسم الطبيعي
1 - استدعاء كلاسات احداث الماوس وانشاء نسخة من كائن موفي كليب لنرسم داخله
import flash.events.MouseEvent;
import flash.events.Event;
var drawingLine: MovieClip = new MovieClip();
addChildAt(drawingLine, 0);
الاستماع لحدث الماوس عند بداية الضغط والحدث الذي طلبناه = من نوع سطر سمك 10 بكسل ولون بني
على أن يكون اتجاه السطر نفس اتجاه أو احداثيات الماوس في حالة الحركة Move
function MouseDown(event: MouseEvent): void {
drawingLine.graphics.lineStyle(10, 0x990000);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
function MouseMove(event: MouseEvent): void {
drawingLine.graphics.lineTo(mouseX, mouseY);
}
3 - حدث استماع للمسرح Stage في حالة رفع الاصبع عن الماوس = الحدث المطلوب
حذف حدث الاستماع للرسم والرسم مرتبط طبعا بحركة الماوس Move
4- أضفت زر clear_btn في المشروع لافراغ أو مسح الرسم
clear_btn.addEventListener(MouseEvent.CLICK, clearScreen);
function clearScreen(event: MouseEvent): void {
drawingLine.graphics.clear();
}
==== هذا فيما يتعلق بالرسم العادي على فلاش == يمكن أن تغير اخي في سمك الخط ولونه (10, 0x990000)
ارسم على الفلاش
WIDTH=700 HEIGHT=500
الرسم المتقدم
بنفس طريقة الرسم العادي يمكن أن نقوم برسم متقدم بالاستعانة بكلاس flash.filters.GlowFilter
هذا الكلاس أخي الكريم يضفي على الرسم جمالية من خلال دوال التوهج glow والضبابية blur والشادو shadow الخ ..
وطبعا كالعادة لانشاء مشروع رسم متقدم نستحضر الكلاسات اللازمة
1-
import flash.display.Sprite;
import flash.filters.GlowFilter;
import flash.events.MouseEvent;
import flash.events.Event;
import fl.controls.ColorPicker;
import fl.events.ColorPickerEvent;
الكلاسين الاخيرين يخصان كمبونت الكولور بيكر وهي مكون في الفلاش خاص بنظم واختيار الآلوان
2-
الاعلان عن متغيرات تخص الالوان وسمك الخط ودرجة التوهج والضبابية
var baseColor = 0xFFFFFF;
var glowColor = 0xFF0000;
var baseStrength = 15;
var glowStrength =10;
var glowBlur = 10;
3-
انشاء نسخة من كلاس سبرايت لنرسم داخله
var sprite:Sprite = new Sprite();
addChild(sprite);
4-
دالة تجهيز نوع الرسم والقيم المطلوبة
وفي الدالة مصفوفة لاحتواء بكسلات الجرافيك
5- حدث استماع للمسرح stage في حالة ضغط الماوس أن يتبع الرسم احداثيات الماوس
بقيم الللون المطلوب وحذف الجرافيك عند رفع اليد على الماوس
stage.addEventListener(MouseEvent.MOUSE_DOWN, BeginFill);
function BeginFill(m:MouseEvent) {
sprite.graphics.lineStyle(baseStrength, baseColor);
sprite.graphics.moveTo(mouseX, mouseY);
addEventListener(Event.ENTER_FRAME, loop);
}
stage.addEventListener(MouseEvent.MOUSE_UP, stopFill);
function stopFill(m:MouseEvent) {
removeEventListener(Event.ENTER_FRAME, loop);
}
function loop(e:Event) {
if (mouseX < 600) {
sprite.graphics.lineTo(mouseX, mouseY);
}
}
أضفت في المشروع نسختين من مكون Componet كولر بيكر Color Picker بسام cp1 و cp2 لاختيار اللون منها وهذا الكود
cp1.addEventListener(ColorPickerEvent.CHANGE, changeHandler1);
function changeHandler1(event:ColorPickerEvent):void {
sprite.graphics.clear();
baseColor = event.target.selectedColor;
}
cp2.addEventListener(ColorPickerEvent.CHANGE, changeHandler2);
function changeHandler2(event:ColorPickerEvent):void {
glowColor = event.target.selectedColor;
sprite.graphics.clear();
updateFilter();
}
وأخيرا أضفنا نفس الزر في المشروع السابق للمسح
clear_btn.addEventListener(MouseEvent.CLICK, clear);
function clear(event:MouseEvent):void
{
sprite.graphics.clear();
updateFilter();
}
ارسم على الفلاش وخير بين الالوان
WIDTH=700 HEIGHT=500
====== يمكن أخي الكريم أن تطبق هذا المشروع على نظام أندرويد بنفس الاكواد وتقدمه لابنك الصغير لتعلم الحروف
وطبعا يمكن أن تطوره ببعض الصور مثلا أو أصوات حروف الخ ....
الملف المفتوح في المرفقات
:abc_022:
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
سبق أن تم شرح لكيفية الرسم في فلاش ضمن الرابط التالي :
http://www.abc4web.net/vb/showthread.php?t=29148
ولنكمل ما بدأناه ونبسط لكم اخوتي الكرام في محاولة لاستيعاب طريقة الرسم والتحكم في نظم الالوان .
لنبدأ بــــــــــــــــــــــــ
الرسم الطبيعي
1 - استدعاء كلاسات احداث الماوس وانشاء نسخة من كائن موفي كليب لنرسم داخله
import flash.events.MouseEvent;
import flash.events.Event;
var drawingLine: MovieClip = new MovieClip();
addChildAt(drawingLine, 0);
الاستماع لحدث الماوس عند بداية الضغط والحدث الذي طلبناه = من نوع سطر سمك 10 بكسل ولون بني
على أن يكون اتجاه السطر نفس اتجاه أو احداثيات الماوس في حالة الحركة Move
function MouseDown(event: MouseEvent): void {
drawingLine.graphics.lineStyle(10, 0x990000);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
function MouseMove(event: MouseEvent): void {
drawingLine.graphics.lineTo(mouseX, mouseY);
}
3 - حدث استماع للمسرح Stage في حالة رفع الاصبع عن الماوس = الحدث المطلوب
حذف حدث الاستماع للرسم والرسم مرتبط طبعا بحركة الماوس Move
4- أضفت زر clear_btn في المشروع لافراغ أو مسح الرسم
clear_btn.addEventListener(MouseEvent.CLICK, clearScreen);
function clearScreen(event: MouseEvent): void {
drawingLine.graphics.clear();
}
==== هذا فيما يتعلق بالرسم العادي على فلاش == يمكن أن تغير اخي في سمك الخط ولونه (10, 0x990000)
ارسم على الفلاش
WIDTH=700 HEIGHT=500
الرسم المتقدم
بنفس طريقة الرسم العادي يمكن أن نقوم برسم متقدم بالاستعانة بكلاس flash.filters.GlowFilter
هذا الكلاس أخي الكريم يضفي على الرسم جمالية من خلال دوال التوهج glow والضبابية blur والشادو shadow الخ ..
وطبعا كالعادة لانشاء مشروع رسم متقدم نستحضر الكلاسات اللازمة
1-
import flash.display.Sprite;
import flash.filters.GlowFilter;
import flash.events.MouseEvent;
import flash.events.Event;
import fl.controls.ColorPicker;
import fl.events.ColorPickerEvent;
الكلاسين الاخيرين يخصان كمبونت الكولور بيكر وهي مكون في الفلاش خاص بنظم واختيار الآلوان
2-
الاعلان عن متغيرات تخص الالوان وسمك الخط ودرجة التوهج والضبابية
var baseColor = 0xFFFFFF;
var glowColor = 0xFF0000;
var baseStrength = 15;
var glowStrength =10;
var glowBlur = 10;
3-
انشاء نسخة من كلاس سبرايت لنرسم داخله
var sprite:Sprite = new Sprite();
addChild(sprite);
4-
دالة تجهيز نوع الرسم والقيم المطلوبة
وفي الدالة مصفوفة لاحتواء بكسلات الجرافيك
5- حدث استماع للمسرح stage في حالة ضغط الماوس أن يتبع الرسم احداثيات الماوس
بقيم الللون المطلوب وحذف الجرافيك عند رفع اليد على الماوس
stage.addEventListener(MouseEvent.MOUSE_DOWN, BeginFill);
function BeginFill(m:MouseEvent) {
sprite.graphics.lineStyle(baseStrength, baseColor);
sprite.graphics.moveTo(mouseX, mouseY);
addEventListener(Event.ENTER_FRAME, loop);
}
stage.addEventListener(MouseEvent.MOUSE_UP, stopFill);
function stopFill(m:MouseEvent) {
removeEventListener(Event.ENTER_FRAME, loop);
}
function loop(e:Event) {
if (mouseX < 600) {
sprite.graphics.lineTo(mouseX, mouseY);
}
}
أضفت في المشروع نسختين من مكون Componet كولر بيكر Color Picker بسام cp1 و cp2 لاختيار اللون منها وهذا الكود
cp1.addEventListener(ColorPickerEvent.CHANGE, changeHandler1);
function changeHandler1(event:ColorPickerEvent):void {
sprite.graphics.clear();
baseColor = event.target.selectedColor;
}
cp2.addEventListener(ColorPickerEvent.CHANGE, changeHandler2);
function changeHandler2(event:ColorPickerEvent):void {
glowColor = event.target.selectedColor;
sprite.graphics.clear();
updateFilter();
}
وأخيرا أضفنا نفس الزر في المشروع السابق للمسح
clear_btn.addEventListener(MouseEvent.CLICK, clear);
function clear(event:MouseEvent):void
{
sprite.graphics.clear();
updateFilter();
}
ارسم على الفلاش وخير بين الالوان
WIDTH=700 HEIGHT=500
====== يمكن أخي الكريم أن تطبق هذا المشروع على نظام أندرويد بنفس الاكواد وتقدمه لابنك الصغير لتعلم الحروف
وطبعا يمكن أن تطوره ببعض الصور مثلا أو أصوات حروف الخ ....
الملف المفتوح في المرفقات
:abc_022: