DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> html5制作能在微信轉發的動畫賀卡
html5制作能在微信轉發的動畫賀卡
編輯:HTML5詳解     
每當節假日,人們經常相互用手機發送祝福的信息。而現如今,微信已經成為繼短信和QQ又一常用的通訊工具。越來越多的人通過微信向親人和朋友傳達節日的祝福。微信開放的特性,使得祝福不僅僅局限於語言和文字,包含圖片、聲音、動畫和交互的電子賀卡,使節日的祝福變得更加生動有趣。讓我們先來看看一個采用木疙瘩平台制作的生日賀卡的實例:QQ截圖20140225152517

木疙瘩制作的動畫賀卡,富含動畫、聲音、交互等特性,而且直接在賀卡中就可以定制轉發了,十分方便。你也可以通過關注微信號 mucard,查看更多采用木疙瘩平台制作的動畫賀卡的實例。這些賀卡在2014年春節期間在微信中被傳播觀看了數千萬次,可見動畫賀卡在微信用戶中十分受歡迎。

本文簡單介紹了通過木疙瘩在線動畫制作平台制作電子賀卡的流程,相信看完這篇文章,你也能DIY自己的賀卡。我們主要介紹了如下一些制作動畫賀卡的關鍵問題:

  1. 如何制作動畫;
  2. 如何添加音樂;
  3. 如何添加按鈕觸發行為;
  4. 如何定義賀卡中的可定制元素;
  5. 如何在開發環境中預覽做好的賀卡;
  6. 如何在微信中查看賀卡;
  7. 如何在收到賀卡後定制賀卡;

下面我們通過一個實例,來介紹如何制作木疙瘩動畫賀卡。我們假定本文的受眾具有基本的動畫制作,尤其是Flash動畫制作的基礎。如果你沒有Flash動畫基礎,也可以按照本文快速掌握最基本的流程。對於其中涉及的動畫設計部分,建議你參考本系列教程的其它文章了解進一步的信息。

創建畫布

這一步的結果見:https://cn.mugeda.com/animation/edit/1863bfb4

訪問www.mugeda.com 打開木疙瘩網站,注冊或登錄賬戶。點擊頁面左上角的“創建作品”。

 

QQ圖片20150722110750

選擇動畫類型為“CSS3動畫”,畫布大小為320×374。

QQ截圖20150722110727

 

制作動畫

這一步的結果見:https://cn.mugeda.com/animation/edit/216fbd27

增加背景圖層:點擊下圖中位置1所示圖層名區域,將圖層名改為“背景”。確保選中圖中位置2的位置(即第1幀),使用工具欄上的圖片工具(位置3),打開圖片上傳對話框,上傳背景圖片。


QQ截圖20150722111121

將圖片放到合適位置。

QQ截圖20150722111215

增加祝福文字:點擊下圖中位置1新建一個圖層,更改圖層名稱為“文字”,右擊圖層2的第2幀,選擇“插入關鍵幀”。

QQ截圖20150722111534

在背景層添加幀,使得兩個圖層對齊。

QQ截圖20150722111634

確保文字層的第二幀處於選中狀態,點擊工具欄文字按鈕,在畫布合適位置輸入文字。為了在下面的步驟中引用到這個文本框,在圖中位置3,將其命名為to。

QQ截圖20150722111912

用同樣的方法創建greeting文本框。

QQ截圖20150722112017

增加背景聲音

Mugeda賀卡支持兩種形式的聲音:
1. 自動播放的背景聲音:賀卡的接收者打開賀卡,聲音作為背景音樂與賀卡一起開始播放。
2. 事件觸發的背景聲音。聲音伴隨著用戶的點擊事件開始播放。例如:當用戶點擊賀卡中的爆竹圖片,開始播放爆竹聲音。

在設計賀卡的聲音部分時,需要考慮到移動平台本身的限制:
1. 現在市面中的大多數智能手機,只支持在浏覽器中播放一個聲音。因此,為了賀卡能在大多數手機上正常播放,一般只添加一個背景音樂即可。
2. 在少部分手機的微信中,或者在智能手機的默認浏覽器中,背景聲音可能無法自動播放,這是智能手機的設計限制造成的。這時候的解決辦法有兩個:一是木疙瘩自動提供了一個聲音播放按鈕,可以通過點擊這個按鈕觸發聲音的播放(如下圖);二是設計者可以考慮在劇情中引入一個點擊事件(例如一個按鈕),用戶點擊後即可開始播放背景音樂。

另外,考慮到手機的性能和移動網絡,聲音建議采用MP3格式,單聲道,在不影響效果的情況下,盡量降低碼率,如32Kbps,一般聲音的大小在100KB左右。

wifi0s0384078387Screenshot_2014-02-25-16-17-52

如圖,在工具欄上選擇聲音工具,選擇並上傳一段聲音,點擊“添加到元件庫”。我們希望這段聲音在畫面進入時開始播放。


QQ截圖20150722112247

回到第一幀,選中畫布中的背景圖片,下方面板中的動作改為“行為”,然後點擊“編輯”按鈕。

QQ截圖20150722112520

在出現的對話框中,點擊“電話功能”、“播放聲音”,再將事件改為“出現”。這兩步操作的意思是,當第一幀的背景圖片出現時,播放聲音。點擊“編輯”按鈕。

QQ截圖20150722112624

在出現的對話框中選擇剛剛上傳的聲音1,並將其命名為BGM。

QQ截圖20150722112715

增加聲音圖標

由於在部分手機上,聲音無法自動播放,所以需要增加一個聲音小圖標,使得這些用戶可以點擊這個圖標,手動開始播放聲音。

點擊文件、導入、腳本。

QQ截圖20150722112751

新增腳本文件

https://cn.mugeda.com/mugeda_clIEnt_utils/js/card_common.JS

這個腳本中包含了賀卡的常用操作。

QQ截圖20150721160622

點擊工具欄上的腳本按鈕(上圖位置1),輸入如下代碼:

var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener('imageReady', function(){
MugedaCard.showAudioControl(mugeda.scene, 'BGM', false);
});

捕獲17s

其中,上圖位置2的BGM是我們在上一步“增加背景聲音”中為聲音的命名,位置3的false代表,當聲音沒有開始播放時,不隱藏聲音圖標。

調整動畫為不循環。如圖,點擊“循環"選項,將前面的√去掉。


QQ截圖20150722143748

在微信中預覽動畫。點擊保存按鈕,保存動畫。然後點擊二維碼按鈕。用微信中的掃一掃功能,預覽動畫。

QQ截圖20150722143910

豐富我們的賀卡

在上面的基礎上,繼續增加賀卡的功能。

增加一個打開賀卡的按鈕

這一步的結果見:https://cn.mugeda.com/animation/edit/66655044

上面的賀卡,當用戶打開賀卡時,能直接看到賀卡的內容。這裡增加一個按鈕,當用戶點擊這個按鈕時,才顯示賀卡內容。

建立一個新的圖層“紅心”,然後再這個圖層的第一幀插入一個心形圖片,刪除第二幀,將動作改為“行為”,點擊編輯。

QQ截圖20150722144111

在彈出的對話框,我們增加2個行為:首先是當紅心出現時,動畫暫停;然後當點擊紅心,動畫繼續播放。

QQ截圖20150722144213

保存後在微信中預覽,點擊紅心,出現祝福文字。

點擊按鈕後播放聲音

這一步的結果見:https://cn.mugeda.com/animation/edit/ed925221

在上一步的基礎上,點擊紅心按鈕播放聲音。首先選中背景圖片,打開行為對話框,將“出現並播放聲音"刪除。

QQ截圖20150722144455

選中紅心,打開行為對話框,增加行為“點擊並播放聲音”。

QQ截圖20150722144612

選擇聲音1,並命名為BGM。

QQ截圖20150722144638

保存後在微信中預覽,這時候,當只有點擊紅心後才出現聲音。

增加可定制的元素

這一步的結果見:https://cn.mugeda.com/animation/edit/ed925221

在上一步的基礎上,收到賀卡的用戶,可以修改賀卡中的內容。在這個例子中,定制“to”和“greeting”兩個文本框。

增加定制按鈕。新建一個圖層,增加“定制按鈕”。

QQ截圖20150722144807

編輯表單

選中上述“定制”按鈕,將動作改為“表單”。點擊編輯。填寫提交目標為回調函數,回調函數為createCustomParameters(稍後我們會定義這個函數)。點擊“添加表單項”。

QQ截圖20150722144845

增加2個表單項目。

QQ截圖20150722144925

QQ截圖20150722145001

定義腳本

捕獲30

打開腳本編輯器,輸入下面的腳本。圖中的formTo與formGreeting與表單編輯器中的名稱一致;收卡人、祝詞與表單編輯器中的描述一致;to、greeting和文本框的名稱一致。

var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener('imageReady', function(){
MugedaCard.showAudioControl(mugeda.scene, 'BGM', false);

// 定制表單
// 將表單項和文本框綁定在一起
MugedaCard.defineCustomParameters(mugeda.scene, [
{ formName: 'formTo', formDescription: '收卡人', mugedaObj: [{ name: 'to', attribute: 'text' }] },
{ formName: 'formGreeting', formDescription: '祝詞', mugedaObj: [{ name: 'greeting', attribute: 'text' }] }
]);

// 定義回調函數
window.createCustomParameters = function (data, evt) {
finalizeCustomParameters(data, evt);
}
});

保存後在微信中預覽效果。

定義微信轉發內容

這一步的結果見:https://cn.mugeda.com/animation/edit/22d8e5a8

默認情況下,當點擊微信的“發送給朋友”時,對方收到的是一個普通的鏈接。這一步,將使得鏈接變為一個縮略圖、一個標題和一段文字。

截圖20140410173621如上圖,在上面步驟的基礎上,增加腳本:

// 定義微信轉發內容
MugedaCard.defineWechatParameters({
"img_url": "/School/UploadFiles_7810/201603/20160309211636540.png",
"img_width": 128,
"img_height": 128,
"desc": data.formGreeting.value || '節日快樂',
"title": "給"+ (data.formTo.value || '小明') + "的賀卡"
});

其中:
img_url: 縮略圖的地址
img_width: 縮略圖的寬度
img_height: 縮略圖的高度
desc:描述
title:標題

data.fromGreeting.value是用戶在表單中填寫的祝詞。|| '節日快樂' 代表當用戶沒有填寫表單的時候,默認為節日快樂。

保存後在微信轉發,可以看到預覽效果。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved