• OSMF簡介

    OSMF是一個開源且免費的Action Script框架,用以建置多媒體播放器。 現今的播放器很多時候不止是播放器,它們可能需要連接至CDN、呈現廣告、補捉使用者事件給伺服器分析、在使用者介面上提供社交功能等…。每個功能可能都會需要該方面的專業人士去專門開發,而OSMF就是為了解決這個狀況,降低開發成本而產生的,在OSMF裡,開發人員所開發的播放器,可以透過一套標準的API,與第三方所開發的plug-in功能整合。 簡單來說,可能今天我的播放器想要與聊天功能整合、或特定事件引發特定廣告,我們可以用OSMF所提供的標準API去開發相關功能,第三方程式不需要關心播放器相關議題,只需透過OSMF所提供的API來做,以提高程式的重用性。 OSMF的開發核心思想是『hooks』,每一個插件都是可被動態加載的功能,可被宣告為動態或靜態載入。靜態載入是指編譯時就被編譯進去、而動態載入則是在播放時再動態載入SWF插件。 Plug-ins分成可視與非可視的元件,可視元件可在載入swf時覆蓋原本的使用者介面(或一個暫停按鈕),非可視元件可將使用者操作紀錄和分析資料傳送給分析伺服器。 在OSMF裡,plug-in是declarative(宣告性)的。plug-in的功能是經由OSMF的API去做宣告,framework只負責檢查插件的功能,然後建立插件與媒體播放器之間的關係。plug-in無法直接存取任何播放器的內容,而OSMF則是扮演著plug-in和media player之間的溝通者。這可以確定播放器和插件之間的溝通是有標準化的。 MediaFactory是處理media和plug-in之間的溝通者,開發player的developer用MediaFactory去載入plug-in並產生MediaElements。雖然我們也可以直接創建MediaElements,但使用MediaFactory產生的MediaElements可讓我們用載入的插件影響原來的輸出結果。

    Continue Reading…: OSMF簡介

  • OSMF相關資源

    介紹 OSMF第一步 Open Source Media Framework中文介紹 開源媒體框架(OSMF)的介紹和概況:上 [譯] Open Source Media Framework – Plug-in Developer’s Guide Open Source Media Framework Developer’s Guide 簡報 Almer Blank – OSMF Slides and Code from FITC SF David Hassoun – 360 Flex Going Deep…

    Continue Reading…: OSMF相關資源

  • CDN – 內容傳遞網路

    CDN(內容傳遞網路) 在wiki上的解釋是: 內容傳遞網路(Content delivery network或Content distribution network,常簡寫成CDN)是指一種透過網際網路互相連接的電腦網路系統,提供高效能、可擴展性、及低成本的網路將內容傳遞給使用者。 簡單來說,CDN就是在全球各地怖署節點,讓使用者可以就近從最近節點取得快取檔案,像是我們架網站時,可把一些共用的如JQuery函式庫、靜態圖片等檔案放置到CDN伺服器(如這篇文章: [JQuery]使用CDN來載入JQuery)來加快網站的讀取速度。也可以避免被攻擊者使用DDos的方式來癱瘓伺服器。 CDN的功能及優點包括 高效能:CDN可以讓使用者「就近取得檔案」,內容提供者事先將檔案推到全球的 CDN 節點,在台灣的下載者儘量從台灣取得檔案,在日本或香港的下載者也儘量從當地的伺服器取得檔案。並且因為下載者透過 CDN 下載靜態元件,可以減少原始 server 的負荷。 ps: 要決定使用者到那個節點要決定使用者應該要到哪組 server 通常有這些方法: GeoDNS Anycast HTTP Redirect (會比較差) 高可靠度:當今天主要網站當機了,使用者可以從CDN的備援網站去讀取檔案,不至於讓整個網站癱瘓。也可以避免DDos的大量機器人攻擊來癱瘓網站。 低成本:因為內容提供者不需要在一個 data center 上建立非常粗的水管。舉例來說,如果傳遞需要 100Gbps 的流量,利用 CDN 架構(將資料提供者分散在世界各地),每個 data center 也許只需要 5Gbps 的流量。由於十個…

    Continue Reading…: CDN – 內容傳遞網路

  • CSS Vertical Align(用純CSS解決div垂直置中)

    本文出處:http://blog.yam.com/hanasan/article/35806444 本次要介紹的是CSS垂直置中(Vertical Align with css)的完整解決整理。 說實話這並不太容易,雖然不像水平置中 {margin:0 auto;} 那樣單純, 但仍有幾種方式可以作到,以下共有五種方式一一介紹。 每種使用方式各有其優、缺點,端看自己要置中的內容是「區塊」或是「文字」來取捨。 方法一 使用CSS table-cell屬性來完成,什麼是table-cell?簡單說就是針對一些html object附于它table的屬性(詳見此), 如果曾經使用過table來排版的網頁開發者,應該知道td的既有屬性valign,古早以前根本不會有垂直置中的問題,因為td下個 valign=”middle”就行了。 而table-cell即是可以將div模擬成表格(table)的儲存格(td),讓原本不存在vertical-align的div可以使用。 Sample Code HTML <div id=”wrap”> <div id=”cell”> <div id=”content”> 要被置中的內容 </div> </div> </div> CSS #wrap { display:table; } #cell { display:table-cell; vertical-align:middle;…

    Continue Reading…: CSS Vertical Align(用純CSS解決div垂直置中)

  • ,

    JQuery選擇器

    1. 選擇所有的table 2. 選擇第N行(若有很多table則只會選第一個table的第N行) 3. 選擇第N行(若有很多table則會選擇每個table的第N行) 4. 選奇偶行 3. 選第一個元素 下面是相關選擇器的一個小範例 下面是顯示的結果 1,0 2,0 3,0 4,0 5,0 1,1 2,1 3,1 4,1 5,1 1,2 2,2 3,2 4,2 5,2 1,3 2,3 3,3 4,3 5,3 1,4 2,4 3,4 4,4 5,4 相關文章: jQuery 參考手冊…

    Continue Reading…: JQuery選擇器

  • ,

    Flex裡綁定(Bindable)相關函數及使用方式

    在flex裡,最強大的標籤應該就是[Bindable]的綁定標籤了 因為某次的需求,我需要研究將Bindable綁定至函數 也順便研究了ChangeWatcher和BindingUtils的使用 【BindingUtils】 官方的說明在此: http://help.adobe.com/zh_TW/FlashPlatform/reference/actionscript/3/mx/binding/utils/BindingUtils.html 這是Flex內綁定的工具,裡面有兩個屬性,一個是綁定到函數(bindSetter),另一個則是綁定到某物件的某屬性(bindProperty) 使用範例如下 1. 綁定到函數(bindSetter) 2. 綁定到某物件的某屬性(bindProperty) 【ChangeWatcher】 官方的說明在此: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/binding/utils/ChangeWatcher.html 因為此次我們要綁定的函數裡是有帶多個參數的,因此BindingUtils的bindSetter便無法使用 這時就需要使用BindingUtils所用的ChangeWatcher來自己做綁定的動作 ChangeWatcher的使用方式如下 根據官方文件watch的傳入的東西依序為”要綁定的物件”、”要綁定的屬性”、”要綁定的函數” 下面便是我根據這些所寫的小範例 MyBindingUtils.as 完整範例檔案可按此下載

    Continue Reading…: Flex裡綁定(Bindable)相關函數及使用方式

  • 在as3裡取得函數呼叫者資訊

    補充:這個方法只可以在flash player的debugger版本可用, 因為在一般非debugger的player無法用”e.getStackTrace()”來抓取歷史資訊 再補充:非debugger的版本只需在flex的compiler arguments裡加上 這串參數,就會可以正確的取得”e.getStackTrace()”的值了! 如果我們在某個函數兩要知道有關傳進的參數的相關資訊 可以使用arguments去取得 下面網址有介紹arguments的使用方式 http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/arguments.html 但是過去在as2裡,arguments可以用caller去知道呼叫此函數的地方 在as3裡,卻將此一屬性拿掉了。 那我們在as3裡該如何知道是誰呼叫了這個函數呢? 我在一個別人的部落格裡找到一個別人寫好的解法 是先丟出一個錯誤訊息,然後去getStackTrace(),再去解析之前呼叫者的資訊 原始部落格在此 Looking up the calling function 原始碼如下:

    Continue Reading…: 在as3裡取得函數呼叫者資訊

  • AS3.0中三角函數的使用

    先用Math.atan2()去求得圓的弧度 用法是弧度 = Math.atan2(x,y) x與y指的是在坐標軸上形成三角型的那個點的x,y 然後再用弧度轉角度的公式去求出角度 //弧度轉角度 var arc:Number=1 //弧度 var angle=(arc*180)/Math.PI; //角度 //角度轉弧度 var angle:Number=30 //角度 var arc=angle/180*Math.PI; //弧度 另外Math.sin、Math.cos裡面要傳入的值,則是弧度 所以若我們要算sin60的值,需要這樣去代入 Math.sin(60*Math.PI/180); 那sin = 對邊/斜邊 所以要求出對邊就是 Math.sin(60*Math.PI/180) * 斜邊 其他的亦同。 語法結構: Math.sin(數值或表達式); Math.cos(數值或表達式); Math.tan(數值或表達式); Math.asin(數值或表達式); Math.acos(數值或表達式); Math.atan(數值或表達式); Math.atan2(數值或表達式); 註:數值或表達式的結果值應介於-1和1之間。…

    Continue Reading…: AS3.0中三角函數的使用

  • , ,

    AS3.0中製作直式書寫的方式

    在as3.0中有 FTE可針對文字去測量其寬度、高度等 針對個別的文字去做處理 相關官網的說明可見此 http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS6C0BB8ED-2805-467a-9C71-F9D757F33FB6.html ElementFormat是定義文字的相關屬性(字型、大小、顏色等等) 然後再new一個TextElement設定文字格式和文字內容 再將其放到一個TextBlock裡面 TextBlock裡面則有許多相關的操作函數 可以對個別的文字做旋轉、定位等等 http://livedocs.adobe.com/flex/3_cn/langref/flash/text/engine/TextBlock.html 詳細的手冊說明在上面 裡面的lineRotation將角度設為九十度(TextRotation.ROTATE_90)時 文字就會呈現傳統的中文直式書寫方式呈現 下面的是將文字改為直式文字的範例程式

    Continue Reading…: AS3.0中製作直式書寫的方式

  • 使用Flex編譯出ios的ipa檔案

    這邊提供一些我看到的教學影片及連結 1.在Windows上一步步發佈的方式 http://support.brightcove.com/en/docs/step-step-guide-publishing-apple-app-store-using-windows 2. 使用Flex編出ipa的教學 http://tv.adobe.com/watch/adc-presents/build-ios-applications-using-flex-and-flash-builder-45/ 3. 怎麼在windows上產生.p12檔案 4. 在Flex裡安裝AIR SDK的方式 http://helpx.adobe.com/flash-builder/kb/error-run-debug-deploy-ios.html http://www.flashdeveloper.co/post/10985842021/overlay-adobe-air-32-in-flash-builder-46 其實最基本的可以就依照這篇文章去做一步步的發佈設定 如果不想太快買開發者身份 也可以到google 打上fake .p12 ,下載破解檔案 就可以直接做發佈的設定了! =================================== 另外也提供不使用flex去做發佈的方式 1.安裝 adobe AIR SDK,請將以下壓縮檔,解到自己電腦任意目錄中  http://www.adobe.com/devnet/air/air-sdk-download.html 例如,我電腦中,我解到:E:\software\AdobeAIRSDK   2.準備 command line 批次檔 build.bat,檔案內容如下:   set SDK_HOME=E:/software/AdobeAIRSDK à 換成你放 air…

    Continue Reading…: 使用Flex編譯出ios的ipa檔案


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。