第五話 MovieClip動畫顯示

第五話 MovieClip動畫顯示

鈴聲響起,又是破解神魔課程的上課時間,我走進學校教室前,看到了學生們圍著助教小叮噹,興意盎然的交頭接耳討論著。為了不打擾他們的討論,我特意待在門邊聽聽他們正在討論什麼好玩的東西。

(小叮噹從懷中拿出了一個像筆記本的東西,對著他們晃啊晃)

小叮噹:這就是神奇塗鴉本

PS:至於為什麼小叮噹要拿出這個道具勒,而這個神奇塗鴉本又有甚麼神奇的功能,請看前情提要...

宜靜:大雄,你畫的圖好漂亮喔,漫畫內容也好有趣,如果能夠讓他們動起來像在電視播的一樣肯定更有意思。

大雄:那有什麼問題,我就表演個魔術,讓他們動起來給你看

(為了哄宜靜開心,大雄還煞有其事的比了個魔術的手勢,接著就拿起來課本的邊角,然後快速地翻弄著)

宜靜:咦!真的耶,這些小人好像真的動起來了,好厲害喔~

(阿福湊了過來看大雄表演)

阿福:這太不實際了,每次都要不停地翻弄才能看,好累喔。而且番累了就會越來越慢,速度也都不一樣。你如果真的想看的話,可以到我們的公司去看喔,他們可以幫你透過最新科技的技術,將圖放到電腦內播放那才順暢,彷彿漫畫中的人物動了起來一樣。

(在旁邊覺得很無聊的技安突然來了興致,也靠了過來)

技安:真的這麼厲害,那可以幫我弄這樣的動畫嗎,我希望下次舉辦演唱會的時候,能夠在全國的電視上看到我的動畫廣告。

(阿福略帶難色,似乎有點怕看著技安的眼神)

阿福:可是做這個動畫很貴耶,要花不少時間。

(也就是在這個時候,小叮噹拿出了一個名為神奇塗鴉本的東西,並開始解釋著)

小叮噹:傳統動畫的效果其實是利用人類眼睛的視覺暫留特性,光作用所產生的視覺會被保留一個極為短暫的時間,而在這短暫的時間內再替換其他圖片時就會產生動畫的效果。而這個神奇塗鴉本就是利用這樣的特性,你只需要在內頁畫上各種圖案,塗鴉本就會自動幫你翻頁,並且呈現在封面上。

(正當大家對於視覺暫留感到好奇的時候,我想是我該出場的時候啦~)

我:咳咳.... 其實啊,想要利用視覺暫留來製作動畫,不需要擁有昂貴的電視公司,也不需要神奇塗鴉本,Corona有個技巧就能做到這件事喔,叫做MovieClip。今天,我們就來說明MovieClip吧。

MovieClip嚴格來說,並不屬於Corona SDK 核心所提供的功能,而需要在專案中放入movieclip.lua檔這個函式庫,並且在第一次要使用movieClip功能的頁面透過require指令來進行匯入才可以使用。其實不只限於movieclip.lua,你也可以透過相同的作法為自己撰寫函式庫,省下日後開發類似功能的時間。

附帶一提的是,require這個關鍵字會檢查所請求的lua檔案是否已經讀入,如果尚未讀入就會將該檔案編譯後並讀入記憶體中,同時加以執行。反之,如果已經讀入就直接從記憶體中取出,而不再執行。

而當某個lua檔案被require之後,其全域變數與函式就能夠被存取或者是執行,但是區域變數和函式則不行,要特別注意。

使用MovieClip的流程大概分為如下:
1.建立MovieClip( newAnim)
2.將MovieClip元件初始化
3.開始播放MovieClip動畫(play)


首先,就讓我們先針對建立MovieClip階段加以說明。建立MovieClip時最主要的就是要告知此元件用以組成動畫的圖片群,以lua的特有資料結構table來進行傳入,關於table這個結構將會在之後的課程當中說明,現在就先理解成類似陣列或者是資料容器的概念即可。比方來說,遊戲中有個角色的走路動畫,一共需要四張圖來循環播放,因此在建立MovieClip時就需要將這四張圖的檔名以table資料結構來傳入。傳入圖檔可以是gif.png.jpg等等,如果是遊戲角色的動畫,建議優先使用png格式。

當MovieClip元件已經準備好之後,接著就需要調整元件的初始位置或者是將播放磁頭放到第一張圖上等等動作,準備元件的狀態的這些動作,統一稱之為初始化。

初始化較常用的函式整理如下:

  • mc:setSpeed(float)  設定動畫播放的速度,越小越慢
  • mc:stopAtFrame( int ) 設定動畫初始位置

最後,初始化工作準備完成,當需要播放的動畫時就可以立即播放動畫,並視情況將動畫停止等等動作。

觀念其實並不複雜,就讓我們看看範例吧。
本範例結果為畫面上會出現一個可播放動畫元件,按下播放按鈕時元件就會開始播放動畫,按下停止按鈕後動畫就會停止。
 


-----------------------------------------------------------------------------------------
--
-- main.lua
-- 本範例示範如何使用movieclip.lua的function,用以產生連續動畫
-- Author: Zack Lin
-- Time: 2015/4/9
-----------------------------------------------------------------------------------------

--=======================================================================================
--引入各種函式庫
--=======================================================================================
display.setStatusBar( display.HiddenStatusBar )

--需放入movieclip.lua,並用require匯入
local movieClip = require( "movieclip" )
local widget = require( "widget" )
--=======================================================================================
--宣告各種變數
--=======================================================================================
_SCREEN = {
    WIDTH = display.viewableContentWidth,
    HEIGHT = display.viewableContentHeight
}
_SCREEN.CENTER = {
    X = display.contentCenterX,
    Y = display.contentCenterY
}
local mc
local btn_play
local btn_stop

local initial
local handleButtonEvent
--=======================================================================================
--宣告與定義main()函式
--=======================================================================================
local main = function (  )
    initial()
end

--=======================================================================================
--定義其他函式
--=======================================================================================
initial = function (  )
    --建立一個新的movieClip,Table元素為圖片組
    mc = movieClip.newAnim({"images/horse-0.gif","images/horse-1.gif","images/horse-2.gif","images/horse-3.gif","images/horse-4.gif","images/horse-5.gif","images/horse-6.gif","images/horse-7.gif"})
    --movieClip停在第一幀
    mc:stopAtFrame(1)
    mc.x = _SCREEN.CENTER.X
    mc.y = _SCREEN.CENTER.Y - 200
    mc.width = 400
    mc.height = 360
    --設定movieClip的速度,越小越慢
    mc:setSpeed(0.3)

    btn_play = widget.newButton{
        id = "play",
        width = 600,
        height = 150,
        defaultFile = "images/btn_normal.png",
        overFile = "images/btn_over.png",
        label = "播放",
        fontSize = 80,
        onEvent = handleButtonEvent
    }
    btn_play.x = _SCREEN.CENTER.X
    btn_play.y = _SCREEN.CENTER.Y + 100

    btn_stop = widget.newButton{
        id = "stop",
        width = 600,
        height = 150,
        defaultFile = "images/btn_normal.png",
        overFile = "images/btn_over.png",
        label = "停止",
        fontSize = 80,
        onEvent = handleButtonEvent
    }
    btn_stop.x = _SCREEN.CENTER.X
    btn_stop.y = _SCREEN.CENTER.Y + 300
end

handleButtonEvent = function ( event )
    if ("play" == event.target.id) then
        --播放movieClip,startFrame為起始的幀數,endFrame為結束幀數,loop為播放次數,0或小於0為無限,remove為播放後是否移除
        mc:play( {startFrame = 1 , endFrame = 8 , loop = 0 , remove = false})
    elseif ( "stop" == event.target.id) then
        mc:stopAtFrame(1)
    end
end
--=======================================================================================
--呼叫主函式
--=======================================================================================
main() 



範例碼結構:

  • 12~16 引入函式庫
  • 46~47 建立MovieClip元件
  • 49~55 MovieClip元件初始化
  • 85~90 MovieClip元件控制
分享這篇文章:

發佈自 林品爵

林品爵
一個堅信程式教育能夠改變下一代未來的狂熱者,青少年揚帆計畫的推動者。十年以上全端程式開發,上百場程式教學經驗,累積學生數達百人以上。 成大學士畢業,使用過J2EE.PHP.MySQL.CoronaSDK.Android.Objective-C.Swift.Python等技術知識,歷任友訊科技總部Java工程師首席.黑快馬股份有限公司研發經理.諾亞數碼娛樂執行長等職位,現任哥布林程式教育學苑創辦人,所開發過專案涵括產品管理系統.POS系統.拍賣平台.擴增實境.問券.社區App等等。 程式啟蒙班講師 . Laravel網頁程式班講師 . App程式班講師

關聯文章:

留下留言