GeekChimps


FlexでRed5を利用してライブストリーミング

投稿者: miizasa, カテゴリー: Flex, Red5

前回はRed5のoflaDemoを使って動画のストリーミング再生をやりましたが今回はライブストリーミングに挑戦します。とは言ってもカメラやマイクの使い方ぐらいで前回のプレイヤーとあまり変わりません。
実は受信側に至っては前回のプレイヤーがそのまま使えます。streamidだけ合わせるだけで利用できます。
LivePublisher.mxml(ライブパブリッシャー)

actionscript
< view plain text >
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" mouseOut="mouseOutHandler(event);" mouseChildren="true">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import flash.net.*;
  6.             import mx.controls.Alert;
  7.             import mx.core.UIComponent;
  8.  
  9.             // publicプロパティ===================================================================
  10.             public var streamid : String = "testlive";
  11.             public var protocols : String = "rtmp";    // rtmp rtmpt
  12.             public var host: String = "www.bamboo.mydns.jp";
  13.             public var videowidth : int = 320;
  14.             public var videoheight : int = 240;
  15.             public var publishtype : String = "live";     // live・record・append
  16.             public var fps: int = 30;     // 1~30
  17.             public var keyframe: int = 1;    // 1~48
  18.             public var quality : int = 90;    // 0~100
  19.  
  20.             [Bindable]
  21.             public var videoenable : Boolean = true;
  22.  
  23.             // privateプロパティ===================================================================
  24.             private var uiC : UIComponent = new UIComponent();
  25.             private var ncPub : NetConnection = new NetConnection();
  26.             private var ncView : NetConnection = new NetConnection();
  27.             private var nsPublish:NetStream;
  28.             private var nsPlay:NetStream;
  29.             private var videoURL : String;
  30.             private var mouseIn : Boolean;
  31.             private var ctrlvisible : Boolean;
  32.  
  33.             [Bindable]
  34.             private var isPlaying:Boolean = false;
  35.  
  36.             // pablicメソッド===================================================================
  37.             public function play():void{
  38.  
  39.                 // Viewer用NetConnectionのイベントリスナ設定
  40.                 ncView.addEventListener(NetStatusEvent.NET_STATUS, netViewStatusHandler);
  41.                 ncView.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
  42.                 ncView.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  43.  
  44.                 // パラメータチェック
  45.  
  46.                 // URL組み立て
  47.                 videoURL = protocols + "://" + host + "/oflaDemo";
  48.  
  49.                 ncView.connect(videoURL);
  50.  
  51.             }
  52.  
  53.             public function playstop():void {
  54.                 if (nsPlay) {
  55.                     nsPlay.close();
  56.                 }
  57.             }
  58.  
  59.             public function publish():void{
  60.  
  61.                 // パブリッシャ用NetConnectionのイベントリスナ設定
  62.                 ncPub.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
  63.                 ncPub.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
  64.                 ncPub.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  65.  
  66.                 // Viewer用NetConnectionのイベントリスナ設定
  67.                 ncView.addEventListener(NetStatusEvent.NET_STATUS, netViewStatusHandler);
  68.                 ncView.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
  69.                 ncView.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  70.  
  71.                 // パラメータチェック
  72.  
  73.  
  74.  
  75.                 // URL組み立て
  76.                 videoURL = protocols + "://" + host + "/oflaDemo";
  77.  
  78.                 //パブリッシャ用コネクション接続
  79.                 ncPub.connect(videoURL);
  80.  
  81.             }
  82.  
  83.             public function publishstop():void {
  84.                 if (nsPublish) {
  85.                     nsPublish.close();
  86.                 }
  87.             }
  88.  
  89.             // privateメソッド===================================================================
  90.             // パブリッシュ用NetStatusイベントハンドラ
  91.             private function netStatusHandler(event:NetStatusEvent):void{
  92.                 switch (event.info.code) {
  93.                     case "NetConnection.Connect.Success":
  94.                         //connectStream();
  95.                         startPublish(publishtype,streamid);
  96.                         break;
  97.                     case "NetStream.Play.StreamNotFound":
  98.                         trace("Stream not found: " + videoURL);
  99.                         break;
  100.                 }
  101.  
  102.             }
  103.             // Viewer用NetStatusイベントハンドラ
  104.             private function netViewStatusHandler(event:NetStatusEvent):void{
  105.                 switch (event.info.code) {
  106.                     case "NetConnection.Connect.Success":
  107.                         connectStream();
  108.                         break;
  109.                     case "NetStream.Play.StreamNotFound":
  110.                         trace("Stream not found: " + videoURL);
  111.                         break;
  112.                 }
  113.  
  114.             }
  115.  
  116.             private function securityErrorHandler(event:SecurityErrorEvent):void{
  117.                 trace("securityErrorHandler: " + event);
  118.             }
  119.  
  120.             private function asyncErrorHandler(event:AsyncErrorEvent):void{
  121.                 trace("asyncErrorHandler: " + event);
  122.             }
  123.  
  124.             private function netIOErrorHandler(event:AsyncErrorEvent):void{
  125.                 trace("netIOErrorHandler: " + event);
  126.             }
  127.  
  128.             //
  129.             private function connectStream():void{
  130.                 nsPlay = new NetStream(ncView);
  131.                 nsPlay.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
  132.                 nsPlay.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  133.  
  134.                 var video : Video = new Video(this.width, this.height);
  135.                 video.attachNetStream(nsPlay);
  136.  
  137.                 nsPlay.play(streamid);
  138.  
  139.                 uiC.addChild(video);
  140.                 uiC.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
  141.  
  142.                 this.addChild(uiC);
  143.                 this.setChildIndex(ctrl,1);
  144.  
  145.                 sndonly.visible = !(videoenable);
  146.  
  147.                 btnPlay.selected = true;
  148.                 isPlaying = true;
  149.  
  150.             }
  151.  
  152.  
  153.             public function startPublish( publishMode : String, streamName : String ) : void
  154.             {
  155.                 try
  156.                 {
  157.                     var camera :Camera = Camera.getCamera();
  158.                     var microphone :Microphone = Microphone.getMicrophone();;
  159.                     //
  160.                     if ( microphone != null || camera != null )
  161.                     {
  162.                         // close previous stream
  163.                         if ( nsPublish != null )
  164.                         {
  165.                             // 現在の配信をとめる
  166.                             nsPublish.close();
  167.  
  168.                         }
  169.                         // Setup NetStream for publishing.
  170.                         nsPublish = new NetStream( ncPub );
  171.                         //
  172.                         nsPublish.addEventListener( NetStatusEvent.NET_STATUS, netStatusHandler );
  173.                         nsPublish.addEventListener( IOErrorEvent.IO_ERROR, netIOErrorHandler );
  174.                         nsPublish.addEventListener( AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler );
  175.                         //
  176.                         //nsPublish.client = new CustomClient();
  177.  
  178.                         // attach devices to NetStream.
  179.                         if ( camera != null )
  180.                         {
  181.                             sndonly.visible = false;
  182.                             videoenable = true;
  183.                             // カメラ設定(フレーム・画質など)
  184.                             camera.setKeyFrameInterval( keyframe );
  185.                             camera.setMode( this.width, this.height, fps );
  186.                             camera.setQuality( 0, quality );
  187.                             nsPublish.attachCamera( camera );
  188.                         }
  189.                         else {
  190.                             //カメラなしの場合には、画像表示
  191.                             sndonly.visible = true;
  192.                             videoenable = false;
  193.  
  194.                         }
  195.  
  196.                         if ( microphone != null)
  197.                         {
  198.                             nsPublish.attachAudio( microphone );
  199.                         }
  200.  
  201.                         // Start publishing.
  202.                         nsPublish.publish( streamName, publishMode );
  203.  
  204.                         // ビューア接続
  205.                         ncView.connect(videoURL);
  206.  
  207.                     }
  208.                     else
  209.                     {
  210.                         trace( "Can't publish stream, no input device(s) selected");
  211.                     }
  212.                 }
  213.                 catch( e : ArgumentError )
  214.                 {
  215.                     // Invalid parameters
  216.                     switch ( e.errorID )
  217.                     {
  218.                         // NetStream object must be connected.
  219.                         case 2126 :
  220.                             //
  221.                             trace( "Can't publish stream, not connected to server");
  222.                             trace(  "Not connected to server");
  223.                             break;
  224.                         //
  225.                         default :
  226.                            //
  227.                            trace( e.toString() );
  228.                            break;
  229.                     }
  230.                 }
  231.             }
  232.  
  233.             private function mouseOverHandler(event:MouseEvent):void {
  234.                 ctrl.visible = true;
  235.                 mouseIn = true;
  236.                 ctrlvisible = true;
  237.             }
  238.  
  239.             private function childmouseOverHandler(event:MouseEvent):void {
  240.                 mouseIn = true;
  241.             }
  242.  
  243.             private function mouseOutHandler(event:MouseEvent):void {
  244.                 setTimer();
  245.                 mouseIn = false;
  246.             }
  247.  
  248.             private function setTimer():void {
  249.                 var stopTimer:Timer = new Timer(3000, 1);
  250.                 stopTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
  251.                 stopTimer.start();
  252.             }
  253.  
  254.             private function onTimerComplete(event:TimerEvent):void {
  255.                 if (mouseIn == false) {
  256.                     // 複数回処理しないためのチェック
  257.                     if (ctrl.visible == true) {
  258.                         // Effectによりコンポーネントのvisibleが設定されるのにDelayがあるので
  259.                         // さらなるチェック
  260.                         if (ctrlvisible == true) {
  261.                             ctrl.visible = false;
  262.                             ctrlvisible = false;
  263.                         }
  264.                     }
  265.                 }
  266.                 else {
  267.                     ctrl.visible = true;
  268.                     ctrlvisible = true;
  269.                 }
  270.             }
  271.  
  272.  
  273.         ]]>
  274.     </mx:Script>
  275.     <mx:Style>
  276.         .PlayStyle {
  277.             downSkin: Embed("../assets/play_right_g.JPG");
  278.             upSkin: Embed("../assets/play_right_b.JPG");
  279.             overSkin: Embed("../assets/play_right_y.JPG");
  280.             disabledSkin: Embed("../assets/play_right_w.JPG");
  281.             selectedDownSkin: Embed("../assets/tempStop_g.JPG");
  282.             selectedUpSkin: Embed("../assets/tempStop_b.JPG");
  283.             selectedOverSkin: Embed("../assets/tempStop_y.JPG");
  284.             selectedDisabledSkin: Embed("../assets/tempStop_w.JPG");
  285.         }
  286.         .StopStyle {
  287.             downSkin: Embed("../assets/stop_g.JPG");
  288.             upSkin: Embed("../assets/stop_b.JPG");
  289.             overSkin: Embed("../assets/stop_y.JPG");
  290.             disabledSkin: Embed("../assets/stop_w.JPG");
  291.             selectedDownSkin: Embed("../assets/stop_g.JPG");
  292.             selectedUpSkin: Embed("../assets/stop_b.JPG");
  293.             selectedOverSkin: Embed("../assets/stop_y.JPG");
  294.             selectedDisabledSkin: Embed("../assets/stop_w.JPG");
  295.         }
  296.     </mx:Style>
  297.  
  298.  
  299.     <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
  300.     <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  301.     <mx:WipeUp id="wipeIn" duration="1000"/>
  302.     <mx:WipeDown id="wipeOut" duration="1000"/>
  303.     <mx:Canvas id="ctrl" left="0" top="0" right="0" bottom="0" visible="false" showEffect="fadeIn" hideEffect="fadeOut" alpha="0.5">
  304.         <mx:VBox left="0" right="0" top="0" bottom="0">
  305.             <mx:HBox x="63" y="155" width="100%" verticalAlign="middle" horizontalAlign="center" height="50%" mouseOver="childmouseOverHandler(event);">
  306.                 <mx:Button label="閉じる"/>
  307.             </mx:HBox>
  308.             <mx:HBox x="63" y="155" width="100%" horizontalAlign="center" verticalAlign="middle" height="50%" >
  309.                 <mx:Button styleName="PlayStyle" toggle="true" id="btnPlay" selected="{isPlaying}" width="50" height="50" mouseOver="childmouseOverHandler(event);" />
  310.                 <mx:Button styleName="StopStyle" width="50" height="50" mouseOver="childmouseOverHandler(event);"/>
  311.             </mx:HBox>
  312.         </mx:VBox>
  313.     </mx:Canvas>
  314.     <mx:Image id="sndonly" left="0" top="0" bottom="0" right="0" source="@Embed('../assets/screen_sound_only.png')" visible="false" mouseOver="mouseOverHandler(event);"/>
  315.  
  316. </mx:Canvas>

んでは続いて毎度お馴染みの上っ面
red5live.mxml(上っ面)

actionscript
< view plain text >
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  backgroundColor="#FFFFFF" xmlns:ns1="*" creationComplete="init()">
  3.  
  4.     <mx:Label x="24" y="18" text="Publish"/>
  5.     <mx:Label x="309" y="18" text="View"/>
  6.     <mx:Button x="77" y="16" label="配信" click="pub.publish();"/>
  7.     <mx:Button x="346" y="16" label="受信" click="view.play();"/>
  8.     <ns1:LivePublisher id="pub"  x="24" y="44" width="320" height="240">
  9.     </ns1:LivePublisher>
  10.     <ns1:LivePublisher id="view" x="352" y="246" width="320" height="240" videoenable="{pub.videoenable}">
  11.     </ns1:LivePublisher>
  12.  
  13. </mx:Application>

完成したのがこれ

http://www.bamboo.mydns.jp/flex/red5live.swf

ビデオソースやマイクデバイスは先頭のやつを使ってしまっていますが
選択できるようにするといいですね。

コメント(1)

Red5のストリーミングクライアントをFlexでつくる

投稿者: miizasa, カテゴリー: Flex, Red5

前回インストールしたRed5からストリーミング再生するクライアントをFlexで作りたいと思います。
とは言っても、まぁそこらのクライアントとやり方は同じなのでちゃんとした解説しませんが
手順としては
NetConnectionでサーバに接続
NetStreamを作成
videoをNetStreamにアタッチして
NetStreamをPlay
こんな感じです。
早速、ソースの方を晒しちゃいます。
VideoPlayer.mxml(プレイヤー)

actionscript
< view plain text >
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" mouseOut="mouseOutHandler(event);" mouseChildren="true" creationComplete="init()">
  3.     <mx:Script>
  4.         <![CDATA[
  5. //          import jp.co.idac.dipiti.model.CustomClient;
  6.             import flash.net.*;
  7.             import mx.controls.Alert;
  8.             import mx.core.UIComponent;
  9.  
  10.  
  11.             public var streamid : String;
  12.             public var protocols : String = "rtmp";
  13.             public var host: String = "www.bamboo.mydns.jp";
  14.             public var videowidth : int = 320;
  15.             public var videoheight : int = 240;
  16.  
  17.             private var uiC : UIComponent = new UIComponent();
  18.             private var nc : NetConnection = new NetConnection();
  19.             [Bindable]
  20.             private var nsPlay:NetStream;
  21.             private var videoURL : String;
  22.             private var mouseIn : Boolean;
  23.             private var ctrlvisible : Boolean;
  24.  
  25.             [Bindable]
  26.             private var isPlaying:Boolean = false;
  27.  
  28.             [Bindable]
  29.             private var totalTime:Number;
  30.  
  31.             [Bindable]
  32.             private var nowTime:Number;
  33.  
  34.             private var timer:Timer;
  35.  
  36.  
  37.             private function init():void {
  38.                 timer = new Timer( 100, 0 );
  39.                 timer.addEventListener( TimerEvent.TIMER, onTimer );
  40.                 timer.start();
  41.  
  42.             }
  43.  
  44.             private function onTimer(event:TimerEvent):void {
  45.                 if (!nsPlay) return;
  46.  
  47.                 hsPlay.value = nsPlay.time;
  48.                 // 時間表示
  49.                 var min:int = nsPlay.time / 60;
  50.                 var sec:int = nsPlay.time % 60;
  51.                 var mins:String = min.toString();
  52.                 if (min < 10) mins = "0" + mins;
  53.                 var secs:String = sec.toString();
  54.                 if (sec < 10) secs = "0" + secs;
  55.                 lblTime.text = mins + ":" + secs;
  56.  
  57.             }
  58.  
  59.             private function formatTime(item:Date):String{
  60.                 return dateFormatter.format(item);
  61.             }
  62.             public function play():void{
  63.  
  64.                 nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
  65.                 nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
  66.                 nc.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  67.                 nc.client = this;
  68.  
  69.                 videoURL = protocols + "://" + host + "/oflaDemo";
  70.                 nc.connect(videoURL);
  71.  
  72.             }
  73.  
  74.             private function netStatusHandler(event:NetStatusEvent):void{
  75.                 switch (event.info.code) {
  76.                     case "NetConnection.Connect.Success":
  77.                         connectStream();
  78.                         break;
  79.                     case "NetStream.Play.StreamNotFound":
  80.                         trace("Stream not found: " + videoURL);
  81.                         break;
  82.                 }
  83.  
  84.             }
  85.  
  86.             private function securityErrorHandler(event:SecurityErrorEvent):void{
  87.                 trace("securityErrorHandler: " + event);
  88.             }
  89.  
  90.             private function asyncErrorHandler(event:AsyncErrorEvent):void{
  91.                 trace("asyncErrorHandler: " + event);
  92.             }
  93.  
  94.             private function connectStream():void{
  95.                 nsPlay = new NetStream(nc);
  96.                 nsPlay.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
  97.                 nsPlay.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
  98.                 nsPlay.client = this;
  99.                 trace(this.width + ":" + this.height);
  100.                 var video : Video = new Video(this.width, this.height);
  101.                 video.attachNetStream(nsPlay);
  102.                 nsPlay.play(streamid);
  103.  
  104. //              nowTime = nsPlay.time;
  105.  
  106.                 uiC.addChild(video);
  107.                 uiC.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
  108.  
  109.                 this.addChild(uiC);
  110.                 this.setChildIndex(ctrl,1);
  111.  
  112.                 btnPlay.selected = true;
  113.                 isPlaying = true;
  114.  
  115.             }
  116.  
  117.             private function mouseOverHandler(event:MouseEvent):void {
  118.                 ctrl.visible = true;
  119.                 mouseIn = true;
  120.                 ctrlvisible = true;
  121.             }
  122.  
  123.             private function mouseOutHandler(event:MouseEvent):void {
  124.                 setTimer();
  125.                 mouseIn = false;
  126.             }
  127.  
  128.             private function childmouseOverHandler(event:MouseEvent):void {
  129.                 mouseIn = true;
  130.             }
  131.  
  132.             private function playClick():void{
  133.                 nsPlay.togglePause();
  134.                 isPlaying = !(isPlaying);
  135.             }
  136.  
  137.             private function stopClick():void{
  138.                 nsPlay.close();
  139.                 isPlaying = false;
  140.             }
  141.  
  142.             private function setTimer():void {
  143.                 var stopTimer:Timer = new Timer(3000, 1);
  144.                 stopTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
  145.                 stopTimer.start();
  146.             }
  147.  
  148.             private function onTimerComplete(event:TimerEvent):void {
  149.                 if (mouseIn == false) {
  150.                     // 複数回処理しないためのチェック
  151.                     if (ctrl.visible == true) {
  152.                         // Effectによりコンポーネントのvisibleが設定されるのにDelayがあるので
  153.                         // さらなるチェック
  154.                         if (ctrlvisible == true) {
  155.                             ctrl.visible = false;
  156.                             ctrlvisible = false;
  157.                         }
  158.                     }
  159.                 }
  160.                 else {
  161.                     ctrl.visible = true;
  162.                     ctrlvisible = true;
  163.                 }
  164.             }
  165.  
  166.             // コールバック関数定義
  167.             public function onMetaData(info:Object):void {
  168.                 trace("metadata: duration=" + info.duration + " width=" + info.width + " height=" + info.height + " framerate=" + info.framerate);
  169.                 // MetaDataをtraceして確認
  170.                 for (var ite:String in info) {
  171.                     trace(ite + " : " + info[ite]);
  172.                 }
  173.                 totalTime = info.duration;
  174.                 trace(totalTime);
  175.                 //hsPlay.maximum = info.duration;
  176.             }
  177.             public function onCuePoint(info:Object):void {
  178.                 trace("cuepoint: time=" + info.time + " name=" + info.name + " type=" + info.type);
  179.                 // MetaDataをtraceして確認
  180.                 for (var ite:String in info) {
  181.                     trace(ite + " : " + info[ite]);
  182.                 }
  183.                 nowTime = info.time;
  184.             }
  185.             public function onBWDone():void {
  186.                 trace("onBWDone ");
  187.                 // MetaDataをtraceして確認
  188.             }
  189.             public function onPlayStatus(info:Object):void {
  190.                 // MetaDataをtraceして確認
  191.                 for (var ite:String in info) {
  192.                     trace(ite + " : " + info[ite]);
  193.                 }
  194.             }
  195.  
  196.         ]]>
  197.     </mx:Script>
  198.     <mx:Style>
  199.         .PlayStyle {
  200.             downSkin: Embed("../assets/play.png");
  201.             upSkin: Embed("../assets/play.png");
  202.             overSkin: Embed("../assets/play.png");
  203.             disabledSkin: Embed("../assets/play.png");
  204.             selectedDownSkin: Embed("../assets/pause.png");
  205.             selectedUpSkin: Embed("../assets/pause.png");
  206.             selectedOverSkin: Embed("../assets/pause.png");
  207.             selectedDisabledSkin: Embed("../assets/pause.png");
  208.         }
  209.         .StopStyle {
  210.             downSkin: Embed("../assets/eject.png");
  211.             upSkin: Embed("../assets/eject.png");
  212.             overSkin: Embed("../assets/eject.png");
  213.             disabledSkin: Embed("../assets/eject.png");
  214.             selectedDownSkin: Embed("../assets/eject.png");
  215.             selectedUpSkin: Embed("../assets/eject.png");
  216.             selectedOverSkin: Embed("../assets/eject.png");
  217.             selectedDisabledSkin: Embed("../assets/eject.png");
  218.         }
  219.         .MinusStyle {
  220.             downSkin: Embed("../assets/minus.png");
  221.             upSkin: Embed("../assets/minus.png");
  222.             overSkin: Embed("../assets/minus.png");
  223.             disabledSkin: Embed("../assets/minus.png");
  224.             selectedDownSkin: Embed("../assets/minus.png");
  225.             selectedUpSkin: Embed("../assets/minus.png");
  226.             selectedOverSkin: Embed("../assets/minus.png");
  227.             selectedDisabledSkin: Embed("../assets/minus.png");
  228.         }
  229.         .PlusStyle {
  230.             downSkin: Embed("../assets/plus.png");
  231.             upSkin: Embed("../assets/plus.png");
  232.             overSkin: Embed("../assets/plus.png");
  233.             disabledSkin: Embed("../assets/plus.png");
  234.             selectedDownSkin: Embed("../assets/plus.png");
  235.             selectedUpSkin: Embed("../assets/plus.png");
  236.             selectedOverSkin: Embed("../assets/plus.png");
  237.             selectedDisabledSkin: Embed("../assets/plus.png");
  238.         }
  239.  
  240.     </mx:Style>
  241.  
  242.     <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
  243.     <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
  244.     <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  245.     <mx:WipeUp id="wipeIn" duration="1000"/>
  246.     <mx:WipeDown id="wipeOut" duration="1000"/>
  247.     <mx:Canvas id="ctrl" left="0" right="0" bottom="0" visible="true" showEffect="wipeIn" hideEffect="wipeOut" backgroundColor="#FFFFFF" alpha="0.5" height="30">
  248.         <mx:Button styleName="PlayStyle" toggle="true" id="btnPlay" selected="{isPlaying}" click="playClick();"  mouseOver="childmouseOverHandler(event);" left="3" verticalCenter="0" width="16" height="16"/>
  249.         <mx:Button styleName="StopStyle" click="stopClick();" mouseOver="childmouseOverHandler(event);" right="3" verticalCenter="0" width="16" height="16"/>
  250.         <mx:HSlider id="hsPlay" x="22.2" maximum="{totalTime}" value="{nowTime}" width="141" mouseOver="childmouseOverHandler(event);"  verticalCenter="0"/>
  251.         <mx:Button x="206" id="btnMinus" styleName="MinusStyle" mouseOver="childmouseOverHandler(event);" width="16" height="16" verticalCenter="0"/>
  252.         <mx:Button x="268" id="btnPlus" styleName="PlusStyle" mouseOver="childmouseOverHandler(event);"  width="16" height="16" verticalCenter="0"/>
  253.         <mx:Label x="222" y="2" text="volume" mouseOver="childmouseOverHandler(event);"/>
  254.         <mx:Label x="230" y="12" text="0.75" mouseOver="childmouseOverHandler(event);"/>
  255.         <mx:Label x="162" id="lblTime" text="" mouseOver="childmouseOverHandler(event);" verticalCenter="0"/>
  256.     </mx:Canvas>
  257.  
  258. </mx:Canvas>

movieupload.mxml(プレイヤーをのせてるだけの上っ面)

actionscript
< view plain text >
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  backgroundColor="#FFFFFF" xmlns:ns1="*" creationComplete="init()">
  3.  
  4.     <mx:TextInput x="10" y="115" id="txtvideoid" />
  5.     <mx:Button x="178" y="115" label="ロード" click="vid.play();"/>
  6.     <mx:Canvas x="265" y="10" width="324" height="200" cornerRadius="10" borderStyle="solid" alpha="1.0">
  7.         <ns1:VideoPlayer id="vid" streamid="{txtvideoid.text}" videoheight="240" videowidth="320" left="0" right="0" top="0" bottom="0" cornerRadius="10">
  8.         </ns1:VideoPlayer>
  9.     </mx:Canvas>
  10. </mx:Application>

実行するとこんな感じです。
http://www.bamboo.mydns.jp/flex/movieupload.swf

テキストの場所にデモについてる動画「avatar-vp6」とか入力してロードボタンとか押せば再生できます。
サーバー側の開発環境は、まだなのでデモアプリケーションのoflaDemoを利用していますが
oflaDemoだけでもいろいろできるので便利ですねぇ
プレイヤーのインターフェースが作成途中なのはナイショw

コメント(1)

Flexで宛名印刷してみる

投稿者: miizasa, カテゴリー: Flex

どうもFlexあればだいたいなんでもできると思ってるmiizasaです。。。
今回は、宛名の印刷してみようと思います。
まず印刷なのですが、FlexPrintJobを使用します。
印刷する際には表示しているコンポーネントをベースにインストールすることにないます。
グリッドはグリッドの印刷用のイメージで印刷できるそうです。
まぁ印刷は簡単です。
んでは、宛名印刷でなにが問題なのか?そう!縦書きです!
通常フォントの指定でフォント名の前に「@」をつければ縦書きフォントになるのですが
この縦書きフォントが気に入らない。。。
ハイフンは縦になるとかならないとか、なんだかイライラする。(笑)
んじゃ横書きフォントを縦に並べればいいわけでもない。
縦書きと横書きが混在する宛名印刷というカオスに挑むためにいったいどうすればいいのか?(大袈裟)
なかなか思い通りにならないのでフォント作りましたw
普通のフォントを、フォントエディタを使ってスクリプトで90度回転させましたw
濁点や句読点などの位置を調整した感じですねぇ
まぁ大して手間もかかってない方のソースはこんな感じです。
表示用アイテムレンダラ(addr.mxml)

actionscript
< view plain text >
  1. <?xml version="1.0"?>
  2.  
  3. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" borderStyle="none" xmlns:text="flash.text.*" width="270" height="400" horizontalScrollPolicy="off" verticalScrollPolicy="off">
  4.     <mx:Style>
  5.         @font-face {
  6.             src:url("./assets/IDACG.ttf");
  7.             fontFamily: myFontFamily1;
  8.             advancedAntiAliasing: true;
  9.         }
  10.     </mx:Style>
  11.    
  12.     <mx:Text text="{data.zip}" x="116" y="10" color="#000000"  fontSize="20" height="37" width="144"/>
  13.     <mx:Text text="{data.addr1}" y="90" fontSize="16"  width="400" height="29" textAlign="left" fontFamily="myFontFamily1" rotation="90" x="240" color="#000000"/>
  14.     <mx:Text text="{data.addr2}" y="110" fontSize="16"  width="400" height="31" x="200" textAlign="left" fontFamily="myFontFamily1" rotation="90" color="#000000"/>
  15.     <mx:Text text="{data.name} 様" width="300" textAlign="center" fontSize="20" height="51" x="132" fontFamily="myFontFamily1" rotation="90" y="90" color="#000000"/>
  16.    
  17. </mx:Canvas>

印刷用コンポーネント(PrintView.mxml)

actionscript
< view plain text >
  1. <?xml version="1.0"?>
  2. <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         xmlns:local="*"
  4.         borderStyle="none" borderColor="#FFFFFF" horizontalScrollPolicy="off" verticalScrollPolicy="off">
  5.         <mx:TileList id="AddressList"
  6.             maxColumns="1" rowHeight="400" columnWidth="270" itemRenderer="addr" borderStyle="none">
  7.         </mx:TileList>
  8.  
  9. </mx:VBox>

本体(PrintTest.mxml)

actionscript
< view plain text >
  1. <?xml version="1.0"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.                 xmlns:local="*"
  4.                 creationComplete="createComp()" layout="absolute">
  5.  
  6.     <mx:Script>
  7.         <![CDATA[
  8.             import mx.printing.*;
  9.             import mx.collections.*;
  10.             import mx.events.FlexEvent;
  11.             import mx.controls.Alert;
  12.             import  mx.rpc.events.*;
  13.             import mx.collections.ArrayCollection;
  14.            
  15.  
  16.             //Private variables
  17.             [Bindable]
  18.             private var pages:Number;
  19.             private var itemsPerPage:Number= 1;
  20.             [Bindable]
  21.             private var currentPage:Number = 1;
  22.             private var maxIndex:Number = 9;
  23.             private var minIndex:Number = 0;
  24.            
  25.             [Bindable]
  26.             private var myData : ArrayCollection = new ArrayCollection();
  27.            
  28.            
  29.             private function createComp():void{
  30.                 setListener();
  31.                 addressService.send();
  32.                
  33.             }
  34.  
  35.             private function setListener():void{
  36.                 addressService.addEventListener(ResultEvent.RESULT ,loadComp);         
  37.             }
  38.            
  39.             private function loadComp(e:Event):void{
  40.                 if(myXC.length % itemsPerPage == 0){
  41.                     pages = myXC.length/itemsPerPage;
  42.                 }
  43.                 else{
  44.                     pages =  int(myXC.length/itemsPerPage)+1;
  45.                 }
  46.                 setFilter();               
  47.                                
  48.             }
  49.            
  50.             private function setFilter():void{
  51.                 maxIndex = (currentPage * itemsPerPage)-1;
  52.                 minIndex = maxIndex - (itemsPerPage -1);
  53.  
  54.                 myData.removeAll();
  55.                 for (var z:int = minIndex; z<=maxIndex; z++){
  56.                     if (myXC.length -1 >= z && z >= 0){
  57.                         myData.addItem(myXC.getItemAt(z));
  58.                     }
  59.                 }
  60.  
  61.             }
  62.            
  63.             private function setCurrentPage(page:Number):void{
  64.                 if (page < 1 || page > pages) return;
  65.                 currentPage = page;
  66.                 setFilter();
  67.             }
  68.                        
  69.             private function doPrint():void{
  70.                
  71.                 var printJob:FlexPrintJob = new FlexPrintJob();
  72.                 var dp : ArrayCollection = new ArrayCollection();
  73.                 var printPage:Number;
  74.                 var stPage : Number;
  75.                 var edPage : Number;
  76.                
  77.                 printJob.printAsBitmap = false;
  78.                 if (printJob.start() != true) return;
  79.  
  80.                 stPage = Number(tiStartPage.text);
  81.                 edPage = Number(tiEndPage.text);
  82.                 for (printPage = stPage; printPage <= edPage; printPage++ ){
  83.                
  84.                     maxIndex = (printPage * itemsPerPage)-1;
  85.                     minIndex = maxIndex - (itemsPerPage -1);
  86.  
  87.                     dp.removeAll();
  88.                     for (var z:int = minIndex; z<=maxIndex; z++){
  89.                         if (myXC.length -1 >= z && z >= 0){
  90.                             dp.addItem(myXC.getItemAt(z));
  91.                         }
  92.                     }
  93.                    
  94.                     var pv : PrintView = new PrintView();
  95.                     addChild(pv);
  96.                     pv.width=printJob.pageWidth;
  97.                     pv.height=printJob.pageHeight;
  98.                     pv.AddressList.dataProvider = dp;
  99.                
  100.                     printJob.addObject(pv);
  101.                     removeChild(pv);
  102.                 }
  103.                
  104.                 printJob.send();
  105.                                
  106.             }
  107.            
  108.              
  109.         ]]>
  110.     </mx:Script>
  111.  
  112.     <mx:HTTPService id="addressService" url="./address.xml"
  113.             resultFormat="e4x"/>
  114.  
  115.     <mx:XMLListCollection id="myXC"
  116.             source="{addressService.lastResult.address}"/>
  117.    
  118.     <mx:Panel title="Print Example" height="100%" width="100%" layout="absolute" x="24" y="24">
  119.         <mx:HBox  x="10" y="10">
  120.             <mx:HBox borderStyle="solid" paddingTop="10" paddingBottom="10"
  121.                    paddingLeft="10" paddingRight="10">
  122.                 <mx:Button id="btFirst" label="|<<" click="setCurrentPage(1);" />
  123.                 <mx:Button id="btPrev" label="<" click="setCurrentPage(currentPage - 1);" />
  124.                 <mx:TextInput id="tiCurrPage" width="40" text="{currentPage}" />
  125.                 <mx:Text id="txMax" text="/{pages}" />
  126.                 <mx:Button id="btFor" label=">" click="setCurrentPage(currentPage + 1);" />
  127.                 <mx:Button id="btLast" label=">>|" click="setCurrentPage(pages);" />
  128.             </mx:HBox>
  129.             <mx:HBox borderStyle="solid" paddingTop="10" paddingBottom="10"
  130.                paddingLeft="10" paddingRight="10">
  131.                 <mx:TextInput id="tiStartPage" width="40"  />
  132.                 <mx:Text text="-" />
  133.                 <mx:TextInput id="tiEndPage" width="40" />
  134.                 <mx:Button id="btPrint" label="印刷" click="doPrint()" />
  135.             </mx:HBox>
  136.         </mx:HBox >
  137.         <mx:TileList id="AddressList" height="402" width="272" visible="true" selectable="false"
  138.             maxColumns="1" rowHeight="592" columnWidth="400" dataProvider="{myData}" itemRenderer="addr" borderStyle="solid" y="62" horizontalCenter="0">
  139.         </mx:TileList>
  140.  
  141.     </mx:Panel>
  142. </mx:Application>

表示用データ(address.xml)

  1. <?xml version="1.0"?>
  2. <addresses>
  3.     <address>
  4.         <zip>111-0042</zip>
  5.         <addr1>東京都台東区</addr1>
  6.         <addr2>寿1-11-6 SMKビル</addr2>
  7.         <name>株式会社アイダック</name>
  8.     </address>
  9.     <address>
  10.         <zip>101-0001</zip>
  11.         <addr1>東京都品川区</addr1>
  12.         <addr2>上大崎3-1-1</addr2>
  13.         <name>株式会社技術評論社</name>
  14.     </address>
  15. </addresses>

んで完成したのがこんな感じです。

http://www.bamboo.mydns.jp/flex/flexprint/PrintTest.swf

ソース的なポイントとしては、doPrint()の際に

printJob.printAsBitmap = false;

これがあるのとないのでは印刷の品質がかなり違います。

デフォルトではビットマップ印刷になってしまいますが

画像の透過など使わなければベクター印刷のほうが印刷画質が良いです。

(ビットマップだとかなり滲んでしまいます)

コメント(1)

FlexでYoutubeを再生する

投稿者: miizasa, カテゴリー: Flex

ずいぶん前にやったんですが、ちょっと記事として投稿しておこうと思います。
Youtubeを再生するためには、いくつかの方法があります。

1、FLVを直接再生する。
2、Youtubeのプレイヤーを利用して再生する。

1番の方法は、FLVファイルの場所を突き止めなくてはいけません。まぁできないことはないのですが(何度かやってます)仕様変更などで参照できなくなることも度々。。。

なので、今回は2番の方法を使います。Youtubeのプレイヤーにも種類があり普通のプレイヤーと縁無しのクロムレスプレイヤーってやつですね。Youtube色全開のデザインはいやなのでクロムレスプレイヤーにします。

使い方は、こちらを参照してください。JavaScriptから操作するインタフェースと同じです。

http://code.google.com/intl/ja-JP/apis/youtube/js_api_reference.html

YoutubePlayer.mxml

actionscript
< view plain text >
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();">
  3.     <mx:Script>
  4.         <![CDATA[
  5.  
  6.             import mx.collections.ArrayCollection;
  7.             import flash.display.Loader;
  8.             import flash.events.Event;
  9.             import mx.controls.Alert;
  10.  
  11.             // publicプロパティ===================================================================
  12.             public var video_id : String = "";
  13.             public var playuserid: String;
  14.             [Bindable]
  15.             public var isPlaying:Boolean = false;
  16.  
  17.             private var _playpos: int;
  18.  
  19.  
  20.             private var player:Object;
  21.             private var loader:Loader;
  22.  
  23.             private var playReady:Boolean = false;
  24.  
  25.             // 初期化処理
  26.             private function init():void {
  27.  
  28.                 loader = new Loader();
  29.                 loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
  30.                 loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
  31.             }
  32.  
  33.             // ローダの初期化イベントハンドラ
  34.             private function onLoaderInit(event:Event):void {
  35.                 this.rawChildren.addChild(loader);
  36.                 loader.content.addEventListener("onReady", onPlayerReady);
  37.                 loader.content.addEventListener("onError", onPlayerError);
  38.                 loader.content.addEventListener("onStateChange", onPlayerStateChange);
  39.                 loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
  40.             }
  41.  
  42.             // Youtubeプレイヤーの初期化完了イベントハンドラ
  43.             private function onPlayerReady(event:Event):void {
  44.  
  45.                 trace("player ready:" + Object(event).data);
  46.                 player = loader.content;
  47.                 player.setSize(this.width, this.height);
  48.                 playReady = true;
  49.             }
  50.             private function cueVideo(event:Event):void {
  51.  
  52.                 // キュー videoId
  53.                 //player.cueVideoById(videoId:String, startSeconds:Number, suggestedQuality:String);
  54.                 // ロードして自動再生 videoId
  55.                 //player.loadVideoById(videoId:String, startSeconds:Number, suggestedQuality:String);
  56.                 // キュー mediaContentUrl
  57.                 //player.cueVideoByUrl(mediaContentUrl:String, startSeconds:Number);
  58.                 // ロードして自動再生 mediaContentUrl
  59.                 //player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number);
  60.  
  61.                 player.cueVideoById(video_id);
  62.  
  63.  
  64.             }
  65.             // 再生エラーイベントハンドラ
  66.             private function onPlayerError(event:Event):void {
  67.                 trace("player error:" + Object(event).data);
  68.                 switch (Object(event).data) {
  69.                     case 2:
  70.                         // 動画が見つからない
  71.                         Alert.show("指定された動画が見つかりません。");
  72.                         break;
  73.                     case 101:
  74.                         // 要求されたビデオが、埋め込まれたプレーヤーに再生を許容しない
  75.                         break;
  76.                     case 150:
  77.                         // 101と同じ
  78.                         break;
  79.                     default:
  80.                         break;
  81.                 }
  82.  
  83.             }
  84.             // ステータス変更時イベントハンドラ
  85.             private function onPlayerStateChange(event:Event):void {
  86.                 // 未開始 (-1)
  87.                 // 終了済み (0)
  88.                 // 再生中 (1)
  89.                 // 一時停止中 (2)
  90.                 // バッファ中 (3)
  91.                 // 動画キュー (5)
  92.                 trace("player state:" + Object(event).data);
  93.             }
  94.  
  95.             // 再生品質変更時イベントハンドラ
  96.             private function onVideoPlaybackQualityChange(event:Event):void {
  97.                 trace("video quality:" + Object(event).data);
  98.             }
  99.  
  100.             private function regex():void {
  101.                 var pattern:RegExp = /.*v=([\d\w\-]+).*/;
  102. //              var arr : Array = txtURL.text.match(pattern);
  103.  
  104. //              txtID.text = arr[1];
  105.  
  106.             }
  107.  
  108.             public function play():void {
  109.                 if (video_id == "") return;
  110.                 if (playReady == false) return;
  111.  
  112.                 player.loadVideoById(video_id);
  113.                 // 再生
  114.                 //player.playVideo();
  115.                 // 一時停止
  116.                 //player.pauseVideo();
  117.                 // 停止
  118.                 //player.stopVideo();
  119.                 // シーク移動
  120.                 //player.seekTo(seconds, allowSeekAhead);
  121.  
  122.                 // ボリューム関係
  123.                 // ミュート
  124.                 //player.mute();
  125.                 // アンミュート
  126.                 //player.unMute();
  127.                 // ミュートチェック
  128.                 //player.isMuted();
  129.                 // ボリューム セット(0~100)
  130.                 //player.setVolume(volume);
  131.                 // ボリューム ゲット(0~100)
  132.                 //player.getVolume();
  133.  
  134.  
  135.                 // ロード済みバイト数取得
  136.                 //player.getVideoBytesLoaded():Number
  137.                 // ビデオの総バイト数取得
  138.                 //player.getVideoBytesTotal():Number
  139.                 // ???
  140.                 //player.getVideoStartBytes():Number
  141.                 // ステータス取得
  142.                 // 未開始 (-1)
  143.                 // 終了済み (0)
  144.                 // 再生中 (1)
  145.                 // 一時停止中 (2)
  146.                 // バッファ中 (3)
  147.                 // 動画キュー (5)
  148.                 //player.getPlayerState():Number
  149.                 // 再生ポイント(秒数)取得
  150.                 //player.getCurrentTime():Number
  151.  
  152.  
  153.                 // 再生中・ロード済みの動画の総再生時間(秒)取得
  154.                 // player.getDuration():Number
  155.                 // 再生中・ロード済みの動画のURL取得
  156.                 // player.getVideoUrl():String
  157.                 // 再生中・ロード済みの動画のEmbedタグ?取得
  158.                 // player.getVideoEmbedCode():String
  159.  
  160.             }
  161.  
  162.             public function stop():void {
  163.                 player.stopVideo();
  164.             }
  165.  
  166.             public function set playpos(s : int):void {
  167.                 _playpos = s;
  168.             }
  169.             public function get playpos():int {
  170.                 if (null) {
  171.                     return 0;
  172.                 }
  173.                 else {
  174.                     return _playpos;
  175.                 }
  176.             }
  177.  
  178.         ]]>
  179.     </mx:Script>
  180.  
  181. </mx:Canvas>

YoutubeTest.mxml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();" xmlns:ns1="*" >
  3.     <mx:Button id="btnPlay"  x="207" y="267" label="再生" click="yplayer.video_id = txtID.text; yplayer.play();"/>
  4.     <mx:Button id="btnStop"  x="263" y="267" label="停止" click="yplayer.stop();"/>
  5.     <mx:Canvas width="320" height="240" left="10" top="10">
  6.         <ns1:YoutubePlayer id="yplayer" x="0" y="0" width="100%" height="100%">
  7.         </ns1:YoutubePlayer>
  8.     </mx:Canvas>
  9.     <mx:TextInput x="10" y="267" id="txtID"/>
  10. </mx:Application>

ポイントは
loader.load(new URLRequest(“http://www.youtube.com/apiplayer?version=3″));
のところでしょうかね?
まぁいろいろ処理書きかけっぽいですが。。。皆まで書くまいw
実行するとこんな感じに(YoutubeのビデオIDをテキストに入力して再生ボタン押下)
http://www.bamboo.mydns.jp/flex/youtube/YoutubeTest.swf

コメント(1)

Flex3とPapervision3Dを使ってみる

投稿者: miizasa, カテゴリー: Flex

Flex4のベータで3D的なことが簡単にできるということなのですが
Flex3とActionScript用の3DライブラリであるPapervision3Dを使って簡単な3D表現をしてみたいと思います。
今回は、MXMLで定義したcanvasをペラッペラにしてグルグルしたいと思います。

Papervision3Dインストール

http://code.google.com/p/papervision3d/

からPapervision3D_2.1.920.swcをダウンロードしました。

swcを使うのが一番楽でしょと言う方針でw

FlexSDKのある場所のframeworks/lib/にポーンと放り込んじゃいましょ

以上、インストール完了

ソース

actionscript
< view plain text >
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #000000]" xmlns:ns1="*">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import org.papervision3d.events.InteractiveScene3DEvent;
  6.             import org.papervision3d.objects.primitives.Cylinder;
  7.             import org.papervision3d.materials.MovieMaterial;
  8.             import org.papervision3d.materials.utils.MaterialsList;
  9.             import org.papervision3d.materials.ColorMaterial;
  10.             import org.papervision3d.objects.primitives.Cube;
  11.             import org.papervision3d.objects.primitives.Plane;
  12.             import org.papervision3d.objects.DisplayObject3D;
  13.             import org.papervision3d.render.BasicRenderEngine;
  14.             import org.papervision3d.cameras.Camera3D;
  15.             import org.papervision3d.scenes.Scene3D;
  16.             import org.papervision3d.view.Viewport3D;
  17.  
  18.             private var container:Sprite;
  19.             private var viewport:Viewport3D;
  20.             private var scene:Scene3D;
  21.             private var camera:Camera3D;
  22.             private var renderer:BasicRenderEngine;
  23.             private var rootNode:DisplayObject3D;
  24.             private var plane:Plane;
  25.  
  26.             public function init():void
  27.             {
  28.                 container=new Sprite();
  29.                 rawChildren.addChild(container);
  30.                 viewport=new Viewport3D(0, 0, true, true);
  31.                 container.addChild(viewport);
  32.                 scene=new Scene3D();
  33.                 camera=new Camera3D();
  34.                 renderer=new BasicRenderEngine();
  35.                 camera.zoom=30;
  36.                 camera.focus = 20;
  37.                 camera.target = DisplayObject3D.ZERO;
  38.                 rootNode=scene.addChild(new DisplayObject3D("rootNode"));
  39.  
  40.                 var mat:MovieMaterial = new MovieMaterial(myCanvas, true, true, true);
  41.                 mat.interactive=true;
  42.                 mat.doubleSided = true;
  43.                 mat.smooth = true;
  44.                 plane = new Plane( mat, 300, 300, 4, 4);
  45.                 rootNode.addChild(plane, "plane");
  46.  
  47.                 addEventListener(Event.ENTER_FRAME, onFrame);
  48.             }
  49.  
  50.             public function onFrame(e:Event):void
  51.             {
  52.                 plane.rotationY += 1.5;
  53.                 renderer.renderScene(scene, camera, viewport);
  54.             }
  55.         ]]>
  56.     </mx:Script>
  57.     <mx:Canvas width="320" height="340" id="myCanvas" backgroundColor="#FFFFFF">
  58.         <mx:Button x="10" y="10" label="再生" click="vdMain.play();"/>
  59.         <mx:Button x="184" y="10" label="停止" click="vdMain.stop();"/>
  60.         <mx:VideoDisplay id="vdMain" source="test.flv" x="0" y="40"></mx:VideoDisplay>
  61.     </mx:Canvas>
  62.     <mx:Canvas x="0" y="0" width="350" height="350" backgroundColor="#000000"/>
  63. </mx:Application>

こんな感じです

実行結果

http://www.bamboo.mydns.jp/pv3dtest/main.swf

実行するとこんな感じにぐるぐる

ちゃんとボタンも押せますよ^ー^

コメント(1)

EclipseプラグインAXDTインストール

投稿者: miizasa, カテゴリー: Flex, 環境構築

あるじゃん!あるよねぇやっぱり。。。
ちゃんと探そう。。。。俺。。。
どうやらAXDTというActionScript開発用のEclipseプラグインがあるようです。
恩恵を受けておきましょう^ー^

Eclipse ActionScript プラグイン AXDT
http://axdt.org/

ふむふむ
とりあえず公式のインストールの仕方どおりにやってみます。

Eclipseの「ヘルプ」→「新規ソフトウェアのインストール」で
サイトの追加

http://download.eclipse.org/technology/imp/updates

IMP系をsource以外を選んでインストール(これ必要なのかな?)
ここで一回Eclipseを再起動

同じくサイトの追加で

http://update.axdt.org/

とりあえず全部選んでインストール

Eclipseを再起動

設定でも見てみるかねぇ。。。うきうき

!!!!!
SDK入ってる!!!
前回のSDKインストールって。。。。。
チクショーーーーーー!!

とりあえず、以前作ったYoutubeプレイヤのプロトタイプでもコンパイルしてみようかなぁ

ちなみにテストで再生したYoutube動画は「たくあんの作り方」ですw

しぶいねぇ実にしぶいよあんた。。。
デザイナーもついてるけどうまく動かなかったなぁ、でもまぁちょっといじれば
動きそうだし、それが出来たらBuilderなんかいらないですね^ー^

コメント(3)

Ubuntu9.10 Adobe Flex SDK 3.5環境作成

投稿者: miizasa, カテゴリー: Flex, 環境構築

前提としてJava環境がインストール済みとしています。
Linux版のFlexBuilderが悲しい結末を迎えそうなのでSDKで頑張ろう
ということで。。。

FlexSDKのダウンロード

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk

今回はFlex SDK 3.5を使います。

~/.bashrcの編集

export PATH=$PATH:~/Develop/flex/bin

を追加
FlexSDKのインストール完了!!
インストールと言ってもPATHを通すだけという。
どうでもいい記事になりそうな予感。。。

Debug版 Flash Player のインストール

cd /usr/lib/flashplugin-installer
sudo cp libflashplayer.so libflashplayer.so.bak

でバックアップしてっと

cd ~/Develop/flex/runtimes/player/10/lnx
tar -xvzf install_flash_player_10_linux.tar.gz
cd install_flash_player_10_linux
sudo cp libflashplayer.so /usr/lib/flashplugin-installer/

スタンドアローン版 Flash Player

cd ~/Develop/flex/runtimes/player/10/lnx
tar -xvzf flashplayer.tar.gz
mv flashplayer ~/Develop/flex/bin

サンプルをコンパイルしてみる

cd ~/Develop/flex/samples/explorer
./build.sh

ちゃんとできてるみたいですね

あとは便利なIDEないかなぁ。。。
まぁemacsでもいいんだけど、せっかくEclipse入ってるし。。。

コメントする