「Flash / ActionScript」タグの記事が16件件あります

AIRコンポーネントではローカルのファイルにアクセスすることができます。下記のコードは日本語を含むマルチバイトのテキストファイルを読み込み、画面い表示する処理を行う。

タイトルは反語として読む。 Demo(Uncompleted): ※追記：2011年現在Amazonのサービス仕様の変更により上記のリンク先アプリは正常に動作しません<(_ _)>

これは何？

Amazon.co.jpの任意の商品の類似商品を線で結び関連付けを視覚化するアプリ。（見にくいね。まだ未完成だけど、暇を狙って完成させる）

どうやって使うの？

1. 商品画像をダブルクリックすると類似商品の画像が表示されます。またその画像をダブルクリックすると・・・以下ループ。
2. 画像をドラッグすると線で結ばれた類似商品も納豆の糸のようについてきます。

今後直したい／追加したい機能は？

1. 商品の検索フォーム
2. 商品-類似商品間の距離調整だけでなく類似-類似間の調整も行う
3. 各イベントによる処理のタイミングの調整
4. ドラッグ中の商品とその関連商品を結ぶ線の色と画像のサイズを変更
   • 関連の深さによって色合いとサイズが変化
5. 商品をクリック／マウスオーバーしたときのアクションを増やす
   • タイトル等の商品の詳細情報を表示
   • Amazonページへのリンク
6. 関連度合いによるエフェクトの区別
7. 3D表示：Z軸への意味付け（時間軸、ここでは出版年度なんかは最適かも？）

それができたら使うメリットはある？

たぶん色々とある。作る前から作るべき明確なメリットを定義して作り始めるのがベターというかマストだけど。どちらにせよ仮説と検証の試行錯誤は必要。

そういえば、なんで作ろうと思ったの？

以前授業の課題で書いたX11でフラクタル描くコードと卒研のコードを読み直していたら今回のアプリを想像して「ん？これくらいならサクッと書けるかも」と思ったのが発端。また、「検索行動の典型」＝「フォームにキーワードをスペースはさんで入力→ポチっ→ページのリストから選択」とはひと味変った検索のメリットを見出したい、というのがメタ動機。その一例（にできればいいね）。

作って勉強になったことは？

一応作ることで、以前よりクラスの役割付け（機能の結合度合い）とデザパタの適応を以前よりスムーズにこなせるようにはなった。おおまかな設計→コーディングの速度も少し上がった（気のせい）。でもそれ以外は・・・うーん、今後の課題。 今回はAmazonの商品を線で繋げたけれど、それをTwitter(つぶやき-つぶやき中のキーワード間、ユーザ-フレンド間)やDelicious(タグ-ブックマーク間、ユーザ-フレンド間)、WordPressブログ（タグ-記事間）に変更しても基本UIの部分はわずかな修正でいけるクラス群だと思う。もちろん、場合によっては類似度を算出する部分も用意する必要がある。

最近ブログ書いてないね。

卒研とバイトその他で詰まっているのは理由としては身も蓋もナフサ。単に私の生活の中でブログのプライオリティや使い道が変化してきているのかも。

サーバ上にあるイメージファイルをダウンロードして表示するサンプル。Loaderクラスで画像など(SWF, JPEG, GIF, PNG)をダウンロードし、そのプロセス中に送出するイベントはLoaderInfoクラスが管理。

ソースコード​

package info.yukun
{
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.net.URLRequest;
	/**
	 * 外部画像のロードサンプル
	 */
	public class LoadImage extends Sprite {
		private var imageURL:String =
			"http://www.google.co.jp/intl/ja/images/about_logo.gif";
		private var imageLoader:Loader;
		public function LoadImage():void {
			init();
		}
		private function init(e:Event = null):void {
			imageLoader = new Loader();
			var imageURLreq:URLRequest = new URLRequest(imageURL);
			var imgInfo:LoaderInfo = imageLoader.contentLoaderInfo;
			imgInfo.addEventListener(Event.INIT, onInit);
			imgInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOerror);
			addChild(imageLoader);
			imageLoader.load(imageURLreq);
		}
		// ダウンロード完了
		private function onInit(e:Event):void {
			trace("Can access the loaded object.");
		}
		// IOエラーによりダウンロード失敗
		private function onIOerror(e:IOErrorEvent):void {
			trace("IO Error.");
		}
	}
}

リファレンス​

• Loader - ActionScript 3.0 Language and Components Reference
• LoaderInfo - ActionScript 3.0 Language and Components Reference

前回までのUIからは一旦離れて、PaintShopのエアーブラシみたいな機能のみのFlashを書いてみました。以下のページ上でマウスをドラッグをすると赤色の線が引けます。

今回はBitmapクラス周辺の使い方を練習してみましたが、結構知らないことがあり勉強になりました。今回のプログラムは結構雑な作りになってしまったので、後日手直ししてみよう。

今記事で4回目ですねー。デモは以下のページに用意しました。

今回の主な追加機能は、前回の改善点にも含まれていた (1)長方形と楕円描画ツールへの「塗りつぶし」機能 (2)各描画図形間のレイヤー（重なり具合）移動機能 です。あと少しインスタンスの生成を押さえた処理に変更したので若干パフォーマンスが上がっているかと思います（約1割弱）。 まず、(2)のオブジェクト間の階層（レイヤー）移動機能ですが、これは描画した図形上で右クリックを押すことで呼び出せるコンテキストメニューから使えます（下図）。 この機能で図形の重なり順序を調節することが出来ます。また、「配置」ツールで図形を選択するとその図形は自動的に最前面レイヤーに移動されます。これによって、マウスイベントの発生源を図形毎に持たせても、重なり具合によるイベントの取りこぼしか無くなる利点があります。結果、OOPにある程度沿ったプログラミングを行うことを可能にします。 ちなみにこのレイヤー移動アクションは履歴には記録せずundo、redoの対象にはしませんでした（このレベルのアプリに対しては必要ないかと思ったので）。もし貼り絵のように絵を描きたく、またundoを利用していきたい場合はPhotoshopやGIMP等の明確なレイヤー機構を実装したほうがすっきりすると思います。内部機能の実装の手間はさほど掛かりませんが、ツールボックスのようなUIを作らなくてはいけないのが今の私にとってメンドイところです。しかしFlexコンポーネントを学ぶ良い機会でもあるのでさわりだけでもやってみようかな。 こう機能が増えてくるとユーザインターフェース(UI)にもしっかり取り組まなければならないんですが、UIはリリースするプラットフォーム（PCデスクトップ上、PCブラウザ上、モバイル、スマートフォン）に依存する部分が大きいのでまだ取り掛かるのはいいかなと思ったり（ぉぃ）。 さて、今回で基本的なブラシツール（ベクター以外）は揃ったかと思いますので、そろそろテキスト系の機能を実装していきたいと思います。初回に「頭の中のアイディアを楽しくまとめられるツールを作ってみたい」とのたまっていたので、ちょっとチャレンジしてみます。合わせてベクターツールも追加してみます。

作り込んでいく内に、Flashのレイアウトとファイルサイズが大きくなったので、下記のページに用意しました。

今回追加した機能は大きく分けてタイトルに書かれている2つです。 描画できる図形の種類を直線、長方形、楕円に増やしました。また、描いた図形を任意の場所に移動することが出来ます（「配置」ボタンをクリック後、図形をドラッグ＆ドロップ）。そして、配置移動も履歴に残しているのでUndo、Redoの対象になります。 以下は作成後の反省点の一部の走り書き。

問題点や改善点​

• 図形の描画やオブジェクトのD&Dの際に、線分上に薄い青のエフェクトをかけると爽快感＋視認性が上がるかなぁと試してみたんですが、実装したら煩わしい感じになってしまいました。エフェクトのON/OFFのチェックボックスをつけておこう。
• 図形オブジェクトがD&Dでキャンバスのサイズ外に出てしまう。Flexコンポーネントの親子関係や背景色の設定し忘れ等からくる問題だと推測。
• 描画ツールのボタンは押し込み式にして、選択しているツールを分かりやすくしよう。レイアウトいじるのは後回しになりがちだなぁ。
• 長方形と楕円ツールは塗りつぶし設定の追加やShift+ドラッグ描画で正方形と円を作成できるようにしておこうかな。
• 複数の図形が重なった際のドロップ処理の再考。

undo、redoのボタンをFlexコンポーネントのButtonクラスを用いて作成してみました。

お絵かきと銘打っていますが絵がかけるのはあくまで一機能で、最終的には頭の中のアイディアを楽しくまとめられるツールを作ってみたいと今は考えています。 まぁ最初は単なるペイントツールの機能を実装していきます。 さて、1回目は定番というか基本というかUndo（元に戻す）とRedo（やり直し）機能を実装してみました。 以下のFlash上でドラッグ＆ドロップすると青い線を引けると思います。

外部ファイルをURLやパスを指定してロードする以外に、ファイルをFlashに埋め込むこむことも出来ます。下記の例で扱うファイルはmp3サウンドですが、これはテキストや画像ファイルに代えても処理の手順はさして変わりません（インスタンスを格納するデータ型が変化するだけです）。

ソースコード​

次のコードはEmbedタグで指定したサウンドを再生する処理を表しています。 PlaySound.as

package info.yukun
{
	import flash.display.Sprite;
	import flash.media.Sound;
	public class PlaySound extends Sprite
	{
		[Embed(source='sample.mp3')] // mp3ファイルのパスを指定（ここではカレントディレクトリのsample.mp3ファイル）
		private static const SampleSound:Class;
		private var sampleMp3:Sound = new SampleSound();
		public function PlaySound():void
		{
			sampleMp3.play(); // サウンドの再生
		}
	}
}

コードの説明​

[Embed(source='sample.mp3')] で指定されたmp3ファイルは、 private static const SomeSound:Class; で静的なプロパティにClass型として格納します。次に、 private var sampleMp3:Sound = new SampleSound(); でSoundクラス型変数にSampleSoundインスタンスを代入し、 これによって、play()メソッドを用いてサウンドを再生しています。 Embedにはsource属性の他にもsymbolというのがあるみたいです。後でさらっておこうかな。

参考にしたサイト​

• Embedding Resources with AS3 | BIT-101 Blog
• Sound - ActionScript 3.0 コンポーネントリファレンスガイド

XMLのパースの練習に、AmazonのWebサービスAPIを用いて本を検索し、表紙の縮小画像をStage上にランダムに配置するFlashをAS3で書いてみました。 追記：現時点はAPI仕様が変わった為、下記のプログラムは機能しません。。