ActionScript 3.0でサイト遷移構造を実装する

Size: px

Start display at page:

Download "ActionScript 3.0でサイト遷移構造を実装する"

みひなうなだ
5 years ago
Views:

集中連載 text _ 阿部貴弘 Progression プロダクトマネージャー / デザイナー Web デザイン会社 Web サービス会社などを経て Progression プロジェクトの開発運営を展開中現在は講演活動と同時にグローバルな普及を目指しています http://progression.

0 でサイト遷移構造を実装する Progressionは Flashサイトに HTMLサイトのようなページ遷移やディープリンクといったサイトの基本機能を実装するためのフレームワークですその利用方法にはユーザーの ActionScriptスキルに合わせてコンポーネントタイムラインクラスの 3つのスタイルが用意されていますシリーズ最終回となる今回はその中でも ActionScript

1 集中連載 text _ 阿部貴弘 Progression プロダクトマネージャー / デザイナー Web デザイン会社 Web サービス会社などを経て Progression プロジェクトの開発運営を展開中現在は講演活動と同時にグローバルな普及を目指しています Flash 開発の新機軸 ActionScript ライブラリ SERIES #08 Progression クラススタイル編 :ActionScript 3.0 でサイト遷移構造を実装する Progressionは Flashサイトに HTMLサイトのようなページ遷移やディープリンクといったサイトの基本機能を実装するためのフレームワークですその利用方法にはユーザーの ActionScriptスキルに合わせてコンポーネントタイムラインクラスの 3つのスタイルが用意されていますシリーズ最終回となる今回はその中でも ActionScript 3.0を使うクラススタイルを解説します Progressionを導入すればサイト構造と遷移機能を簡単に実装できるようになるためこれから ActionScript 3.0 によるサイト構築手法を習得したい人だけでなくすでに独自でノウハウを習得している人にもおすすめしたい手法です本記事ではクラススタイルの基本的なスクリプティングフローとサンプル事例を紹介しますコンポーネントスタイルについては 2009 年 2 月号の本連載にて詳しく解説していますタイムラインスタイルについては P129 のコラムを参照してください Progression が用意する流れの上に処理を設定する ActionScript はそのバージョン 3.0でより堅牢なオブジェクト指向プログラミングへと進化しました Progressionのクラススタイルは ActionScript 3.0 の設計思想に準拠するように開発された制作スタイルですコンポーネントスタイルやタイムラインスタイルは ActionScript 3.0 の一部の機能を扱いやすく加工したものですがクラススタイルではすべての機能を直接操作することが可能となっており ActionScript 3.0 のパフォーマンスを最大限に引き出しながらサイトを構築することができます Progression クラススタイルと従来のスクリプティング手法との最大の違いは処理の流れの扱い方です通常 Flashを制作する場合外部データの読み込みやアニメーション処理などのさまざまな時間の掛かる処理を addeventlistener() メソッドによるイベント監視で繋ぎ合わせることで開発を Progression にはサイトの基本機能を実装するためのクラス以外にもエフェクトやコマンドなどのさまざまな機能がありますしかも日本語による充実した API リファレンスが用意されています進めますしかし個々の処理単位でイベント監視を行うとなるとスクリプトも複雑になり管理の面でも非常に大変ですその管理や動作の整合性チェックに時間と手間がかかり表現を追求する余裕がないという人も多いのではないでしょうか Progression の場合は一つひとつの処理を繋げて流すのではなく Progressionが用意する流れの上に処理を設定するように設計されていますこうすることで流れの制御を気にせずにコンテンツ制作が行えるようになりますそれではクラススタイルのスクリプティング手法を解説していきますがその前に基本的なスクリプティングフローを把握しておきましょう Progression は個人サイト企業サイトプロモーションサイトなどすでに 210 以上のサイトで利用されています Progression 公式サイトのショーケースでは導入事例の一部が紹介されています Web Designing

ActionScript Library_Progression クラススタイルでの基本的なスクリプティングフロー Progressionではシーン (SceneObject ) キャストオブジェクト (CastObject) コマンド(Command) というクラスを使ってサイトの基本機能 ( 処理の流れ ) を実装します各クラスの役割は右のように考えるとわかりやすいでしょう

2 ActionScript Library_Progression クラススタイルでの基本的なスクリプティングフロー Progressionではシーン (SceneObject ) キャストオブジェクト (CastObject) コマンド(Command) というクラスを使ってサイトの基本機能 ( 処理の流れ ) を実装します各クラスの役割は右のように考えるとわかりやすいでしょうスクリプティング方法は作成するサイトによって変わってきますが基本的なスクリプティングフローは以下のようになりますまずはこのフローを覚えて次のページから実際にスクリプトを書いてみましょう Progression = 監督シーン (SceneObject )= 脚本上の舞台キャストオブジェクト (CastObject)= 役者大道具小道具コマンド (Command)= 脚本上の構成流れ 01 シーンの作成構築するシーン構造に合わせて SceneObject クラスを使ってシーン構造を作成します個々のシーンは単なる器なので中は空っぽの状態ですなお SceneObject クラスは ActionScript 3.0 の Sprite や MovieClip と同じようなものですそのため以下の 2 パターンの設定方法が使用できます 1. SceneObject を継承してシーンの数だけファイルを作成する 2. new SceneObject() してインスタンスのプロパティ操作で設定を行う 02 キャストオブジェクトの作成とコマンド設定 Progression で制御したい表示オブジェクトなどはキャストオブジェクトとして CastSprite クラスや CastMovieClip クラスを使って作成しますキャストオブジェクトの作成も SceneObject クラス同様に継承するパターンとインスタンスに個性を設表示オブジェクトの作成やコマンド設定は SceneObject クラス内でも可能ですがコンテンツや表現が複雑な場合はキャストオブジェクトとして管理した方が効率的です定するパターンの 2 種類が利用可能ですまたキャストオブジェクト内にアニメーション処理などのコマンドを設定します 03 イベント処理の設定シーン構造とキャストオブジェクトを作成したら次はどのシーンでどのキャストオブジェクトを表示させるかといった処理を設定します該当シーンへ到着した瞬間該当シーンから別のシーンへ移動した瞬間などシーン移動時に発生する各種イベント時の処理 ( オブジェクトの表示削除など ) を設定します 04 ボタンを作成シーンに沿って画面を表示する処理まで完成したらユーザー操作に従って各シーン間 home work about contact を移動するナビゲーション処理を設定しますナビゲーションボタンには CastButton クラスを使用します CastButton クラスも SceneObject クラス同様に継承するパターンとインスタンスに個性を設定するパターンの 2 種類が利用可能です 05 プリローダーの作成 Loading 60 最後にプリローダーを作成して完成ですプリローダーは Preloader クラスを使って作成します Web Designing 123

集中連載 Flash 開発の新機軸 ActionScript ライブラリ TUTORIAL クラススタイルの基本コーディングを覚えようそれでは

なおここでは Progressionのバージョン 3をベースに解説していますバージョン 3を利用するには Flash CS3 以降が必要です 01

MXP JSFL SWC の 3 つの形式を用意しています通常は MXP 形式を利用して下さいダウンロードした MXP 形式ファイルをダブルクリックすると

コンテンツサイズなどの基本設定を行います 02 プロジェクトのセットアップ Progression を使ったプロジェクトの作業を開始するにはまず

新しく作成するボタンをクリックするとプロジェクトに必要なファイル群が自動生成されますプロジェクトの名前は書き出される一般タブでは Flash

サンプルデータをダウンロードする際には目次に掲載している ID とパスワードが必要です http://book.mycom

3 集中連載 Flash 開発の新機軸 ActionScript ライブラリ TUTORIAL クラススタイルの基本コーディングを覚えようそれではクラススタイルで右図にあるサンプルサイトを制作しながら基本的なコーディングを解説していきましょうサンプルはルートシーンと 2つの子シーンを持つシンプルな構成ですなおここでは Progressionのバージョン 3をベースに解説していますバージョン 3を利用するには Flash CS3 以降が必要です 01 Progression をインストールする Progression は Flash の拡張機能として組み込まれそのパッケージは公式サイト ( から入手しますインストールに成功するとメニューのウインドウその他のパネルに Progression プロジェクトが追加されますパッケージは MXP JSFL SWC の 3 つの形式を用意しています通常は MXP 形式を利用して下さいダウンロードした MXP 形式ファイルをダブルクリックすると Adobe Extension Manager が起動してインストールが開始されます Progressionプロジェクト制作スタイルの選択コンテンツサイズなどの基本設定を行います 02 プロジェクトのセットアップ Progression を使ったプロジェクトの作業を開始するにはまず Progressionプロジェクトパネルを開きます今回はクラススタイルで作成するので種類メニューからクラスを選びその下にあるタブで基本設定を行います設定後新しく作成するボタンをクリックするとプロジェクトに必要なファイル群が自動生成されますプロジェクトの名前は書き出される一般タブでは Flash サイトの幅やフォルダ名や Flash を埋め込む HTML 高さ背景色などを設定しますの title 要素に使用されます View & Download サンプルデータをダウンロードする際には目次に掲載している ID とパスワードが必要です Flash タブではフレームレートやウ ActionScript タブでは自動的に書インドウモードを設定しますき出される as ファイルに関連した設定を行います今回はデフォルトのままにしておきます各種設定後新しく作成するボタンをクリックするとプロジェクトに必要なファイル群が自動生成されます今回シーンやキャストオブジェクトの定義は templates フォルダ内にあるファイルをコピーしてそのファイルにスクリプトを記述します 124 Web Designing

MovieClip シンボルシンボルプロパティウインドウを開いてリンケージのクラス項目に各ページの場合は myproject.indexpage myproject.featurepage myproject.contactpage 各ナビゲーションボタンの場合は myproject.indexbutton myproject.featurebutton myproject.

4 ActionScript Library_Progression 03 ページの各パーツを作成するこのサンプルサイトのページはテキストや画像だけを配置した 1 つの MovieClip シンボルです自動生成した index.fla を開き各ページの MovieClipシンボル (IndexPage FeaturePage ContactPage) と各ナビゲーションボタンの MovieClipシンボル (IndexButton FeatureButton ContactButton) を作成してライブラリに登録しますそれぞれシンボルプロパティウインドウを開きリンケージのクラス項目を設定します各ページの MovieClip シンボルシンボルプロパティウインドウを開いてリンケージのクラス項目に各ページの場合は myproject.indexpage myproject.featurepage myproject.contactpage 各ナビゲーションボタンの場合は myproject.indexbutton myproject.featurebutton myproject. ContactButton と設定します 04 初期設定をする Progressionを使う上で必要となる初期設定を行いますドキュメントクラスとなる Indexクラス 1を編集します index.asファイルを開いて 54 行目 ~ 60 行目のコードを右のように変更します ( 赤字部分 ) prog = new Progression( ) はProgression インスタンスを作成するためのもので Progression を使用する上でもっとも重要なコードです第一引数にはインスタンスを識別するためのユニークな識別子を第二引数には関連付けたい stage インスタンスの参照を第三引数にはルートシーン ( ここではIndexScene) として使用したいクラスの参照を設定します 2 prog.syncはブラウザ同期を有効化するための設定です今回はブラウザ同期をさせるので設定値を true に変更します prog.goto() メソッドではシーンの移動を行っています特に理由がなければこのままの状態にしておきます省略 // Progression インスタンスを作成します prog = new Progression( "index", stage, IndexScene // ブラウザ再生時に URL 同期を有効化します prog.sync = true; // 最初のシーンに移動します prog.goto( prog.firstsceneid 省略 1 Index クラスは CastDocument クラスを継承しています CastDocument クラスはドキュメントクラスとして必要となるさまざまな機能が追加された MovieClip クラスのサブクラスです 2 ブラウザ同期とは SWFAddress を使用した機能ですコンテンツに合わせたシーン構造を作成するだけでディープリンクの制御をまったく意識せずとも各シーンと Web ブラウザの URL が自動的に同期するようになります Index.as ファイルでの変更例 05 シーンを作成するクラススタイルでシーンを扱うには SceneObject クラスを使用します SceneObject クラスをそのまま new して使用することもできますが今回は SceneObject クラスのサブクラスを作成してその中に各種設定を行うことにしましょうサブクラスを作成するにはプロジェクト内の templatesフォルダにある MySceneObject. asというテンプレートファイルを使用するのが便利です MySceneObject.asをsrc/classes/myproject フォルダ内にシーンの数だけコピーして IndexScene.as FeatureScene.as ContactScene.as という 3つのファイルを作成します各ファイルを開きパッケージ名を myproject にクラス名とコンストラクタ名をファイル名に対応したものに変更します ( 赤字部分 ) これでシーン構造を作成する準備が整いました package myproject { 中略 * IndexScene クラス public class IndexScene extends SceneObject { * コンストラクタ public function IndexScene() { templates フォルダ内にある MySceneObject.as を src/classes/myproject フォルダ内にシーンの数だけコピーします IndexScene.as ファイルでの変更例 Web Designing 125

5 集中連載 Flash 開発の新機軸 ActionScript ライブラリシーン構造の作成は 04 で Progression インスタンスを作成する際に第三引数に設定したルートシーン (IndexScene) から始めます IndexScene.as を開いてコンストラクタに子シーンとなるFeatureSceneとContactSceneを作成するコードを追記します ( 赤字部分 ) このサンプルでは孫シーン ( 子シーンの子シーン ) がないため FeatureScene.as と ContactScene.as ではコードを追記する必要はありません孫シーンがある場合は該当する子シーンにコー public function IndexScene() { // FeatureScene を作成 var feature:featurescene = new FeatureScene( feature.name = "feature"; addscene( feature // ContactScene を作成 var contact:contactscene = new ContactScene( contact.name = "contact"; addscene( contact IndexScene.as ファイルでの変更例ドを記述します以上でシーン構造ができました次にキャストオブジェクトを作成します 06 キャストオブジェクトを作成する Progression で制御したい表示オブジェクトはキャストオブジェクトとして作成しますこのサンプルでは各シーンに表示するオブジェクトは 1つのMovieClipシンボルですここではシーン作成時と同様にテンプレートから作成します templatesフォルダ内にある MyCastSprite.asをsrc/classes/myprojectフォルダ内にコピーして各シーンに対応するように IndexPage. as FeaturePage.as ContactPage.asの3つのファイルを作成しますそして各ファイルを開きパッケージ名を myproject にクラス名とコンストラクタ名をファイル名に対応したものに変更 package myproject { 中略 * IndexPage クラス public class IndexPage extends CastSprite { * コンストラクタ public function IndexPage( initobject:object = null ) { super( initobject IndexPage.as ファイルでの変更例します ( 赤字部分 ) templates フォルダ内にある MyCastSprite.as を src/classes/myproject フォルダ内にシーンの数だけコピーします 07 キャストオブジェクトにコマンドを設定するキャストオブジェクトを作成したら演出となるコマンドを設定しましょう Progression にはさまざまな種類のコマンドが用意されていますこのサンプルでは DoTweener クラス 3 を使ってアニメーション処理を設定しますここで設定しているのはオブジェクトを表示 / 非表示する際に透明度を変化させるアニメーションですまたコマンドを設定するにはキャストオブジェクト側のイベントについて理解する必要がありますキャストオブジェクトインスタンスで発生する代表的なイベントは以下の 2つです 3 DoTweener クラスは名前からわかるように Tweener を使うためのコマンドです Tweener と同じようなフォーマットで処理を記述することができます // キャストオブジェクトがディスプレイリストに追加されたときの処理 protected override function _oncastadded():void { // ページを透明にする alpha = 0; // 実行したいコマンドを登録 // ページを 1 秒かけて不透明にする new DoTweener( this, { alpha:1, time:1 ) // キャストオブジェクトがディスプレイリストから削除されたときの処理 protected override function _oncastremoved():void { // 実行したいコマンドを登録 // ページを 1 秒かけて透明にする new DoTweener( this, { alpha:0, time:1 ) イベント CastEvent.CAST_ADDED CastEvent.CAST_REMOVED 説明キャストオブジェクトが AddChild / AddChildAt / AddChildAtAbove コマンド経由でディスプレイリストに追加された瞬間に発生このイベントは oncastadded イベントハンドラメソッドや _oncastadded() オーバーライドイベントハンドラメソッドでの設定も可能キャストオブジェクトが RemoveChild / RemoveAllChildren コマンド経由でディスプレイリストから削除された瞬間に発生このイベントは oncastremoved イベントハンドラメソッドや _ oncastremoved() オーバーライドイベントハンドラメソッドでの設定も可能 IndexPage.as ファイルでの変更例 126 Web Designing

6 ActionScript Library_Progression 08 イベントを設定するシーン構造とキャストオブジェクトを作成したら次はどのシーンでどのキャストオブジェクトを表示させるかという処理を設定しなければなりません各シーンで必要となる処理はシーンの移動状態に応じて発生するイベントに対して設定する必要がありますシーン移動時に SceneObject インスタンスで発生する代表的なイベントは右の 4つですまたこれらのイベントは下図のタイミングで発生しますこのサンプルでは各シーンで対応する MovieClipシンボルを表示 / 削除する処理を作成しますまずは IndexScene クラスに対して右のようなコードを追記します ( 赤字部分 ) 同様に FeatureSceneクラスと ContactSceneクラスにも追記します ( 詳しくはダウンロードファイルを参照 ) これでイベントの設定は完了です _ongoto _oninit _oninit _oninit _onload _ongoto _onunload _oninit _ongoto _onload _onunload _onload _ongoto _onunload イベント SceneEvent.INIT SceneEvent.GOTO SceneEvent.LOAD SceneEvent. UNLOAD 説明 public var page:indexpage; 移動先として指定したシーンに到着した瞬間に発生主にそのシーンでのみ表示したい画面処理などで使用しますこのイベントは oninit イベントハンドラメソッドや _ oninit() オーバーライドイベントハンドラメソッドでの設定も可能移動処理が開始され現在のシーンから移動する瞬間に発生主に SceneEvent.INIT で表示した画面の消去処理などで使用しますこのイベントは ongoto イベントハンドラメソッドや _ongoto() オーバーライドイベントハンドラメソッドでの設定も可能移動目的地のシーンが自身もしくは子シーンを示している場合移動処理時に階層が変更された瞬間に発生主に階層を下っても継続的に表示される画面処理などで使用しますこのイベントは onload イベントハンドラメソッドや _onload() オーバーライドイベントハンドラメソッドでの設定も可能移動目的地のシーンが親シーンを示している場合移動処理時に階層が変更された瞬間に発生主に SceneEvent.LOAD イベントで表示した画面の消去処理などで使用しますこのイベントは onunload イベントハンドラメソッドや _onunload() オーバーライドイベントハンドラメソッドでの設定も可能 public function IndexScene() { // FeatureScene を作成 var feature:featurescene = new FeatureScene( feature.name = "feature"; addscene( feature // ContactScene を作成 var contact:contactscene = new ContactScene( contact.name = "contact"; addscene( contact // IndexPage を作成 // あらかじめライブラリにシンボルとして登録済み page = new IndexPage( protected override function _oninit():void { // 画面にシンボルを表示 new AddChild( progression.container, page ) protected override function _ongoto():void { // 画面からシンボルを削除 new RemoveChild( progression.container, page ) IndexScene.as ファイルでの変更例 09 ボタンを作成するここまででシーンに沿って画面を表示する処理まで完成しましたあとはユーザー操作に従って各シーン間を移動できるようになれば Web サイトとして必要な機能を一通り揃えることができます Progressionでは HTMLでの <a> 要素に相当する機能であるボタン機能が用意されていますボタンの作成もシーン作成時と同様に templatesフォルダ内にあるmycastbutton.asをコピーして各シーンに対応するようにIndexButton.as FeatureButton.as ContactButton.asの3つのファイルを作成しますそして各ファイルを開きパッケージ名を myproject にクラス名とコンストラクタ名をファイル名に対応したものに変更します ( 赤字部分 ) package myproject { 中略 * IndexButton クラス public class IndexButton extends CastButton { * コンストラクタ public function IndexButton( initobject:object = null ) { super( initobject templates フォルダ内にある MyCastButton.as を src/classes/myproject フォルダ内にボタンの数だけコピーします IndexButton.as ファイルでの変更例 Web Designing 127

7 集中連載 Flash 開発の新機軸 ActionScript ライブラリ次に IndexButton.as を開いてコンストラクタに右のような移動先を設定するコードを追記します ( 赤字部分 ) 同様に public function IndexButton( initobject:object = null ) { super( initobject FeatureButton クラス ContactButton クラスにも表にある移動先を追記しますコンストラクタで指定している CastButton // クリック時の移動先を設定する sceneid = new SceneId( "/index" クラスの SceneId プロパティがボタンがクリックされた際の移動先シーンとなりますこの設定は特に必要がない限りはコンス IndexButton.as ファイルでの変更例トラクタで行うようにしてくださいクラス名 SceneId の値 IndexButton new SceneId( "/index" ) FeatureButton new SceneId( "/index/feature" ) ContactButton new SceneId( "/index/contact" ) すべてのボタンクラスが完成したら Index クラス (index.as) を開いてボタンを画面に表示させるコードを追記します ( 赤字部分 ) ボタンが表示できたら index.fla をプレビューし実際にボタンが機能することシーンを移動すること画面が正しく変更されることを確認してください protected override function _oninit():void { 中略 // IndexButton を作成 var indexbutton:indexbutton = new IndexButton( indexbutton.x = 514; addchild( indexbutton // FeatureButton を作成 var featurebutton:featurebutton = new FeatureButton( featurebutton.x = 568; addchild( featurebutton // ContactButton を作成 var contactbutton:contactbutton = new ContactButton( contactbutton.x = 657; addchild( contactbutton Index.as ファイルでの変更例 10 プリローダーを作成するプリローダーを作成するにはプロジェクト内の src フォルダ内にあるpreloader.fla を編集します Preloaderクラスは CastPreloader クラスを継承しており Indexクラスと同様に _oninit() イベントハンドラメソッドで初期化処理を設定することができます Preloader.as を開きこのタイミングで読み込み public var _loadedperfield:textfield; protected override function _oninit():void { // stage の初期設定 align = StageAlign.TOP_LEFT; quality = StageQuality.HIGH; scalemode = StageScaleMode.NO_SCALE; 状態を表示するためのテキストフィールドを作成しますプリローダーを作成するには preloader. fla と preloader.as を編集します // TextField を作成 _loadedperfield = new TextField( _loadedperfield.x = 280; _loadedperfield.y = -100; _loadedperfield.width = 200; _loadedperfield.autosize = TextFieldAutoSize.CENTER; _loadedperfield.text = "Loading... 0%"; addchild( _loadedperfield 次にポイントとなるのは _oncastloadstart() イベントハンドラメソッドですこのメソッドはプリローダーがメインのコンテンツファイルの読み込みを開始した瞬間に実行されこのメソッドの実行中はシーンオブジェクトやキャストオブジェクトと同様に ) メソッドによるコマンド処理が実行可能で protected override function _oncastloadstart():void { // 実行したいコマンドを登録 // テキストフィールドを画面内に移動 new DoTweener( _loadedperfield, { y:200, time:1 ) すこのイベントは主にプログレスバー表示の際のアニメーション処理などを行うものとして設計されています今回は右のように設定します 128 Web Designing

$_onprogress():void { // テキストフィールドの表示内容を読み込み状態に応じて変化させる _loadedperfield.text = "Loading... " + Math.$ round( bytesloaded / bytestotal * 100 ) + "%"; 中には _oncastloadstart() イベントハンドラメソッドのように ) メソッドを使用することはできませんこれは _onprogress() メソッドが Event.

round( bytesloaded / bytestotal * 100 ) + "%"; 中には _oncastloadstart() イベントハンドラメソッドのように ) メソッドを使用することはできませんこれは _onprogress() メソッドが Event.

$メソッドの時と同様に ) メソッドが使用可能になります読み込まれた swf ファイルは _oncastloadcomplete() イベントハンドラメソッドが完了し登録されたコマンドがすべて実行終了したタイ protected override function _oncastloadcomplete():void { // 実行したいコマンドを登録 // テキストフィールドを画面外に移動$ fla の両方のファイルにおいて Progression プロジェクトパネルからパブリッシュを行いますあとはプロプロジェクト内の deploy フォルダの中身全部をサーバにアップロードしますジェクト内の deploy フォルダの中身一式をそのままサーバにアップロードすれば作業は完了です Progression プロジェクトパネルからパブリッシュしてください AS 2.

fla の両方のファイルにおいて Progression プロジェクトパネルからパブリッシュを行いますあとはプロプロジェクト内の deploy フォルダの中身全部をサーバにアップロードしますジェクト内の deploy フォルダの中身一式をそのままサーバにアップロードすれば作業は完了です Progression プロジェクトパネルからパブリッシュしてください AS 2.

8 ActionScript Library_Progression _oncastloadstart() イベントハンドラメソッドで登録したコマンドがすべて実行完了すると実際に読み込み処理が監視されます読み込みが開始されると _onprogress() イベントハンドラメソッドが呼ばれるようになりますただしこのイベント protected override function _onprogress():void { // テキストフィールドの表示内容を読み込み状態に応じて変化させる _loadedperfield.text = "Loading... " + Math.round( bytesloaded / bytestotal * 100 ) + "%"; 中には _oncastloadstart() イベントハンドラメソッドのように ) メソッドを使用することはできませんこれは _onprogress() メソッドが Event.ENTER_FRAME のように逐次呼ばれるイベントであるため時間のかかる非同期処理を設定しても意味がないための仕様です今回は右のようにテキストフィールドに表示している読み込み状態を更新していくことにしましょう最後に _oncastloadcomplete() イベントハンドラメソッドを使用して読み込み完了後の処理を設定しますこのイベントの際には _oncastloadstart() メソッドの時と同様に ) メソッドが使用可能になります読み込まれた swf ファイルは _oncastloadcomplete() イベントハンドラメソッドが完了し登録されたコマンドがすべて実行終了したタイ protected override function _oncastloadcomplete():void { // 実行したいコマンドを登録 // テキストフィールドを画面外に移動 new DoTweener( _loadedperfield, { y:500, time:1 ), // テキストフィールドを画面から削除 new RemoveChild( this, _loadedperfield ) ミングで画面に表示されます 11 プロジェクトを公開する制作作業は完了したらあとは公開するだけですまず index.fla と preloader.fla の両方のファイルにおいて Progression プロジェクトパネルからパブリッシュを行いますあとはプロプロジェクト内の deploy フォルダの中身全部をサーバにアップロードしますジェクト内の deploy フォルダの中身一式をそのままサーバにアップロードすれば作業は完了です Progression プロジェクトパネルからパブリッシュしてください AS 2.0 以前のスタイルで開発したければタイムラインスタイル column Progressionのクラススタイルは ActionScript 3.0をベースとした開発手法ですがまだ 3.0に移行していない人もいるでしょうそういう方のために用意されているのがタイムラインスタイルですタイムラインスタイルではフレームアクションを基本としてタイムラインアニメーションと組み合せながら ActionScript 2.0のような感覚で開発を行うことができますタイムラインスタイルによるスクリプティング手法の詳細については Progression 公式サイトのドキュメントを参照してくださいまた cellfusion さんがタイムスタイルを使った素晴らしいサンプルサイトのデータを公開していますのでこちらも参考にするといいでしょう Progression 公式サイトにあるタイムラインスタイルガイド cellfusion さんによるタイムラインスタイルのサンプル cellfusion Web Designing 129

ノンスクリプトでフルFlashサイトを構築

ノンスクリプトでフルFlashサイトを構築集中連載 text_ 阿部貴弘 Progression プロダクトマネージャー / デザイナー Web デザイン会社 Web サービス会社などを経て Progression プロジェクトの開発運営を展開中現在は講演活動と同時にグローバルな普及を目指しています http://progression.jp/ text _ 小山大輝 1981 年生まれの九州男児 Web デザイナー Web 制作会社