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

yaa110

کاربر فعال
Download: sample.zip

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


001.jpg

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


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


002.jpg

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

مراحل کار به شرح زیر می باشد:
۱- یک پروژه جدید Action Script 3.0 ایجاد کنید و برای مثال اندازه آن را ۸۰۰ در ۶۰۰ پیکسل در نظر بگیرید.
۲- در این درس بعنوان مثال ۶۰ MovieClip ایجاد شده است و به ترتیب از mc1 تا mc60 نامگذاری شده اند. توجه کنید که نقطه مبدا این MovieClip ها باید در گوشه چپ و وسط باشد (به فایل sample.zip توجه کنید).
۳- پنل Actions را باز کنید.
۴- کلاسه MovieClip را Import کنید.
کد:
import flash.display.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 برای محور سوم استفاده می شود. مقادیر اولیه برای این ۳ متغیر را تعیین کنید.
کد:
[COLOR=#333333]
var radius:Number = 150;
var theta:Number = 0;
var scale:Number = 1;[/COLOR]

7- یک متغیر از نوع MovieClip بعنوان حامل ایجاد کنید.
کد:
var holder:MovieClip = new MovieClip();
8- سپس به وسیله یک حلقه، MovieClip ها در حامل چیده می شود.
کد:
[COLOR=#333333]
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);
}[/COLOR]

در این حلقه:

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


کد:
holder.x = 350;
holder.y = 250;
addChild(holder);

http://flashcenter.ir/?p=393
 

جدیدترین ارسال ها

بالا