2014年8月22日金曜日

FlexモバイルプロジェクトでHTMLを表示する方法

前回まではFlush CCを使っていましたが、画面遷移とかスプラッシュ画面とかが面倒なのでFlash CCでの開発はやめて、FlashBuilderを使うことにしました。

今回はFlash上にHTMLを表示する方法について。

<mx:HTML>を使おうとするとエラー
→Flexモバイルでは使えない?
http://help.adobe.com/ja_JP/flex/mobileapps/WSf3db6597adcd110e19124fcb12ab3a1c319-8000.html#WS8b1c39bd7e9fc3643c4a6fa12a8ac8b916-8000

stageWebViewを使うとモバイルアプリケーション内でブラウジング機能を利用することができます。


<?xml version="1.0" encoding="utf-8"?>
<s:View 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
actionBarVisible="false" 
creationComplete="IframeHandler(event)" 
title="Map">

<fx:Script>
<![CDATA[
   //HTMLを読み込む
   protected function IframeHandler(event:FlexEvent):void
   {
    var webView:StageWebView = new StageWebView(); webView.viewPort = new Rectangle(0, 430, this.stage.stageWidth, this.stage.stageHeight);
webView.stage = this.stage;
    var htmlString:String = 
    "<!DOCTYPE HTML>" +
    "<html><body>" +
    "<p>てすとです</p>" +
    "</body></html>";
    webView.loadString(htmlString, "text/html");
   }
]]>
</fx:Script>
 (~中略~)
</s:View>

HTMLが表示されました。

2014年8月19日火曜日

ActionScript3.0とNode.jsでSocket通信をする

今回は、Node.jsとSocket通信でメッセージを送りたい場合のお話。

前回まではレイヤーに書いてましたが、今回はクラスにActionScriptを読み込みます。



















ソースは以下のとおり。

SocketEx.as

package
{
import flash.display.Sprite;
import flash.events.DataEvent;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.MouseEvent;
import flash.net.XMLSocket;

public class SocketEx extends Sprite
{
private var _xmlSocket:XMLSocket; //ソケット
 
 
// --------------------------------------
// コンストラクタ
// --------------------------------------
public function SocketEx()
{
// EVENTS
addEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);
 
}
 
// --------------------------------------
// メソッド
// --------------------------------------
//ステージの追加とソケットの接続
private function _onAddedToStage(aEvent : Event):void
{

_xmlSocket = new XMLSocket("153.127.250.224", 3000);
 
// EVENTS
stage.removeEventListener(MouseEvent.CLICK,         _onAddedToStage);
//
_xmlSocket.addEventListener(Event.CONNECT,          _onConnected);
_xmlSocket.addEventListener(IOErrorEvent.IO_ERROR,  _onIOError);
 
}
//ソケットの接続
private function _onConnected(aEvent : Event):void
{
//  TRACE
trace("onConnect() aEvent: " + aEvent);
 
//  EVENTS
_xmlSocket.removeEventListener(Event.CONNECT,           _onConnected);
_xmlSocket.removeEventListener(IOErrorEvent.IO_ERROR,   _onIOError);
//
_xmlSocket.addEventListener(DataEvent.DATA,             _onDataReceived);
_xmlSocket.addEventListener(Event.CLOSE,                _onSocketClose);

button_send.addEventListener(MouseEvent.CLICK, _onMessageSend);
 
}
 
//ソケットの切断
private function _onSocketClose(aEvent : Event):void
{
//  TRACE
trace("_onSocketClose aEvent : " + aEvent);
 
//  EVENTS
_xmlSocket.removeEventListener(Event.CLOSE, _onSocketClose);
_xmlSocket.removeEventListener(DataEvent.DATA, _onDataReceived);
}

//送信ボタンが押されたときの処理
private function _onMessageSend(evt:MouseEvent):void
{
_xmlSocket.send(message_send.text);
}
 
//送信データの受信
private function _onDataReceived(aEvent : DataEvent):void
{
try {
 
//  Show the server data in text
message_receive.htmlText += (aEvent.data + "\n");
 
//scroll down to show latest line
message_receive.scrollV = message_receive.maxScrollV;
 
} catch (error : Error) {
//  TRACE
trace("_onDataReceived error:  " + error);
}
}
 
//接続エラー
private function _onIOError(aEvent : IOErrorEvent):void
{
//  TRACE
trace("_onIOError aEvent: " + aEvent);
 
//  EVENTS
_xmlSocket.removeEventListener(Event.CONNECT, _onConnected);
_xmlSocket.removeEventListener(IOErrorEvent.IO_ERROR, _onIOError);
stage.addEventListener(MouseEvent.CLICK, _onAddedToStage);
}
 
}
}


Node.jsが入っていることが前提としてサーバー側のソースが以下の通り

app.js

// --------------------------------------
// Imports
// --------------------------------------
var net = require('net');
var mySocket;

// --------------------------------------
// Construct The Socket
// --------------------------------------
// create the server and register event listeners
var server = net.createServer(function(socket) {
    mySocket = socket;
    mySocket.on("connect", onConnect);
    mySocket.on("data", onData);
});

// --------------------------------------
// Events
// --------------------------------------
/**
 * Handles the Event: <code>"connect"</code>.
 *
*/
function onConnect()
{
    console.log("Connected to Flash");
}

/**
 * Handles the Event: <code>"data"</code>.
 *
 * When flash sends us data, this method will handle it
 *
*/
function onData(d)
{
    if(d == "exit\0")
    {
        console.log("exit");
        mySocket.end();
        server.close();
    }
    else
    {
        console.log("From Flash = " + d);
        mySocket.write(d, 'utf8');
    }
}

// --------------------------------------
// Start the Socket
// --------------------------------------
server.listen(3000, "IPアドレス");


実行
























という具合で動きました。

2014年8月15日金曜日

ActionScript3.0で動画ストリーミングを再生する

今回はflv形式の動画を再生したいとします。
流れは次のようになります。

1.flvを読み込むためにNetConnectionクラスを使う必要があるためまずはNetConnectionオブジェクトを生成する


2.connection()メソッドにnullを引数に指定して、HTTP上またはローカル上のファイルと接続する

3.接続が完了したらデータを読み込むためのストリームを生成する

4.ビデオオブジェクトを生成してサイズなどを指定する

5.NetStreamクラスのplay()メソッドで動画ストリーミングの再生を開始する

以下がソースとなります。
import flash.display.*;
import flash.media.*;
import flash.net.*;
import flash.text.*;

//1.コネクションの生成
var connection:NetConnection;
connection = new NetConnection();

//2.ファイルとの接続を確立
connection.connect(null);

//3.ストリームの生成
var stream:NetStream = new NetStream(connection);

// 4.ビデオオブジェクトを作成する
var video_obj:Video = new Video();

// ステージの表示リストに登録する
addChild(video_obj);

// ビデオオブジェクトのサイズを変更する
video_obj.x = 20;
video_obj.y = 20;
video_obj.width  = 440;
video_obj.height = 350;
video_obj.attachNetStream(stream);

//5.動画ストリーミングの再生開始
stream.play("sample1.flv");



いい感じに表示されました。


2014年8月14日木曜日

ActionScript3.0で入力フォームを作る(2)

ボタンをクリックしたときに文字が送信されるようにしたいとします。

1.矩形などでボタンのイメージを作成する
2.右クリックしてシンボルに変換→種類「ボタン」を選択












3.インスタンス名をつける
























4.ActionScriptを記述
クリックされたときに出力されるようにします


import flash.events.MouseEvent;

//クリックイベント
button1.addEventListener(MouseEvent.CLICK,button1Listener);
function button1Listener(e:MouseEvent){
message_display.text = "出力:" + chat_message.text;
}


5.出力
クオリティーはともかく、表示されました。



ActionScript3.0で入力フォームを作る(1)

AS3とAirでAndroidアプリを作ることになったのですが、初心者すぎてまったく勝手がわかりません。
ということでまずは入力フォームを作ってみます。
AdobeFlashProfessionalCCを使用しています。

1.プロパティからテキストツールを選択する
2.インスタンス名を入力(ここではchat_messgeとしています)
3.テキストの種類をテキスト入力とする





























4.こんなかんじにドラッグ&ドロップでフォームを作る
  矩形ツールでフォームの周りを囲んでおくと入力フォームっぽい



























5.出力先のフォームを作成する
アンチエイリアスにデバイスフォントを使用を選択する

















6.ActionScriptを記述する
タイムラインからレイヤーを選択するかF9でアクションタブを立ち上げる

import flash.events.Event;

//テキスト入力フォーム
chat_message.text = "入力してね!";

//入力されたテキストを表示する
chat_message.addEventListener(Event.ENTER_FRAME,updateMessage)
function updateMessage(e:Event):void{
message_display.text = "出力:" + chat_message.text;
}

7.Ctrl + Enterで実行


























という具合になります。
Web開発とは勝手が違うのでなんか大変そうです。