Claire Chang

  • 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可讓我們用載入的插件影響原來的輸出結果。

  • 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…

  • 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…

  • 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”>…

  • ,

    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…

  • ,

    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 完整範例檔案可按此下載

  • 在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 原始碼如下:

  • 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 =…

  • , ,

    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)時 文字就會呈現傳統的中文直式書寫方式呈現 下面的是將文字改為直式文字的範例程式

  • 使用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…


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