خانه » ادوبی فلش » ایجاد چرخش افقی اشیاء با استفاده از کلاس Matrix

ایجاد چرخش افقی اشیاء با استفاده از کلاس Matrix

ایجاد چرخش افقی اشیاء با استفاده از کلاس Matrix

در این مطلب به ایجاد چرخش افقی و یا همان filp horizontal با کمک گرفتن از کلاس Matrix می پردازیم و در این میان به توضیحی بر نحوه تعیین کردن مرکز چرخش یک شی به صورت پویا توسط کد اکشن اسکریپت ۳ نیز می پردازیم.



دانلود سورس


ابتدا کلاس های مورد نیاز را import می کنیم ، البته توجه داشته باشید در صورتی که کدها را در محیط های برنامه فلش و یا دیگر IDE های اکشن اسکریپت می نویسید در زمان نوشتن کد و در زمانی که توسط ( : ) نوع متغییر ها را مشخص می کنید به صورت خودکار کلاسه مورد نظر شما در ابتدای پروژه Import می شود و خط کد مربوطه به صورت خودکار در ابتدای پروژه شما قرار می گیرد. (البته توجه داشته باشید این امکان در نسخه های قدیمی برنامه های فوق الذکر وجود ندارد)

import flash.geom.Matrix;
import flash.geom.Point;
import flash.display.Graphics;
import flash.display.MovieClip;

حال برای ایجاد چرخش و برای این که بتوانیم از آن برای اشیای متعدد استفاده کنیم ،آن را به صورت یک تابع ایجاد می کنیم و نام آن را filpHorizontal قرار می دهیم.

آرگمان اصلی این تابع displayObject هست که شی مورد نظر شما را شامل می شود و آرگمان اختیاری بعدی که برای نمایش مرکز چرخش است که توسط کد ما به شی اعمال می شود در صورتی که این گزینه true باشد در مرکز چرخش شی ما یک دایره سیاه رنگ ایجاد می شود که نمایش دهنده مرکز چرخش کنونی است.

همان طور که در کد مشخص است این دایره یک MovieClip هست که دایره ای با استفاده از فرامین graphics و استفاده از متد drawCircle در آن ایجاد شده است و به محل مربوطه به مرکز چرخش تغییر مختصات داده شده است و به شی اصلی ما addChild شده است.

حال بهتر هست کمی در مورد Matrix ها توضیح داده شود تا با ذهنی باز تر به تحلیل کد بپردازیم:

یک ماتریس (matrix) دگرگونی شی یک ماتریس ۳ در ۳ با محتویات زیر می باشد.

در ماتریس های دگرگونی u ، v و w خواص ارائه قابلیت های اضافی است. کلاس ماتریس (matrix) تنها در فضای دو بعدی عمل می کند ، بنابر این همواره فرض می شود خصوصیت u و v مقدار ۰.۰ و خصوصیت w مقدار ۱.۰ می باشد. در نتیجه ماتریس ما به صورت زیر است :

شما می توانید ۶ خصوصیت دیگر را در ماتریس شی خود (a,b,c,d,tx,ty) را مقدار دهی کنید (set) و یا مقدار آن را دریافت کنید (get).

function flipHorizontal(displayObject:MovieClip , visiblePoint = true):void
{
	//دریافت متریکس کنونی شی و قرار دادن آن در یک متغیر
	var matrix:Matrix = displayObject.transform.matrix;

	trace(matrix.toString());//(a=1, b=0, c=0, d=1, tx=60.55, ty=207.5)
	//[ a  c  tx ]   =>   [ 1  0  60.55 ]
	//| b  d  ty |   =>   | 0  1  207.5 |
	//[ 0  0   1 ]   =>   [ 0  0   1    ]

	//مشخص کردن محل مرکز به صورت پویا
	var pointX:Number = displayObject.width / 2;
	var pointY:Number = displayObject.height / 2;

	//شعاع دایره مشخص کننده مرکز
	var pointRadius:Number = 5;

	var dspWidthDivide:Point = new Point(pointX,pointY);
	matrix.transformPoint(dspWidthDivide);

	if (visiblePoint)
	{

		//ایجاد دایره مربوطه به نمایش مرکز
		var point:MovieClip = new MovieClip();
		point.graphics.beginFill(0x000000);
		point.graphics.drawCircle(0 , 0 , pointRadius);
		point.graphics.endFill();
		//مختصات دهی دایره با توجه به مرکز تعیین شده;
		point.x = pointX - (pointRadius / 2);
		point.y = pointY - (pointRadius / 2);
		//افزودن دایره به شی مربوطه
		displayObject.addChild(point);
	}

	if (matrix.a > 0)
	{
		matrix.a = -1 * matrix.a;
		matrix.tx = displayObject.width + displayObject.x;
	}
	else
	{
		matrix.a = -1 * matrix.a;
		matrix.tx = displayObject.x - displayObject.width;
	}

	//اعمال ماتریکس جدید به شی مربوطه
	displayObject.transform.matrix = matrix;
}

//usuage
flipHorizontal(myMC1);
myMC1.rotation = 15;

حال ما برای چرخش افقی از ترکیب ماتریس دَوران و انعکاس استفاده می کنیم ، ابتدا مقدار مربوطه به ماتریس شی را گرفته (displayObject.transform.matrix) و در یک متغیر قرار می دهیم و حال می توانید همان طور که در بالا گفته شد به مقدارهای مربوطه به این شی دسترسی داشته باشیم و آنها را تغییر دهیم.

در مرحله بعد در کد زیر ماتریس دریافت شده را trace می کنیم تا از دریافت درست داده ها اطمینان حاصل کنیم. در کد برای درک بیشتر به صورت ماتریس هم توضیح داده شده است.

در کد زیر در مرحله بعد دو متغیر برای مشخص کردن وسط شی با تقسیم عرض و طول شی بر ۲ ایجاد می کنیم.

در مرحله بعد شعاع مربوطه به دایره مجازی که مشخص کننده مرکز چرخش هست را مشخص می کنیم.

سپس متغیر dspWidthDivide را که یک point است را ایجاد می کنیم و مقدارهای دو متغییر pointX و pointY را به عنوان آرگمان های آن وارد می کنیم ، حال می توانیم توسط این متغیر و متد matrix.transforPoint مرکز چرخش را به مختصات مورد نظرمان به صورت پویا تغییر دهیم.

در بخش بعدی کد ،اقدام به ایجاد شی دایره برای مرکز و مختصات دهی آن می کنیم.

در مرحله بعدی که مرحله اصلی می باشد ابتدا مقدار a شی خود را چک می کنیم در صورتی که بزرگتر از صفر باشد tx را برابر با عرض شی به اضافه مختصات x شی می کنیم و در غیر این صورت مختصات x شی را منهای عرض شی می کنیم و در هر دو حالت a را برابر با a*-1 مقدار دهی می کنیم.

در آخر نیز به خصوصیت transform.matrix شی displayObject مان مقدار جدید متغیر matrix را اعمال می کنیم.

در پایان نیز برنامه را تست می کنیم ، myMC1 یک MovieClip هست که توسط تابع برای ایجاد چرخش افقی در آن انتخاب شده است و در آخر نیز برای متوجه شدن چرخش و مبنای چرخش توسط متد rotation چرخشی در شی ایجاد شده است تا با توجه به دایره مشکی متوجه چرخش بر مبنای مرکز چرخش شوید.


دانلود سورس

Print Friendly
تگ ها :
پیوند مطلب قبلی
پیوند مطلب بعدی

درباره بهروز پولادرگ

متولد : ۵ مرداد سال ۱۳۶۷ ، حرفه : ادوبی فلش ، برنامه نویسی و طراحی وب ، طراحی گرافیک ، مالتی مدیا ، نرم افزار های تحت وب

4 نظر

  1. سلام اقا بهروز خسته نباشید . میخواستم بدونم که چطور میشه یک افکت برای بکگراند به صورت (حرکت یا ظاهر و ناپدید شدن)تصادفی ایجاد کنم ؟

    ممنون

    • سلام با چند مورد را به صورت پشت سر هم ایجاد کنید حال توسط فرمان Math.random می توانید شرطی ایجاد کنید که به صورت اتفاقی در هر مرحله به فریمی خاص برود
      راه دیگر هم باز توسط این متد هست و اتچ کردن شی مووی کلیپ مورد نظر به صورت رندوم به استیج است.
      اگر باز هم در نوشتن کد مربوطه مشکل داشتید بفرمایید

ارسال جواب

آدرس رایانامه شما منتشر نخواهد شد.فیلد های اجباری علامت گزاری شده اند *

*

رفتن به بالای صفحه