-
گردباد کلمات
آموزش ساخت گردباد کلمات در فلش نیاز به برنامه نویسی حرفه ای در فلش دارد ، پس قبل از هرچیز فایل آماده این آموزش را دریافت کنید . دریافت
ساخت گردباد را از پایه شروع می کنیم ؛ البته بجای نوشتن کدهای بعد در فلش می تونید از فایل اماده استفاده کنید .
1- یک فایل جدید فلش بازکنید . در این فایل جدید یک سمبل برش فیلم ایجاد کنید Ctrl+F8 در کادر محاوره ای Create New Symbol نام TextTornado Word را در کادر Name نوشته و روی دکمه Advanced کلیک کنید ( آگر قبلا باز نشده است ) تا دسترسی به گزینه های قسمت Linkage ممکن شود . کادرهای انتخاب Export for ActionScript و Export in first frame را فعال کنید . عبارت textTornadoWord را به عنوان شناسه پیوند در کادر Identifier تایپ کنید . بعدا خواهیم دید از این شناسه پیوند در چه مورد استفاده می شود . روی دکمه Ok کلیک کنید تا وارد محیط ویرایش سمبل شویم .
2- در محیط ویرایش سمبل textTornadoWord یک لایه جدید ایجاد کنید . نام لایه بالایی را به definition ونام لایه پایین را به word تغییر دهید .
3- در لایه Word با استفاده از ابزار Text ( کلید T ) یک کادر متن پویا ایجاد کنید .
4- دقت کنید در پنل Property inspector گزینه dynamic از منوی Text type انتخاب شده باشد ، سپس عبارت txtWord را در کادر Var بنویسید .
5 - برای برنامه نویسی این پروژه ، عملکرد برش فیلم TextTornadoWord را بطور از پیش تعیین شده تهیه می کنیم تا بتوانیم از آن بارها در وضعیت های مختلف استفاده کنیم ، فعلا ی خواهیم یک عنصر کلمه ایجاد کنیم که نیروهای گوناگون بر آن اثر می گذارند .
6- این کدها را در فریم 1 از لایه definition برش فیلم TextTornadoWord وارد کنید .
کد:
#initclip
// constructor
function TextTornado() {
this.setup();
}
// allow ParticleClass to inherit MovieClip properties
TextTornado.prototype = new MovieClip();
// instance methods
TextTornado.prototype.setup = function() {
// number of rotos
this.numRotos = 13;
// attach one rotational slice for each word
for (n=0; n<this.numRotos; n++) {
// give the rotational slice a name
var nombre = "roto"+String(n);
// distribute evenly around a circle
var init = { theta : n*(360/this.numRotos) };
// create and attach the new rotational slice
neo = this.attachMovie("textTornadoRoto", nombre, n, init);
}
// set the tornado in motion by watching them mouse
this.onEnterFrame = this.watchMouse;
};
TextTornado.prototype.watchMouse = function() {
// rotational speed of text tornado is directly related to horizontal mouse position
this.speed=this._xmouse/30;
};
// Connect the class with the linkage ID for this movie clip
Object.registerClass("textTornado", TextTornado);
#endinitclip
کل مجموعه کدها با initclip# شروع و به endinitclip# ختم می شوند . این دو واژه کلیدی به فلش می گویند که این عناصر را پیش از هر عنصر دیگر آماده سازی کند .
7- یک سمبل برش فیلم جدید ایجاد کنید ( Ctrl+F8 ) درکادر محاوره ای Create New Sybmol عبارت TextTornadoRoto را در کادر Name تایپ کنید . همانند مراحل قبل دو لایه برای آن ایجاد کنید و لایه ها را با نام های قبلی سیمبل TextTornadoWord نام گذاری کنید .
8- چند نمونه از برش فیلم TextTornadoRoto را از کتابخانه به لایه Words بکشید . برای کسب نتیجه بهتر ، کلمات را سمت راست نقطه برش فیلم ( علامت بعلاوه وسط صفخه ) قرار دهید .
9 - حال روش برش فیلم TextTornadoRoto را برنامه نویسی می کنیم . این کدها را در فریم 1 از لایه definition ( در برش فیلم TextTornadoRoto ) بنویسید .
کد:
#initclip
// constructor
function TextTornadoRoto() {
this.setup();
}
// allow ParticleClass to inherit MovieClip properties
TextTornadoRoto.prototype = new MovieClip();
// instance methods
TextTornadoRoto.prototype.setup = function() {
this.onEnterFrame = this.spin;
};
TextTornadoRoto.prototype.spin = function() {
// increment rotation
this.theta = this.theta+this._parent.speed;
// keep theta reasonable
this.theta = this.theta%360;
// calculate spherical modifiers [-1..1]
var xbit = Math.sin(Math.PI/180*this.theta);
var ybit = Math.cos(Math.PI/180*this.theta);
// scale to show rotation
this._xscale = xbit*100;
// make word opaque when close, transparent when distant
this._alpha = 30+(ybit+1)*50;
// this.swapDepths(Math.round(this._alpha*4));
};
// Connect the class with the linkage ID for this movie clip
Object.registerClass("textTornadoRoto", TextTornadoRoto);
#endinitclip
ّبرش فیلم TextTornadoRoto نیز از nitclip# و endinitclip# برای شروع و پایان استفاده کرده است .
10- برای عنصر آخر سیستم در خط زمان Timeline یک سمبل برش فیلم جدید ایجاد کنید (Ctrl+F8) . در کادر محاوره ای Create New Symbol عبارت TextTornado را در کادر Name وارد کنید . همانند دو سیمبل قبل دولایه جدید ایجاد کنید و با شیوه نام گذاری قبلی کار خود را ادامه دهید .
11- این کدها را در فریم 1 از لایه definition تایپ کنید :
کد:
#initclip
// constructor
function TextTornado() {
this.setup();
}
// allow ParticleClass to inherit MovieClip properties
TextTornado.prototype = new MovieClip();
// instance methods
TextTornado.prototype.setup = function() {
// number of rotos
this.numRotos = 13;
// attach one rotational slice for each word
for (n=0; n<this.numRotos; n++) {
// give the rotational slice a name
var nombre = "roto"+String(n);
// distribute evenly around a circle
var init = { theta : n*(360/this.numRotos) };
// create and attach the new rotational slice
neo = this.attachMovie("textTornadoRoto", nombre, n, init);
}
// set the tornado in motion by watching them mouse
this.onEnterFrame = this.watchMouse;
};
TextTornado.prototype.watchMouse = function() {
// rotational speed of text tornado is directly related to horizontal mouse position
this.speed=this._xmouse/30;
};
// Connect the class with the linkage ID for this movie clip
Object.registerClass("textTornado", TextTornado);
#endinitclip
برش فیلم TextTornado بلافاصه پس از خلق اماده مراقبت از حرکات ماوس است . آماده سازی توسط تابع Setup انجام میشود .
12 - در مرحله آخر باید آرایه ای از کلماتی که می خواهیم درون گردباد باشند ایجاد کنیم . این کار در خط زمان اصلی انجام می شود . این کدها را در فریم 1 از هر لایه ای در خط زمان اصلی تایپ کنید :
کد:
// register root as environment
Object.environment = this;
this.words = "friends of ed code poetry tornado left climbed emily stormy weather particle cow time gonna need a bigger boat data lost swept dead things mikey nothing leaving home today";
// create array of words to be used by text tornado
this.wordlist = this.words.split(" ");
13 - یک یا دو نمونه از برش فیلم TextTornado را به صحنه اصلی کشیده و فیلم خود را امتحان کند .
کد:
http://www.amozesh.featdesign.ir/flash/Source/dl/flash/textTornado/textTornado.fla
www.featdesign.ir
-
-
Wow
سلام دوسته من
ممنونم آقا رضا . خیلی جالبه
موفق باشی
