flex > 裏所有文章列表

四月北京行 – Adobe Summit + QCON 2010

In General, flex   April 7, 2010 - 10:36 am

春天總是忙錄的季節。

這個月除了幾個即將開花結果的重要專案外,四月底將一口氣在北京待上一星期,參加兩場重量級的活動。

■Adobe Flash Platform Summit

活動資訊

這是 Adobe 歷年來少見在華語地區所舉辦的大規模活動(最接近的一次大概是數年前在台北舉辦的 Max 2006),從這次列出的 agendaspeaker 來看,這已經是相當於一個 Max 等級的活動了,只是提早發在在四月,而且在大陸 :P

我在一個十分意外的情況下被邀請主講一個 session,主題是 “Transformation of digital publishing using AIR” (使用 Adobe AIR 完成數字內容發佈轉換 ),這個題目有趣的關鍵在 “Transformation” ,而不是一般人較可能會注意到的 digital publishing 然後直接跳轉到 ebook hype。

視覺的東西用文字空談比較沒感覺,但如果搭配下列幾支影片就會立即有個概念:

Wired Magazine on Ipad

Sports Illustrated Tablet Demo

Mag+ concept video

這個題目可談的範圍可寬可窄、可深可淺,但主要會 focus 在如何將 digital content 以 touch-oriented 的方式呈現在不同 screen sizes 的裝置上面,它包含數位內容的工作流程轉化,閱讀介面操作設計的改變,以及適應不同螢幕大小 (cross-screens) 的技巧。

當天也會實際 demo 使用 Flex/Air 製作的閱讀器,展現 flash player 驚人的文字顯示能力(尤其是簡繁內容與直排等本地市場獨有的需求),有興趣的朋友4/21下午可以來聽聽,當然我更期待事後能有機會面對面與同好們交流,請直接走過來與我打招呼吧 :)

■QCON Beijing 2010

活動資訊

QCON 是每年在倫敦、舊金山、東京等地舉辦的大型技術研討會,去年(2009)第一次到北京舉辦,那時有幸主講了一場 RIA 視覺/程式工作流程整合的 session,並且同時認識了幾位大陸社群網站擁有豐富實戰經驗的高手,當時聽到他們一開口要面對的是每日超過數千萬人甚至上億的流量,就覺得這真是了不起的成就,光要讓 web server 挺住就已經很厲害,如果還能確保服務持續快速就威了。

我記得當時印象最深刻的一場 session 是「豆瓣」網站長的演講,他平鋪直序條理分明的將豆瓣開站後一路成長所面臨的 scaling issues 與解決方案說分明,聽完後覺得功力大增,光這一場學到的東西就值回所花的機票與時間了 :P

今年很巧合的,QCON 2010 舉辦日期緊接在 Adobe Summit 後一天登場,而且同樣在北京,想想既然人已經在附近,當然就抓緊機會過去多學習學習了。

這次請到的重量級講者頗多,facebook, twitter 等就不多說,居然還有 json 之父 Douglas Crockford,由於最近正好在大量接觸 html5/ajax 之類的東西,對 javascript 非常有感覺,也因此很期待聽聽他對下一代 javascript 的發展有何看法(或許直接用 actionscript 3 取代它吧?:p)。

其它我有興趣的題目包含:

JavaScript的現狀和未來

人人網技術架構的演進

監控和虛擬化技術在「去哪兒」中的應用

Facebook技術實踐

大規模Ajax應用架構

REST深度解析:超媒體

淘寶網前端應用與發展

如果有打算參加的朋友,也可以利用晚上時間碰面聊聊!

comments(4) | by admin

Announcing “FastRead” – a speed reading trainer (速讀訓練新玩具)

In General, flex   March 10, 2009 - 1:34 pm

*FastRead 是什麼?

FastRead 是一個針對中文內容設計的速讀訓練工具,它可以調整每次顯示的文字長度、切換速度、文字大小,籍此訓練眼睛與大腦習慣批量且迅速的接受文字,同時提升理解程度。

線上試玩

影片展示

Picture 1.png

Picture 2.png

*為何要寫 FastRead?

主要是因為平日要看的東西實在太多(專業書籍、閒書、中英文報紙、技術文章、rss、twitter…. you name it !),時間有限但資訊爆大量的情況下,必然得用比較有效率的方式解決這問題,因此最近又開始重溫十幾年前學過的速讀技巧,希望能有所幫助。

由於之前訓練的方式與內容都是針對英文題材,因此如果想同時加強中文的速讀能力,顯然市面上找不到現成的工具,只好自已來了,因此花了幾個小時寫了一支小工具出來,自已用了幾天覺得挺不賴,很快就找回速讀的感覺(呃,手有手感,那眼睛應該有眼感吧 XD)。

由於前後斷斷續續大概只花了五六個小時趕出來,因此程式當然還有許多問題,但想想或許可以幫助其它人做中文速讀訓練,所以就先推出讓大家玩玩,有 bug 再提交回來吧。

*速讀的原理

速讀的原理很簡單,一般就是

-把字當圖像來處理:眼睛一次看一組字(這裏的一組可能為三、四個字, 一行、兩行、四行甚至是古人傳說中的一目十行甚至一頁之類的不等),整批送進大腦裏

-避免「心讀」(subvocalization):一般人閱讀的習慣通常是

眼睛看 -> 心理默讀 -> 耳朵聽到 -> 大腦接收並理解

而速讀理論上是要略過中間兩個 steps,做到所謂『眼腦直映』,也就是睛眼看完文字直接進入大腦裏理解。

這兩個原則聽起來容易,但實作起來卻很困難,主要原因是

1、速讀不只是講求速度快,更重要的是理解度(comprehension) 也要提升,不然讀很快結果船過水無痕也是白搭,也因此大部份速讀術都會搭配記憶訓練之類的配套

2、大部份人從小養成的閱讀習慣就是先把字唸出來,然後才理解,因此一下子要改成不發聲(不論有無真的發音唸出來)而把文字當圖像整批往腦裏送並且要能理解,還要記起來,就顯的非常困難。

而 FastRead 可以幫上兩個忙:

1、訓練眼睛一次看一組字(例如一次四個字、八個字甚至一行)

2、加快每組文字的顯示速度,讓心沒時間音讀,而強迫大腦直接理解文字,進而達到『眼腦直映』的效果

建議一般人剛開始可以嚐試一次看4-7個字,速度大約 150ms,這個速度就差不多是眼睛來的及接受文字訊息,但心裏來不及讀完聲音的程度,有趣的是,如果非常專心,你會發現對文章的理解力其實還挺高,初學者至少也有 60% 的理解,等訓練個幾天後,相同的速度下理解程度就可提升到80% 以上,這時再搭配一些閱讀技巧訓練,整體的閱讀速度、理解程度與記憶就可以達到優秀的程度了。

不過當然速讀是門大學問,從1950年代出現至今,仍然還在不斷研究改進中,而我個人的速讀能力跟眾多專家相比,差不多只比幼稚園小班低一點,因此如果對這個主題有興趣,請參考下列資料

-Speed reading (wikipedia)

-Speed reading (wikibooks)

-Subvocalization

-SQ3R(reading skills)

*待改進之處

FastRead 目前最大的問題當然就是中文斷字的處理,而中文斷句一向是個大學問,絕非一天兩天就能搞定,幸好我正好認識一位自然語言學 大。長。輩,待有空好好請教後再來改版(出門在外就是靠長輩的啊~)

目前中文斷字主要就是依下列規則

-先依標點符號斷一次,例如,、!?之類的

-再依英文字或括號()” 之類的斷句,儘量讓整句的英文連在一起,並且播放時間會停留久一點(畢竟大部份人讀英文的速度沒那麼快)

-最後再將每個句子依 user 指定的字數分割,例如每四個字一組,當然這裏面會自動調整,有時可能會是三個字或五個字一組

-最後,則是有少量的「避頭尾」處理,儘量不讓標點符號單獨出現在一行,而是將它併入前一行裏

如果你有更好的建議,or better yet, 直接寫好一個 parser (而且還是用 as3),那當然歡迎隨時與我聯絡吶 :P

*製作過程

最後聊一下這支小程式的製作過程。

我平常的工作都是寫大部頭的 enterprise application,一個案子可能跑數月到十數個月不等,製作手續也是非常詳細、完整,因此這次雖然一開始就知道只有幾個小時能投入開發,一切要從簡以快為上策。

但從平日的經驗中我瞭解到:快有快的做法,可有些關鍵 steps 不能省,例如UI的設計,因為一開始 UI 沒做好,將來開始 coding 後的修改成本就非常昂貴,並且做出來的東西也不會好用,那整件事就沒意義了。

因此還是乖乖用 Balsamiq Mockups快速畫了兩張介面稿,以方便儘快看出有無操作上的缺失,下面兩張圖大概只花了10分鐘左右,再加上一些來來回回的推敲與修改,總設計時數約30分鐘,但它已足夠確保最終的成品堪用並且沒有明顯的問題(至於其它平常後續會做的處理由於趕時間就直接略過了)。

btw, Mockups 真是一支非常實用的小工具,而 Balsamiq 這家公司與它背後的主人,則更是許多有趣的故事了,但那顯然離題太遠就先按下不表了。

fastread1.png

fastread2.png

總之寫這支小程式是很有趣的經驗,宛若平日工作流程的縮小迷你與超級加速版,平日要兩星期的事現在大概一小時做完,以往要來回溝通三次的決定,現在想兩秒就定案,如果以後每個客戶都這麼配合,那人生就太幸福啦 XD

最好希望大家試用 FastRead 後如果有任何意見與想法,請不吝隨時回報給我,感謝 :)

comments(14) | by admin

Undo/redo for flex textField.

In flex   February 14, 2009 - 5:48 pm

Picture 2.png

(click on the image to see demo video, source won’t be available for that it’s a client project, IP reserved)

As most of you know, undo/redo had long been part of the basic user experience all users would expect for pretty much every apps out there, let alone in a full-fledged RIA these days (hey “rich” ain’t there in RIA for nothing !), but this is not the case for flex/flash apps,

I’ve been wanting this for quite sometime now, to be precise, ever since flex first come out a couple of years ago I’ve been thinking why there’s no undo/redo capability for all the textfield-based component (TextInput, TextArea and RichTextEditor, that is).

and fortunately enough recently a client asked for this feature added to the app I’m working on, so I got a chance to finally have it implemented.

*Basic features include

-built against flash.text.TextField, so all text components in flex framework supported.

-has built-in UndoManager but user could supply custom UndoManager too, as long as it implements IUndoManager. (who doesn’t ?)

-unlimited level of undo and redo

-undo by single character (TextMate any one ? ;-) or a stream of words (a.k.a normal mode)

-correctly handle delete and backspace keys for mac

-support built-in RichTextEditor, hence all text format modifications could be handled too

-handles right-click context menu (“Cut” and “Paste”) in AIR.

-easy to use, var tm:TextManager = new TextManager( tf ); one line of code and it could undo/redo everything.

-support double-byte languages like Chinese, Korean and Japanese (this is not really a feature for that flash player support unicode natively ;-)

*Some of the problems I ran into include

1. there’s no easy way to handle cut and paste short cut keys within browser, cmd-X and cmd-V will be “eaten” by containing browser, under Stand Alone player case, the player shell will eat the event, I know this could be dealt with old-school javascript tricks but I would rather refrain from going that direction because then developers will have to remember adding that piece of junk js to the browser and handle ExternalInterface.

After playing with various keyboard events finally I find a way to handle cut and paste with a combination of key events, all native flash player event hence no js, no interface, no nothing, just drop the swf in there and magic happens.

2. right-click menu
Seems to me there’s NO WAY to handle “Cut” and “Paste” menu command in browser version, and worst yet, there’s no way to disable the menu (in flash player 10 there’s ContextMenu.clipboardMenu = false, but, it’s not applicable to textField, ouch !). I could just have my finger crossed and hope user won’t be using that right click menu.

Good news is it could be handled correctly in AIR, and better yet, the project I’m working on, is an AIR app :)

3. I tried to have it implemented in a strict MVC way, but the traditional textfield in flash player 9 didn’t provide some of the low-level functionalities I need, so a bunch of quick hacks were threw in, but good thing is the new text engine in flash player 10 looks real promising, let alone the Text Layout Framework(TLF), I’m looking forward to work on that sooner than later.

*What’s next ?

Some people asked is it possible to turn this into a full-blown text editor, sure you can, but there’s already Buzzword and Google Docs providing such services, and like a 1000+ editors on the desktop ( TextMate, TextWrangler, Smultron, EmEditor, NotePad++, to name a few), so I don’t really see the value in creating such thing, but I could be wrong, if so, please kindly let me know !

comments(6) | by admin

FMS 3.5 正式販售了

In flex   January 14, 2009 - 9:25 am

Picture 1.png

一早接到email 通知,FMS 3.5 正式開始販售,想想從它去年 announce 到現在開賣,還真是隔了很久,但正式販售代表的意義是 – 至少有 trial version 可玩了。

新版本功能看來很好很強大,只可惜就是沒有 AS3 支援,也沒有其它 scripting/language support,所以還是要繼續跟 AS1 打交道啊。

下面是 release note 裏看來的 new features (只列出我覺得有趣+值得觀察的項目,詳細清單在這裏)

*Plug-in architecture

Integrate with other servers, back-end services, and workflows with the new plug-in architecture. Three classes of plug-ins for authorization, server access, and file access let you extend Adobe® Flash® Media Interactive Server 3.5 software with custom connectivity, security, and deployment options.

這點很重要是因為以前 FMS app 很容易被人家亂搞,自已寫個 fake client 就連去,結果浪費頻寬等問題一大堆,現在透過自製 plugin 門檻就高一點。

*MPEG-4 video recording

mpeg-4 + HD 的重要性就不用多說了,現在不到 1080P HD 等級大概不用肖想吃 CDN 或 streaming content 這塊了,所以這次從 encoder, DVR 到 dynamic streaming 都支援,算是非常符合時勢

*AMF3 support

有點雞肋,but nice to have.

*Easier implementation
*More secure content delivery

Lock down your high-definition content and communications with enhanced stream protection and server-side security. Encrypted H.264 streaming is now supported — with the encrypted Real Time Messaging Protocol (RTMPE), you get higher performance at 128-bit encryption strength. In edition with RTMPE, protect SWF files from being reused or modified, and help prevent unauthorized connections with improved SWF verification. Use the plug-in architecture to create custom, real-time rights control by validating with external services such as LDAP or SOAP.

新增支援 windows server 2008, red hat 5.2, RTMPE 加密串流到 air runtime

*Multipoint publishing

Use multipoint publishing to remotely inject new live or prerecorded streams into your delivery system to quickly add time-sensitive content. This is most useful when working with a content delivery network (CDN) or distributed servers.

這個聽起來很威,但全世界有能力玩這種等級的 CDN 大概沒幾家吧,例如 MediaTemple, BrightCove 或少數幾個 in-house 的媒體。

*Stream data access

Create dynamic thumbnails or video previews on the client side with the ability to take a snapshot of the streamed video (requires Flash Player 9 or later).

這個不算新鮮事,但在 fp9 裏實作手法可能更有趣,我推測是直接從 binary stream (byte array) 裏做 memory dump 然後生成 preview,這個要等裝起來玩後才能驗証了。
另外從 FMS 3 開始就支援一個 RTMFP 格式,如果你有在 follow MAX 2008,應該已經注意到讓每個人眼睛一亮的 p2p 功能(包含正 beta 中的 Stratus service),RTMFP 就是讓 p2p 成真的 UDP 傳輸格式,只是之前一定要用 FMS 才行,現在也可選擇不俱 Audio/Video 能力的 Stratus (or better yet, can we have standard SIP support ?) 來玩同樣的事,就看口袋深度囉…XD

comments(2) | by admin

這個介面好

In flex   December 30, 2008 - 10:48 am

Picture 1.png

from autotweets

有人能說說好在哪裏嗎?:)

==== 分隔線 ====

感謝這麼多人熱情回答,下面是簡單的說明。

如果要做一個類似這樣的提醒程式

widget_big_sentences.png

一般必然會有下面這種『設定』畫面

widget_strawman.png

但它也可以這樣做(資訊呈現的畫面,本身也就是操作的介面)

widget_sentences.png

簡單來說,大原則就是 information retrieval & manipulation 儘可能合為一體,讓 path to information 儘量縮短,能做到這樣,大概就成功一半了。

有空可以順便想想這些大原則有否出現在 iphone 上面?如果有,它有哪些異同?如果有差異,why’s that ?

如果對這個主題有興趣,可以看看 magic ink 一文,雖然寫的落落長高達 70+ pages, 但相信我,那會是很值得的七十頁。

ps. 當初我看的不是 autotweet 本身提供的服務,雖然創新是有一點點,但要我把帳號/密碼交給一個 3rd party 網站,這怎麼看都不像是個好主意吶(就像如果有人要你把銀行存摺、印鑑給他好幫你管帳,有人會答應嗎?) XD

comments(10) | by admin

Previous Posts

mobile phone