Archive for the ‘Actionscript’ Category

Flare - Data Visualization Library

Monday, August 25th, 2008

Flare logo small Visit Flare official site here.

Flare is a Actionscript library for creating customized data visualizations, such as charts, animations and effects. You could check out the demo first. Wow! It’s amazing. However, I am wondering when and what kind of project I could import these cool stuff?

Hide Chart Elements

Sunday, August 24th, 2008

First of all, a visual chart, generated via Flex-Charting framework, is constructed with many layers of elements. They are series(data) layer, axis layer, background elements and annotation elements. Besides, you are able to create your own chart elements by implementing IChartElement2 interface.

Here are some quick tips:

  • To kill the grid lines behind charts:
    backgroundElements=[]
  • To make the grid lines drawn with larger interval:
    GridLines#horizontalChangeCount = larger_number;
  • hide elements of axises
    AxisRenderer#showLabels = false;
    AxisRenderer#showLine = false;
    AxisRenderer#tickPlacements = “none”;

用Filter Function作簡單線性圖Drill-Down

Monday, July 28th, 2008

首先,想像有一張線性圖(Line Chart),上頭的線是由許多資料點所構成。在Flex中,一旦對該資料及和作了過濾的動作,圖表會重繪。然後,Flex3的圖表都有支援selectedItems:Array的方法,以獲取你圈選的資料點,因此,我們可以藉由選取的資料點,得到一個範圍,利用範圍來過濾原資料集合,就可以做到類似Drill-Down的功能了。

這是範例(線性圖的drill down)
這是原始碼


Drill down into data in a line chart.

With Flex3 data visualization package, we are able to get the selectedItems by
ChartBase.selectionMode = "multiple";
ChartBase.selectedItems

Therefore, it is handy to measure a range for filtering out our data. We have to know that every series in a chart contains a data provider. The data providers are ListCollectionView objects. So to filter out those objects will update the display of chart immediately. Those lines will be redrawn. You could see the line scaled just like drilling-down into it.

Here is a sample and source code.
Simple Drill Down into Line Chart
Source

提昇Flex圖表效能

Friday, July 25th, 2008

提昇Flex圖表元件 (Charting Components) 的效能,當你遇到圖表元件的繪製速度慢到想殺人的時候,建議你先從資料開始檢查,再看看圖表元件本身。

  • 如果可以,移除掉圖表效果,像是陰影

    ChartBase.seriesFilters=[]

  • 圖表的data-provider別餵太複雜的物件,尤其是很肥大的XML應該盡量避免,真的必要,可以作adapter物件來繪製之。
  • 當需要畫出很多條不同的資料線時,不要來一筆資料餵一次series (chartBase.series),能的話,讀完了再一次餵,因為一旦執行

    ChartBase.series = your_new_series_list

    會逼迫ChartBase重繪*所有的*的視覺元件,包含標籤、矩陣線、圖表線、軸線…等,很恐怖唷!尤其是你的資料又長到個不行時,老闆不開心、自己也難過。

  • 作線性圖( Line Chart )時,別輕易地變更線的樣式,尤其”form”, “miter”, “joint”這幾個,你可以看看官方的原始碼,對於這些屬性有非常不同的繪製演算法。用預設值吧,我相信Flex開發團隊已經先最佳化過了。
  • Gutter (gutter top, left, right, bottom) 能的話先給預設值,可以省下運算時間
  • 小心使用軸線的單位(unit),針對你的資料多寡,給予適當的單位值,如果你的資料有一千年,把單位切成秒數就不是個明智的作法。

以下是本文的英文版:

Enhance Flex Charting Components Performance

  • Clear the beautiful shadows or any other filters.
    ChartBase.seriesFilters=[]
  • Optimize your data objects to be rendered. Do not pass a bunch of huge, complex objects to the data-provider.
  • While building a line chart, do NOT change the lineStroke attributes such as “miter”, “joint” if not necessary. Flex Data-Visualization components has optimized the drawing performance to default renderers. To change these attributes may bring up a terrible risk.
  • You can remove the grid lines.
  • Set explicit gutter values while defining a chart base object.
  • If you have to render multiple series in a single chart, try to finish loading all data-providers before you assign series list to chart. Calling this method:

    ChartBase.series = your_list

    will force the chart to remove *ALL* chart elements( label, grid, axis, series items…) and re-create them. It is really time consuming to refresh the chart if re-assign the series objects again and again.

  • Set a lower quality of your flash movie( not available for AIR)
  • Mind your axis units. Be very careful while showing up a time-based data set. It is very possible to be the key to skew up your chart performance if the unit is set too small. Given an appropriate unit is highly recommended.

Yahoo! Flex Skin

Tuesday, July 15th, 2008

Yahoo!作了一套Flex的skin組,下載之後,解壓縮到專案的src下,
引用之:
<mx:Style source="yflexskin.css"/>
即可,效果如下:

他還有給ai檔,讓你做更多的修改喔!

Flash Player 10:Astro 出現了!

Thursday, May 15th, 2008

Flash Player 10 官方新聞

一定要說一下我最期待的新功能:

『 文字排版Advanced Text Layout 』( 官方的展示畫面影片 )
可以控制文字框的排版了! 換句話說, TextField 不是只能 “從左到右”橫書了,可以由右到左、由上到下直書了,天啊,真是太令人高興了,我就是愛直書啦,真的。

Cool Down Button

Wednesday, May 7th, 2008

Blizzard公司出品的Warcraft III (魔獸爭霸III)遊戲介面中, 有些按鈕是有Cool-Down 的限制,也就是說,當你按下某個按鈕(通常是施展法術或是喝藥水),無法立刻按該按鈕,它會處於disabled的狀態,必須經過若干秒數(端看該法術設定)。

簡單地做了這個按鈕元件,沒什麼特別的,真的,以下是演示:
Flex Cool-Down Button Demo
( 進入Demo後按右鍵可以下載原始碼(view source) )

使用方法:

Actionscript:
  1. <controls:CoolDownButton
  2. width="64"
  3. height="64"
  4. coolDownSeconds="10"
  5. coolDownEnabled="true" 
  6. cornerRadius="0"
  7. />

關於 Skin 的 Style Chain

Tuesday, April 29th, 2008

今天不願具名的魔人說了個關鍵的技巧, 速記其銘言以表敬意:
問:

Skin 與 本體Component 如何透過style 來取得數值?

答:

Actionscript:
  1. //原始檔: Button.as line 1508 @Flex3 sdk
  2. // ***注意 styleName的型別...是Object !//
  3. var styleableSkin:ISimpleStyleClient = newSkin as ISimpleStyleClient;
  4. styleableSkin.styleName = this;

加上

Actionscript:
  1. ProgrammaticSkin#getStyle(styleProp:String"):*

Actionscript:
  1. //原始檔 ( ProgrammaticSkin.as line 517 @Flex3 sdk)
  2. public function getStyle(styleProp:String):*
  3. {
  4.         return _styleName.getStyle(styleProp);
  5. }

keynote: 數位典藏

Tuesday, April 22nd, 2008

RIA 在數位典藏的實作應用:

投影片:
RIA Demo 投影片

原始檔:
RIA Demo 範例原始檔

Adobe Actionscript Coding Convention

Sunday, April 20th, 2008

Adobe 官方寫的 AS 程式撰寫規則
http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions