اطلاعات این نوشته
طراحی و ترسیم داینامیک در فلش - Drawing API
طراحی و ترسیم داینامیک در فلش از مباحث کاربردی و پیچیده ایست که اگر درک کنیم و بتوانیم درست استفاده کنید خیلی راحت تر از ترسیم در محیط خود فلش برای ما عمل خواهد کرد ، با چند خط کد چندین ساعت دوباره کاری را حذف خواهیم کرد و با کمی خلاقیت در کد نویسی اولیه و روش استفاده صحیح می توانید یک بار بنویسید و هزاران بار استفاده کنید ، این API از ورژن MX فلش به ان اضافه شد
فلش یا پلتفرم فلش را اگر بخواهم در یک کلمه تعریف کنم ، می گویم داینامیک ! لود دیتای داینامیک ، لود ایکس ام ال و تکست ، صدا به صورت داینامیک ، انیمیشن به صورت داینامیک ، ترسیم و طراحی داینامیک ، کنترل مووی ، لود و پخش ویدیو به صورت داینامیک افکتهای داینامیک و همه داینامیک ... حقیقتا قدرت اکشن اسکریپت در کنترل اجزا فلش انعطاف پذیری کاملی را برای این پلتفرم ایجاد کرده که شناخت کامل این نیروست که ما را به یک طراح و برنامه نویس خوب در این پلتفرم تبدیل خواهد کرد .
بحث کنترل اجزا فلش مبحث مفصلی ست که شاید چندین مقاله جداگانه نیاز باشد تا بتوانیم حداقل آشنایی را با این سیستم ایجاد کنیم و این سری مقالات و آموزش ها هم برای همین هدف است و یکی از توانمندی ها اصلی فلش رو در این مبحث با هم مرور خواهیم کرد .
طراحی و ترسیم داینامیک در فلش از مباحث کاربردی و پیچیده ایست که اگر درک کنیم و بتوانیم درست استفاده کنید خیلی راحت تر از ترسیم در محیط خود فلش برای ما ترسیم خواهد کرد ، با چند خط کد چندین ساعت دوباره کاری را حذف خواهیم کرد و با کمی خلاقیت در کد نویسی اولیه و روش استفاده صحیح می توانید یک بار بنویسید و هزاران بار استفاده کنید ، این API از ورژن MX فلش به ان اضافه شد ، با اینکه نزدیک به 5 سال از ارایه این API می گذرد اما پروژه های کمی اجرا شده توسط آن را شاهدیم و حتی اینکه الان به آن می پردازیم خود جای بحث دارد. ادوبی Drawing API اختصاصی فلش پلیر 10 را ارایه می کند و ما داریم به Drawing API فلش MX می پردازیم .
در طراحی داینامیک یا پویا شما سعی خواهید کرد تا اجزا مورد نیاز خود را با کد نویسی ایجاد کنید ، مثلا یک مریع با یک گرادیانت سبز به ابی را با کد نویسی ترسیم کنید و همینطور یک دکمه یا Button رو با استفاده از این سیستم طراحی کنید . فکر کنید به اینکه یک سایت را کاملا با کد نویسی بسازید ، گذشته از اینکه حجم کار بشدت کم خواهد بود ، شما با یک سیستم پویا می توانید ، رنگ بندی جاگیری و نوع کاربری اجزا را در زمان اجرا کاملا کنترل کنید.
قبل از اینکه شروع کنم برای ایجاد علاقه و همچنین به عنوان یک نمونه خوب از کار با طراحی داینامیک ( و البته آشنایی با ما ! ) سایت FatehSanat.com را ببینید ، این سایت کاملا با طراحی داینامیک ایجاد شده است ، همه اجزا ، همه گرادیانت ها و کلا هر چیزی را که وکتور می بینید با کد نویسی ایجاد شده ، یک نمونه خوب دیگه هم AbanAirCooler.com است ، این سایت هم با استفاده از طراحی داینامیک یا Drawing API اکشن اسکریپت 2.0 اجرا شد ! .
ترسیم داینامیک / Drawing API :
ما در این مبحث Drawing API و روش های ترسیم برای اکشن اسکریپت 2.0 را بررسی خواهیم کرد ، در اکشن اسکریپت 3.0 این متد ها به جای خود باقی هستند اما کمی روش کار متفاوت با اکشن اسکریپت 2.0 ست ، دلیل اصلی این تفاوت به خاطر DisplayObject و زیر کلاس Graphics class ایست که در یک فرصت دیگر به انها خواهیم پرداخت .
برای ترسیم داینامیک در فلش از متدهای معرفی شده در کلاس MovieClip و کلاس Matrix استفاده میکنیم ، برای ترسیم گرادیانت باید دانش اولیه در مورد ماتریس ها و شکل عملکرد انها داشته باشید .
در کلاس موی کلیپ ما متد های زیر را داریم :
beginFill ()-
beginGradientFill () clear ()curveTo ()-
endFill () -
lineTo () lineStyle ()-
moveTo ()
تابع beginFill برای شروع به ترسیم هر نوع شکل و یا Shape استفاده میشود البته Shape و یا شکلی که با یک رنگ Solid پر شده باشد ، دو آرگمان می گیرد ، کد رنگی که شکل درخواستی با ان پر میشود و دیگری آلفای این رنگ ، این تابع چیزی را رسم نمی کند بلکه به کمپایر خواهد گفت ، شکلی که با توابع lineTo و curveTo ترسیم خواهد شد با این رنگ پر شود ، به عبارت ساده تر این تابع خصوصیات رنگی شکل را مشخص خواهد کرد .
تابع beginGradientFill برای ترسیم هر نوع شکل دلخواهی استفاده می شود مثل تابع بالایی با این تفاوت که اینبار میتوانید برای رنگ داخل شکل ، گرادیانت تعریف کنید .
تابع Clear برای پاک کردن هر چیزی که به صورت داینامیک برای یک مووی کلیپ ترسیم کردید استفاده می شود .
تابع curveTo برای ترسیم کمان از یک نقطه به نقطه دیگر
تابع endFill برای پایان دادن به ترسیم یک شکل
تابع lineTo برای ترسیم یک خط از یک نقطه به نقطه دیگر ، البته درون این شکل با رنگ و یا گرادیانتی که با استفاده از beginFill یا beginGradientFill مشخص کردید پر خواهد شد .
تابع lineStyle خصوصیات Stroke و یا خط دور تا دور شکل را مشخص خواهد کرد ، اگر در ابتدا از beginFill یا beginGradientFill استفاده نکنید و فقط lineStyle را تعریف کنید فقط یک شکل تو خالی با Border و یا خط دور تا دوری که تعریف کردید خواهید داشت .
تابع moveTo به کمپایر می گوید که از این نقطه شروع به ترسیم کن .
نمونه زیر را بررسی کنید , به عنوان راهنمایی ، یک نقطه سمت راست را انتخاب کنید و متناوب کلیک کنید !
با کمی خلاقیت آثار هنری خاص خود را ایجاد کنید و البته دبیر خانه جشنواره از همه آثار استقبال خواهد کرد !!
جدا خوشحال خواهیم شد آثار هنری شما رو ببینیم .
کد زیر مربوط به SWF بالا می باشد کد را در فریم اول یک فایل FLA کپی و کمپایل کنید .
0xFF3333, 0xFF99f0, 0x339f99, 0xCC33f6, 0xFFf333];
var i = 0;
this.onMouseDown = function() {
i++;
var mc = this.createEmptyMovieClip("mc"+i, i);
mc.beginFill(c[random(c.length)],random(100)+20);
mc.lineStyle(1,0);
mc.moveTo(0,150);
mc.lineTo(_xmouse,_ymouse);
mc.lineTo(_xmouse+20,_ymouse+20);
};
this.onEnterFrame = function() {
for (var j = 0; j<i+1; j++) {
this["mc"+j]._rotation++;
updateAfterEvent();
}
};
var bc = this.createEmptyMovieClip("bc", -1);
var t = bc.createTextField("txt", 1, 10, 5, 100, 20);
t.text = "CLEAR";
with (bc) {
beginFill(0xcccccc,100);
lineTo(100,0);
lineTo(100,30);
lineTo(0,30);
lineTo(0,0);
}
var bf = bc.duplicateMovieClip("bf", -2);
var t = bf.createTextField("txt", 1, 10, 5, 100, 20);
t.text = "FULLSCREEN";
bc._x = 418;
bf._x = 418;
bc._y = 200;
bf._y = 240;
bc.onPress = function() {
for (var k = 0; k<i+2; k++) {
_root["mc"+k].removeMovieClip();
}
};
bf.onPress = function() {
var ds = Stage.displayState
Stage.displayState=ds=="normal"?"fullScreen":"normal";
};
Stage.addListener(this);
this.onResize = function() {
bc._x = 160+Stage.width/2;
bf._x = 160+Stage.width/2;
};
روش استفاده از این متدها خیلی خوب و با نمونه در Help نرم افزار فلش توضیح داده شده است و توضیح انها توسط من چیزی فراتر از این توضیح نخواهد بود و نمونه هایی هم که در Help ارایه شده است کاملا گویاست ، برای دسترسی به این بخش ها نام هر تابع را در Help جستجو کنید. فقط تایع beginGradientFill کمی پیچیده است لذا به توضیح مفصل این تابع می پردازیم .
تایع beginGradientFill :
تابع beginGradientFill آرگمان های زیر را نیاز دارد :
fillType,
colors,
alphas,
ratios,
matrix,
spreadMethod,
interpolationMethod,
focalPointRatio
);
fillType : یک String نیاز دارد تا نوع گرادیانت را مشخص کند ، دو گزینه دارید linear یا radial ، در حالت linear گرادیانت به صورت خطی و تحت زاویه ای که وابسته به ماتریس است رسم خواهد شد و اگر Radial را انتخاب کنید به صورت مدور و دایره وار رسم می شود .
Colors : دو رنگی که طیف گرادیانت را تشکیل می دهد ، یک Array باید باشد مثلا [0xFF0000 ,0x00FF00 ]
Alphas : آلفای هر رنگ و یا الفای ابتدا و انتهای گرادیانت که باز هم یک آرایه باید باشد مثلا [100,50]
Ratios : Ratios هم یک آرایه دو عضوی باید باشد که به صورت ساده می توان آنرا جایگاه هر رنگ برای پخش شدن در طول گرادیانت تعریف کرد ، مثلا فرض کنید که یک مستطیل به طول 255 پیکسل دارید و می خواهید سمت راست از قرمز شروع شود و در آخرین نقطه سمت چپ به سبز ختم شود مقدار ها باید [0,255] باشد حالا اگر مثلا بخواهید 100 پیکسل اخر سمت چپ سبز باشد مقدار ها [100,255] خواهد بود ، این مقدار ها از 0 تا 255 خواهند بود . در کل 0 یعنی اخرین پیکسل در یک سمت شکل ( مثلا راست ) و 255 یعنی اخرین پیکسل در سمت دیگر شکل ( مثلا چپ )
توجه : مقدار های colors و Alphas و Ratios وابسته به هم هستند و جز اول آرایه alpha مقدار آلفای رنگ اول از آرایه Colors را مشخص خواهد کرد و همچنین عنصر اول Ratios جایگاه رنگ اول را در گرادیانت مشخص خواهد کرد .
Matrix : اما ماتریس ... ما برای ترسیم گرادیانت به اصلی ترین عنصری که نیاز داریم ماتریس است ، در حالت عادی ما دو راه برای ارایه ماتریس داریم:
یک ماتریس 3 در 3 را برای ترسیم گرادیانت تعریف کنیم که خصوصیات در خواستی برای ترسیم گرادیانت را مشخص می کند ، برای تعریف این ماتریس ما یک آبجکت با عناصر a,b,c,d,e,f,g,i تعریف می کنیم ، مثلا :
همانطور که می بینید تشخیص درست هر کدام از عناصر این آبجکت برای رسیدن به گرادیانت دلخواه کمی مشکل است .
راه دوم تعریف یک آبجکت با مشخصات matrixType, x, y, w, h, r است که matrixType از اسمش پیداست و فقط یک مقدار انهم “box” می گیرد ، x , y که x,y گرادیانت نسبت به مووی کلیپ اصلی یا Parent می باشد و w,h هم طول و عرض گرادیانت است ، اما r زاویه گرادیانت در مقایس رادیان می باشد . برای تبدیل هر زاویه باید ان زاویه را بر 180 تقسیم کنیم و در عدد PI ضرب کنیم . مثلا ماتریس اولی با زاویه 45 درجه ( در ماتریس بالا زاویه گرادیانت 0 است ) به صورت زیر خواهد بود .
matrixType:"box",
x:100, y:100, w:200, h:200,
r:(45/180)*Math.PI
} ;
کمی پیچیده به نظر می رسد اما با کمی تمرین به راحتی گرادیانت های زیبا رسم خواهید کرد ، کمی زمان برای تمرین نیاز دارید .
spreadMethod :اسپرید متد یک String برای مشخص کردن نحوه ترسیم گرادیانت است و سه گزینه داریم ، pad , repeat ,reflect که درصورتی که نوع خاصی را مشخص نکنید pad در نظر گرفته خواهد شد .
interpolationMethod : نوع ترسیم طیف رنگی گرادیانت را مشخص می کند ، ما در ترسیم طیف گرادیانت در پلتفرم فلش دو گزینه دارین RGB و linearRGB ، در متد اولی یعنی RGB رنگها درون طیف دقیقا مشابه همان شناختی که از گرادیانت داریم ساخته می شود ، یعنی پخش شدن رنگ ها درون همدیگر طیف رنگی را می سازد اما در linearRGB رنگها درون هم پخش نمی شوند بلکه طیف رنگهای میانی ساخته شده و در کنار هم قرار می گیرند . مقدار پیش فرض RGB خواهد بود .
focalPointRatio : فوکال پوینت در حالتی که نوع گرادیانت radial است کاربرد دارد و فاصله نقطه تمرکز گرادیانت از دو سوی گرادیانت را مشخص می کند ، مقدار 1 تا 1- مجاز است که مقدار صفر 0 یعنی میانه گرادیانت ، اما مقدار 1 یعنی نقطه تمرکز گرادیانت در اخرین نقطه یک سمت از شکل ما متمرکز شود و مقدار 1- یعنی تمرکز در سمت دیگر .
کلاس ماتریس و کمک به Drawing API :
همانطور که دیدید سخت ترین قسمت در ترسیم گرادیانت مبحث ماتریس بود ، ادوبی در فلش پلیر 8 کلاس ماتریس را ارایه می کند که یکی از متد های اصلی آن createGradientBox می باشد که برای رفع معضل ماتریس نویسی در drawing API ارایه شده است با استفاده از این تابع ترسیم گرادیانت باز هم ساده تر خواهد شد .
آرگمانها مشخص است و مانند تعریف ماتریس در حالت دوم می باشد ، تجربه به شما نشان خواهد داد که این تابع تا چه حد درک صحیح گرادیانت ها و ترسیم دقیق انها را باعث شده است و در طول عمر کد نویسی خود بارها از این تابع استفاده خواهید کرد به عنوان مثال کد زیر را امتخان کنید
var matrix:Matrix = new Matrix();
matrix.createGradientBox(100,100,0,50,50);
var mc:MovieClip = this.createEmptyMovieClip("mc", 1);
var colors:Array = [0xFF0000, 0x00FF00];
var alphas:Array = [100, 100];
var ratios:Array = [0, 255];
mc.beginGradientFill("linear",colors,alphas,ratios,matrix);
mc.lineTo(0,150);
mc.lineTo(150,150);
mc.lineTo(150,0);
mc.lineTo(0,0);
امیدوارم که این مقاله و یا بهتر ، آموزش کمک موثری در شناخت این API داشته باشد و بتوانیم در آینده مجموعه کارهای زیبایی را از جانب شما با استفاده از این متد ببینیم .
کلمات کلیدی برای این نوشته :
ممنون !
واقعا عالی بود !
بسيار عالي بود.
متشكرم
سلام
میشه بگید سایتی مثل Fatesanat هزینه طراحی و پیاده سازیش چقدر بوده؟
خيلي جالب بود استفاده كرديم . موفق باشيد
خدا خیرتون بده چقدر دنبال این چیزا می گشتم