پادشاه فلش

در این مطلب به یک برنامه ساده در فلش می پردازیم که به راحتی با موس بتوانید خطوط مورد نظرتان را طراحی نمایید ، این مطلب به انجام این کار با استفاده از فلش و اکشن اسکریپت ۳ می پردازیم.

دانلود سورس : draw_line_with_mouse_iflashlord.zip

در ابتدا کلاس های مورد نیاز را وارد می کنیم (البته توجه داشته باشید این کار به صورت خودکار توسط نسخه های جدید فلش انجام می شود و دلیل ذکر این موارد برای اشاره به کلاس های مورد استفاده در مطلب آموزشی می باشد)

import flash.display.Sprite;
import flash.display.Stage;
import flash.events.MouseEvent;
import flash.display.Graphics;

در مرحله بعد یک Sprite ایجاد می کنیم ، این DisplayObject مخزنی برای ذخیره محتوا طراحی شده توسط موس می باشد.

var _sprite:Sprite= new Sprite();

حال این Sprite را addChild می کنیم و در ابتدا محیطی که می خواهیم در آن طراحی انجام شود را ایجاد می کنیم برای این کار از drawRect برای طراحی یک مستطیل استفاده می کنیم.

_sprite.graphics.beginFill(0xF0F0F0);
_sprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
_sprite.graphics.endFill();

برای این که این بخش مشخص باشد ما رنگ F0F0F0 را قرار دادیم شما می توانید هر کد رنگی که مورد نظرتان باشد را وارد نمایید. و در این مثال برای به دست آوردن طول و عرض صفحه استیج از stage.stageHeight و  stage.stageWidth استفاده شده است و برای مختصات شروع ایجاد طرح از ۰ و ۰ که مختصات x و y نقطه شروع می باشد استفاده شده است.
در ضمن endFill برای پایان دادن به یک مقدار دهی مثلا رنگ به شی مستطیل تعریف شده ما می باشد.

حال می بایست رویدادهای مربوطه به فشردن کلیک چپ موس (MOUSE_DOWN) و رها کردن آن را (MOUSE_UP) تعریف می کنیم و به Sprite تعریف شده اعمال می کنیم.

_sprite.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
_sprite.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

حال تابع مربوطه به فشرده شدن موس را تعریف می کنیم در این تابع ما توسط متد lineStyle از graphics مربوطه به شی نمایشی Sprite ابتدا قالب بندی خط را تعیین می کنیم ، و توسط متد moveTo مختصات اولیه را مختصات کنونی موس قرار می دهیم .
حال زمان آن رسیده که رویدادی جدید تعریف کنیم تا در زمان حرکت موس تابع MouseMove را فراخوانی کند ، این تابع وظیفه کشیدن خط را بر عهده دارد.

function MouseDown(e:MouseEvent):void
{
_sprite.graphics.lineStyle(1, 0, 1);
_sprite.graphics.moveTo(mouseX, mouseY);
_sprite.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

تابع MouseMove با استفاده از متد lineTo در هر زمان که موس حرکت کند خطی به نقطه مختصات کنونی موس طراحی می کند. آرگمان اول lineTo مربوطه به مختصات x و آرگمان دوم مربوطه به مختصات y می باشد که در این مثال برای مقدار x از mouseX و y از mouseY که مقدارهای مربوطه به مختصات کنونی موس می باشند استفاده شده است .

function MouseMove(e:MouseEvent):void
{
_sprite.graphics.lineTo(mouseX, mouseY);
}

حال می بایست توسط رویدادی که برای رها کردن کلیک تعیین کردیم در زمان رها کردن کلیک رویداد مربوطه به طراحی در حال حرکت موس و در واقع فراخوانی MouseMove را حذف کنیم.

function MouseUp(e:MouseEvent):void
{
_sprite.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

سورس کد کامل برنامه به صورت یکجا :

import flash.display.Sprite;
import flash.display.Stage;
import flash.events.MouseEvent;
import flash.display.Graphics;

var _sprite:Sprite= new Sprite();
addChild(_sprite);
_sprite.graphics.beginFill(0xF0F0F0);
_sprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
_sprite.graphics.endFill();

_sprite.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
_sprite.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

function MouseDown(e:MouseEvent):void
{
        _sprite.graphics.lineStyle(1, 0, 1);
        _sprite.graphics.moveTo(mouseX, mouseY);
        _sprite.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

function MouseUp(e:MouseEvent):void
{
        _sprite.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
function MouseMove(e:MouseEvent):void
{
        _sprite.graphics.lineTo(mouseX, mouseY);
}

و بهتر است کمی کدمان را (از نظر رویدادها) بهینه تر نیز کنیم :

import flash.display.Sprite;
import flash.display.Stage;
import flash.events.MouseEvent;
import flash.display.Graphics;

var _sprite:Sprite= new Sprite();
addChild(_sprite);
_sprite.graphics.beginFill(0xF0F0F0);
_sprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
_sprite.graphics.endFill();

_sprite.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown , false , 0 , true);
_sprite.addEventListener(MouseEvent.MOUSE_UP, MouseUp , false , 0 , true);

function MouseDown(e:MouseEvent):void
{
        _sprite.graphics.lineStyle(1, 0, 1);
        _sprite.graphics.moveTo(mouseX, mouseY);
        _sprite.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove , false , 0 , true);
}

function MouseUp(e:MouseEvent):void
{
        _sprite.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
function MouseMove(e:MouseEvent):void
{
        _sprite.graphics.lineTo(mouseX, mouseY);
}

حال می تونیم برنامه رو تست کنیم ، با فشردن کلیک چپ و حرکت موس می توانید خطوط مورد نظر خودتان را طراحی کنید.

دانلود سورس : draw_line_with_mouse_iflashlord.zip