Flash & Silverlight Demo 大比拚

Flash & Silverlight Demo 大比拚

近日,Silverlight已經開始支援FIREFOX了,所以順便看了一下Silverlight的DEMO總體來說感覺就是在模仿FLASH已經推出的許多效果。不過也不能說微軟沒有創意畢竟Silverlight出的比FLASH要晚那麼久。不過Silverlight跟FLEX比較也覺得雖然其效果基本上實現了,但是作為動畫的完整度來說很差,這就是細節了。無論是ADOBE,還是原先的MACROMEDIA都是對動畫流暢度等瞭如指掌的。微軟想拿下設計大餐並非易事。下面把兩者同一類型的DEMO發出來給秀一下,大家就能發現兩者的區別了。

地圖類

FLASH代表YAHOO MAP DEMO

ISV_Messenger_2.png

Silverlight DEMO

自行車運動類

Tour Tracker

FLASH DEMO

Bicycle Club.jpg

Silverlight DEMO

視訊瀏覽

FLASH DEMO

VideoShow.jpg

Silverlight DEMO

這個就是比較大型的項目比拚,ADOBE還有一些

In Labs: Flex 3 Product Configuator

The configurator is a simple application that allows the user to choose options to create their very own custom bowling shirt. (Built by Teknision)
Read more about it and download the source code.

Flex 3 Dashboard

In Labs: Flex 3 Dashboard

This demo application displays data using a pod layout as well as charts, forms, data grids, links, and multiple behaviors such as drag-and-drop, minimizing and maximizing, and more. (Built by ESRIA)
Read more about it and download the source code.

Flex 3 Network Monitor

In Labs: Flex 3 Network Monitor

This demo application displays devices from a network in multiple views: network topology, device type and grid. Each device thumb displays real-time data and allows a user to click it for additional data. (Built by ESRIA)
Read more about it and download the source code.

Flex 3 Media Widget

In Labs: Flex 3 Media Widget

The Adobe Media Widget is an embeddable media player created in Adobe Flex. It allows you to embed any of the supported media types into a web page. (Built by Teknision)
Read more about it and download the source code.

Flex 3 Component Explorer

In Labs: Flex 3 Component Explorer

Getting familiar with Flex 3? The explorer shows simple usage for MXML components in the Flex 3 framework.

Flex Store: Automation-ready version

This sample demonstrates Automated Testing, part of LiveCycle Data Services ES, with the popular Flex Store application.

LiveCycle

Random walk component: Automation-ready sample application

Learn how to instrument the RandomWalk custom component so that your application records your user's interaction with the component and plays it back using automation tools.

LiveCycle

Automation API sample applications

See the new Automation API in action in two new sample apps, which show presentation and recording of metrics, automated testing, co-browsing, and more.

Mark Piller

Invoking .NET objects using the Flex RemoteObject API

Mark Piller (May 14, 2007)
Code this sample .NET application and learn how to integrate your Flex and .NET code, expose .NET classes as Flex remoting services, and invoke a remote method with MXML and ActionScript using AMF3 and RemoteObject API.

Tour Tracker

Adobe Tour Tracker

Watch cyclists race the Amgen Tour of California through this live, real-time Adobe sample app built with Flex and Flash Media Server.

Style Explorer

Style Explorer

See this visual way of selecting style settings for Flex 2 user interface components. (Updated for Flex 2.0.1)

Restaurant Finder

Restaurant Finder

Using REST and SOAP web services, your users can update data in a master-detail type application.

Flex Store

Flex Store

States, transitions, and UI techniques—this app demonstrates the types of user experiences you can create with the Flex.

Component Explorer

Component Explorer

Getting familiar with Flex? The explorer shows simple usage for MXML components in the Flex framework.

Hybrid Store

Hybrid Store

See how to integrates a Flex component into an existing HTML application, and take advantage of expressiveness in Flex 2.

Dashboard sample application

Dashboard

Charts data visually using Flex component effects to highlight users' actions as they drill deeper into data.

Photo Viewer

Photo Viewer

See how the Flex framework creates a seamless user interface and localizes content.

Adobe Flex

Announcing the Australian Flex Developer Derby winners

Dashboards, configurators, RIA stores, and more—check out the top selections in the Australian coding contest.

RIAForge

Announcing RIAForge.org

Use this new community site to host open source projects built with Adobe technologies—from ColdFusion apps to Photoshop plug-ins to Flash ActionScript libraries.

Derek Wischusen

Integrating Flex 2 and Ruby on Rails

Learn how to use the Ruby on Rails framework with Flex as you build an issue-tracker application.

Sample Template Shop

Sample Template Shop

A shopping cart application that connects to the websites of multiple vendors using httpservice controls. (Alnoor Lalji, Softbytes)

FlexAmp

FlexAmp

FlexAmp is an online mp3 player that plays songs off a user's online storage account at Box.net. As the songs play, the application brings in photos, videos and product details from Flickr, YouTube and Amazon based on the ID3 information in the mp3s. (Arpit Mathur, Comcast)

Onyx

Onyx

Live Video Mixing Environment using Adobe Flash Player 9. (Daniel Hai, consultant)

Amazon.com API Interface

Amazon.com API Interface

This application is a dynamic interface into a subset of the Amazon.com API (Books, Music, and Video) and explores the features of Flex 2, using MXML primarily for layout and ActionScript 3.0 for functionality. (Darin Kohles, Digital Positions)

Photo Album

Photo Album

A Flex version of a ColdFusion photo album built in 2003, the Flex photo album uses web services to communicate through ColdFusion to the database of albums and images. (Gary Gilbert, Glynn Technologies)

Home Locator

Flex Developer Derby winner - product configurator/guided selling: Home Locator

In Nahuel Faronda』s winning configurator app, users select real estate locations from a US map and filter the results by price, bedrooms, bathrooms.

SQLAdmin

Flex Developer Derby winner - components and gadgets: SQLAdmin

Kevin Kazmierczak』s winning component app is an online version of query analyzer for Microsoft SQL Server.

StatPods

Flex Developer Derby winner - data dashboards: StatPods

Rich Tretola's winning dashboard helps users visualize web visits, page views, session tracking, and more.

E41ST

Flex Developer Derby winner – Mashups: E41ST

Amit Gupta's winning mashup with Amazon.com and the Public Library system gives book lovers an enriched browsing experience across the two sites.

Lesson Builder

Flex Developer Derby winner - communication/collaboration applications: Lesson Builder

Tim McLeod and Kevin Harris's winning collaboration tool helps a group of content editors create Flash-based training modules.

FC64

Flex Developer Derby winner – wildcard: FC64

Darron Schall』s winning application sim

Mix07 Keynote Silverlight DEMO (含原始碼下載)


Mix07 Keynote Silverlight DEMO (含原始碼下載)
原始碼路徑

XAML 內部




XAML 內部





Silverlight XAML 支援多種形狀,能夠合成複雜的對象。支援的基本圖形包括矩形、橢圓、線條、多邊形、復合線和路徑。它們大多數都是不解自明的。復合線允許定義一系列相連的線段。路徑允許定義一個通過 Canvas 的非線性路徑(如同塗鴉)。



畫筆決定如何在螢幕上繪製對象。用 Fill 繪製內容,用 Stroke 繪製輪廓。畫筆分純色畫筆、漸變畫筆和圖像畫筆幾種。純色畫筆通過 fill 屬性(如前例使用的 Fill="Black")的固定色、或使用 SolidColorBrush 作為附加屬性實現(如下所示):













顏色可以通過名稱(支援 141 種命名的顏色)或十六進位 RGB 定義。






漸變畫筆通過在規範化空間中定義漸變域和若干漸變停留來實現。舉例來說,假設在灰色陰影中,需要一個線形漸變,從右至左,從黑變白。指定漸變停留 0(規範化線的開端)為黑色、漸變停留 1(規範化線的結束)為白色。Silverlight 就將為您繪製這個漸變。漸變也可以在二維空間中用規範化矩形定義空間來繪製(0,0 為左上,1,1 為右下)。要定義一個二維的填充矩形,左上為紅色,右下為黑色,中間是流暢的漸變,使用 XAML 如下:







用 ImageBrushes 也可以繪製對象,圖像將被適當地剪切或拉伸。因此,例如可以指定使用 ImageBrush 填充橢圓,使用的 XAML 如下:






在 XAML 中,文件可以用 TextBlock 標記呈現。這樣您可以控制文件的各個方面,如內容、字體、字號、折行等等。以下是一些範例:




此外,Silverlight 支援用於實現文件輸入的鍵盤事件。在根元素上可以定義鍵盤事件(KeyDown 或 KeyUp),並使用事件參數獲知按下的是哪個鍵。








XAML 概述



XAML 概述
XAML 是一種基於 XML 語言,可用於定義圖形資源、使用者界面、行為、動畫等。微軟將它作為在 Windows Presentation Foundation 中使用的標記語言推出。Windows Presentation Foundation 是一種面向桌面的技術,屬於 .NET Framework 3.0 的一部分,旨在輔助協調設計人員和開發人員在建立應用程式時的工作。
一直以來,設計人員使用一套工具和資源建立應用程式,而開發人員則使用自己的另一套工具。工具集的不符合可能對最終的應用程式產生負面影響。微軟推出新的 Expression 工具套件,主要是 Microsoft ExpressionR Design 和 Microsoft Expression Blend,讓專業設計人員可以分別將圖形項目和使用者界面放在一起,將最終結果表述為 XAML,以便開發人員用此構建應用程式。
首次發佈的 Silverlight 所使用的 XAML 不同於 Windows Presentation Foundation 使用的 XAML,前者是可用於桌面的完整 XAML 的面向 Web 子集。因此,如果您熟悉 Windows Presentation Foundation XAML,您可能會注意到缺失一些東西,比如  標記、頁面資源、資料綁定和豐富組件模型。
在 XAML 中,元素是用 XML 標記定義的。每個 Silverlight 文檔的根層級都是 Canvas 標記,它定義繪製 UI 元素的空間。該 Canvas 應包含 Silverlight 需要的 XML 命名空間聲明。
一個 Canvas 可以有一或多個子項,子 Canvases 又可以建立它們自己的子項。Canvas 子項有相對於其父項的位置,而不是對根 Canvas。下面的範例中,一個 Canvas 包含一個矩形 (Rectangle),該矩形放在距其父項左上角 25 像素的位置。

免費 Expression Blend 教學影片

免費 Expression Blend 教學影片

國外的教學影片,雖然講英文,但因為有畫面,所以即使聽力不好,也不影響。
網址在:http://movielibrary.lynda.com/html/modPage.asp?ID=384

Lee Brimelow其中的內容包含所有WPF及Silverlight 開發及設計人員所需具備的基本Expression Blend編輯技巧,可快速有效地幫你進入WPF的應用領域。

若要觀賞這些影片,需先安裝QuickTime(http://www.apple.com/quicktime/download/)

內容包含:
1. 概覽及安裝
2. 工作區
3. 專案管理
4. 繪圖
5. 外觀編輯
6. 文字處理
7. 3D8. 整合多媒體
9.畫面配置控制項
10. 變形
11. 動畫及互動性
12. WPF 控制項13. 處理資料
14. 部署應用程式

另外還有 Expression Design 的教材影片:

http://movielibrary.lynda.com/html/modPage.asp?ID=339

深度體驗silverlight1.0RC


深度體驗silverlight1.0RC



雖說silverlight各種嘗鮮版已經出了N多,可是一直沒有時間好好體驗一下這個M$為RIA界帶來的巨大驚喜。曾經沉浸在Ajax中無法自拔,期盼著WPF這個呼之欲出的RIA救世主;漫長的等待中,陰差陽錯的結識了Flex,才發現原來Flash也有爭奪RIA霸主地位的實力。


今天實際使用silverlight開發了一個像素畫的」Hello World」,可以在右邊按鈕選擇畫筆的顏色。源程式碼採用javascript編寫(1.0RC也只支援這個了);詳細的內容請看DEMO,截圖如下:



使用過後,發現silverlight如果要作為真正的RIA開發平台,比起flex還說還是有不短的路要走:


1.在1.0RC中,還沒有行程完成的xaml->object,或是object->xaml的機制,也就是說在你的business logic code中還不能自由的以Class instance的方式來初始化對像;而是使用簡陋的plug.content.createFromXaml(xamlString)來建立一個UIElement;與我們常用的new Class的實例化方式有較大區別。


2.雖然可以使用vs2005做一些基於IDE的開發,但是這種vs的支援僅限於intellisense功能;而不支援WYSIWYG的開發方式,無法發揮IDE的真正作用,當然這也是目前silverlight framework中缺少對於繼承於UIElement的控制項的支援相關的,下面會說到。


3.最不理解的就是,在silverlight發佈之後,M$並沒有緊跟著推出一個基於silverlight的control library,也就是說,如果你要開發一個RIA應用的話,你首先得自己構建一套統一樣式的client control library,你得從按鈕,下拉列表框開始開發;這個對於RIA應用的開發是不可理喻的缺點,也是致命的弱點,雖然這個特性對於很多「大牛」來說,不屑一顧。


4.缺少對於流行RIA應用特性的支援;雖然現在silverlight支援播放流媒體,可是這樣的流媒體僅僅是單向的;silverlight依賴於windows media server的流媒體能力,並不能實現Flash Media Server一樣,client同server端的雙向流媒體通信;同時缺少對於伺服器客戶端通信方面的支援,在這個RIA的年代REST和Webservice顯然是對於多媒體應用無能為力的。


5.目前來說,開發方法非常怪異;與flex和flash中開發方法對比強烈不同,silverlight中混雜了客戶端應用程式與動畫的不同開發方法,讓人無法適從。不過可能未來M$指望用不同的IDE把不同的開發者分開;動畫開發者使用Expression Blend,應用開發者使用VS.net;可是至少在缺少IDE的情況下,真的很怪……


雖然silverlight標榜自己支援multi language,但是如果指望昔日的frontend engineer會使用ruby,python,甚至c#和vb來開發RIA的話,真是天方夜譚,雖然JScript也被CLI支援,但是這個從來就不被看好的孩子,已經面目全非,形同雞肋了;實際上silverlight的多開發語言,並不能取悅開發者;但在這樣的情況下,微軟非但不在silverlight中強化javascript的作用,反而將其弱化到了silverlight與browser的粘合劑的地步,這點絕對會引來RIA最大的潛在開發者–ajax developer的唾棄。


再看flex,雖然使用actionscript3,但是這是與javascript同根生的親兄弟,兩者的差別近乎為0;節省了開發者轉向flex的時間。同時flex有完備的ide,有完備的UI library,可以快速的構建RIA應用;加上易用的Flash Media Server,也就是說一個普通的ajax developer可以很容易的在flex平台上面實現當初在html+javascript平台上無法實現的很多夢想;


綜上,我們也該看到,雖然silverlight有這樣那樣的缺點,但是以M$操作系統的佔有率,silverlight在部署及性能方面佔有極大的優勢,而以M$的開發經驗,完善silverlight的開發環境及體驗也不是很難的事情;這點,大家可以觀察.net如何在java佔領制高點的情況下奪回中小企業使用者市場的案例,很有啟發。


可憐了開發者的我們,還是只能做牆頭草,把兩個平台都摸清,才能有備無患。

Silverlight的Ink功能


Silverlight的Ink功能

這是Silverlight支援的Ink功能,一種俗稱數位墨水的技術,它能夠捕捉使用者利用數位筆或是滑鼠等輸入裝置,在螢幕上所描繪的路徑,並且將其顯示出來,摸擬手寫筆跡的功能。 



由於Silverlight支援Ink功能,因此你可以透過Silverlight,實作出Web版的數位墨水功能,讓使用者在網頁上書寫文字或是描繪圖形。有了Ink功能,相信將來一旦我成為大人物之後,就不用擔心每天簽不完的名了,只要透過網路,就可以輕易的將我的手寫簽名傳遞到全世界給我的仰慕者呀,想想真是幸福啊。



一個Silverlight Slideshow相本範例


一個Silverlight Slideshow相本範例

網站名稱:First Floor網址:http://www.firstfloorsoftware.com/Default.aspx有一個不錯的Silverlight Spy工具


有下列主要功能:

Convenient XAML object explorer
XAML object property grid allows for getting and settings property values
Regeneration of the XAML xml based on the object model
Statistics of used objects
Tracing facility for debugging Silverlight 1.0 applications


還有一個Silverlight Slideshow的相本範例,可以參考


流量統計工具10款

我想沒有流量統計的Blog是很少的,無論是採用Blog程式自帶的統計功能還是第三方的統計服務,瞭解自己的Blog被存取的情況都是有必要的。

一個優秀的統計服務也對於網站的發展有著很大輔助,例如使用者來自哪裡,哪篇文章被閱讀得最多,搜尋引擎中哪個關鍵字給你帶來了最多的流量。

我不贊成完全為流量、為迎合某些人的需求去寫文章,但瞭解讀者群的大致構成,對於文章語言的風格、頁面的佈局以及其他一些細節上的修正還是有些益處的。

這裡就把我所知道的一些統計服務作個列表及粗略的介紹。


計數器形式統計服務大部分都只是針對PageView(頁面瀏覽)數進行統計,很少能夠防止作弊行為發生,而且統計的結果只是一個單純的數字,最多滿足你的一些虛榮心罷了,沒什麼實際意義,所以這裡就不介紹了。下面介紹的大多是一些比較大的統計服務商,小服務商的穩定性實在不讓人放心。

我現在使用的51.la統計服務。這個可以說是國內最經典的統計服務了。"我要啦"的功能可以說是我所知道的所有統計服務中最豐富的,連不是很重要的螢幕顏色螢幕分辨率都可以查到。比較實用的功能還是關鍵字分析功能,可以通過這個瞭解到訪客是通過搜尋哪些關鍵字找到了你到網站。另外網站排名、SEO資料分析對於瞭解網站的概況也很有用處。

51.la的缺點就是有少數時間會對頁面載入速度有一定的影響,畢竟它要統計的功能太多了。所以上次我建議他們學習Sitemeter加入存取遮蔽功能的時候,阿江的回覆就是目前強大的功能已經非常消耗伺服器資源,再加入新功能雖然沒有技術上的問題,但伺服器會受不了,而且會更加拖慢載入速度。

順便提一下,51.la 的統計程式碼為了保證絕對有效,連客戶端不支援javascript的情況都考慮到了(還沒發現其他有哪個統計會考慮到這一點的),不過真的不支援javascript的客戶端我是從來都沒見過的,所以使用他們的簡潔程式碼就足夠了。

另一個國內使用非常多的就是站長統計。站長統計在速度和穩定性上比51.la還更勝一籌,功能上只是比51.la略少一些,而且核心的統計功能上可以說是毫不遜色,這也是不少站長傾向於站長統計的原因。其實準確的說,國內的統計服務在功能上沒有哪個會特別突出,也沒有哪個特別糟糕。他們提供的站長工具也非常實用,主要也是關於SEO方面的東西。比較不舒服的是它"記住使用者"的功能不是很全面,有時候還是要再次輸入密碼來檢視統計資料,這點上不如51.la方便。
ItSun統計。在優勢劣勢商給我的感覺和站長統計類似,不過也有少數時候不穩定,甚至還會出現"伺服器正忙,請稍後檢視統計資料"這樣的提示,功能上也比上面兩個統計要少。

51Yes網站流量統計。速度飛快,頁面載入速度竟然高達130kb/s!功能上似乎和前兩個統計系統也沒有太大的差別。服務也非常穩定,使用這個統計系統的大網站也不在少數。沒有"記住使用者登入"的功能,統計圖示有點難看,是個小小的缺憾,不過整體給人的感覺非常好,是個很值得推薦的統計服務。

武林榜統計服務,和太極鏈,雖然也是比較老牌的服務(尤其是武林榜),但現在的速度都不是太理想,統計功能倒也不是太遜色,不過使用這兩個服務的網站現在好像已經不像從前那麼多了。

一統天下統計服務。主要是個付費統計服務商,也提供少量的免費統計服務,有不少大網站使用他們的統計,不過對於一般的Blog和小網站來說,花錢去買一個統計服務似乎就沒什麼必要了。

在那裡使用免費統計服務,就像在新浪用Blog一樣,總有一種受歧視的感覺,很不舒服!

趨勢流量分析系統。不是一個專門的統計網站,功能上一般,只是速度上比較快,所以寫出來作個參考。不過目前這個服務的使用者數量好像不是很多,不知道使用者多了還能不能保持這個速度,這幾乎是它唯一的優勢。

下面是一些國外的統計服務,如果你的讀者有不少生活在外國地區的,國內的統計程式碼對他們來說可能就比較慢了,應該適當的考慮一下他們的感受。

Google Analytics。最麻煩的問題我想莫過於拿到它的邀請碼了,其實它如此吸引人也正是這個原因。其實這是Google收購Urchin(國外一個知名的流量統計公司)推出的服務,原來好像是要199美元一個月的(完全商業化運作),現在只要你的每月PageView在500萬以下(要是有500萬一樣我絕對不用任何統計服務)就可以免費使用。

但使用過後你就會發現這個東西不過如此,功能還不如國內很多不太知名的流量統計服務。就好像郵件一樣,原來我們中國人在流量統計上做得也是世界領先水平的。而且Google Analytics 的統計不是實時更新的,最多只能看到兩個小時以前的統計結果,所以也不會有線上使用者統計這樣的功能,如此滯後的統計讓人很不滿。只是Google Analytics 的統計瀏覽模式設計得比較直觀大方,看起來很舒服,還有就是它的統計程式碼在速度上是不錯的,電信存取很理想,在國外那更是不用說了,這個對某些網站和Blog來說還是有點吸引力的。

Measure Map。不知道為什麼Google要收購兩個統計服務商,而且這個東西的註好像更困難,目前都無法使用這個服務,但似乎和其他的統計服務有著一定的區別,比較新穎。

Statcounter.com。國外的老牌統計服務商,不過在國內的速度還不是特別理想,控制台的左邊有一大堆的廣告,剛開始還以為是控制面板,很容易上當。如果左邊的是控制面版還好,既然都是廣告,那麼剩下的功能也就沒什麼了,這東西我實在看不出有什麼可以讓它如此出名的。

Sitemeter。在國外和港台的Blog上經常可以看到它的統計標識,畢竟它在國外地區的存取速度還是不錯的,在國內稍慢一些,不過也不會讓人覺得太不舒服。提供的統計功能很單調,只是簡單的訪客數字和PageView數字,有郵件定期發送統計報告的功能,不過沒什麼意思。

它的統計圖示看上去很美觀大方,對於喜歡簡單風格簡單功能的人來說是個不錯的選擇。另外它還提供一項其他服務上都很少提供的統計遮蔽功能,可以通過IP地址或者cookies檔案兩種方式不記錄站長的存取次數,對於那些因為修改樣版或程式碼需要經常存取自己Blog的使用者來說是個很了不起的功能。

當大多數人認為免費的流量統計工具 ,他們立刻想到谷歌analytics的 。但也有許多其他免費的統計工具。下面讓我們介紹幾款,讓你對你的網站做到心中有數。

clicky

clickylogo
clicky是一種界面清晰,功能全面的流量統計分析工具。這項服務是專為小型網站和部落格設計的。它易於實施,並具有一些如實時跟蹤訪客,深入分析的功能。


enquisite

enquisitelogo
enquisite是專門針對搜尋引擎和競價排名的。它提供了深入的統計,包括首頁位置,登入的頁面,特定的地理資料等。

crazyegg

crazyegg-logo
crazyegg提供能追蹤,評價,並優化你的網站基於在你的訪客點選。網站熱區能為您提供訪客的行為和習慣分析。


103bees

103bees-logo
103bees是一個實時搜尋引擎的分析和統計工具。

Measure Map

measuremap-logo
Measure Map提供免費的,為你的部落格系統打造。目前該網站沒有提供新的帳戶,但你可以通過電子郵件方式索取帳號。
擁有谷歌和它的一些技術移植到谷歌analytics的。

whos.amung.us

whos-amung-us-logo
whos.amung.us ,是一個具吸引力的,實時的訪客計數器。易於安裝,使用者無需註。

feedburner

feedburner-logo
feedburner,正如許多人已經知道,是專為部落格的RSS設計的。現在已經被Google收購。最近由於一些原因,不能正常使用,如果你想用這種功能,請使用Feedsky

Snoop

reinvigorate-snoop-logo
Snoop提供實時跟蹤訪客。是一個本地軟體,下載之後你可以監控你的訪客是點選評論等,有評論時,他會給你發出聲音。

clicktale

clicktale-logo
clicktale字面上記錄行動和遊客活動。網站所有者可以再分析錄像資料,以瞭解使用者的行為,並提高可用性的網站。

mybloglog

mybloglog-logo
mybloglog基本上是一個社會網路書籤。不過,它也提供了寶貴的統計;包括上門點選習慣等訊息。雅虎公司產品。