Web3D Project by Eyes, JAPAN

Introduction

Adobe AIR for FlashCS3 (2)では実際にAIRに実装されているHTMLを描画するエンジンを利用して、
簡単なオリジナルウェブブラウザ機能を持ったアプリケーションを作成してみたいと思います。（図１）
コード自体少し長く感じるかもしれませんが、特に難しいことはしておらず、
重要な部分のコードの解説や機能の紹介などをしていきます。

(図1,オリジナルブラウザ全体図)

以下より、今回作成したアプリケーション等をダウンロードできます。

AIR_Blowser.zip

List of Content

1. はじめに

コーディングする前にFlash側で素材を作成します。
今回、TotalというMovieClipシンボルを作成し、そのTotalシンボルの中にそれぞれのボタンを置き、
管理しやすいようにしました。

そして、Flashで素材のグラフィック管理( 図2 )と設定を行い、

ドキュメントクラスにMain.asという外部アクションスクリプトファイルを指定することで、 >外部アクションスクリプトに機能の管理を分担しています。

2. Flashで素材のグラフィック管理と設定

Flashで素材のグラフィック管理( 図2 )と設定を行います。

(図2,ライブラリ)

では、ボタンの作成をしていきましょう。上記でも記述したように、まず個々のボタンをまとめるTotalシンボルを作成し、
そのTotalシンボルの中にそれぞれのボタンを置いていきます。(図3)

(図3,Totalシンボル)

Totalシンボルには、シンボルプロパティの設定で、ActionScriptの書き出しにチェックを付けます。(図4)
これによって、アクションスクリプトでインスタンスを生成することができるようになります。

(図4,シンボルプロパティ)

Totalシンボルの中に置いた、個々のボタンにインスタンス名を設定します。( 図5 )

（図5, インスタンス名設定）

ボタンの名前をそれぞれ以下としました。

ブラウザにマスク効果を付けるためのオブジェクトを作成します。
新規シンボル作成で名前をMaskingとし、中にオブジェクトを描画しました。( 図6 )
こちらもTotalシンボルと同様に、シンボルプロパティの設定で、ActionScriptの書き出しにチェックを付けます。

（図6, マスクオブジェクト）

ドキュメントクラスを設定をします。
ドキュメントクラスとは、メインのタイムラインに関連付けることができるクラスです。
AIRを作成すると、Flashはドキュメントクラスを自動的に生成します。
プロパティ->ドキュメントクラスにMainと記述します。( 図7 )

（図7, ドキュメントクラス設定）

3.外部アクションスクリプトに機能の管理

ここでは、今回作成したAIRブラウザの機能の紹介をし、機能を実装するためのコードを解説します。
ポイントは、以下の3つです

1. シンボルインスタンス作成
2. HTML読み込み
3. 各種機能設定
ドキュメントクラス(Main.as)作成

ファイル -> 新規作成 -> ActionScriptファイル　よりASファイルを作成します。
保存場所はFlashファイルと同じ階層で名前をMain.asとして保存してください。
また、ドキュメントクラスを使用するときは、クラスを Sprite かMovieClipクラスに拡張する必要があります。

<br /> //Sprite or MoveiClipに拡張<br /> public class Main extends Sprite<br />

シンボルインスタンス作成

ライブラリのシンボルインスタンスをアクションスクリプトのコードから作成します。
シンボルプロパティの設定でActionScriptの書き出しにチェックを入れると、
クラスインスタンスを作成するようにシンボルインスタンスを作成できます。

<br /> total = new Total();<br /> maskmc = new Masking();<br />

HTML読み込み

まずURLを格納しておく配列urlListを作成し、任意のURLを格納します。

<br /> //読み込むインスタンス<br /> var urlList:Array = ["http://www.mocapdata.com/", "ここにURLを記述してください。"];<br />

HTMLを読み込みをさせるにはHTMLLoaderクラスのメソッドを使用することで可能になります。



loadメソッドには、引数としてURLRequestが必要なので作成します。
このクラスインスタンスに先ほど格納したURLを代入します。

<br /> //urlList[1]にすると、２番目のURLを読み込みます。<br /> var url:URLRequest = new URLRequest(urlList[0]);<br />

HTMLを読み込みをさせるHTMLLoaderクラスインスタンスを作成し、
HTMLLoaderインスタンス名.load(URLRequestインスタンス名)
により任意のURLからHTMLを読み込みます。

<br /> //HTML読み込みをさせるHTMLLoaderクラスインスタンス作成<br /> urlLoader = new HTMLLoader();<br /> //読み込み urlLoaderの初期位置設定<br /> urlLoader.load(url);<br /> urlLoader.width = stageW;<br /> urlLoader.height = stageH – total.height;<br /> urlLoader.x = stageW/2-urlLoader.width/2;<br /> urlLoader.y = 0;<br />

HTMLスクロール機能

HTMLスクロールする機能を実装します。
HTMLLoaderクラスのプロパティを使用することで可能になります。



この値を毎フレームに±1することでスクロールでき、
スクロール停止には、毎フレームに±1するENTER_FRAMEリスナーを削除することで停止します。

<br /> //Downボタンクリック<br /> private function downclickHandler(e:MouseEvent):void {<br /> urlLoader.addEventListener(Event.ENTER_FRAME, upHandler);<br /> urlLoader.removeEventListener(Event.ENTER_FRAME, downHandler);<br /> }<br /> private function upHandler(e:Event):void {<br /> urlLoader.scrollV += 1;<br /> }<br /> //Upボタンクリック<br /> private function upclickHandler(e:MouseEvent):void {<br /> urlLoader.addEventListener(Event.ENTER_FRAME, downHandler);<br /> urlLoader.removeEventListener(Event.ENTER_FRAME, upHandler);<br /> }<br /> private function downHandler(e:Event):void {<br /> urlLoader.scrollV -= 1;<br /> }<br /> //Stopボタンクリック<br /> private function spclickHandler(e:MouseEvent):void {<br /> urlLoader.removeEventListener(Event.ENTER_FRAME, downHandler);<br /> urlLoader.removeEventListener(Event.ENTER_FRAME, upHandler);<br /> }<br />

基本ブラウザ機能

基本ブラウザ機能の「戻る」「進む」「更新」を実装します。
HTMLLoaderクラスのメソッドを使用することで可能になります。
AIRではFlashにはないたくさんのクラスが存在します。HTMLLoaderクラスもその代表の一つです。



<br /> //Backボタンクリック<br /> private function backclickHandler(e:MouseEvent):void {<br /> urlLoader.historyBack();<br /> }<br /> //Nextボタンクリック<br /> private function nextclickHandler(e:MouseEvent):void {<br /> urlLoader.historyForward();<br /> }<br /> //Reloadボタンクリック<br /> private function reloadclickHandler(e:MouseEvent):void {<br /> urlLoader.reload();<br /> }<br />

アルファ機能

HTMLブラウザのアルファを変更する機能を実装します。
AIRではFlashで使用してきたプロパティを同様に操作することが可能です。



アルファが0以下1以上の時、アルファの値に±1しないようにします。
アルファは0～1の値ですが値はその数値を超えて設定されてしまうのを防ぐためです

<br /> //ADownボタンクリック<br /> private function adownclickHandler(e:MouseEvent):void {<br /> (urlLoader.alpha < 0)? (urlLoader.alpha=0) : (urlLoader.alpha -= 0.1);<br /> }<br /> //AUpボタンクリック<br /> private function aupclickHandler(e:MouseEvent):void {<br /> (urlLoader.alpha > 1)? (urlLoader.alpha=1) : (urlLoader.alpha += 0.1);<br /> }<br />

マスク機能

マスクの機能を実装します。
HTMLなどにマスクをかける事で、AIR特有の面白い表現ができます。
なお、マスクをかけすぎると重くなってしまうので注意してください。



マスクを適用するには、マスクプロパティにマスクを適用する対象を指定します。
また、マスクを解除するにはマスクプロパティにnullを代入します。

<br /> //Maskボタンクリック<br /> private function maskclickHandler(e:MouseEvent):void {<br /> if(maskmc.visible==false){<br /> maskmc.visible = true;<br /> urlLoader.mask = maskmc;<br /> }<br /> else{<br /> maskmc.visible = false;<br /> urlLoader.mask = null;<br /> }<br /> }<br />

Drag、Close機能

Drag、Close機能を実装します。
nativeWindowクラスのメソッドを使用することで可能になります。
Flash側でAIRファイルを書出すとき、ウィンドウスタイルを透明などにする場合は、
デフォルトでDrag,Close機能がないので、こちら側で作成する必要があります。



<br /> //Dragマウスダウン<br /> private function dragdownHandler(e:MouseEvent):void {<br /> stage.nativeWindow.startMove();<br /> }<br /> //Closeボタンクリック<br /> private function closeclickHandler(e:MouseEvent):void {<br /> stage.nativeWindow.close();<br /> }<br />

Adobe AIR for FlashCS3 (1)