چیدمان حلزونی با استفاده از مختصات قطبی

هرگاه نیاز به چیدمان‌های دوار و کنترل شکل‌های دایره ای باشد، بهتر است که از مختصات قطبی استفاده شود. با توجه به این که فلش از مختصات کارتزین استفاده می‌کند، باید مختصات قطبی را به مختصات کارتزین تبدیل کرد. در این درس نحوه استفاده از این تبدیل برای دستیابی به آرایش حلزونی MovieClip‌ها آموزش داده می‌شود که یک نمونه از آن در شکل۱ آمده است.

شکل ۱- آرایش حلزونی MovieClip‌ها

در شکل ۲ محورهای مختصات کارتزین و قطبی و نحوه تبدیل آن‌ها آمده است.

شکل ۲- نحوه تبدیل مختصات قطبی به کارتزین

مراحل کار به شرح زیر می‌باشد:

۱- یک پروژه جدید Action Script 3.0 ایجاد کنید و برای مثال اندازه آن را ۸۰۰ در ۶۰۰ پیکسل در نظر بگیرید.

۲- در این درس بعنوان مثال ۶۰ MovieClip ایجاد شده است و به ترتیب از mc1 تا mc60 نامگذاری شده اند. توجه کنید که نقطه مبدا این MovieClip‌ها باید در گوشه چپ و وسط باشد (به فایل sample.zip توجه کنید).

۳- پنل Actions را باز کنید.

۴- کلاسه MovieClip را Import کنید.

var holder:MovieClip = new MovieClip();

5- حالا یک آرایه از MovieClip‌ها بسازید.

var fields:Array = [mc1, mc2, mc3, mc4, mc5, mc6, mc7, mc8, mc9, mc10, mc11, mc12, mc13, mc14, mc15, mc16, mc17, mc18, mc19, mc20, mc21, mc22, mc23, mc24, mc25, mc26, mc27, mc28, mc29, mc30, mc31, mc32, mc33, mc34, mc35, mc36, mc37, mc38, mc39, mc40, mc41, mc42, mc43, mc44, mc45, mc46, mc47, mc48, mc49, mc50, mc51, mc52, mc53, mc54, mc55, mc56, mc57, mc58, mc59, mc60];

6- در ادامه سه متغیر یرای شعاع، زاویه و محور سوم (در مختصات استوانه ای) ایجاد می‌شود. در این مثال از متغیر scaleX , scaleY برای محور سوم استفاده می‌شود. مقادیر اولیه برای این ۳ متغیر را تعیین کنید.

var radius:Number = 150;
var theta:Number = 0;
var scale:Number = 1;

7- یک متغیر از نوع MovieClip بعنوان حامل ایجاد کنید.

var holder:MovieClip = new MovieClip();

8- سپس به وسیله یک حلقه، MovieClip‌ها در حامل چیده می‌شود.

for (var i:Number = 0; i < fields.length; i++) {
var item_holder:MovieClip = MovieClip(fields[i]);
var radian:Number = theta * Math.PI / 180;
item_holder.x = radius * Math.cos(radian);
item_holder.y = radius * Math.sin(radian);
item_holder.rotation = theta;
item_holder.scaleX = scale;
item_holder.scaleY = scale;
radius -= 2;
theta += 7;
scale -= 0.01;
holder.addChild(item_holder);
}

در این حلقه:

• ابتدا item_holder بعنوان شاخص هر MovieClip تعریف شده است.
• در خط دوم مقدار زاویه از درجه به رادیان تبدیل شده است.
• سپس با توجه به شکل ۲ مقادیر شعاع و زاویه در مختصات قطبی به مقادیر x و y در مختصات کارتزین تبدیل شده است.
• در ادامه اندازه هر MovieClip بعنوان محور سوم تعریف شده است.
• در نهایت به منظور دستیابی به چیدمان حلزونی مقادیر شعاع، زاویه و اندازه تغییر کرده است تا MovieClip بعدی با مقادیر جدید چیده شود.
• سپس MovieClip به حامل اضافه شده است.

۹- در آخر موقعیت حامل تعیین و به stage اضافه می‌شود.

holder.x = 350;
holder.y = 250;
addChild(holder);

+ منبع