教程
這次給大家?guī)鞰OOCK在世界性FLASH大會:FF2K1大會上的演說,要說到Action的權(quán)威,當然要數(shù)MOOCK,他寫的ASDG(一本書)是可以和FLASH自帶的AS字典相提并論的寶貝,
Flash AS基礎(chǔ)精典教程
。雖然他是這樣一個高高手,但是他的這個演講卻是非常的淺顯,如果你某處讀起來覺得難,那也一定是chocobo翻譯得不好。(有些地方實在是太淺,我受不了就改了 )這篇文章預(yù)算的演講時間很長,所以讀起來也會覺得較長,你可以分開來讀。
還有,本文是關(guān)于FLASH5的AS的,畢竟FLASH4的AS已經(jīng)淘汰。
第一章:由O開始
為了示范,MOOCK將會做一個多選題問答的動畫來做為例子。
這個例子以4種不同版本的方法來實現(xiàn)。
對于用戶來說,4種版本使用起來將沒有區(qū)別,只是對于我們開發(fā)者來說,研究的就是如何改進這些FLASH代碼的結(jié)構(gòu)與組織。
改進的重點在于:
*更便易的維護
*更便易的擴展
*更快捷的建設(shè)
要牢記的是,學(xué)習(xí)編程是一個過程(process)而不是一個事件(event)。如果你第一次學(xué)習(xí)到的時候不能照著完成也不必擔心。接下來,MOOCK說到為了照顧沒有多少編程經(jīng)驗的菜鳥,會由最最最簡單的開始。
關(guān)于計算機語言:
編程語言是用來發(fā)信息給電腦,從電腦接受信息的,編程語言也有詞匯表和文法,如人類的語言類似,通過編程語言我們可以告訴電腦去做什么,也可以從他那獲得信息.
關(guān)于語法和邏輯
學(xué)習(xí)編程的思想比學(xué)習(xí)一種語言的語法重要.假設(shè)FLASH是懂我們語言的單詞的,我們對FLASH說:“Flash, 讓一個球在屏幕里面彈來彈去吧”。FLASH會什么都做不了,F(xiàn)LASH要我們用他的世界懂的東西,例如:movie clips, buttons, frames,來描述它要做的事,那我們再說一次:“Flash, 讓一個名字叫ball_one的movie clip在屏幕里面彈來彈去吧”,我們已經(jīng)用MC這個FLASH懂的東西來描述了,但FLASH還是什么都不做,因為它需要更多的信息:
*這個球有多大
*它放在哪里?
*一開始它首先往哪個方向運動?
*它初始的速度是多少
*它在屏幕的那一個范圍之內(nèi)彈來彈去呢?
*彈來彈去要持續(xù)多久呢?
看來我們需要有邏輯結(jié)構(gòu)地告訴FLASH它應(yīng)該怎么去做
1、一個球指的是一個叫ball_one的圓形MC,直徑50像素
2、還有一個方形MC叫square,邊長300像素
3、將ball_one放在square上某處
4、以一個隨機的角度,75像素每秒的速度開始移動ball_one
5、如果ball_one接觸到square的某邊,就彈回
6、一直不停地運動下去,知道我們讓它停
如果FLASH真的懂我們語言的單詞,他應(yīng)該知道如何開始做了
總結(jié)一下關(guān)鍵點:
無論是使用什么語言,編程思想的藝術(shù)都在于用如何將邏輯步驟列出
在你開始將要做的事用計算機語言描述之前,用我們?nèi)祟惖恼Z言描述一次會很有幫助
即使你將他們翻譯成任何的計算機語言,他們的邏輯步驟應(yīng)該是一樣的
電腦不懂用假設(shè)完成去你的想法,他們沒有思考能力(chocobo:就是你要把要求完全無遺漏地寫出來讓它運行)
第二章:基礎(chǔ)
首先了解如何在FLASH輸入程序
在FLASH菜單Window里面Actions可打開ACTION面板,ACTION面板分右面的腳本窗,和左面的工具窗
腳本窗就是放腳本的地方,而工具窗用于快速地輸入各種ACTION,運算符,函數(shù),屬性,對象
MOOCK建議大家使用專家模式,在FLASH菜單的Edit的Preferences的Actions panel里面選Expert Mode,以后每次打開ACTION面板都會自動設(shè)置為專家模式(專家模式可直接輸入代碼,初學(xué)者學(xué)下去就會知道,很多代碼無法在普通模式里輸入)
AS的一些概念
所有代碼都需存于某個地方,可以是frame(幀), button(按鈕), or movie clip(電影夾子)。
只要你選擇了某按鈕或MC,你之后輸入的代碼就存放在它的上面了,注意此時ACTION面板上方提示為Object Actions。同理你也可以將代碼存放于幀,不過此時提示為Frame. Actions。
當你在專家模式的時候仍無法輸入代碼,你首先要檢查你是否選擇了frame, button, 或MC來存放代碼。
然后我們象學(xué)所有語言一樣吧,來個HELLO WORLD吧
在ACTION面板輸入
var message = "HELLO WORLD";
trace (message);
然后我們按CTRL和ENTER鍵,看到結(jié)果了嗎?
以下兩章比較基礎(chǔ)。MOOCK是騙演講費嗎?
第三章:解讀
第一行代碼:var message = "HELLO WORLD";
告訴FLASH記住一個名字叫message的容器(通常在計算機里稱為變量(variable),在FLASH里面,變量可以裝文字,和可以裝數(shù)字)里面裝了這樣的數(shù)據(jù)(datum),內(nèi)容為:"HELLO WORLD"
“=”等號是一個常用的運算符號(operators),在FLASH里面它不是代表相等,而是代表賦值
var 命令的含義是宣布給整個電影,此變量的內(nèi)容是什么。
第二行代碼:trace (message);
就是要FLASH顯示message里面的內(nèi)容,為什么FLASH能輸出內(nèi)容呢,因為當你按CTRL+ENTER又或者在網(wǎng)上打開這個電影的時候,你輸入的每一段Action Scrpit代碼,都會通過FLASH的解釋器(interpreter)來解讀然后執(zhí)行
如果解釋器能解釋你的代碼,他會運行它,并返回你要返回的結(jié)果,如果解釋器看不懂你的代碼,他也會返回錯誤代碼——告訴你錯誤的原因
通常,我們發(fā)給解釋器的命令不只命令這么簡單,還包括命令的內(nèi)容例如trace (message); 這個trace輸出命令的內(nèi)容就是message,計算機里就稱為參數(shù)(argument或parameter),如果一個命令支持多個參數(shù),參數(shù)之間一般用“,”來分割
第四章 還有一些概念
表達式(expression):(2 + 3) * (4 / 2.5) - 1可稱為一個表達式,"a"+"b"也是表達式,需要解釋器運算才得到結(jié)果的值,一個相反的概念,不需要運算的直接引用的,稱為literal
條件(conditionals):(look at a series of options and make a decision about what to do based on the circumstances)
不翻譯了,大概意思就是美女穿著新衣上街,會先看看外面會否下雨,這就叫條件判斷啦
if(天氣=="下雨"){trace("還是帶把雨傘吧")}
循環(huán)(loop):如果要輸出5個數(shù)字,你是寫5遍trace命令嗎?更多的就不行了吧
你可以用while和for命令來完成重復(fù)的動作
事件(events):放在frame里面的代碼只要電影播放到就會執(zhí)行,放在MC、button的代碼則只在解釋器發(fā)現(xiàn)預(yù)先設(shè)置好的事件被觸動的時候執(zhí)行。最典型的就是一下鼠標點擊按鈕造成press時間啦。
函數(shù)(functions):將一組程序打包成一句命令來調(diào)用他,其實FLASH里面的很多命令就是函數(shù):trace、play、gotoAndStop等等都是。
第五章 開始第一個版本的選擇題的制作
多選題共有兩道
如圖,大家應(yīng)該養(yǎng)成一個好習(xí)慣,用一個獨立的層來放置代碼,并把該層放到最上面會更便于修改。
第二層則獨立放置Label。不要覺得麻煩,只要你想到世界上大部分好的閃客都是如此做的,你就不會嫌麻煩了。
以下的層放的是選擇題的內(nèi)容,如上圖
開始創(chuàng)建題目
在question 1層的第一幀,寫上題目"When were movie clips introduced into Flash?" (什么時候FLASH開始引入電影夾子的概念?)
再寫上三個選項:Version 1, Version 2, Version 3
跟著我們再做一個用來選擇的方框按鈕,從Library里面拖出這樣的三個按鈕,分別放到各個選項的前面。
第二題的創(chuàng)建我們用第一題來做個模版,選擇question 1層的第一幀,選擇菜單上的Edit>>Copy Frames
再選擇question 2的第十幀,Edit>>Paste Frames 將第一題復(fù)制過來了
當然問題要改成"When was MP3 audio support added to Flash?" (什么時候FLASH開始支持MP3格式導(dǎo)入?),答案也要改成Version 3, Version 4, Version 5
數(shù)據(jù)初試化
雖然是個很簡單的FLASH,但是象其他復(fù)雜的FLASH一樣,先告訴FLASH要用到的數(shù)據(jù),例如題目的答案等,這是個好習(xí)慣,越復(fù)雜的FLASH,受惠越多
正常來說定義數(shù)據(jù)應(yīng)該LOADING結(jié)束之后的。
為了把題目定在第一題,ACTION還需要一句stop();
選擇第一幀,在ACTION面板里面輸入代碼
// init main timeline variables
var q1answer; // user's answer for question 1 第一題用戶的答案
var q2answer; // user's answer for question 2 第二題用戶的答案
var totalCorrect = 0; // counts number of correct answers 答對的題數(shù)
var displayTotal; // text field for displaying user's score 顯示用戶分數(shù)的變量
// stop the movie at the first question
stop();
你會發(fā)現(xiàn)//開頭的那一行代碼都變了色,//代表的是注釋,是用來輔助閱讀代碼用的,對代碼執(zhí)行沒有影響(是的,你在里面寫笑話,寫小說都可以,不會影響你的FLASH的^-^)
我們定義了四個將要用到的變量,用途已經(jīng)在注釋里面寫了,寫注釋也是一個好習(xí)慣
關(guān)于命名變量名
變量起名displayTotal,意思是 display total,因變量名不能使用空格和破折號,所以用第二個單詞的開始字母大寫,以此分隔單詞
一些程序員也喜歡用下劃線:display_total
記住一定要給你的變量起一個一眼就能識別意義的名字
添加label
我們知道第二題是在第10幀的,我們只需要一句AS:gotoAndStop(10); 就可以執(zhí)行第二個問題了
不過MOOCK告訴你這不是好習(xí)慣,因為動畫的內(nèi)容是不斷改變的,所以我們應(yīng)當習(xí)慣使用label,即使幀數(shù)如何變化,只要label指向正確,不需要修改ACTION都可以繼續(xù)運行(chocobo再提醒你吧,不要使用相同的label,即使在不同是Scene當中)
好了,我們在label層的第1、10、20分別F6創(chuàng)建關(guān)鍵幀,給他們寫上init、q2、quizEnd
要給按鈕寫上代碼了
在三個按鈕里面分別寫入代碼,大同小異的:
按鈕一:
on (release) {
q1answer = 1;
gotoAndStop ("q2");
}
按鈕二:
on (release) {
q1answer = 2;
gotoAndStop ("q2");
}
按鈕三
on (release) {
q1answer = 3;
gotoAndStop ("q2");
}
這三段代碼用人類的語言描述,就是:當用戶點擊某個按鈕選擇答案后,把他選擇的答案記錄到q1answer變量中去,然后進入下一題。
on這個單詞代表隨后的就是一個要觸發(fā)的事件
release是指在按鈕上松開鼠標這樣一個事件
當動畫執(zhí)行到這里的時候,三個按鈕都會分別監(jiān)聽用戶有沒有做在按鈕上放開鼠標這個動作,一旦發(fā)生,按鈕就會自動執(zhí)行大括號{}里面的代碼了
若用戶選第一個,{}中是:
q1answer = 1; //用q1answer變量記住用戶選擇的是第一個答案
gotoAndStop ("q2"); //進入下一題
上面我用了注釋的方法來解釋兩句代碼,你必須習(xí)慣,因為不是所有源程序都有教程,但是好的源程序都會有注釋
第二題的按鈕與前面相似,只是變量換為q2answer,選擇完進入結(jié)束的畫面,例如第一個,改為:
on (release) {
q2answer = 1;
gotoAndStop ("quizEnd");
}
結(jié)束的畫面
結(jié)束應(yīng)該做什么,當然是告訴用戶分數(shù)啦,寫在第20幀,就是label為quizEnd的那幀的代碼:
// tally up the user's correct answers
if (q1answer == 3){
totalCorrect = totalCorrect + 1;
}
if (q2answer == 2){
totalCorrect++; //totalCorrect++其實是totalCorrect = totalCorrect + 1;一個更簡潔的寫法,幾乎少打了一半的字母啊。
}
// show the user's score in an on-screen text field
displayTotal = totalCorrect;
用人的語言描述:如果第一題選3,答對數(shù)加一,如果第二題選2,答對數(shù)加一,把答對題目數(shù)賦予另一變量
現(xiàn)在答對的題數(shù)是放到變量displayTotal中了,怎么顯示?
在quiz end第20幀處建關(guān)鍵幀,鍵入"Thank you for taking the quiz! Your score final score is: /2"(謝謝回答問題,你最后成績是答對了 /2道題)
在"/2"之前那個空白的地方放上一個文本框,菜單Text>>Options顯示文本面板,把Static Text下拉改為Dynamic Text,順便把Border/Bg的鉤去掉,最后在Variable那一欄填上要顯示的變量名displayTotal
你是不是和chocobo一樣不耐煩了?快下載http://www.moock.org/webdesign/lect...oockQuizzes.zip ;吧,里面的quiz.fla就是本章的內(nèi)容,其他的fla的內(nèi)容也將會在后面講到
第六章 再來補充一點AS知識
數(shù)據(jù)分類是很有必要的,象8005154556這樣的一個數(shù)字是沒有多大意義的,但是如果將他歸類到電話號碼:800-515-4556,那就有意義了,
電腦資料
《Flash AS基礎(chǔ)精典教程》(http://clearvueentertainment.com)。(這是WHO的電話啊?是不是MOOCK的?呵呵)AS里面數(shù)據(jù)的類型相對其他語言已經(jīng)算少的,有:
* 字符串String 由一系列的characters組成,可以包含字母,數(shù)字和符號,一般用雙引號""擴住(記住不要寫了全角的“”)
* 數(shù)字Number
* 布爾值Boolean 用于條件判斷的時候,只有兩個值true和false
* Null and Undefined 這也是數(shù)據(jù)的類型之一,Null代表變量還沒有內(nèi)容,Undefined是連變量都未定義
* 數(shù)組Array 用來按順序地存放一組數(shù)據(jù)
* MovieClip 這也是數(shù)據(jù)的一種嗎?你就當它是FLASH特有的一種數(shù)據(jù)吧,裝的就是一個個MC INSTANCE(解釋一下吧,MC從library拖到場景中就是一個獨立的instance,一個MC可以創(chuàng)立多個instance),還有MC里面的其他數(shù)據(jù)
* Object 可以是FLASH已經(jīng)內(nèi)部定義的,或者是用戶寫程序時自定義的一類數(shù)據(jù)
再分類一下
number, string, boolean, undefined, and null,這些屬于簡單的數(shù)據(jù)類型,特征是只有一個值
array, object, movieclip. 就可以包含不止一個值
chocobo:其實array也應(yīng)該算是object,上面這些概念的東西總是有些沉悶,沒關(guān)系,留下印象,以后用到了,自然會回過來真正了解一遍的
第七章 可以重復(fù)的函數(shù)(function)
不是用幾個例子來示范嗎?怎么還不講例子啊?是的,下一個例子要用到函數(shù),所以再補充點函數(shù)知識。(上當了吧?chocobo也上當了,開始翻譯的時候沒想到這篇東西這么長的,這才講完第一個例子呢 55~)
一個函數(shù)是下面這個樣子的:
function funcName () {
statements
}
在ACTION面板里面,function這個單詞是變色的,F(xiàn)LASH認識這個單詞,它代表后面的就是描述函數(shù)的內(nèi)容
funcName是函數(shù)的名字,當你以后要用這函數(shù)的時候,就要敲這個名字了(是的,建函數(shù)就是為了以后反復(fù)調(diào)用它)
()小括號里面是參數(shù),什么是參數(shù)一會再講
{}大括號里面的就是函數(shù)所要完成功能的一句句代碼。
當我們建立函數(shù)之后,函數(shù)并不運行,只在你用函數(shù)的名字調(diào)用它出來,才正式開始運行
例如我們有這樣一個函數(shù)
function sayHi () {
trace("Hi!");
}
當我們在FLASH某幀需要sayHi的時候,輸入AS:
sayHi();
是不是和最常見的stop();還有play();一樣啊?因為它們都是函數(shù)嘛
sayHi函數(shù)真是智,來個有意義的函數(shù)吧。先在場景里放好一個名字叫ball的instance(千萬記得要給instance輸入名字,否則函數(shù)運行沒結(jié)果別找我)
在第一幀輸入這樣一個函數(shù):
function moveBall () {
ball._x += 10; // 怕有人不懂,解釋一下,_x代表ball的橫坐標,ball._x +=10 的意思是ball._x = ball._x + 10 ,這樣省略的寫法還有 -= *= /= 等等
ball._y += 10;
}
再做一個按鈕,按鈕的AS:
on (release) {
moveBall();
}
好的,運行,從AS你可以看到,每點一下按鈕,執(zhí)行一次函數(shù),而函數(shù)讓小球下斜下移動。(FLASH的坐標軸,原點在左上角)
為什么要建立函數(shù)呢,就是想更有效率,現(xiàn)在有這個函數(shù)已經(jīng)不用每移動一下寫一次AS了,但還是不夠,我們需要更有擴展性(flexibility)的函數(shù)
這個函數(shù)只能移動叫ball的MC,只能向固定的方向移動固定的距離,我們需要可以移動任何MC,向任何方向移動任何距離的函數(shù),這樣可以省卻很多輸入AS的工夫(這就叫一勞永逸,呵呵)
我們的新函數(shù)有三個地方是每次調(diào)用都不一樣的
1、移動的那個MC的名字
2、水平移動的距離
3、垂直移動的距離(呵呵,用極坐標,也可以把2、3說成移動的距離,和移動的角度,不過大家都不習(xí)慣極坐標)
為了告訴函數(shù)這些變化的地方,我們需要參數(shù)(parameters),參數(shù)在定義函數(shù)的時候就要輸入,我們的函數(shù)改寫好了:
function moveClip (theClip, xDist, yDist) {
theClip._x += xDist;
theClip._y += yDist;
}
當我們要實現(xiàn)原來函數(shù)功能的時候,現(xiàn)在調(diào)用新函數(shù)就變成
moveClip (ball, 10, 10);
定義函數(shù)的時候function moveClip (theClip, xDist, yDist) {
這里的theClip等參數(shù)(parameters)只是定義,本質(zhì)上說是不存在的,因為沒有內(nèi)容嘛
當我們用moveClip (ball, 10, 10);調(diào)用的時候,ball就輸入到theClip中去了,這里的ball稱為arguments(偶讀得書少,不會翻譯)
arguments可以是一個變量,也可以是一個表達式(例如"a"+"b",先得出結(jié)果再傳輸給函數(shù))只要用逗號隔開各個參數(shù)就行
函數(shù)如何結(jié)束呢
正常來說,函數(shù)運行完 {}里所有語句結(jié)束,我們也可以用一句AS:return; 讓它中途結(jié)束,例如:
function say(msg) {
return;
trace(msg);
}
這個函數(shù)被調(diào)用的時候?qū)⑹裁炊疾蛔鼍徒Y(jié)束
return還有更重要的用途:
function sqr(x) { // Squares a number 平方
return x * x;
}
a=sqr(2); //a將會被賦予2的平方 4
return更重要的用途就是返回數(shù)據(jù)
在AS里面,有個內(nèi)建的函數(shù)Math.sqrt(就是說你敲入的時候會變色),其功能和我們剛才做的sqr函數(shù)是一樣的,現(xiàn)在你該知道內(nèi)建函數(shù)也沒什么神秘的,我們一樣可以做出相同功能的來。
第八章 第二個版本選擇題的制作
讀到這你發(fā)現(xiàn)什么,我是發(fā)現(xiàn)了,MOOCK不是在教AS,他簡直是在上編程課。
在第一個版本的制作里你發(fā)現(xiàn)了什么缺點?是的,輸入了很多次AS,很麻煩。
我們要做的是用函數(shù)來集中我們的代碼,只有集中了才好修改,越復(fù)雜的程序越是如此(想象一下在很多個MC之間查代碼,真是頭痛,當然是集中一塊好)
這個多選題,我們就歸結(jié)成兩個函數(shù)吧answer和gradeUser
代碼(可以直接看源程序,在上面地址那個ZIP里面的quiz-version2.fla):
大部分的代碼都被集中到第一幀了,千萬不要被一大堆代碼嚇著了,代碼這么長,只是為了讓閱讀者看得更清楚而已。(其實越短的代碼才越可怕呢,呵呵)
// Stop the movie at the first question
stop ();
// Initialize main timeline variables 定義變量
var displayTotal; // Textfield for displaying user's score
var numQuestions = 2; // Number of quiz questions
var q1answer; // User's answer for question1
var q2answer; // User's answer for question2
var totalCorrect = 0; // Number of questions answered correctly 以上和例一一樣
var correctAnswer1 = 3; // The correct choice for question 1 第一題的正確答案
var correctAnswer2 = 2; // The correct choice for question 2 第二題的正確答案
// Function to register user's answers 這個函數(shù)的功能是提交答題者的答案
function answer (choice) {
answer.currentAnswer++;
//現(xiàn)在answer.currentAnswer是1,正在提交的是第一題,下一次answer.currentAnswer就變成2,代表提交的是第二題
set ("q" + answer.currentAnswer + "answer", choice);
// 不復(fù)雜不復(fù)雜,"q" + answer.currentAnswer + "answer"第一題的時候就是q1answer,第二題是q2answer,把參數(shù)choice傳過來的值放到兩個變量里面而已
if (answer.currentAnswer == numQuestions) {
// 判斷是不是兩題都答完了,是就轉(zhuǎn)到問題結(jié)束幀
gotoAndStop ("quizEnd");
} else {
gotoAndStop ("q" + (answer.currentAnswer + 1));
}
}
// Function to tally user's score 這個函數(shù)是改題的
function gradeUser() {
// Count how many questions user answered correctly 將兩個答案和正確答案比較,對就totalCorrect加一
//此處用了一個for循環(huán),大家如有疑問的,可以查AS字典,在帝國就有中文版
for (i = 1; i <= numQuestions; i++) {
// 下面用的eval有必要說一下,它的作用是將字符串和變量組成一個新的變量名,是個很方便的功能
if (eval("q" + i + "answer") == eval("correctAnswer" + i)) {
totalCorrect++;
}
}
// Show user's score in an on-screen text field 將答案顯示出來,與第一個例子同
displayTotal = totalCorrect;
}
好了,第一幀的函數(shù)寫好了,之后每個答案的選擇按鈕就簡單了
例如第一題的選項一,就寫:
on (release) {
answer(1);
}
第二題的寫法同上(如果你的選擇題有很多道,做法都是一樣的,只要復(fù)制第一題,然后把題目改了就行)
最后在quizEnd幀里面調(diào)用改題的函數(shù)gradeUser();
分析第二個例子是代碼,你會發(fā)現(xiàn)比第一個例子精簡了很多。
而集中在同一幀的代碼,將:
* 更容易修改
* 更容易升級
* 更少的出錯機會
* 更容易查錯
* 更精簡(更少的字節(jié)數(shù))
第九章 數(shù)組(arrays)
在下一個新版本的多選題里,我們將使用什么AS的特性,來讓它更好呢?
那就是數(shù)組。
數(shù)組就是一系列的數(shù)據(jù)(MOOCK又開始上課了,chocobo的英文和計算機都不算好,為免誤人子弟,概念性的東西盡量精簡)
例如這樣兩個變量儲存的數(shù)據(jù):
fruit1 = "oranges";
fruit2 = "apples";
它們是互相獨立的,使用起來很不方便,我們需要的是數(shù)組,以下是數(shù)組的定義方法,用“”框住,用“,”分隔開每個元素:
fruitList = ["oranges", "apples"];
現(xiàn)在兩個數(shù)據(jù)是放到同一個數(shù)組里面了,我們開始詳細解說數(shù)組
數(shù)組里面每一個數(shù)據(jù)稱為元素(element)。
而每一個元素都有個獨立數(shù)字代表所處的位置,數(shù)字叫索引(index),注意! 第一個數(shù)據(jù)的索引是0,第二個才是1
要按索引來提出數(shù)據(jù),我們要用一個運算符,例如使用fruitList第一個元素賦值給a:
a=fruitList