あまりにも衝撃だったので、思わずエントリー

「映し鏡」という曲のインタラクティブミュージックビデオをご紹介します。

SOURというグループのプロモーション用サイトなのですが、HTML5とFlashが融合とした何とも素晴らしい出来映えになっています。

ちょっと重たいですが、他のウインドウを操作せずに待ってみてください。
※Safari5.0 もしくはChrome 5.0以上で閲覧する必要があるようです。

http://sour-mirror.jp/index.html

サイトを開くと、ウェブカメラとTwitter、Facebookのアカウントに接続するボタンがあります。
より楽しむために、できれば接続して見る事をお進めします。

このクオリティやばすぎます。

サイトのクレジットにはSaqooshaさんが

SaqooshaさんはARをFLashで使えるライブラリFLARToolKitの作者の方です。
この人が関われば、このクオリティになるのはうなずけますね。。。

それでは、よい週末を。

PDFファイルをSWFに変換してくれるWEBサービスが地味に便利だったのでご紹介。

ファイルをアップロードして、パラメータを設定するだけで簡単に作成されるようになります。
コンバートの時間も1MのPDFで１０秒程度でした。
アップロードできるファイルサイズは10Mまでとの事です。

様々なパラメーの指定

■ 画面の横幅
50〜500pxの範囲

■ 画面の高さ
50〜500pxの範囲

■ ページ数
最大で210ページまで指定可能です。

■ 拡大率
等倍〜４倍まで

■ 紙面のサイズ
A3~A6、CDジャケットのサイズまで

コンバートの完了

コンバートの完了時にはDownload your fileというリンクが表示されるので、SWFファイルをダウンロードできるようになります。

作成されたFlashにはHTMLも付属しているため、そのままサイトに掲載できるようになっています。
次、前ボタンやめくるような動作も自動で生成されています。

※残念ながら、日本語の場合は文字化けがしてしまいました。
フォントを埋め込んでいるPDFだと動作するかもしれません。

Flashを作る際のデザインインスピレーションにも使えますね。

詳しくは以下

Classic Horizontal Menus Pink

マウスオーバーでブラーがかかったように動きます。

デモ

The Girl Park Menu

動きがキュートです。

デモ

Car Site Navigation Menu

クオリティの高い車の素材。

デモ

他にも40個以上紹介されており、全てのファイルのダウンロードはntt.ccのサイトから可能になっています。
興味のある方はぜひご覧になってください。

フリーで使えるFLV Playerは数々ありますが、ちょっと興味があったのでエントリー。

詳しくは以下

動作画面

フルスクリーンのサポート、H.264の再生、ストリーミング対応など基本的な機能は全てありました。

haxeファイルをダウンロード

※haxeはFlashDevelopなどのフリーの環境で開発する事が可能です。

サイトからファイルをダウンロードするとプロジェクトファイルがあるので、自由に改造してコンパイルする事ができます。

ソースもActionScriptやJavaScriptに近いものがあるのである程度直感的にいじれるかもしれません。
これから学習したい方向けなどにサンプルとしても良いかもしれませんね。

興味のある方はダウンロードしてみてください！

Maya、 XSI Softimage、 3D Studio Maxなどの3D作成ソフトと連携が取れるようです。

詳しくは以下

デモ

サイト内にはタワーディフェンスや、キャラクターをキーボードで操作できるデモがあります。
以下はタワーディフェンスの様子。普通に遊べます。

単純な3Dの描画は以下のようなコードで実装できるようです。

package  
{  
    import com.yogurt3d.Yogurt3D;  
    import com.yogurt3d.core.materials.MaterialBitmap;  
    import com.yogurt3d.core.sceneobjects.SceneObjectRenderable;  
    import com.yogurt3d.presets.primitives.sceneobjects.BoxSceneObject;  
    import com.yogurt3d.presets.renderers.trianglesort.RendererTriangleSort;  
      
    import flash.display.GraphicsSolidFill;  
    import flash.display.Sprite;  
    import flash.events.KeyboardEvent;  
    import flash.events.MouseEvent;  
    import flash.geom.Vector3D;  
      
    import mx.core.BitmapAsset;  
      
    import utils.*;  
      
    [SWF(width='800',height='600',frameRate='60',backgroundColor='0x000000')]  
    public class Tutorial1 extends Sprite  
    {  
        [Embed(source="../resources/yogurt.png")]  
        private var m_embeddedTexture:Class;  
        private var m_texture:BitmapAsset = new m_embeddedTexture() as BitmapAsset;  
          
        public var ko:KeyObject;  
          
        private var m_mouseDown:Boolean = false;    
        private var mousePosX:Number=0,mousePosY:Number=0,mousePosX_prev:Number=0,mousePosY_prev:Number=0;  
          
        private var renderableObject:SceneObjectRenderable;  
          
        private var angleX:Number       = 0;  
        private var angleY:Number       = 0;  
        private var rot_speed:Number    = 0.5;  
          
        public function Tutorial1()  
        {  
            KeyObject.stage = this.stage;  
            ko = new KeyObject(this);  
              
            Yogurt3D.defaultSetup();  
            Yogurt3D.fps = stage.frameRate;  
  
            stage.addEventListener(MouseEvent.MOUSE_DOWN,mouseUpDownEventListener);    
            stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveEventListener);    
            stage.addEventListener(MouseEvent.MOUSE_UP,mouseUpDownEventListener);  
            stage.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelEventListener);  
              
            Yogurt3D.defaultContext.renderer = new RendererTriangleSort();  
            Yogurt3D.defaultCamera.setProjectionPerspective(50.0, 800.0/600.0, 1, 400 );  
            Yogurt3D.defaultViewport.setViewport( 0.0, 0.0, 800.0, 600.0 );  
            Yogurt3D.defaultCamera.transformation.positionWrtParent = new Vector3D(0, 0, 20);  
              
            addChild(Yogurt3D.defaultViewport);  
  
            Yogurt3D.enginePreUpdateCallback = run;  
              
            renderableObject = new BoxSceneObject(5,5,8,2,3,4);  
              
            renderableObject.material = new MaterialBitmap(m_texture.bitmapData);  
              
            renderableObject.material.graphicsStroke.thickness = 1;  
            renderableObject.material.graphicsStroke.fill = new GraphicsSolidFill(0xFFFFFF);  
              
            Yogurt3D.defaultScene.addChild(renderableObject);  
              
            Yogurt3D.startAutoUpdate();  
        }  
          
      
        public function run():void  
        {  
            if(ko.keysDown[87])//W  
            {  
                Yogurt3D.defaultCamera.transformation.translateInDirectionWrtParent(Yogurt3D.defaultCamera.transformation.zAxisWrtParent, -1);  
            }  
              
            if(ko.keysDown[65])//A  
            {  
                Yogurt3D.defaultCamera.transformation.translateInDirectionWrtParent(Yogurt3D.defaultCamera.transformation.xAxisWrtParent, -1);  
            }  
              
            if(ko.keysDown[83])//S  
            {  
                Yogurt3D.defaultCamera.transformation.translateInDirectionWrtParent(Yogurt3D.defaultCamera.transformation.zAxisWrtParent, 1);  
            }  
              
            if(ko.keysDown[68])//D  
            {  
                Yogurt3D.defaultCamera.transformation.translateInDirectionWrtParent(Yogurt3D.defaultCamera.transformation.xAxisWrtParent, 1);  
            }  
              
            if(ko.keysDown[32])//SPACE  
            {  
                Yogurt3D.defaultCamera.transformation.translateInDirectionWrtParent(Yogurt3D.defaultCamera.transformation.yAxisWrtParent, 1);  
            }  
              
            if(ko.keysDown[16])//SHIFT  
            {  
                Yogurt3D.defaultCamera.transformation.translateInDirectionWrtParent(Yogurt3D.defaultCamera.transformation.yAxisWrtParent, -1);  
            }  
        }  
          
        private function mouseUpDownEventListener(_e:MouseEvent):void  
        {    
            m_mouseDown = _e.buttonDown;    
        }  
          
        private function mouseMoveEventListener(_e:MouseEvent):void  
        {    
            mousePosX_prev = mousePosX;    
            mousePosY_prev = mousePosY;    
            mousePosX = Yogurt3D.defaultViewport.mouseX;  
            mousePosY = Yogurt3D.defaultViewport.mouseY;  
              
            if (m_mouseDown)  
            {    
                angleX += rot_speed*(mousePosY_prev-mousePosY);  
                angleY += rot_speed*(mousePosX_prev-mousePosX);  
                if(angleX > 90)  
                    angleX = 90;  
                if(angleX < -90)  
                    angleX = -90;  
  
                Yogurt3D.defaultCamera.transformation.resetRotation();  
                  
                Yogurt3D.defaultCamera.transformation.rotateYWrtWorld(angleY);  
                Yogurt3D.defaultCamera.transformation.rotateXWrtObject(angleX);  
            }  
        }  
          
        private function mouseWheelEventListener(_e:MouseEvent):void  
        {  
            Yogurt3D.defaultCamera.transformation.translateInDirectionWrtParent(Yogurt3D.defaultCamera.transformation.zAxisWrtParent, -_e.delta/5);  
        }  
          
        public function keyPressed(evt:KeyboardEvent):void  
        {  
            ko.keysDown[evt.keyCode] = true;  
        }  
          
        public function keyReleased(evt:KeyboardEvent):void  
        {  
            delete ko.keysDown[evt.keyCode];  
        }  
    }  
}  

3Dゲームにチャレンジしてみたい方はいかがでしょうか。

ゲームの内容は「9」という数字の羅列から「6」を探したり、ドラッグして障害物にあたらないようにするようなミニゲームなど、直感的にわかる内容になっています。

詳しくは以下

ゲームをやってみる

4人そろえばゲーム開始です。

ドラッグしてゴールまでたどり着かせる。ただし反対側も同じ動きになっているのでかなり難しいです。

数字の6を探す

丸の色とカラーの名前が一致しているかを当てるゲーム。

ゲームが完了すると、成績がでます。

興味のある方はぜひ。

• Adobe、モバイル向け「AIR」と「Flash Player 10.1」を発表 – ITmedia エンタープライズ

今年中にはAndroidケータイ用のアプリでFlashが使えるようになるようです。
これは嬉しいニュースですね。

英語ですが、モバイル用のFlash Playerを使用している動画がありました。

↑アバターの処理が画面のタッチでスムーズに動いている様子が見れます。
これは要チェックですね。

他にも様々なデモを見る事ができます。

• Flash Player 10.1 prerelease software demos and interviews | Adobe Developer Connection

今から、アプリ開発の準備をしても良いかもしれませんね。

Continuityというパズルゲーム。
キーボードで３つの画面を上下させて、プレイヤーをゴールまで操作していきます。

ルールは簡単で、途中にある鍵を取ってゴールのドアへ行くだけ。
３つある画面をうまく組み合わせてドアのある場所へ移動させていきます。
ただし、右や左の画面に移動する際に同じ高さにしてあげなきゃ行けないみたい。

音楽も世界観にマッチしていて、しばらくハマってしまいました。

興味ある方はぜひトライしてみてください。

Dewplayer

非常に軽量なmp3プレイヤーで、サイズもミニ(160×20)からプレイリスト(240×200)までさまざまです。

公式サイト

Flash MP3 Player

Flashでデザインがカスタマイズ可能なmp3プレイヤー。

公式サイト

WPaudio

WordPressのプラグインとして設置できる音楽プレイヤー。

公式サイト

サイトには他にも多数の音楽プレイヤーが紹介されいます。気に入ったのがあったら、ぜひダウンロードしてみてはいかがでしょうか？

以下のようなFlashがXMLの設定を変更するだけで簡単に実装できるようです。

• プレゼンテーション
• ダイナミックなウェブページ
• アニメのスライドショー

円や短形を描画したものを動かしたりもできるようです。
今ちょっと時間があまりないので、とりあえずご紹介だけ。
ギャラりーを見てもらうと、ここまでできるのかと感心します。