馬老師 雲端研究室 這裡是一個分享的園地,希望大家可以多多交流

網頁全螢幕化的Flash動畫

發布於 十二月 12, 2011

好一陣子沒更新文章了,因為最近把自己弄得很忙,不過在日前的授課中

有同學問到了要如何在網頁中製作一個可以全螢幕化的Flash動畫

教完了之後想想這個範例應該不用花太久時間,所以就順便在這邊分享一下吧!

首先要先會把swf放在網頁上(廢話),接著在Flash中設置一個按鈕,寫下如下的ActionScript

btn.addEventListener(MouseEvent.CLICK,fullFn)
function fullFn(e:MouseEvent){
	if(stage.displayState == StageDisplayState.NORMAL)
		stage.displayState = StageDisplayState.FULL_SCREEN;
	else
		stage.displayState = StageDisplayState.NORMAL;
}

另外在網頁上也要在HTML中加入下面的參數

<param name="allowFullscreen" value="true" />

如此一來就可以完成這樣的效果囉!也可以參考一下範例頁面

分類於: 教學分享 沒有回覆

緬懷Steve Jobs – 產品發表會

發布於 十月 6, 2011

Steve Jobs的每一場產品發表會都會令台下的觀眾們掌聲亦或是笑聲不斷

我想是因為他非常用心的設計每一場發表會,如果說他是天生的演說者恐怕太膚淺

能如此順暢與自然的掌握簡報所有的時間點是需要經過時間演練的,做過簡報的人都知道

每一頁簡報,都會帶著你想要傳達的一種概念

每一段動畫,也都代表著一個思考的邏輯順序

Steve Jobs不僅僅是一個CEO也是一個偉大的設計師,他設計出許多不可思議的作品,當然也包含產品發表會

這邊幫大家整理了一些有中文字幕的產品發表會影片,分享給大家!

不過一個人的能力有限,如果大家還有發現其他具有中文字幕的產品發表會,也麻煩你告訴我一下,謝謝!

1984 Macintosh

2008 iPhone3G

2010 iPhone4

2010 iPad

分類於: 隨筆雜記 沒有回覆

緬懷Steve Jobs – 史丹佛大學 演講

發布於 十月 6, 2011

在今天一個巨人離開了,他的一切影響世人甚鉅,希望更多的人可以看到他正面的態度

在此轉載至Youtube上Steve Jobs在史丹佛大學的演講,跟大家分享

Part1.Connect the dots

Part2.Love and Lost

Part3.Death

Rest In Peace Steve Jobs.

利用Tweener製作動畫 – 貝茲曲線

發布於 十月 4, 2011

在看過前面一篇Tweener基礎篇之後,應該會發現我們的動畫元件雖然可以依照不同的模式移動

但是在路徑上還依然是保持直線移動,而這一篇文章就要來示範如何讓元件利用貝茲曲線來產生移動路徑

至於甚麼是貝茲曲線?大家可以參考維基百科上面的說明,這邊就不贅述了

在Tweener的官方網站裡有提供一個貝茲曲線產生器的Flash動畫讓大家下載

不過由於官方示範這個貝茲曲線產生器所使用的是舊版本的Tweener Class,所以在程式碼範例上有些缺失

馬老師這邊提供我修改過且進行中文化後的範例供大家下載

Tweener 貝茲曲線產生器 螢幕截圖

利用Tweener製作動畫 – 基礎篇

發布於 十月 3, 2011

今天開始來提有關Tweener這個Class,大家應該都知道Flash這套軟體最大的特色就是在製作動畫方面

從以前我們必須使用逐格的方式來製作動畫,到有了Flash的各式補間動畫

例如:移動補間動畫(Motion Tween)、形狀補間動畫(Shape Tween)

Flash移動補間動畫 Flash形狀補間動畫

Google Swiffy & Adobe Wallaby讓Flash變成HTML5

發布於 九月 30, 2011

目前Flash在市場上的狀況很兩極,有些網站還是含有大量的Flash動畫,有些網頁是希望能不用就不用

當然多少與iPhone、iPad不支援Flash有些關係

不過Adobe和Google都針對不能觀賞或不想使用Flash又希望能有動畫的網頁提出了解決方案

簡單來說就是把Flash檔轉換成HTML5的格式,當然這樣的轉換並不是針對具有互動功能的Flash

而在名稱的部分Google稱為Swiffy而Adobe則是Wallaby,以下是兩個官方網頁的截圖和網址

Google Swiffy 網站截圖

標籤: , 繼續閱讀

jQuery範例 – LightBox2

發布於 九月 29, 2011

這篇文章也在馬老師舊的部落格出現過,不過既然搬家了就重新做一次吧!

其實在馬老師雲端研究室裡面也大量應用了這樣的效果,無論你在這點選了圖片或Flash都會觸發這個效果

相信大家也看過很多次了,接下來我們就看看怎麼樣在自己的網頁中加入這樣的效果

首先大家可以先到LightBox2的官方網站下載他們打包好的jQuery和CSS...等資源,或按我直接下載

LightBox2 範例圖1

利用Dreamweaver CS5.5設計行動裝置網頁

發布於 九月 28, 2011

智慧型手機竄紅、平板電腦普及、行動網路發達,讓上網不再是只需要宅在家裡才能做到的事情

不管是走路、等車、坐車、吃飯、蹲馬桶以及許多的時候,都可以利用這些裝置來進入網際網路的花花世界

所以許多的網站也針對這些行動裝置來製作獨立的頁面,甚至根據螢幕尺寸來最佳化頁面

iPhone 臉書網站直式 iPhone 臉書網站橫式

利用Flash CS5.5發佈iOS App

發布於 九月 27, 2011

Adobe在今年的4月12日發佈了全新的Adobe CS5.5系列產品,這個系列是在原有CS5上增加與修正了一些功能

其最重要新增的部分應該可以說是行動平台上面的發佈與製作,例如:Andriod、iOS...等

而這邊就稍微跟大家介紹一下,要如何利用Flash CS5.5來發佈iOS的App

不過在教學之前,要先跟大家提一下正規(想必等一下會不太正規)開發iOS App的程序

首先要到Apple Developer申請開發人員的權限,當然加入並不是免費,每年需要$99美金

Apple Developer 網站截圖

Facebook 遊戲設計 – 礦務探險

發布於 九月 26, 2011

礦務探險 遊戲截圖

遊戲名稱:礦務探險

設計團隊:陳韋丞、林舒敏、黃俊銘、李允中、廖鶴翔、吳威煬

遊戲網址:http://apps.facebook.com/mines_exploration/

遊戲說明:類似太鼓達人...等音樂節奏遊戲,利用正確的時間點擊破落石,需達一定的數量方可過關

頁面 1 至 8
1
2
3
4
5
...
最末頁 »