「ActionScript」タグの記事が21件件あります

FlexのStateの遷移によって表示するUIを変更することで、簡潔に画面遷移を実現する。その際のTransition効果(フェード)を付与する。今回はログインフォームを例に採り、ユーザーのログイン画面と新規登録画面の2つの状態をStateによって切り替えるmxmlソースを下記に紹介する。

事象​

Flex Builder 4でPHPとのデータコネクション設定を行う際に上図のエラーが発生。 使用したサンプルチュートリアル： connect to data - Flex Test Drive | Adobe Developer Connection

任意のアドレスのWebサイト[サービス]のネットワーク状況を検知するURLMonitorと、任意のサーバ＋ポートに接続可能か否かを検知するSocketMonitorクラスの動作サンプルを下記に示します。

ソースコード​

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  applicationComplete="startup()">
  <mx:Script>
    <![CDATA[
    import air.net.SocketMonitor
    import air.net.URLMonitor;
    import flash.net.URLRequest;
    import flash.events.StatusEvent;
    private var SERVER_URL:String = "http://www.yukun.info/";
    private var SOCK_ADRR:String = "yukun.info";
    private var PORT:int = 6667;
    private var INTERVAL_TIME:int = 3000; // ms
    private var serviceMonitor:URLMonitor = null;
    private var socketMonitor:SocketMonitor = null;
    private function startup():void {
      var endpoint:URLRequest = new URLRequest(SERVER_URL);
      serviceMonitor = new URLMonitor(endpoint);
      serviceMonitor.addEventListener(StatusEvent.STATUS, onStatusEvent);
      serviceMonitor.pollInterval = INTERVAL_TIME;
      serviceMonitor.start();
      socketMonitor = new SocketMonitor(SOCK_ADRR, PORT);
      socketMonitor.addEventListener(StatusEvent.STATUS, onSocketStatusChange);
      socketMonitor.pollInterval = INTERVAL_TIME;
      socketMonitor.start();
    }
    // ネットワークサービスの状態の検知
    private function onStatusEvent(e:StatusEvent):void {
      var date:Date = new Date();
      trace(date.toLocaleTimeString());
      trace(SERVER_URL + "に" + (serviceMonitor.available ? "接続可" : "切断中"));
    }
    private function onSocketStatusChange(e:StatusEvent):void {
      trace(SOCK_ADRR + "のポート" + PORT + "は" +
        (socketMonitor.available ? "接続可" : "切断中"));
    }
    ]]]]><![CDATA[>
  </mx:Script>
</mx:WindowedApplication>

実行結果​

http://www.yukun.info/に接続可
yukun.infoのポート6667は切断中

URLMonitorはネットワーク状況を検知する為にサーバへGETリクエストを送出して、レスポンスのステイタスコードを確認して判断しているようです↓。

リファレンス​

• URLMonitor - ActionScript 3.0 言語およびコンポーネントリファレンス
• Adobe AIR 1.1 * ネットワーク接続の監視

AIRアプリケーションからSQLiteのDBにアクセスするには主にSQLConnectionとSQLStatementクラスを用います。基本的な処理の流れは、

1. SQLConnection#openAsync(＜Fileオブジェクト＞, ＜モード＞)でDBに接続
2. SQLStatement#textプロパティにSQL文を代入しexecute()で実行
3. その際、フィールド値はSQLStatement#parameters["@＜定義されたパラメータ＞"]で代入する
4. SELECT文の検索結果データははSQLStatement#getResult()で取得
5. 結果データの型はSQLResultで、データそのものはdataプロパティ(Array型)に入っている。e.g. ＜SQLResult＞.data[i].＜フィールド名＞

下のプログラムはDBに接続してテーブルの作成、レコードの追加、検索を行うサンプルです。

AIRコンポーネントではローカルのファイルにアクセスすることができます。下記のコードは日本語を含むマルチバイトの文字列をテキストファイルに書き込む処理をする。

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ブラウザ上、モバイル、スマートフォン）に依存する部分が大きいのでまだ取り掛かるのはいいかなと思ったり（ぉぃ）。 さて、今回で基本的なブラシツール（ベクター以外）は揃ったかと思いますので、そろそろテキスト系の機能を実装していきたいと思います。初回に「頭の中のアイディアを楽しくまとめられるツールを作ってみたい」とのたまっていたので、ちょっとチャレンジしてみます。合わせてベクターツールも追加してみます。