2007-11-15

phpとの通信を前々からやってみたかったのでやってみました。
画像をアップすると画像が追加されます。
今は単純に画像をフォルダに置くだけなので今後はデーターベースに格納して、ユーザーごとに画像の管理ができるようにしてみようと思います。
前問題だった画像のドラッグが後輩の助けによってできました。
今度は重なりの順番を変更したいです。
http://moeten.info/hatena/20071114_fileup/bin/main.html

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  viewSourceURL="srcview/index.html" creationComplete="get_image()">
<mx:Style>
.my{
    borderColor: #b7babc;
    borderThickness: 2;
    dropShadowEnabled: true;
    backgroundColor:#ffffff;
    borderColor:#ff80ff;
    cornerRadius:3;
    themeColor:#ff80ff;
    borderStyle:solid;
}
</mx:Style>
<mx:Script>
    <![CDATA[
import mx.effects.Resize;
import mx.events.DragEvent;
import mx.core.DragSource;
import mx.core.UIComponent;
import mx.core.IFlexDisplayObject;
import mx.managers.DragManager;
import mx.containers.Canvas;
import mx.controls.Image;
import mx.effects.Rotate;
import mx.effects.Move;
import mx.effects.Effect;
public var myXML:XML;
public var myLoader:URLLoader;
public function initApp():void{
    //ファイルタイプの絞りこみ
    var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
    var textTypes:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
    var allTypes:Array = new Array(imageTypes, textTypes);
    //ファイル選択
    var fileRef:FileReference = new FileReference();
    fileRef.browse(allTypes);
    fileRef.addEventListener(Event.SELECT, selectHandler);
    fileRef.addEventListener(Event.COMPLETE, completeHandler);
    try{
        var success:Boolean = fileRef.browse();
    }catch (error:Error){
        myLog.text ="Unable to browse for files.";
    }
    function selectHandler(event:Event):void{
        //画像をＰＯＳＴで送る場所
        var request:URLRequest = new URLRequest("http://moeten.info/hatena/20071114_fileup/index.php")
        try{
            fileRef.upload(request);
        }catch (error:Error){
            myLog.text ="Unable to upload file.";
        }
    }
    function completeHandler(event:Event):void{
        myLog.text = "uploaded";
        //アップロードできたのでファイルゲット。
        get_image();
    }
}
//カラーピッカーが設定されたら呼び出される関数
private function get_image():void{
    myXML = new XML();
    //ＸＭＬの取得
    var XML_URL:String = "http://moeten.info/hatena/20071114_fileup/index.php?type=xml&nocach="+Math.round( Math.random()*200 );
    var myXMLURL:URLRequest = new URLRequest(XML_URL);
    myLoader = new URLLoader(myXMLURL);
    myLoader.addEventListener("complete", xmlLoaded);
}
//XMLローダー
public var i:int = 0;
public function xmlLoaded(evtObj:Event):void {
    myXML = XML(myLoader.data);
    for( i = 0 ; i < myXML.item.length(); i ++ ){
        add_image( myXML.item[i].img );
        myLog.text += "" + myXML.item[i].img + "\n";
    }
}
public var rotate_a:Array = new Array();
public function add_image(url:String):void{
    //キャンバスの作成
    var mycanvas:Canvas = new Canvas();
    mycanvas.width = 200;
    mycanvas.height = 200;
    mycanvas.horizontalScrollPolicy = "off";
    mycanvas.verticalScrollPolicy = "off";
    mycanvas.x = Math.round( Math.random()*200 );
    mycanvas.y = Math.round( Math.random()*200 );
    mycanvas.styleName = "my";
    //画像の作成
    var image:Image = new Image();
    image.source = url;
    image.width = 240;
    image.height = 240;
    image.enabled = false;
    //画像にもイベントリスナー
    image.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown ,true);
    image.addEventListener(MouseEvent.MOUSE_UP,onMouseUp, true);
    mycanvas.alpha = 0.5;
    //ステージにアッド
    mycanvas.addChild(image);
    //キャンバスにもイベントリスナー
    mycanvas.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
    mycanvas.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
    this.addChild(mycanvas);
    //ムーブ
    var move:Move = new Move();
    move.target = mycanvas;
    move.yTo = Math.round( Math.random()*200 )+100;
    move.xTo = Math.round( Math.random()*500 )+100;
    move.duration = 1000;
    move.play();
    //回転
    var rotate:Rotate = new Rotate();
    rotate.originX = -50;
    rotate.originY = -50;
    rotate.duration = 1000;
    rotate.target = mycanvas;
    rotate.angleFrom = Math.round( Math.random()*100 );
    var angleTo:int = Math.round( Math.random()*100 );
    rotate.angleTo = angleTo;
    rotate_a[i] = angleTo;
    rotate.play();
}
//ドラッグ関係（未だ勉強中
public function onMouseDown(event:MouseEvent):void {
    event.currentTarget.alpha = 1.0;
    event.currentTarget.startDrag();
    var resize:Resize = new Resize();
    resize.target = event.currentTarget;
    resize.widthFrom = 150;
    resize.widthTo = 200;
    resize.heightFrom = 150;
    resize.heightTo = 200;
    resize.duration = 100;
    resize.play();
    //回転
    var rotate:Rotate = new Rotate();
    rotate.duration = 10;
    rotate.target = event.currentTarget;
    rotate.play();
    //parent.setChildIndex( this , parent.numChildren - 1);
}
//ドラッグ中の更新
public function onMouseMove(event:MouseEvent):void {
}
//ドラッグ終了
public function onMouseUp(event:MouseEvent):void {
    event.currentTarget.stopDrag();
    var resize:Resize = new Resize();
    resize.target = event.currentTarget;
    resize.widthFrom = 200;
    resize.widthTo = 150;
    resize.heightFrom = 200;
    resize.heightTo = 150;
    resize.play();
    event.currentTarget.alpha = 0.5;
}
]]>
</mx:Script>
    <mx:TextArea x="80" y="103" id="myLog" width="242" height="157" />
    <mx:Button x="80" y="45" label="ファイルアップ！" click="initApp()"/>
</mx:Application>

Flex部分は画像の送信と表示となっています。
その画像の受けざらをphpで作成します。
今回は単純に画像をゲットして、特定のフォルダに入れています。
また、type=xmlとすることでフォルダのリストをxmlで表示します。
これをつかってFlex側で画像を表示します。

<?php
if( $_GET['type'] == "" ){
    //送られてきたデーターをゲットして格納する。
    $file = date('y-m-d-h-s.jpg');
    move_uploaded_file($_FILES['Filedata']['tmp_name'], "./images/{$file}");
 }elseif( $_GET['type'] == "xml" ){
     //ディレクトリを読んでそれをＸＭＬで出力する。
     $directory = opendir('./images/');
     $files = array();
     header ("Content-Type: text/xml; charset=UTF-8");
     $xml = <<<EOD
<result>
EOD;
     while ($file = readdir($directory)){
         if( $file != ".." && $file != "." ){
             $file;
             $xml .= <<<EOD
<item>
<img>http://moeten.info/hatena/20071114_fileup/images/{$file}</img>
</item>
EOD;
         }
     }
     $xml .= <<<EOD
</result>
EOD;
     echo mb_convert_encoding( $xml , "UTF-8" , "SJIS" );
     exit;
 }
exit;
?>

初音ミクをFlexからしゃべらせてみようってことで、作ってみました。
ソースを見ると分かると思うけど単純に入力された言葉を元にファイルを再生しているだけでっす。
http://moeten.info/hatena/20071105_MikuAPI/bin/main.html

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="600" creationComplete="initApp();" backgroundGradientColors="[#ffffff, #ffffff]"      viewSourceURL="srcview/index.html">
<mx:Script>
    <![CDATA[
        import mx.containers.Tile;
        private var voice:Array = new Array(
                                            "あ","い","う","え","お",
                                            "か","き","く","け","こ",
                                            "さ","し","す","せ","そ",
                                            "た","ち","つ","て","と",
                                            "な","に","ぬ","ね","の",
                                            "は","ひ","ふ","へ","ほ",
                                            "ま","み","む","め","も",
                                            "や","ゆ","よ",
                                            "ら","り","る","れ","ろ",
                                            "わ","を","ん"
                                            );
        // ボタンをクリックしたときに再生
        public var chari:int = 0;
        private function initApp():void{
            img1.visible = true;
            img2.visible = false;
        }
        private function onClick(e:MouseEvent):void {
            chari = 0;
            playsound();
        }
        public var timer:Timer;
        private function playsound():void{
            timer = new Timer(280,input.text.length);
            timer.addEventListener("timer", timerHandler);
            timer.start();
        }
        public var cnt:int = 1;
        public function timerHandler(event:TimerEvent):void {
            var j:int = 0;
            var file:String = new String();
            for( var i:int = 0 ; i < voice.length ; i ++ ){
                if( voice[i] === input.text.charAt(chari) ){
                    j = i+1;
                    log.text += i + ",";
                    if( j < 10 ){
                        file = "waveout/hiragana-00"+j+".mp3"
                    }else{
                        file = "waveout/hiragana-0"+j+".mp3"
                    }
                    var snd:Sound = new Sound(new URLRequest(file));
                       snd.play();
                }
            }
            chari ++;
            if( cnt % 2 == 1 ){
                img1.visible = false;
                img2.visible = true;
            }else{
                img2.visible = false;
                img1.visible = true;
            }
            cnt++;
            if( chari == input.text.length ){
                timer.stop();
            }
        }
    ]]>
</mx:Script>
<mx:Button x="31" y="66" label="再生" click="onClick(event)"/>
    <mx:Image x="87" y="-36" source="01.jpg" id="img1"/>
    <mx:Image x="87" y="-36" source="02.jpg" id="img2"/>
    <mx:TextInput x="31" y="36" id="input" text="おかえりなさいませ"/>
    <mx:Text x="31" y="128" text="ログ"/>
    <mx:Text x="31" y="10" text="入力(あ〜ん)"/>
    <mx:TextArea x="31" y="154" height="129" id="log"/>
</mx:Application>

PHP,MySQL,Flex,JSな日々＋イラストとか

Flexでファイルのアップやphpとの通信

初音ミクあいうえおＡＰＩ