J さん 的碼戲世界

另一個使用 FlashDevelop 的開發流程是利用Flash 來建立資源(圖形、影片片段等)而用 Flex SDK 來編譯程式： 　1.使用 Flash 建立圖形及內嵌的資源（如字型、聲音） 　2.使用 Flash 發佈 SWC library 檔。 　3.將 SWC 加入到 FlashDevelop 專案。 　4.使用 FlashDevelop 結合 Flex SDK 編譯你的專案。 元件設計 　 　首先，假設你是扮演視覺設計師的角色。你要做的就是將 Flash 影片中要使用的元件設計好。然後，必須在各個需要供程式操作的元件中加入與該元件與該元件結合的類別。如下圖（特別注恴：fla 文件類別設定要留白，不要與任一個 Class 結合） 　並且在發佈設定的 Flash 頁籤勾選要匯出 SWC。然後，按下發佈按鈕。Flash 會將SWC 發佈到與 .swf 檔案同一目錄。將此一SWC 交給程式設計人員。 程式設計 1.建立一個 AS3 專案。(記得讓它自行產生目錄) 2.將 SWC 複製到專案的 lib 目錄下。然後，在 SWC 按右鍵勾選目 Add to Library。 3.開始在 Main.as 寫程式，使用 SWC 內的元件。(你不一定要將主程式命名為 Main.as ，如果是多個類別同時存在時，只要在進入點的 Class 按右鍵，選取 Always Compile 即可) package { import flash.display.MovieClip; import jason.test.Square; /** * @author Jason Chen */ public class Main extends MovieClip { public function Main():void { var sq:Square= new Square(); addChild(sq); sq.x = 100; sq.y = 100; sq.width = 50; sq.height = 50; } } } 4.如果你要該 swf 產生在不同目錄，或用不同名稱，你可以在 project-> Properties 設定其輸出檔案路徑名稱。 5.最後，在 FlashDevelop 使用 Project->test movie 測試其執行結果。 如此...

最近一直在找一個比較好用，而且免費的 flash 開發工具。最後，發現了 FlashDevelop。對我來講，比較可惜的是－它並不是 Eclipse 的 Plug-in，或者類似的開發環境，而必須另外再熟悉它。但是，它的確符合了免費好用的條件。以下就來介紹如何使用它。 一、下載 主網頁 http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page 下載網頁 http://www.flashdevelop.org/community/viewforum.php?f=11 二、安裝 安裝之前，先需要安裝 Flash Player 9 ActiveX runtime；另外，如果使用 Flex SDK 作編譯，也需要安裝 JRE 1.6 以上，和 Flex SDK。它們的下載網頁分別在 JRE http://java.sun.com/javase/downloads/index.jsp ownloads/index.jsp Flex SDK http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3 (它只需要解壓即可) FlashDevelop 它的安裝相當簡單，基本上只需要執行下載後的執行檔，選取安裝路徑，其他幾乎都是下一步(next)接下一步就完成了。 三、設定 安裝完成後，有一些基本的設定要設（假設已安裝好 JRE ，並已解壓 Flex SDK）: a.先啟動 FlashDevelop b.設定 flex SDK 路徑：在選單上選取 Tools->Program settings(或直接按 F10)在以下畫面設定。 c.選擇 FlashViewer Plug in 同以上畫面選取 FlashViewer ->External player path。選取的路徑是你的 Flex SDK 安裝目錄之下的 [Flex_SDK_Install_Path]\runtimes\player\10\win\FlashPlayer.exe d.在選單上選取Tools->Flash Tools -> Documentation Generator ->Settings 如圖3 設定的路徑為 [Flex_SDK_Inst...

　當網頁製作成為網路生活必備基本能力時。HTML 便是大家不可或缺的基本常識！可惜的是，Jさん發現大多數的網頁設計人員(尤其是偏向視覺視設計的設計師)，竟然大多只懂工具，不懂語法。知其然，不知其所以然！所以，這幾篇簡單的概念，希望能幫助一些有興趣但不得其門而入的朋友，清楚網頁運作的基本原理。期待 即使國小高年級的學生，也可以看懂這些內容 。 　就像你開始學算術一樣，你的啟蒙老師絕不會給你一部計算機！你需要的只是一顆清楚的腦袋和一枝鉛筆(或十根手指頭)！但是，絕大部份學習網頁製作者，可能一開始就使用像DreamWeaver 或 Front Page 這一類工具。所以，常常遇到比較棘手的問題就不知道如何下手。 現在，我們將從 Browser 的運作開始介紹，讓大家可以了解 HTML 語法。並且，只需要使用記事本就可以做出簡單的網頁。當你熟悉了這些基本運作原理之後，使用工具才能得心應手。 首先，我們先應該要了解在網址列所輸入網址代表的意義（直接按連結時也一樣）。一般我們輸入的網址列可以將它區分成以下幾段： 　 http: //www.abc-company.com.tw : 80 / index.html 當我們在網址列輸入網址時，第一個接受指令的是瀏覽器（你用的 IE 或 firefox 等）。 以上這一串資訊已提供足夠的訊息，讓瀏覽器到茫茫網海中，去找到你所指定的資料。 http: 　代表你要和遠端的伺服器（就是遠端的一部連上網路、提供服務的電腦）要用什麼通訊協定溝通。通訊協定，你可以先將它想像成人類的語言。就像你看到老外會先來一聲 ”Hello!"，表示你可以和他說英文；http: 在一開始的位置，就是告訴伺服器，我要用 http 這種通訊協定，取得一些資料。至於，http的細節有什麼？一般的使用者倒可以不必太在意。 //www.abc-company.com.tw ：這是伺服器的位置，用’.'區分開來。我們從最後往前說明：tw 是國碼，就代表台灣。com，代表是一家公司（其他，gov、org...分別代表政府單位，法人組織...等）。abc-company 就是公司（或組織）網域名稱（想像一個公司內有許許多多的伺服器，它們所組成的群組就是網域）。www，通常是一部伺服器的名稱（網域內的一部伺服器）。 :80 :是一個埠(por...

開始學習用 Flash 繪製製動畫之前，一定要先了解以下的相關概念： 一、向量圖形與點陣圖： 向量圖 指的是繪畫過程的筆畫都留存下來，利用數學向量運算來呈現所繪製的結果。 所以，它可以被逐筆被回復，比較容易依比例放大縮小，而不容易失去原有的真實感。在 Flash 當中直接繪製的圖形就是向量圖，所以當它被放大並不會失真。而且一般 而言，它所佔的記憶體空間比較小。 點陣圖 指的是圖形最終的樣子是以一點一點的方式被記錄下來，一般的照片就是一個點陣圖最佳的例子。一般而言，它所佔的空間比較大，而且放大時會失真，圖形變成如同加了馬賽克。 二、動畫原理 動畫和電影一樣是利用人類視覺暫留的錯覺，來讓間隔極短的不連續圖片看起來像是連續的動作一般。我們在 Flash 中製作動畫，也是一樣的原理。所以，請在開始使用Flash這個工具前，先了解以下的名詞： 影格 所謂的影格，就是我們上一段所說的”不連續的圖片”中的一張。例如：1 秒鐘顯示12張影片，用專業一點的說法就是一秒中有十二個影格。也就是說為了要顯示那一秒鐘的動畫要畫十二張圖形。而每一張圖顯示的時間只有 1/12 秒。 關鍵影格與一般影格 　當然，你也不用一聽說一秒要畫十二張圖，就想說算了，不學了！也沒那麼可怕啦！這是因為影格當中，還有分成一般影格與關鍵影格。在以前，手工繪製卡通影片的年代，關鍵影格就是需要由”關鍵性”大師所繪製，而一般影格就是由還未”出師”的阿榮在畫的（歹勢嘸知阿榮的師兄叫啥名，不過阿榮也是還未”出師”）！為什麼要這樣區分呢？因為關鍵影格通常指是在動作有所轉折的那些影格，所以如果沒畫好，會影響整個畫面的流暢度；而一般影格，則只是銜接二個關鍵影格間的圖片。所以，還沒”出師”的阿榮只要跟著描，做一點小變化就可以了。 　現在用電腦作畫，每個人都是大師！所以要畫關鍵影格，中間的一般影格，就留著讓電腦幫忙產生”補間動畫”就可以。以上這樣，應該就可以大致了解”一般影格”、”關鍵影格”、”補間動畫”這三個名詞了吧？！ 圖層 圖層是指將遠近或上下的物件，因為它們的移動或變化的頻率、速度不同，為了避免太多的重畫或相互干擾，所以在電腦上將它們分別畫在不同的圖層。以往手工繪製的年代則是用透明的賽璐璐來製作不同圖層的效果。 　"山月隨人歸"，在繪製時，就可以利用不同的圖層來繪製山、月、人。人在最上層，移動最快，其次是山...

　本來想用 HTML 的 textarea 來顯示範例程式，但是放進去之後才發現所有的換行會被轉換成 <br /> 。在網路上找了一些資訊之後，找出了自己的解法。雖然，可能不是最好的，但也與大家分享。 還是 Copy 原始碼到 HTML 碼的適當位置中。 加入<textarea>標籤把它框起來，並加入 適當的屬性 ，如 cols、rows。 用簡單的符號取代<br />。 例如:我用$$來取代它。(沒錯，根據 Secret 一書的說法， 喜歡$ 就會招來 $) 特別注意 textarea tag 的 id (以後放 Samle Code 的欄位就都用這個) 它看起來就像這樣： <textarea rows="15" cols="40" id="SampleTextArea">package cyberstar.test;$${$$ import flash.display.MovieClip;$$/**$$* @author JASON$$*/$$public class TestMain extends MovieClip$${$$public function TestMain()$${$$trace("start");$$}$$}$$}</textarea> 　然後到 blogger 的版面配置加入新的小工具(HTML/JavaSript)和適當的 javascript 程式碼，用 '\n' 以取代 '$$' 字串。如圖一和圖二的操作及程式碼。 (圖一) (圖二) <script type="text/javascript"> //用以顯示範例碼 var samplecode=document.getElementById("SampleTextArea").value; while (samplecode.indexOf("$$",0)!=-1) { samplecode=samplecode.replace("$$", '\n'); } docu...

　ActionScript 3.0 針對影片片段及各種顯示物件的概念與 2.0 有截然不同。如果你寫過 ActionScript 2.0 請務必先忘了_root,_level0,_level1...和 getNextHighestDepth()這些東西。 　ActionScript 3.0 的顯示最上層是舞台(Stage)，然後是 文件類別的實體 ，往下是則可以顯示的顯示物件或者顯示物件容器，大致如圖一所示。顯示物件容器本身也是一種顯示物件，只不過它可以再包含其他的顯示物件在其中，而成為一個顯示物件列示(display list)；而單純的顯示物件就無法再含有其他物件。例如：Shape 是顯示物件，MoiveClip、Sprite 是顯示物件容器。 圖一 　任何顯示物都可以透過 stage 屬性來取得舞台物件。以下的程式範例：簡單說明如何使用顯示物件及顯示物件容器。 package jason.tutorial.actionscript { import flash.display.MovieClip; import flash.display.Sprite; import flash.display.Shape; /** * @author JASON */ public class Document extends MovieClip // 這是文件類別 { public function Document() //建構元 { // 建立一個名為 container 的顯示物件容器 // 自建一個 Container Class 且必須先和一個已存在的影片片段結合 var container:Container=new Container(); addChild(container); //容器加到主影片成為子物件 container.x=(container.stage.stageWidth-container.width)/2; //在舞台居中 container.y=(container.stage.stageHeight-container.height)/2; // 直接畫一個圓的形狀 var circle:Shape=new Shape(); container.addChild(circle); //加成容器的子物件 circle.graphics...