うずら技術メモ

トップ > メモ一覧 > カテゴリ「いろいろ」の絞り込み結果 : 3件

3件中

1 〜 3 表示

No.2351 OpenFlashChartを使ってみました

Open Flash Chartを使ってみました

Webサイトでグラフを作成表示するためのライブラリの一つにOpen Flash Chartというものがあります。これはJSON形式のデータをSWFファイルに渡すことによりグラフを生成表示することができます。

まずは早速何かグラフを表示してみましょう。Open Flash Chartはこちらからダウンロードすることができます。

http://www.teethgrinder.co.uk/open-flash-chart-2/

ダウンロードしたファイルを解凍するといろんなファイルが出てきますが最低限必要なのはopen-flash-chart.swfです。このswfを埋め込んでJSON形式のデータをパラメータとして渡します。

chart.html

<div id="chart"></div>
<script type="text/javascript">
//<![CDATA[
swfobject.embedSWF("open-flash-chart.swf", "chart", "640", "480", "9.0.0", "expressInstall.swf", {"data-file":"data.json"});
//]]>
</script>

データとなるJSONは以下のようにしてみました。
data.json

{
"title":
{
"text":"棒グラフ"
},
"elements":[
{
"type":"bar_filled",
"colour":"#3373CC",
"outline-colour":"#3373AC",
"values":[8,8,1,7,4,8,1,10,7,1,8,5,9,4]
}
],
"x_axis":
{
"labels":
{
"labels":["7:00","8:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","0:00"]
},
"colour":"#898989",
"grid-colour":"#EEEEEE"
},
"y_axis":
{
"colour":"#898989",
"grid-colour":"#EEEEEE"
},
"bg_colour":"#FFFFFF"
}

こんな感じでchart.htmlを表示すると棒グラフが表示されます。

ちなみに、Open Flash Chartはソースコードが公開されています。なので、ActionScript3が分かるのであれば自由にいじくりまわせます。先ほど解凍した中の open-flash-chartディレクトリにソースコードがあります。WindowsユーザであればFlex3 SDKとFlashDeveloperを用いてコンパイルすることができます。で、私もそうですがMacの場合は。。。FlashDeveloperがないのでFlex3 SDKをインストールしてターミナルでコンパイルしてみましょう。

$ cd open-flash-chart
$ mxmlc main.as

おそらくエラーが出てくると思います。FlashDeveloperのクラスライブラリというかFlashConnectを使用しているらしく、それがないというエラーメッセージです。なので、
http://code.google.com/p/flashdevelop/source/browse/branches/FD3.1/FlashDevelop/Bin/Debug/Library/AS3/classes/org/flashdevelop/utils/?r=257こちらからFlashConnect.asとTraceLevel.asを持ってきて

$ mkdir -p org/flashdevelop/utils

で、ディレクトリを作成しそこに設置してコンパイルします。これで無事swfが生成されていると思います。

そんなことで、JSON形式のデータを渡すだけで簡単に綺麗なグラフを生成することができるOpen Flash Chart、使ってみてはいかがでしょうか。

引用元

http://blog.asial.co.jp/689

更新：2010/04/27 10:18 カテゴリ： Flash > いろいろ ▲トップ

No.1711 テスト!!

テスト!!

更新：2009/11/06 16:26 カテゴリ： Flash > いろいろ ▲トップ

No.1704 Flash内で作成した複数画像を同時にアップロードする

Flash内で作成した複数画像を同時にアップロードする

つい最近、「Flashで作成した画像(jpg)をサーバ側にアップロードする」ということが必要になることがありました。
普通に画像1個であれば簡単なのですが、今回は複数同時にアップしたいという状況でした。

連続してのアップロードや、zip圧縮、画像を結合してなど様々な方法を教えていただいたりしたのですが、サーバ側の処理をいかに通常処理、かつ楽するかの部分でいろいろ探したところ、
「HTTPPostBinary」というas3のライブラリで実現することができそうですので、ご紹介したいと思います。
こちらを利用するとAS側のプログラムも特に面倒ということもなさそうです。

それでは、早速試してみましょう。

「HTTPPostBinary class connects your flash program to general webservice」から「HTTPPostBinary.as」をダウンロードしてFlexプロジェクト内に配置します。

で、実際に使いかたも、上記ブログ記事のとおり、

var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest("http://www.flickr.com/tools/uploader_go.gne");
var httpdata:HTTPPostBinary = new HTTPPostBinary();
httpdata.addBinary("photo", jpegDat, "image/jpeg", "snap.jpg");
request.contentType = httpdata.contentType;
request.method = httpdata.method;
request.data = httpdata.encodeData();
loader.load(request);

このように簡単に利用できます。

以下、ボタンを押したら２種類のサイズの画面イメージをサーバにPOSTするサンプルです。
今回のサンプルの構成は以下のようになっています。

UploadFlex.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.graphics.codec.JPEGEncoder;
import ym.net.HTTPPostBinary;
public function upload():void {
//1個目の画像
var bmd:BitmapData = new BitmapData(100, 200, false, 0xFFFFFF);
bmd.draw(this);
var encoder1:JPEGEncoder = new JPEGEncoder(100);
var bytes1:ByteArray = encoder1.encode(bmd);
//2個目の画像
var bmd2:BitmapData = new BitmapData(50, 50, false, 0xFFFFFF);
bmd2.draw(this);
var encoder2:JPEGEncoder = new JPEGEncoder(100);
var bytes2:ByteArray = encoder2.encode(bmd2);
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest("/sample/post.php");
var httpdata:HTTPPostBinary = new HTTPPostBinary();
//画像を添付
httpdata.addBinary("img1", bytes1, "image/jpeg", "img1.jpg");
httpdata.addBinary("img2", bytes2, "image/jpeg", "img2.jpg");
//テキストデータも同時に送信してみる
httpdata.addString("hoge", "test string");
request.contentType = httpdata.contentType;
request.method = httpdata.method;
request.data = httpdata.encodeData();
//送信
loader.load(request);
}
]]>
</mx:Script>
<mx:Button click="upload()" label="upload" />
</mx:Application>

手元のFlexBuilderでの作成が手軽だったので、Flexプロジェクトとして作成していますが、
通常のASプロジェクトでもHTTPPostBinary自体の動作には影響なく動くでしょう。

そして、受け取る側のphpコードはおなじみの$_POST, $_FILESで大丈夫です。

post.php

<?php
/*
■UploadFlex.swfから以下のようなデータがPOSTされてくる
$_POST = Array
(
[hoge] => test string
)
$_FILES = Array
(
[img1] => Array
(
[name] => img1.jpg
[type] => image/jpeg
[tmp_name] => /tmp/phpD7lTa9
[error] => 0
[size] => 4873
)
[img2] => Array
(
[name] => img2.jpg
[type] => image/jpeg
[tmp_name] => /tmp/php7V23q5
[error] => 0
[size] => 2733
)
)
*/
error_log(print_r($_POST, true), 3, '/tmp/hoge.txt');
error_log(print_r($_FILES, true), 3, '/tmp/hoge.txt');
//uploadディレクトリにPOSTされたファイルを保存
foreach ($_FILES as $key => $file) {
if ($file['error'] == UPLOAD_ERR_OK) {
$tmp_name = $file["tmp_name"];
$name = $file["name"];
move_uploaded_file($tmp_name, "./upload/".$name);
}
}

実際にアップロードされた画像ファイルが以下の２個となります。

※ボタンだけを配置したFlashのキャプチャをしているため、見た目はアレですが、、、ちゃんと、指定した２種類のサイズで切り抜いて作成されています。

まだ、ちゃんとした検証はしてないですが、最新のFlash10のバージョンでは、手元のIE6, IE7, IE8, Firefox3.5では複数画像もPOSTデータも正常にサーバ側で受け取ることができました。

引用元

http://blog.asial.co.jp/633
http://blog.ymatsusaka.com/2007/05/20/httppostbinary-class-connects-your-flash-program-to-general-webservice/
http://www.flickr.com/tools/uploader_go.gne
http://blog.asial.co.jp/read_file.php?id=870&mode=1
http://blog.asial.co.jp/read_file.php?id=870
http://www.adobe.com/2006/mxml
http://blog.asial.co.jp/read_file.php?id=871&mode=1
http://blog.asial.co.jp/read_file.php?id=871
http://blog.asial.co.jp/read_file.php?id=872&mode=1
http://blog.asial.co.jp/read_file.php?id=872

更新：2009/11/05 08:33 カテゴリ： Flash > いろいろ ▲トップ

3件中

1 〜 3 表示