セカンドライフとリンデンスクリプト

Yahoo Widgets サンプル049：アニメーションの基礎 start

　animator 関連のサンプルをここまで大量に紹介するつもりも無かったが、今回で最後にする予定である。最後の例は start について。start は非同期で実行されるのだが、複数のstartを連続して書いたら、順番に実行されるのだろうか？と疑問に思いやってみたサンプルを紹介。

　結果としては、連続的に書いても同時に実行されることがわかったのだが、それがstartの中でArray指定して複数のアニメーションを指定する場合と全く同じ意味なのかそうでないのかは不明である。

　サンプルでは、a,b,c,各アニメーションを

        animator.start(a);
        animator.start(b);
        animator.start(c);

のように実行するように指定するが、結局1回だけフェードインするだけである。

ソースコード：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- Yahoo Widgets サンプル049：アニメーションの基礎 start -->
<widget>
    <debug>on</debug>
    <window>
        <name>main_window</name>
        <title>animation</title>
        <height>500</height>
        <width>500</width>
        <visible>true</visible>
    </window>
    <action trigger="onLoad">
        var img001 = new Image();
        img001.visible = false;
        img001.src = "images/001.jpg";
        img001.width = 128;
        img001.height = 96;
        img001.opacity = 0;
        img001.visible = true;

        var a = new FadeAnimation(img001,255,3000,animator.kEaseOut,FadeDone);
        var b = new FadeAnimation(img001,0,3000,animator.kEaseOut,FadeDone);
        var c = new FadeAnimation(img001,255,3000,animator.kEaseOut,FadeDone);
       
       // ↓のようにしても同時に実行される（順番に実行されない）
        animator.start(a);
        animator.start(b);
        animator.start(c);
       
       // エフェクトが終了した際に呼ばれる関数を定義する。
        function FadeDone(){
           print("fade finished");
        }
       
    </action>
</widget>

Yahoo Widgets サンプル048：アニメーションの基礎 FadeAnimation フェードイン

　そういえば、FadeAnimation オブジェクトでフェードインができるだろうか？と、単純な疑問を感じ作ったサンプルがこちら。もちろんできるのだが、実行前に対象オブジェクト（画像等）のopacityを0にする必要があるので注意。

ソースコード：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- Yahoo Widgets サンプル048：アニメーションの基礎 FadeAnimation フェードイン-->
<widget>
    <debug>on</debug>
    <window>
        <name>main_window</name>
        <title>animation</title>
        <height>500</height>
        <width>500</width>
        <visible>true</visible>
    </window>
    <action trigger="onLoad">
        var img001 = new Image();
        img001.visible = false;
        img001.src = "images/001.jpg";
        img001.width = 128;
        img001.height = 96;
        img001.opacity = 0;
        img001.visible = true;

        var a = new FadeAnimation(img001,255,3000,animator.kEaseOut,FadeDone);
        animator.start(a);
       
       // エフェクトが終了した際に呼ばれる関数を定義する。
        function FadeDone(){
           print("fade finished");
        }
       
    </action>
</widget>

Yahoo Widgets サンプル047：スクリーン上に並べる 横5枚 で、フェードイン、フェードアウト

　前回のものを少し改良し、左から右に順々に画像が表示されるようにした。それぞれの画像はフェードインしフェードアウトする。フェードアウトが始まったら、次の画像のフェードインが始まるようにした。

　デジカメを良く使うようになって以来、写真データはたまりっぱなしである。そんなとき、たまったデータを気持ちよく、楽しく見られる、そんな仕組みが欲しいものだ。何が楽しいだろうか？そんなことを真剣に考える毎日である。

ソースコード：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- Yahoo Widgets サンプル047：スクリーン上に並べる 横5枚 で、フェードイン、フェードアウト -->
<widget>
    <debug>on</debug>
    <window>
        <name>main_window</name>
        <title>animation</title>
        <height>500</height>
        <width>500</width>
        <visible>true</visible>
    </window>
    <action trigger="onLoad">
        <![CDATA[
       // choose folder
        var folder = chooseFolder();
        print("folder : " + folder);

       // initialize for window size
        main_window.hOffset = 0;
        main_window.vOffset = 0;
        main_window.width = screen.availWidth;
        main_window.height = screen.availHeight / 2;

       // File List
        var path = folder;
        fileList = filesystem.getDirectoryContents(path, false);
       
        var ctr = 0;
        var ptr = 0;
       
        var images = new Array();
        images[0] = new Image();
        images[1] = new Image();
        images[2] = new Image();
        images[3] = new Image();
        images[4] = new Image();
       
        for(var i = 0;i < images.length; i++){
            images[i].width = screen.availWidth / 5;
            images[i].hOffset = i * screen.availWidth / 5;
            images[i].vOffset = 0;
        }

        NextImage();

        function NextImage()
        {
            if( ctr < fileList.length )
            {
                print( "animation start : " + ctr  + " : " + fileList[ctr]);
               
                var a = new Array();
               
                // initialize
                var index = ctr % 5;

                images[index].visible = false;
                images[index].src = path + "/" + fileList[ctr];
                images[index].opacity = 0;
                images[index].height = images[index].srcHeight * images[index].width / images[index].srcWidth;
                images[index].visible = true;
               
                if(index > 0){
                    a[(index) - 1] = new FadeAnimation( images[index - 1], 0, 3000, animator.kEaseIn, NextImage);
                    a[index] = new FadeAnimation( images[index], 255, 3000, animator.kEaseIn);
                    animator.start(new Array( a[(index) - 1], a[index]) );
                }else{
                    if(ctr>0){
                        a[4] = new FadeAnimation( images[4], 0, 3000, animator.kEaseIn, NextImage);
                        a[index] = new FadeAnimation( images[index], 255, 3000, animator.kEaseIn);
                        animator.start(new Array( a[4], a[index]) );
                    }else{
                        a[index] = new FadeAnimation( images[index], 255, 3000, animator.kEaseIn, NextImage);
                        animator.start(a[index]);
                    }
                }
                ctr++;

            }
        }
        ]]>
    </action>
</widget>

Yahoo Widgets サンプル046：スクリーン上に並べる 横5枚 で、とりあえず

　スライドショー、できれば、画面全体を使ってできた方が気持ちよいかもしれないと思い、試みに作り始めたサンプルがこちら。

　画面上部に横に5枚画像を並べてみた。前回のソースコードを流用しているので、最初にフォルダ指定ウィンドウが出る。ちなみに、指定したのはSkypeのpictureフォルダ。

ソースコード：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- Yahoo Widgets サンプル046：スクリーン上に並べる 横5枚 で、とりあえず -->
<widget>
    <debug>on</debug>
    <window>
        <name>main_window</name>
        <title>animation</title>
        <height>500</height>
        <width>500</width>
        <visible>true</visible>
    </window>
    <action trigger="onLoad">
        <![CDATA[
       // choose folder
        var folder = chooseFolder();
        print("folder : " + folder);

       // initialize for window size
        main_window.hOffset = 0;
        main_window.vOffset = 0;
        main_window.width = screen.availWidth;
        main_window.height = screen.availHeight / 2;

       // File List
        var path = folder;
        fileList = filesystem.getDirectoryContents(path, false);
       
        var ctr = 0;
       
        var images = new Array();
        images[0,0] = new Image();
        images[0,1] = new Image();
        images[0,2] = new Image();
        images[0,3] = new Image();
        images[0,4] = new Image();
       
        for(var i = 0;i < images.length; i++){
            print("init " + i);
            images[0,i].visible = false;
            images[0,i].width = screen.availWidth / 5;
            images[0,i].hOffset = i * screen.availWidth / 5;
            images[0,i].vOffset = 0;
            images[0,i].src = path + "/" + fileList[ctr + i];
            images[0,i].opacity = 255;
            images[0,i].height = images[0,i].srcHeight * images[0,i].width / images[0,i].srcWidth;
            images[0,i].visible = true;
        }
        ]]>
    </action>
</widget> 

Yahoo Widgets サンプル045：簡易スライドショーを作成する、フォルダを指定できるように

　スライドショーで表示する画像ファイルのフォルダを指定できるように改良した。ウィジェット開始時にフォルダ選択をする。フォルダの選択をさせるには、

var folder = chooseFolder();

といった具合にスクリプトブロックに記述すれば良い。こうすることで、フォルダ選択ウィンドウが表示され、ユーザーが選択したフォルダのフルパスが得られる。

ソースコード：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- Yahoo Widgets サンプル045：簡易スライドショーを作成する、フォルダを指定できるように -->
<widget>
    <debug>on</debug>
    <window>
        <name>main_window</name>
        <title>animation</title>
        <height>500</height>
        <width>500</width>
        <visible>true</visible>
    </window>
    <action trigger="onLoad">
        <![CDATA[
       // choose folder
        var folder = chooseFolder();
        print("folder : " + folder);

       // initialize for window size
        main_window.hOffset = 0;
        main_window.vOffset = 0;
        main_window.width = screen.availWidth / 2;
        main_window.height = screen.availHeight / 2;

       // File List
        var path = folder;
        fileList = filesystem.getDirectoryContents(path, false);
       
        var ctr = 0;
       
        var img001 = new Image();
        img001.width = 256;
        img001.height = 192;

        NextImage();
        function Done()
        {
            ctr++;
            print( "animation complete" );
            var c = new FadeAnimation( img001, 0, 4000, animator.kEaseIn, NextImage);
            animator.start(c);
        }
       
        function NextImage()
        {
            if( ctr < fileList.length )
            {
                print( "animation start : " + ctr  + " : " + fileList[ctr]);
               
                // initialize
                img001.src = path + "/" + fileList[ctr];
                img001.opacity = 255;
                img001.hOffset = 128;
                img001.vOffset = 96;
                img001.rotation = 0;
               
                // rotate and move
                var a = new RotateAnimation( img001, 360, 1500, animator.kEaseOut, Done );
                var b = new MoveAnimation( img001, 228, 196, 1500, animator.kEaseOut);
       
                animator.start(new Array( a, b) );
            }
        }
        ]]>
    </action>
</widget> 

Yahoo Widgets サンプル044：アニメーション基礎 Image オブジェクトによるアニメーション効果の実現

　リファレンスを眺めていたらアニメーションを実現する方法が他にもあったのでこちらも紹介する。Imageオブジェクトに実装されているメソッドFadeを利用する。

　fade 関数は、opacitiyの開始値と終了値、効果終了までの時間を指定する。こちらは、同期的に実行されるので注意。また、効果終了までの時間の単位がこれまでサンプルで説明したものと異なるので注意。終了までの時間は、十分の一秒で指定する。但し、数値が大きすぎると10秒ぐらいで効果が終了するように勝手に縮められるようだ。

ソースコード：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- Yahoo Widgets サンプル044：アニメーション基礎 Image オブジェクトによるアニメーション効果の実現 -->
<!-- duration の数値を大きくしすぎても意味が無いらしい -->
<!-- Image.Fade()は同期的に動作する -->
<widget>
    <debug>on</debug>
    <window>
        <name>main_window</name>
        <title>animation</title>
        <height>500</height>
        <width>500</width>
        <visible>true</visible>
    </window>
    <action trigger="onLoad">
        <![CDATA[
       
       // initializing
        var img001 = new Image();
        img001.width = 256;
        img001.height = 192;
        img001.src = "images/001.jpg";
        img001.opacity = 0;
       
        img001.fade(0,255,30);
       
        print("finished");
        ]]>
    </action>
</widget>

Yahoo Widgets サンプル043：アニメーション基礎 CustomAnimation を使い独自のアニメーション効果を作成する

　Yahoo!Widgets のアニメーションオブジェクトには、FadeAnimation, MoveAnimation, RotateAnimation 以外にも CustomAnimation という独自のアニメーション効果を作るためのオブジェクトが存在する。

　今回はこの CustomAnimation を簡単に紹介。サンプルではフェードインする効果を作成した。アニメーション中の実際の効果を関数で作成し、それを連続実行したときに期待通りの効果となるようにコードを書けばOKである。

ソースコード：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- Yahoo Widgets サンプル043：アニメーション基礎 CustomAnimation を使い独自のアニメーション効果を作成する -->
<widget>
    <debug>on</debug>
    <window>
        <name>main_window</name>
        <title>animation</title>
        <height>500</height>
        <width>500</width>
        <visible>true</visible>
    </window>
    <action trigger="onLoad">
        <![CDATA[
       
       // initializing
        var img001 = new Image();
        img001.width = 256;
        img001.height = 192;
        img001.src = "images/001.jpg";
        img001.opacity = 0;


        var x = new CustomAnimation( 5, UpdateMe );
       // some custom properties for my animation
        x.duration = 3000;
        x.startOpacity = img001.opacity;
        x.endOpacity = 255;
       
        animator.start(x);
       
        function UpdateMe()
        {
            var now = animator.milliseconds;
            var percent = (now - this.startTime) / this.duration;
            
           // set the new opacity of our object based on
  // easing.
            img001.opacity = animator.ease( this.startOpacity,this.endOpacity, percent,animator.kEaseOut );
           // If the duration is up, get out of here
            if ( animator.milliseconds >=
                this.startTime + this.duration )
            {
                // make sure we reached the end
                img001.opacity = this.endOpacity;
                return false; // we're done
            }
            return true; // keep going
        }

        ]]>
    </action>
</widget>

Yahoo Widgets サンプル042：簡易スライドショーを作成する、「images」内のファイルを表示する

　ディレクトリ内のファイル一覧を取得することもできたので、早速スライドショー的なものを作成してみる。もちろん、スライドが現れる効果は以前紹介した「回転移動した後フェードアウトする」というものだ。

　サンプルの実行前に images ディレクトリを作成し、適当な画像ファイルを何枚か入れておく必要がある。

ソースコード：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- Yahoo Widgets サンプル042：簡易スライドショーを作成する、「images」内のファイルを表示する -->
<widget>
    <debug>on</debug>
    <window>
        <name>main_window</name>
        <title>animation</title>
        <height>500</height>
        <width>500</width>
        <visible>true</visible>
    </window>
    <action trigger="onLoad">
        <![CDATA[
       // initialize for window size
        main_window.hOffset = 0;
        main_window.vOffset = 0;
        main_window.width = screen.availWidth / 2;
        main_window.height = screen.availHeight / 2;

       // File List
        var path = "images";
        fileList = filesystem.getDirectoryContents(path, false);
       
        var ctr = 0;
       
        var img001 = new Image();
        img001.width = 256;
        img001.height = 192;

        NextImage();
        function Done()
        {
            ctr++;
            print( "animation complete" );
            var c = new FadeAnimation( img001, 0, 4000, animator.kEaseOut, NextImage);
            animator.start(c);
        }
       
        function NextImage()
        {
            if( ctr < fileList.length )
            {
                print( "animation start : " + ctr  + " : " + fileList[ctr]);
               
                // initialize
                img001.src = path + "/" + fileList[ctr];
                img001.opacity = 255;
                img001.hOffset = 128;
                img001.vOffset = 96;
                img001.rotation = 0;
               
                // rotate and move
                var a = new RotateAnimation( img001, 360, 1500, animator.kEaseOut, Done );
                var b = new MoveAnimation( img001, 228, 196, 1500, animator.kEaseOut);
       
                animator.start(new Array( a, b) );
            }
        }
        ]]>
    </action>
</widget> 

Yahoo Widgets サンプル041：ディレクトリ内のファイル一覧を取得する

　ここまで紹介したアニメーション効果を触るうちに、スライドショー的なウィジェットを作ってみようかと思い、ディレクトリ内のファイル一覧を取得する方法を調べたサンプルがこちら。

　Yahoo!Widgetsでは組み込みオブジェクトの filesystem を使うことで、ファイル関係の操作を一通り行うことができる。今回使ったのはその中で、 getDirectoryContents という指定ディレクトリの中身を配列で取得するものだ。例えば、以下のようにスクリプトブロック内に記述する。

fileList = filesystem.getDirectoryContents(path, false);

　サンプルでは、デバッグウィンドウに指定したディレクトリ内のファイル一覧が表示されるようになっている。サンプルの実行前に images というディレクトリを作成し、中に何か入れておく必要がある。

ソースコード：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- Yahoo Widgets サンプル041：ディレクトリ内のファイル一覧を取得する -->
<widget>
    <debug>on</debug>
    <window>
        <name>main_window</name>
        <title>FileList</title>
        <height>500</height>
        <width>500</width>
        <visible>true</visible>
    </window>
    <action trigger="onLoad">
        <![CDATA[

        var path = "images";
        fileList = filesystem.getDirectoryContents(path, false);
       
        var i = 0;
        for(var i = 0; i < fileList.length ;i++){
            print( fileList[i] );
        }

        ]]>
    </action>
</widget> 

Yahoo Widgets サンプル040：アニメーションの基礎 回転移動した後にフェードアウトする

　前回紹介したサンプルを応用し、回転移動が終了した後にフェードアウトして写真が消えるサンプルを紹介する。

　FadeAnimation 等のオブジェクトはコンストラクターの最後の引数がオプショナルになっていて（指定してもしなくても良いということ）、そこにアニメーション終了後に呼ぶ関数を指定することができる。この仕組みを使うことで、連続的なアニメーションが可能になるわけだ。

　回転移動（RotateAnimation、MoveAnimation）が終了した後に、FadeAnimationを呼ぶようにしている。サンプルでは同じ画像が5回実行される。

ソースコード：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- Yahoo Widgets サンプル040：アニメーションの基礎 回転移動した後にフェードアウトする -->
<widget>
    <debug>on</debug>
    <window>
        <name>main_window</name>
        <title>animation</title>
        <height>500</height>
        <width>500</width>
        <visible>true</visible>
    </window>
    <action trigger="onLoad">
        <![CDATA[
       // initialize for window size
        main_window.hOffset = 0;
        main_window.vOffset = 0;
        main_window.width = screen.availWidth / 2;
        main_window.height = screen.availHeight / 2;
       
        var ctr = 0;
       
        var img001 = new Image();
        img001.src = "images/001.jpg";
        img001.width = 128;
        img001.height = 96;

        NextImage();
        function Done()
        {
            ctr++;
            print( "animation complete" );
            var c = new FadeAnimation( img001, 0, 4000, animator.kEaseOut, NextImage);
            animator.start(c);
        }
       
        function NextImage()
        {
            if( ctr < 5 )
            {
                print( "animation start : " + ctr );
               
                // initialize
                img001.opacity = 255;
                img001.hOffset = 128;
                img001.vOffset = 96;
                img001.rotation = 0;
               
                // rotate and move
                var a = new RotateAnimation( img001, 360, 1500, animator.kEaseOut, Done );
                var b = new MoveAnimation( img001, 228, 196, 1500, animator.kEaseOut);
       
                animator.start(new Array( a, b) );
            }
        }
        ]]>
    </action>
</widget>