Actionscript3.0でガラスっぽいモノを作ってみる
Flexでコンポーネントを使ってアプリケーションを組み立てていくだけならば、あまりGraphicsクラスを触る機会がないと思います。
しかし、このGraphicsクラスが既存のコンポーネントの描画もやってますし、カスタムコンポーネントをUIComponentから作る場合は、外観の作成時には必須となるでしょう。
そんなこんなでGraphicsクラスをあまり使ってこなかったので練習がてら、ガラスっぽいものを作ってみた。
こんな感じです。
beginGradientFillで最下層に丸いグラディエーションを描いて
その上に垂直方向のグラディエーションを描くという感じです。
var w:int = 200; var h:int = 200; var border:int = int(h*0.015); var g:Graphics = graph.graphics; var ratios:Array = [0, 255]; var matrix:Matrix = new Matrix(); matrix.createGradientBox(w, h*2, Math.PI/2, -0.5, -h); g.beginGradientFill(GradientType.RADIAL, [0x6F86A8, 0x6F86A8, 0x000000], [1, 1, 1], [0, 253, 255], matrix, "pad", "rgb", -1); g.drawRect(0, 0, w, h); matrix.createGradientBox(w, h, Math.PI/2); g.beginGradientFill(GradientType.LINEAR, [0x000000, 0x000000, 0x6F86A8, 0x6F86A8, 0x000000], [1, 1, 1, 1, 1], [0, 20, 90, 160, 170], matrix, "pad", "rgb", 1); g.drawRect(border, border, w-border*2, h-border*2);
もっとわかりやすいくガラスっぽいものがよかったですね。
E4Xを使ってみた
E4XとはECMAScript for XMLの略で、javascriptやactionscriptなどのECMA準拠なもので使える技術らしい。AS3から使えるみたい。
このようなXMLデータがあった場合
<?xml version="1.0" encoding="UTF-8"?> <campus-data> <data id="001"> <name>hoge1</name> <description>hogehogehoge</description> <location x="1" y="2" z="3" /> </data> <data id="002"> <name>hoge2</name> <description>hogehogehoge</description> <location x="1" y="2" z="3" /> </data> <data id="003"> <name>hoge3</name> <description>hogehogehoge</description> <location x="1" y="2" z="3" /> </data> </campus-data>
trace(xml.data.(@id=="001").name)
とすると、"hoge1"がかえってきます。
trace(xml.data@id)
とすると、"001002003"がかえってきます。
E4Xを利用する恩恵は、XMLノードに対してこういう簡単なアクセス方法を提供してくれることとアクセスの速度が速くなるということなんでしょうか？
君はGrapherを知っていたか？
数式からGraphを描画するソフトウェアみたいなものを開発していましたが、既存のソフトウェアはWindowsのものが多く、Macのモノは試していませんでした。しかし、僕のMacbookにも実は、まさにそのようなソフトウェアが最初から付属していたようです。
名前はGrapher。なんとTigerからバンドルされているものらしい。
どんだけ地味なんだと。
Grapher
Grapher(グラファー)は Mac OS X v10.4 に付属する、様々な方程式から2,3次元のグラフを描写することができるソフトウェアである。グラファーには様々なサンプル（微分方程式、toroid、ローレンツアトラクタ等）が付属する。様々な方程式を描写するだけではなく、ラインの色、背景色、フォント等、グラフの外観を変更することもできる。また、アニメーションを作成することもできる。
開発元はアップルとなっていますが、過去に買収したモノのようです。
GUIはこんな感じで、非常にシンプル。
アニメーション機能などもあり、教育ツールとしての利用もかなり期待できそうです。
mx.chartsなどのソースを見る
mx.chartsなどがパッケージが入っているdatavisualizationにはFlex builderから直接開くことができないため、ソースの中身を閲覧することができません。
僕が作っているgrapoonもそうですが、Flexのチャートライブラリを扱っているとどうしてもソースコードが見たくなります。
調べてみた結果、Flex Builderのライセンスを持っている方なら以下の手順でソースコードを得ることができるようです。
手順は簡単、
cd {Flex Builder 3}\sdks\3.x.x\lib
java -jar DMV-source.jar {license-file-location} {output-location}です。
{Flex Builder 3}はFlex Builderのインストールしたある場所ですね。
{license-file-location}とは、Flex Builderのライセンスのデータ（license.properties）が存在しているパスになります。license.propertiesの場所は環境に応じて変わりますが、以下のような場所になります。
- Windows: C:\Documents and Settings\All Users\Application Data\Adobe\Flex\
- Mac OS: /Library/Application Support/Adobe/Flex/
- Linux: ~/.adobe/Flex/
{output-location}はファイルを出力する場所です。どこでもいいでしょう。
実行すると{output-location}にfbproというディレクトリが吐き出されて、その中にdatavisualizationやautomation_dmv、automation_flashflexkitなどのソースの実体が入っています。
チャートは結構中ですごいことをしていると思うので、中身をみて勉強します。
原文はこちら
