Flash AS基礎精典教程

來源:互聯網
上載者:User
教程

  這次給大家帶來MOOCK在世界性FLASH大會:FF2K1大會上的演說,要說到Action的權威,當然要數MOOCK,他寫的ASDG(一本書)是可以和FLASH內建的AS字典相提並論的寶貝。雖然他是這樣一個高高手,但是他的這個演講卻是非常的淺顯,如果你某處讀起來覺得難,那也一定是chocobo翻譯得不好。(有些地方實在是太淺,我受不了就改了 )

  這篇文章預算的演講時間很長,所以讀起來也會覺得較長,你可以分開來讀。

  還有,本文是關於FLASH5的AS的,畢竟FLASH4的AS已經淘汰。

  第一章:由O開始

  為了示範,MOOCK將會做一個多選題問答的動畫來做為例子。

  這個例子以4種不同版本的方法來實現。

  對於使用者來說,4種版本使用起來將沒有區別,只是對於我們開發人員來說,研究的就是如何改進這些FLASH代碼的結構與組織。

  改進的重點在於:

*更便易的維護
*更便易的擴充
*更快捷的建設

  要牢記的是,學習編程是一個過程(process)而不是一個事件(event)。如果你第一次學習到的時候不能照著完成也不必擔心。接下來,MOOCK說到為了照顧沒有多少編程經驗的菜鳥,會由最最最簡單的開始。

  關於電腦語言:

  程式設計語言是用來發資訊給電腦,從電腦接受資訊的,程式設計語言也有詞彙表和文法,如人類的語言類似,通過程式設計語言我們可以告訴電腦去做什麼,也可以從他那獲得資訊.

  關於文法和邏輯

  學習編程的思想比學習一種語言的文法重要.假設FLASH是懂我們語言的單詞的,我們對FLASH說:“Flash, 讓一個球在螢幕裡面彈來彈去吧”。FLASH會什麼都做不了,FLASH要我們用他的世界懂的東西,例如:movie clips, buttons, frames,來描述它要做的事,那我們再說一次:“Flash, 讓一個名字叫ball_one的movie clip在螢幕裡面彈來彈去吧”,我們已經用MC這個FLASH懂的東西來描述了,但FLASH還是什麼都不做,因為它需要更多的資訊:

*這個球有多大
*它放在哪裡?
*一開始它首先往哪個方向運動?
*它初始的速度是多少
*它在螢幕的那一個範圍之內彈來彈去呢?
*彈來彈去要持續多久呢?

  看來我們需要有邏輯結構地告訴FLASH它應該怎麼去做

1、一個球指的是一個叫ball_one的圓形MC,直徑50像素
2、還有一個方形MC叫square,邊長300像素
3、將ball_one放在square上某處
4、以一個隨機的角度,75像素每秒的速度開始移動ball_one
5、如果ball_one接觸到square的某邊,就彈回
6、一直不停地運動下去,知道我們讓它停

  如果FLASH真的懂我們語言的單詞,他應該知道如何開始做了

  總結一下關鍵點:

無論是使用什麼語言,編程思想的藝術都在於用如何將邏輯步驟列出
在你開始將要做的事用電腦語言描述之前,用我們人類的語言描述一次會很有協助
即使你將他們翻譯成任何的電腦語言,他們的邏輯步驟應該是一樣的
電腦不懂用假設完成去你的想法,他們沒有思考能力(chocobo:就是你要把要求完全無遺漏地寫出來讓它運行)

第二章:基礎

首先瞭解如何在FLASH輸入程式
在FLASH菜單Window裡面Actions可開啟ACTION面板,ACTION面板分右面的指令碼窗,和左面的工具窗
指令碼窗就是放指令碼的地方,而工具窗用於快速地輸入各種ACTION,運算子,函數,屬性,對象
MOOCK建議大家使用專家模式,在FLASH菜單的Edit的Preferences的Actions panel裡面選Expert Mode,以後每次開啟ACTION面板都會自動化佈建為專家模式(專家模式可直接輸入代碼,初學者學下去就會知道,很多代碼無法在普通模式裡輸入)
AS的一些概念
所有代碼都需存於某個地方,可以是frame(幀), button(按鈕), or movie clip(電影夾子)。
只要你選擇了某按鈕或MC,你之後輸入的代碼就存放在它的上面了,注意此時ACTION面板上方提示為Object Actions。同理你也可以將代碼存放於幀,不過此時提示為Frame Actions。
當你在專家模式的時候仍無法輸入代碼,你首先要檢查你是否選擇了frame, button, 或MC來存放代碼。
然後我們象學所有語言一樣吧,來個HELLO WORLD吧
在ACTION面板輸入
var message = "HELLO WORLD";
trace (message);
然後我們按CTRL和ENTER鍵,看到結果了嗎?
以下兩章比較基礎。MOOCK是騙演講費嗎?

第三章:解讀

第一行代碼:var message = "HELLO WORLD";
告訴FLASH記住一個名字叫message的容器(通常在電腦裡稱為變數(variable),在FLASH裡面,變數可以裝文字,和可以裝數字)裡面裝了這樣的資料(datum),內容為:"HELLO WORLD"
“=”等號是一個常用的運算子號(operators),在FLASH裡面它不是代表相等,而是代表賦值
var 命令的含義是宣布給整個電影,此變數的內容是什麼。
第二行代碼:trace (message);
就是要FLASH顯示message裡面的內容,為什麼FLASH能輸出內容呢,因為當你按CTRL+ENTER又或者在網上開啟這個電影的時候,你輸入的每一段Action Scrpit代碼,都會通過FLASH的解譯器(interpreter)來解讀然後執行
如果解譯器能解釋你的代碼,他會運行它,並返回你要返回的結果,如果解譯器看不懂你的代碼,他也會返回錯誤碼——告訴你錯誤的原因
通常,我們發給解譯器的命令不只命令這麼簡單,還包括命令的內容例如trace (message); 這個trace輸出命令的內容就是message,電腦裡就稱為參數(argument或parameter),如果一個命令支援多個參數,參數之間一般用“,”來分割

第四章 還有一些概念

運算式(expression):(2 + 3) * (4 / 2.5) - 1可稱為一個運算式,"a"+"b"也是運算式,需要解譯器運算才得到結果的值,一個相反的概念,不需要運算的直接引用的,稱為literal
條件(conditionals):(look at a series of options and make a decision about what to do based on the circumstances)
不翻譯了,大概意思就是美女穿著新衣上街,會先看看外面會否下雨,這就叫條件判斷啦
if(天氣=="下雨"){trace("還是帶把雨傘吧")}
迴圈(loop):如果要輸出5個數字,你是寫5遍trace命令嗎?更多的就不行了吧
你可以用while和for命令來完成重複的動作
事件(events):放在frame裡面的代碼只要電影播放至就會執行,放在MC、button的代碼則只在解譯器發現預先設定好的事件被觸動的時候執行。最典型的就是一下滑鼠點擊按鈕造成press時間啦。
函數(functions):將一組程式打包成一句命令來調用他,其實FLASH裡面的很多命令就是函數:trace、play、gotoAndStop等等都是。

第五章 開始第一個版本的選擇題的製作

多選題共有兩道

如圖,大家應該養成一個好習慣,用一個獨立的層來放置代碼,並把該層放到最上面會更便於修改。
第二層則獨立放置Label。不要覺得麻煩,只要你想到世界上大部分好的閃客都是如此做的,你就不會嫌麻煩了。
以下的層放的是選擇題的內容,如上圖
開始建立題目
在question 1層的第一幀,寫上題目"When were movie clips introduced into Flash?" (什麼時候FLASH開始引入電影夾子的概念?)
再寫上三個選項:Version 1, Version 2, Version 3
跟著我們再做一個用來選擇的方框按鈕,從Library裡面拖出這樣的三個按鈕,分別放到各個選項的前面。
第二題的建立我們用第一題來做個模版,選擇question 1層的第一幀,選擇菜單上的Edit>>Copy Frames
再選擇question 2的第十幀,Edit>>Paste Frames 將第一題複製過來了
當然問題要改成"When was MP3 audio support added to Flash?" (什麼時候FLASH開始支援MP3格式匯入?),答案也要改成Version 3, Version 4, Version 5
資料初試化
雖然是個很簡單的FLASH,但是象其他複雜的FLASH一樣,先告訴FLASH要用到的資料,例如題目的答案等,這是個好習慣,越複雜的FLASH,受惠越多
正常來說定義資料應該LOADING結束之後的。
為了把題目定在第一題,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 答對的題數
var displayTotal; // text field for displaying user's score 顯示使用者分數的變數
// stop the movie at the first question
stop();
你會發現//開頭的那一行代碼都變了色,//代表的是注釋,是用來輔助閱讀代碼用的,對代碼執行沒有影響(是的,你在裡面寫笑話,寫小說都可以,不會影響你的FLASH的^-^)
我們定義了四個將要用到的變數,用途已經在注釋裡面寫了,寫注釋也是一個好習慣
關於命名變數名
變數起名displayTotal,意思是 display total,因變數名不能使用空格和破折號,所以用第二個單詞的開始字母大寫,以此分隔單詞
一些程式員也喜歡用底線:display_total
記住一定要給你的變數起一個一眼就能識別意義的名字
添加label
我們知道第二題是在第10幀的,我們只需要一句AS:gotoAndStop(10); 就可以執行第二個問題了
不過MOOCK告訴你這不是好習慣,因為動畫的內容是不斷改變的,所以我們應當習慣使用label,即使幀數如何變化,只要label指向正確,不需要修改ACTION都可以繼續運行(chocobo再提醒你吧,不要使用相同的label,即使在不同是Scene當中)
好了,我們在label層的第1、10、20分別F6建立主要畫面格,給他們寫上init、q2、quizEnd
要給按鈕寫上代碼了
在三個按鈕裡面分別寫入代碼,大同小異的:
按鈕一:
on (release) {
q1answer = 1;
gotoAndStop ("q2");
}
按鈕二:
on (release) {
q1answer = 2;
gotoAndStop ("q2");
}
按鈕三
on (release) {
q1answer = 3;
gotoAndStop ("q2");
}
這三段代碼用人類的語言描述,就是:當使用者點擊某個按鈕選擇答案後,把他選擇的答案記錄到q1answer變數中去,然後進入下一題。
on這個單詞代表隨後的就是一個要觸發的事件
release是指在按鈕上鬆開滑鼠這樣一個事件
當動畫執行到這裡的時候,三個按鈕都會分別監聽使用者有沒有做在按鈕上放開滑鼠這個動作,一旦發生,按鈕就會自動執行大括弧{}裡面的代碼了
若使用者選第一個,{}中是:
q1answer = 1; //用q1answer變數記住使用者選擇的是第一個答案
gotoAndStop ("q2"); //進入下一題
上面我用了注釋的方法來解釋兩句代碼,你必須習慣,因為不是所有來源程式都有教程,但是好的來源程式都會有注釋
第二題的按鈕與前面相似,只是變數換為q2answer,選擇完進入結束的畫面,例如第一個,改為:
on (release) {
q2answer = 1;
gotoAndStop ("quizEnd");
}
結束的畫面
結束應該做什麼,當然是告訴使用者分數啦,寫在第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,答對數加一,如果第二題選2,答對數加一,把答對題目數賦予另一變數
現在答對的題數是放到變數displayTotal中了,怎麼顯示?
在quiz end第20幀處建主要畫面格,鍵入"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就是本章的內容,其他的fla的內容也將會在後面講到

第六章 再來補充一點AS知識

資料分類是很有必要的,象8005154556這樣的一個數字是沒有多大意義的,但是如果將他歸類到電話號碼:800-515-4556,那就有意義了。(這是WHO的電話啊?是不是MOOCK的?呵呵)
AS裡面資料的類型相對其他語言已經算少的,有:
* 字串String 由一系列的characters組成,可以包含字母,數字和符號,一般用雙引號""擴住(記住不要寫了全形的“”)
* 數字Number
* 布爾值Boolean 用於條件判斷的時候,只有兩個值true和false
* Null and Undefined 這也是資料的類型之一,Null代表變數還沒有內容,Undefined是連變數都未定義
* 數組Array 用來按順序地存放一組資料
* MovieClip 這也是資料的一種嗎?你就當它是FLASH特有的一種資料吧,裝的就是一個個MC INSTANCE(解釋一下吧,MC從library拖到情境中就是一個獨立的instance,一個MC可以創立多個instance),還有MC裡面的其他資料
* Object 可以是FLASH已經內部定義的,或者是使用者寫程式時自訂的一類資料
再分類一下
number, string, boolean, undefined, and null,這些屬於簡單的資料類型,特徵是只有一個值
array, object, movieclip. 就可以包含不止一個值
chocobo:其實array也應該算是object,上面這些概念的東西總是有些沉悶,沒關係,留下印象,以後用到了,自然會回過來真正瞭解一遍的

第七章 可以重複的函數(function)

不是用幾個例子來示範嗎?怎麼還不講例子啊?是的,下一個例子要用到函數,所以再補充點函數知識。(上當了吧?chocobo也上當了,開始翻譯的時候沒想到這篇東西這麼長的,這才講完第一個例子呢 55~)
一個函數是下面這個樣子的:
function funcName () {
statements
}
在ACTION面板裡面,function這個單詞是變色的,FLASH認識這個單詞,它代表後面的就是描述函數的內容
funcName是函數的名字,當你以後要用這函數的時候,就要敲這個名字了(是的,建函數就是為了以後反覆調用它)
()小括弧裡面是參數,什麼是參數一會再講
{}大括弧裡面的就是函數所要完成功能的一句句代碼。
當我們建立函數之後,函數並不運行,只在你用函數的名字調用它出來,才正式開始運行
例如我們有這樣一個函數
function sayHi () {
trace("Hi!");
}
當我們在FLASH某幀需要sayHi的時候,輸入AS:
sayHi();
是不是和最常見的stop();還有play();一樣啊?因為它們都是函數嘛
sayHi函數真是智,來個有意義的函數吧。先在情境裡放好一個名字叫ball的instance(千萬記得要給instance輸入名字,否則函數運行沒結果別找我)
在第一幀輸入這樣一個函數:
function moveBall () {
ball._x += 10; // 怕有人不懂,解釋一下,_x代表ball的橫座標,ball._x +=10 的意思是ball._x = ball._x + 10 ,這樣省略的寫法還有 -= *= /= 等等
ball._y += 10;
}
再做一個按鈕,按鈕的AS:
on (release) {
moveBall();
}
好的,運行,從AS你可以看到,每點一下按鈕,執行一次函數,而函數讓小球下斜下移動。(FLASH的座標軸,原點在左上方)
為什麼要建立函數呢,就是想更有效率,現在有這個函數已經不用每移動一下寫一次AS了,但還是不夠,我們需要更有擴充性(flexibility)的函數
這個函數只能移動叫ball的MC,只能向固定的方向移動固定的距離,我們需要可以移動任何MC,向任何方向移動任何距離的函數,這樣可以省卻很多輸入AS的工夫(這就叫一勞永逸,呵呵)
我們的新函數有三個地方是每次調用都不一樣的
1、移動的那個MC的名字
2、水平移動的距離
3、垂直移動的距離(呵呵,用極座標,也可以把2、3說成移動的距離,和移動的角度,不過大家都不習慣極座標)
為了告訴函數這些變化的地方,我們需要參數(parameters),參數在定義函數的時候就要輸入,我們的函數改寫好了:
function moveClip (theClip, xDist, yDist) {
theClip._x += xDist;
theClip._y += yDist;
}
當我們要實現原來函數功能的時候,現在調用新函數就變成
moveClip (ball, 10, 10);
定義函數的時候function moveClip (theClip, xDist, yDist) {
這裡的theClip等參數(parameters)只是定義,本質上說是不存在的,因為沒有內容嘛
當我們用moveClip (ball, 10, 10);調用的時候,ball就輸入到theClip中去了,這裡的ball稱為arguments(偶讀得書少,不會翻譯)
arguments可以是一個變數,也可以是一個運算式(例如"a"+"b",先得出結果再傳輸給函數)只要用逗號隔開各個參數就行
函數如何結束呢
正常來說,函數運行完 {}裡所有語句結束,我們也可以用一句AS:return; 讓它中途結束,例如:
function say(msg) {
return;
trace(msg);
}
這個函數被調用的時候將什麼都不做就結束
return還有更重要的用途:
function sqr(x) { // Squares a number 平方
return x * x;
}
a=sqr(2); //a將會被賦予2的平方 4
return更重要的用途就是返回資料
在AS裡面,有個內建的函數Math.sqrt(就是說你敲入的時候會變色),其功能和我們剛才做的sqr函數是一樣的,現在你該知道內建函數也沒什麼神秘的,我們一樣可以做出相同功能的來。

第八章 第二個版本選擇題的製作

讀到這你發現什麼,我是發現了,MOOCK不是在教AS,他簡直是在上編程課。
在第一個版本的製作裡你發現了什麼缺點?是的,輸入了很多次AS,很麻煩。
我們要做的是用函數來集中我們的代碼,只有集中了才好修改,越複雜的程式越是如此(想象一下在很多個MC之間查代碼,真是頭痛,當然是集中一塊好)
這個多選題,我們就歸結成兩個函數吧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 這個函數的功能是提交答題者的答案
function answer (choice) {
answer.currentAnswer++;
//現在answer.currentAnswer是1,正在提交的是第一題,下一次answer.currentAnswer就變成2,代表提交的是第二題
set ("q" + answer.currentAnswer + "answer", choice);
// 不複雜不複雜,"q" + answer.currentAnswer + "answer"第一題的時候就是q1answer,第二題是q2answer,把參數choice傳過來的值放到兩個變數裡面而已
if (answer.currentAnswer == numQuestions) {
// 判斷是不是兩題都答完了,是就轉到問題結束幀
gotoAndStop ("quizEnd");
} else {
gotoAndStop ("q" + (answer.currentAnswer + 1));
}
}
// Function to tally user's score 這個函數是改題的
function gradeUser() {
// Count how many questions user answered correctly 將兩個答案和正確答案比較,對就totalCorrect加一
//此處用了一個for迴圈,大家如有疑問的,可以查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;
}

好了,第一幀的函數寫好了,之後每個答案的選擇按鈕就簡單了
例如第一題的選項一,就寫:
on (release) {
answer(1);
}
第二題的寫法同上(如果你的選擇題有很多道,做法都是一樣的,只要複製第一題,然後把題目改了就行)
最後在quizEnd幀裡面調用改題的函數gradeUser();
分析第二個例子是代碼,你會發現比第一個例子精簡了很多。
而集中在同一幀的代碼,將:
* 更容易修改
* 更容易升級
* 更少的出錯機會
* 更容易查錯
* 更精簡(更少的位元組數)

第九章 數組(arrays)

在下一個新版本的多選題裡,我們將使用什麼AS的特性,來讓它更好呢?
那就是數組。
數組就是一系列的資料(MOOCK又開始上課了,chocobo的英文和電腦都不算好,為免誤人子弟,概念性的東西盡量精簡)
例如這樣兩個變數儲存的資料:
fruit1 = "oranges";
fruit2 = "apples";
它們是互相獨立的,使用起來很不方便,我們需要的是數組,以下是數組的定義方法,用“&#;”框住,用“,”分隔開每個元素:
fruitList = ["oranges", "apples"];
現在兩個資料是放到同一個數組裡面了,我們開始詳細解說數組
數組裡面每一個資料稱為元素(element)。
而每一個元素都有個獨立數字代表所處的位置,數字叫索引(index),注意! 第一個資料的索引是0,第二個才是1
要按索引來提出資料,我們要用一個運算子&#;,例如使用fruitList第一個元素賦值給a:
a=fruitList

相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。