跳到主要內容

Fluorine新手上路篇

Fluorine之好用一定要來寫篇教學的啦。
1.安裝Microsoft Visual 2008
可以到這兒下載免費的開發版
http://www.microsoft.com/express/download/
選擇紫色的 Visual Web Developer2008 語言當然選繁中版的喔
下載完成就開始安裝, 然後一直下一步下一步到不能下一步。
2.安裝FluorineFx
可以到這兒免費下載
http://www.fluorinefx.com/download.html
下載完成後, 開始安裝, 也是一直下一步到不能下一步。
3.開啟VS2008
選擇上方工具列:檔案/新增/網站

會出現一個設定面版
選擇FluorineFx ASP.NET Web Site
下方的路徑存在本機路徑
語言選擇C#(VB也可以, 只是我很不熟VB)


設定好後,即可在VS2008看到這樣的檔案結構

5.新增類別檔。
在專案面版上,按下右鍵, 選擇加入新項目。

填上類別名稱:FxRemoting.cs ,選用C#語言。

按下確定後會出現一個訊息, 問你是不是要把.cs的檔放在App_code資料夾下,選擇是

5.C Sharp程式碼:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using FluorineFx;
using FluorineFx.AMF3;
// C#的 namespace,相當於Flash的 package
namespace milkmidi {    
[RemotingService("milkmidi Fluorine sample service")]
//這行一定要加, 否則會無法使用RemotingService。
public class FxRemoting {
public FxRemoting() {  }
public string helloWorld() {
return "FxRemoting return HelloWorld";
}       
}
}
6.完成後,在VS2008的方案總管面版上,找到Console.aspx,按下右鍵,
選擇在瀏覽器中檢視。

直接就可以有測試用的畫面。點擊後就可以看到回傳的資訊。
7.Flash端程式碼。
因為是用VS2008來模擬.net環境,所以需要先再VS2008的方案總管面版
找到Gateway.aspx,一樣按下右鍵,在瀏覽器中檢視。
此時畫面是整個空白的, 這是正常的,記下這段網址:

package  {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.NetStatusEvent;
import flash.net.ObjectEncoding;
import flash.net.NetConnection; 
import flash.net.Responder; 
public class UseNetConnect extends Sprite {    

private const GATWAY_URL:String = "http://localhost:7629/FxTutorial/Gateway.aspx";
//連線的Gatway位置, 因為是用VS2008模擬.net環境, 所以上面的路徑每個人都會不同。
//安裝IIS測試會比較好。
private var _nc   :NetConnection = new NetConnection();    
//建立NetConnection物件。
public function UseNetConnect() {   
_nc.objectEncoding = ObjectEncoding.AMF3;
//設定傳送的編碼, AS3當然是要使用AMF3格式, 如果是AS2的話,就要使用AMF0。
_nc.connect(GATWAY_URL);
//連線。
_nc.addEventListener(NetStatusEvent.NET_STATUS, onNetConnectionStatusr); 
//偵聽連線事件。

var _btn:DemoButton = new DemoButton();
//建立一個測試用的按鈕。
_btn.addEventListener(MouseEvent.CLICK , onClick);
this.addChild(_btn);
} 
private function onNetConnectionStatusr(e:NetStatusEvent):void {   
if (e.info.code =="NetConnection.Call.Failed") {
trace("連接遠程服務失敗");
}
}
private function onClick(e:MouseEvent):void {   
_nc.call("milkmidi.FxRemoting.helloWorld", new Responder(onEventResult, onEventStatus));      
//使用NectConnectiong物件的call函式
/*
* 參數一:要呼叫.net的類別名稱和函式名稱, 我們設定的是milkmidi類別包下的FxRemoting類別 下的helloWorld方法。
* 參數二:Responder物件, 當傳送成功或失敗時會呼叫的函式, 需填入二個function。
* 參數三到參數N:後面可以不斷的增加參數, 因為在.net的函式, 我們並沒有寫傳值。所以在這兒先不寫。
* */
//如當要傳值,即可以後方傳入指定的變數。
// _nc.call("milkmidi.FxRemoting.helloWorld", new Responder(onEventResult, onEventStatus),"Flash傳給.net的變數");      
}
public function onEventResult(e:*):void {   
trace("onEventResult result:" + e);      
//回傳的結果:可以得到從.net回傳的一個串字,酷。
}
public function onEventStatus(e:*):void {
trace(e);
}    
} 
}
import flash.display.Sprite;
internal class DemoButton extends Sprite {
public function DemoButton() {
this.buttonMode = true;
this.graphics.beginFill(0xffddee);
this.graphics.drawRect(0, 0, 50, 20);
this.graphics.endFill();
}
}
7.成功。
一些FlashAS3和C Sharp的比較心得
flash端使用package來將類別分開,
CSharp使用namespace

flash的類別需要放在和package一樣的路徑資料夾下
而CSharp不需要

flash使用var 變數: 型別 來宣告
CSharp使用 型別 變數 來宣告

CSharp類別可以有一樣的函式名稱, 只要傳入的參數不一樣即可
Flash則沒有這個功能。
SourceCodeDownload

因為本機在開發應用程式時, 會被flash的安全性檔掉, 所以要設定一下同意存取本機的程式。
先連到:
http://www.macromedia.com/support/documentation/tw/flashplayer/help/settings_manager.html

點選左邊選單的:全域安全性設定面板
此時右邊會出現一個flash設定管理員
下方的資訊應該是空的,點選右邊的編輯:
打上同意的路徑:看你的swf是放在那裡,就是路徑打上即可。
完成後如上圖,關掉Browser,重新發怖swf檔

留言

阿咩寫道…
打內我還不會寫

我要繼續學 >"<
AMO寫道…
非常感謝你的教學
aemeath寫道…
拜一下...再拜一次....
寫道…
上個拜錯,再拜一次....
Focus1921寫道…
奶老師好,想請問如果要從外部(網頁)呼叫AS的function可以用Fluorine嗎?我現行跟公司.net工程師溝通的方法都是透過ExternalInterface的call和addCallBack,但中間都卡一層javascript,這篇文章可以解決flash 直接call .net,那不曉得有什麼方法讓.net直接呼叫Flash裡的function...??感謝。
milkmidi寫道…
server要呼叫cilent
1.透過FMS即可
2.這套Fluorine也有類似的功能, 理當應該是可以做到, 要查一下他的文件
Jason表示…
老師您好,
請問想要學習Fluorine的話,
有沒有推薦的書籍、網站或任何資源?
我在網路上都查不到這方面的資訊,
除了老師提到的那個大陸網站之外,
但是那網頁速度很慢,並且是簡體字的,
若有其他的資源可否請老師提供,
謝謝您。
milkmidi寫道…
我大多都是看官方的文件
裡面的demo都還滿夠用的
匿名表示…
想請問一下安全性問題,因為swf可以被反組譯,就可以看到裡面呼叫的函式和程式碼,是不是會被有心人士自己開Flash IDE ,程式碼改一改,然後去呼叫.net的函式得到的值來做分析
milkmidi寫道…
理論上這樣是可行的
再加上本機執行發怖有絕對的權限
要做到真正的安全性
還是要從加密下手會比較好
雜複寫道…
您好:我下載您的Source之後,也將網址改成本機的網址包括Port,但是在執行Flash的時候,出現了安全性違規 #2048,因為我是一個Flash新手,我查了很多資料,都沒有找到,可能是我Key Word下的不好,可以麻煩您幫我解惑嗎?
milkmidi寫道…
你的電腦有安裝IIS或是VS2008嗎
雜複寫道…
您好,我的電腦有安裝IIS,也有安裝VS2008,我測試過,兩個跑GateWay.aspx是正常可執行的,也跑過Console.aspx,是可以看到正常的Function ,也有回傳值,之前我是使用Flex 3去跑,所以一直出現錯誤,無法存取我所設定的IIS網路位置,經過我再一次的測試,我發現在用Adobe Flash CS3,按Ctrl + Enter去測試執行,結果是正常的,並且有回傳值,但是我把檔案匯出成.swf檔案之後,再去執行,就出現了「.swf 無法存取 Internet URL http://localhost/Gateway.aspx」,但是這個位置是正常的,所以我也搞不懂,不懂在未匯出前,是可以正常執行,匯出之後,為什麼不行?
milkmidi寫道…
我想想,理論上應該在CS3發怖時要連的到。
不然你這樣試試看。
把swf包在html裡,然後在http://localhost下開啟該.html試試,不要在cs3發怖裡測試。
milkmidi寫道…
我加了安全性的設定教學,這樣試試看
雜複寫道…
您好,感謝您的幫忙,經過測試,我把檔案發怖到別的機器上,這樣子就正常了,後來,再加上您提供的安全性的設定,完全就能在本機使用了,感謝您大力的幫忙,謝謝。
Randy'Skill寫道…
milkmidi老師:請問在你文章中的第七項,要怎樣才能確定fluorine有接到Flash的值呢?
走走哈她寫道…
請問奶大
我有按照上面步驟設定
.net能連到console.aspx正常顯示數據
不過as似乎無法跟.net溝通
(有畫面不過button按下去不會回傳string)
我是用vs2008+flex builder3
請問能提供一點意見嗎?

另外我有一個已經開發好的dll(build with vc6)請位fluorine有辦法透過flex直接呼叫dll的methods嗎?
milkmidi寫道…
要測試有沒有成功,
第一步先試試console.aspx能不能正確的顯示
如果ok的話
到flash端在寫程式碼時, 看一下錯誤訊息
有這個訊息我也才知道問題是什麼
milkmidi寫道…
你一樣把dll放到bin資料夾裡
然後用console去看
如果有出現的話,那flash就可以呼叫
Randy'Skill寫道…
感謝奶綠,我再把你的壓縮檔解開重執行一遍是ok的,先來找找自己之前動到那邊而發生問題好了。

另外,我去梅問題大大的部落格有爬到這個
-----------------------------
var url:String="javascript:alert(\"trace:"+e+"\")";
navigateToURL(new URLRequest(url), "_self");
-----------------------------
這樣可以直接在開網頁的情況下alert出trace的內容唷!
milkmidi寫道…
對呀,是用as呼叫js, 不過安裝debugFlashPlayer+FF外掛 FlashTracer,應該更快
匿名表示…
您好,請教您一個序列化及反序列化的問題,程式的範例如下,不知道您有無遇過這問題,謝謝

http://docs.google.com/Doc?docid=0AalQdmAUzFX-ZGNqdGhza2hfMGRudDNqdmN0&hl=en
milkmidi寫道…
不好意思,這個問題我也真的沒遇過也。
mooncat表示…
下方的路徑存在本機路徑???

請問一下本機路徑是要怎麼找到?

現在正在做類似的專案,請大大幫忙 XDD
milkmidi寫道…
就看你的swf檔是放在那裡,就開啟該路徑即可
mooncat表示…
不好意思,我又遇到問題了....

http://www.wretch.cc/album/show.php?i=ivy667944&b=3&f=1385755939&p=3

我把圖放在無名,希望大大可以幫忙,謝謝
mooncat表示…
不好意思,我又遇到問題了....

http://www.wretch.cc/album/show.php?i=ivy667944&b=3&f=1385755939&p=3

我把圖放在無名,希望大大可以幫忙,謝謝
mooncat表示…
我找到一個疑問就是
我現在使用的是.NET3.5版本
請問是這個問題嗎?

我在VS內FluorineFx.dll查看
只有看到v1.1與v2.0

如果是這個問題的話
可能解決的辦法會是什麼?

謝謝
milkmidi寫道…
我也是使用ASP.net3.5, 可以正常使用
看要不要重新開一次專案
匿名表示…
請問這個有辦法支援到Visual Studio 2010嗎?
因為我在安裝時只有看見2008
.Netframework支援到3.5而已

如果要用2010是否就沒有辦法了?
milkmidi寫道…
可以呀,我就是用 2010 發佈的
匿名表示…
因為我抓FluorineFx.NET
Download FluorineFx v1.0.0.15 installer release.
安裝完後,按照網站上的步驟
要新增網站時,並沒有FluorineFx ASP.NET Web Site可以選擇
這是什麼原因呢??

這個網誌中的熱門文章

webpack2 入門實戰 1

大家好,我是奶綠茶
前端戰場不再只是寫寫 js / css , 各種框架、前處理工具百花齊放
身為前端工程師,不只要把程式寫完,還要寫好
老師說:選對好工具,事情就完成一半
如果你還在一隻 JS 打完全部程式,一隻 css 寫所有的 style
每次存檔還在手動 reload 網頁, 圖片壓 K 壓到不要不要的
透過奶綠伯的系列教學,讓你了解 webpack2 帶來的優勢
學會 webpack 可能不會加薪,但至少可以準時下班(誤)
1. 安裝 nodejs
請參考 gulp 安裝編

2. 安裝 global webpack , 筆者使用的是 2.2.1 版本
npm i webpack@2.2.1 -g
3. 在專案的根目錄放一隻 webpack.config.js
entry:你的主 js 進入點
output.filename:webpack 打包後的檔名
output.path:webpack 打包後的路徑
var path = require('path'); module.exports = { entry: './src/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
4. require , module.exports
現在前端都 module 化
可以每個獨立的功能都寫成單一的 js module
除了好管理,也方便讓團隊使用
寫一隻 module_exports_util.js
每隻經過 webpack 打包的 js , 都會是獨立的檔案
所以變數都是私有的, 外部成員都無法得到
在這個 module 裡,我們想開放二個函式
add , getName
所以在最後的 module.exports 指定
筆記加入 jsdoc , 為了方便在開發時,能夠有型別的提示

var name = "milkmidi"; /** * @param {number} num1 * @param {number} num2 * @return {number} */ function ad…

超好用的無限免費網頁空間,無廣告,無流量限制

大家好,我是奶綠茶
今天來教大家如何申請一個無限免費速度又快的網頁空間
1 首先到 https://github.com/ 申請帳號(一直下一步,下一步,下一步)
2 到你的個人頁,切換上方的 tab 到 Repositories, 按下右鍵的 new

3 Repository name
一定要是這樣的格式 username.github.io
我的 github 網址是 github.com/milkmidi
那就要輸入 milkmidi.github.io
選擇 public, 這樣別人才看的到
private 有其他用途, 而且要付費才能使用
完成後按下 Create repository


5 安裝 SourceTree
github 並不支援 FTP 或是網頁上傳,一定要透過指令碼
在這我們選用有圖型介面的軟體,方便大家學習
https://www.sourcetreeapp.com/
下載並安裝
啟動後登入你的 github 帳號

6 clone 你的 github io 專案
右上角有個 Clone or download 點選後
複製 https 連結(不要選到 ssh )


7 將 https 的連結貼到 SourceTree



8 上傳 html
到本機 github.io 資料夾,放一個 index.html
切換到 SourceTree, 這時會看到 Unstaged files 的欄位
選擇 Stage All


9 git 要求每次的 Commit, 都一定要打說明文字(好習慣)
輸入完成後,按下右邊的 Commit


10 發佈(Push),這樣就完成啦
可以到你的 http://milkmidi.github.io/ 去查看檔案有沒有出來


其他
Commit 可以想像是做一個記錄,你可以很多的 Commit
最後再一次 Push 上去
github 原本是給程式設計師用的版本控管服務
免費版提供無限空間讓你放檔案,但一定要是 public
想要有私有的 Project ,就只能付費
github.io 只能放靜態檔案,php, aspx 服務並不支援。
祝大家學習愉快

轉載請註明出處

奶綠的 github.io Source Code

webpack2 入門實戰 3 scss,html,file-loader

大家好,我是奶綠茶
上一篇介紹了 webpack 的核心功能 loader
這篇再來補強各種常用的 loader
css-loader:解悉 css 檔
extract-loader:這個有點難翻,下面會介紹
file-loader:存成實體的檔案, 如圖片
html-loader:解悉 html 檔
sass-loader:解悉 scss 檔
url-loader:解悉圖片路徑
webpack.config.js
module.exports = { resolveLoader: { // 所有用到的 loader, -loader 可以不用打 moduleExtensions: [ "-loader" ], }, resolve: { // 在 require 檔案, 如果不想寫完整的路徑 // 可以加入這些目錄, 讓 webpack 自動尋找對的檔案 // 請注意我們加入了 src/img 路徑,後面會再介紹到 modules: [ path.resolve( 'src/html' ), path.resolve( 'src/img' ), path.resolve( 'src/css' ), path.resolve( 'src/js' ), path.resolve( "node_modules"), ], // 在 require 時可以不用打副檔名 extensions: [ ".js", ".scss" ] }, } 再來就是 loader 的介紹
scss
在這要做多組合的應用
先將 .scss 透過 scss-loader 轉換, 並產生 sourceMap 檔
再過 css-loader
最後再過 style-loader
{ test: /\.scss$/, // 多個 loader 組合, 可寫成一行,或…