フルFlashサイトの作り方の基本まとめ(ActionScript2.0)

| カテゴリ:ActionScript

ActionScript 3.0対応バージョンはこちら

20091016.jpg


先日スタートしました青春Bの新コンテンツオンラインギャラリー-SEISYUN-B online exhibition by creators-、考えてみると青春Bで初めてのフルflashコンテンツですね。
青春B以外では作ったことありますが。


まあ、別にフルflashと言っても作り方はそうではないflashとさほど違いはないわけです。
ステージサイズに合わせて位置調整を行うだけなので。
凝ったものを作ろうとすると話は別ですが、凝ったものを作るならフルflashじゃなくても難しいわけですし。


せっかくの機会なので、フルflashサイト(ActionScript2.0)の基本構造を掲載しておきます。
サンプル制作してみました。
どなたかの役に立ったなら嬉しいです。

仕様

・左上、中央上、右上、左、中央、右、左下、中央下、右下の9カ所にMovieClipを配置。

・中央のMovieClipのクリックによってフルスクリーン表示と通常のブラウザ内表示の切替。

swffit v2.3.1を使用してブラウザが一定サイズ(今回は横300px×縦300px)以下になったときにはブラウザにてスクロールバー表示。

・表示にはSWFObject v2.1を使用。

ポイント・注意点

・Stage.scaleMode = "noScale"を設定することでswfが拡大縮小されないようにする。

・Stage.align = "LT"を設定することで座標を左上基準とする。

・onFullScreenとonResizeをStageのイベントとして設定し、フルスクリーンモードの切替とステージのサイズ変更を検出する。

・Stage.widthとStage.heightに合わせて配置するMovieClipの位置を調整する。

・cssにて親要素のheightを100%指定しないとブラウザのスペースをフル活用できません。詳しくはAdobeの「高さ 100% の Flash のバグ」を参照

・フルスクリーン表示はflash player9以降の機能です。

・flashの表示にSWFObject v2.1を使う必要は必ずしもないですが、フルスクリーン表示のためにallowFullScreenのパラメータをtrueにすることは忘れずに。

・flash player9以降が対象ならActionScript3にすれば良いのにというツッコミはなしで。

サンプル

サンプルの表示はこちらです(同窓表示です)


サンプルのダウンロードはこちらです(html,css,js,swf,flaファイル)
flaはCS3形式で保存されています。

ActionScriptのコード

概要

青春B運営メンバー多口カタンによる雑記blogです。
自己紹介はこちら。開発物をまとめたものはこちら
 
ヘッダーイラストはkojiさん制作です。
感想・意見・要望等ありましたら気軽にフォームにてコンタクトくださいませ。
 
Twitterはじめましたので誰でも気軽に声かけてくださいね。