Loading...
Progression公式サイトの「クラススタイルガイド」を参考にシンプルで初歩的なページ遷移(シーン移動)の簡単なサンプルを作りました。
制作環境
- Windows XP SP3
- FLASH CS4 Pro
- Progression 4.01 Public Beta 1.3
シーン構成
- Index
- About
- Blog
- Portfolio
- Contact
今回はアニメーションは使っていませんが、次回のサンプルでちょっとスパイスを加えてみようかと思います。
『感ずること』
本来はソースとか細かい解説的なことした方がいいよね、それが理解しているか、していないか分かることだし。まだ、イメージして作成できないなぁ。
クラススタイルで作っていると、チュートリアルでも解説が載っているのですが、プロジェクトを作成したときに必要な各種データが書き出されます。
そのデータの中にtemplatesフォルダがあり、その中には基本のテンプレートが準備されています。このテンプレートを使ってシーン、ページ、ボタン等を組み立てていきます。自分のメモ書きな感じで各テンプレート構成を載せてみます。
内容は「Progression 4.0.1 Public Beta 1.3 | API Reference」と「Adobe ActionScript 3.0 言語およびコンポーネントリファレンス」より引用しています。
テンプレート構成
・MyIndex.as
【CastDocumentを継承】
クラス:CastDocument
パッケージ:jp.progression.casts
ExDocument クラスの基本機能を拡張し、イベントフローとの連携機能を実装した jp.progression パッケージで使用される基本的なドキュメント専用クラスです。
*プロジェク作成時にIndex.asとして書き出されています。
・MyCastSprite.as
【CastSpriteを継承】
クラス:CastSprite
パッケージ:jp.progression.casts
ExSprite クラスの基本機能を拡張し、イベントフローとの連携機能を実装した jp.progression パッケージで使用される基本的な表示オブジェクトクラスです。
・MySceneObject.as
【SceneObjectを継承】
クラス:SceneObject
パッケージ:jp.progression.scenes
シーンコンテナとして機能する全てのオブジェクトの基本クラスです。
*プロジェク作成時にIndexScene.asとして書き出されています。
・MyCommand.as
【Commandを継承】
クラス:Command
パッケージ:jp.progression.commands
全てのコマンドの基本となるクラスです。
・MyCastMovieClip.as
【CastMovieClipを継承】
クラス:CastMovieClip
パッケージ:jp.progression.casts
ExMovieClip クラスの基本機能を拡張し、イベントフローとの連携機能を実装した jp.progression パッケージで使用される基本的な表示オブジェクトクラスです。
・MyCastButton.as
【CastButtonを継承】
クラス:CastButton
パッケージ:jp.progression.casts
ExMovieClip クラスの基本機能を拡張し、ボタン機能とイベントフローとの連携機能を実装した jp.progression パッケージで使用される基本的な表示オブジェクトクラスです。
・MyPreloader.as
【CastPreloaderを継承】
クラス:CastPreloader
パッケージ:jp.progression.casts
ExDocument クラスの基本機能を拡張し、イベントフローとの連携機能を実装した jp.progression パッケージで使用されるプリロード処理に特化したドキュメント専用クラスです。
*プロジェク作成時にPreloader.asとして書き出されています。
・prml.xml
＊勉強必要＊
PRML リファレンス
【動的なシーンを作成するのに、PRML形式のXMLファイルが必要】
Progression 拡張元のクラス
クラス:ExDocument
パッケージ:jp.nium.display
ExMovieClip クラスに対してドキュメントクラスとしての機能拡張を追加したドキュメント専用クラスです。
クラス:ExMovieClip
パッケージ:jp.nium.display
MovieClip クラスの基本機能を拡張した jp.nium パッケージで使用される基本的な表示オブジェクトクラスです。
ActionScript 3.0 リファレンス
クラス:MovieClip
パッケージ:flash.display
MovieClip クラスは、Sprite、DisplayObjectContainer、InteractiveObject、DisplayObject および EventDispatcher クラスを継承します。
MovieClip オブジェクトには、Sprite オブジェクトとは違ってタイムラインがあります。
MovieClip クラスのメソッドは、ムービークリップをターゲットとするアクションと同じ機能を提供します。
Flash オーサリングツールのアクションパネルのアクションツールボックスには同等のアクションがない追加メソッドもあります。
Flash オーサリングツールのステージに配置された子インスタンスは、親インスタンスのコンストラクタ内からコードでアクセスできません。コード実行の該当時点では作成されていないためです。
子にアクセスするには、親はコードを使用して子インスタンスを作成するか、子を待機するコールバック関数が Event.ADDED_TO_STAGE イベントを送出するまでアクセスを遅延させる必要があります。
モーショントゥイーンが含まれている MovieClip オブジェクトの次のいずれかのプロパティを変更した場合、MovieClip オブジェクト、alpha、blendMode、filters、height、opaqueBackground、rotation、scaleX、scaleY、scale9Grid、scrollRect、transform、visible、width、x または y の再生ヘッドが停止されます。ただし、その MovieClip オブジェクトの子 MovieClip オブジェクトの再生ヘッドは停止しません。
とりあえず、こんな感じかな。
『感ずること』
いやぁ、ホント開発者はすごい!と思う今日この頃
まずは難しく考えないで体験してみること! インストールも難しくないしプロジェクト作成もわかりやすく本家サイトに載っています。
基本的な使い方から各種リファレンス
参考になるチュートリアルサイト
上記の本家リファレンスより「コンポーネントスタイルガイド」・「タイムラインスタイルガイド」・「クラススタイルガイド」があります。
gihyo.jp
Flashのフレームワーク「Progression3」を始めてみよう！
プログラムが苦手なら「コンポーネントスタイルガイド」・「タイムラインスタイルガイド」がオススメ!
慣れない言葉や操作があったと思うけど、2,3回繰り返していると感覚が掴めると思います。
現在Progressionのバージョンは3.1.82で、プレリリース中のProgression4 Public Betaも公開されています。
僕の場合はProg3で感覚をつかんで、Prog4を勉強する感じです。
『感ずること』
全然関係ない話だけど、アサラト(パチカ)がメチャクチャ面白い!時間があったらひたすらパチパチ鳴らしてます。
ビックリするね。なんだろ、この感覚。。。
前に進みたいけど、何がなんだか分からなくて、気持ちだけ先に行って自分自身は追いついていない。
こんなこと考えているうちに、だんだん腹が立ってタバコを吸う、吸った事に後悔する、始めに戻る。めちゃくちゃ笑える無限ループにハマッてる。
自分は一体何がしたいんだ？業種を変えるのか？そのまま突き進むべきなのか？う～ん、分からない。
本当に分からないのかな？分かっているはずなのに自信がなくて分からないって思い込んでいるだけでなのか、どうなんだろ。。。
こんなこと載せてる自分に腹が立ってきたので、ひとまず考えるのやめる！
『感ずること』
何もかもが難しすぎるぞあｑｗせええｄっｒｆｙっｈっこ;
なぐり書きな感じで投稿。
ここ最近はActionScript3.0を中心に勉強していまして、目標はクラススタイルのFLASHサイトを制作することです。
サイトを制作するにあたってFLASHのフレームワーク Progression を使いたいと思っています。
関連記事:PROGRESSION 3を使ってサイトを作ってみた
で、今回はサイトに載せたいフォトギャラリーを作ってみました。
サイトを作る順序として違う感じもありますが。。。
package {
import flash.display.Sprite;
import flash.display.Sprite;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.Loader;
import flash.display.LoaderInfo;
public class FlickrPhoto extends Sprite {
//FLICKR API PARAM
private var _userId :String = "～Flickr User ID～";
private var _apiKey :String = "～Flickr API KEY～";
private var _setId :String = "～Flickr SET ID～";
private var _url :String = "http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=" + _apiKey + "&photoset_id=" + _setId;
//取得したXMLデータを配列に格納
private var _flickrId :Array = new Array();
private var _flickrFarm :Array = new Array();
private var _flickrServer :Array = new Array();
private var _flickrSecret :Array = new Array();
private var _flickrUrl :Array = new Array();
private var _thum :Array = new Array();
//リクエスト用のURLを生成
private var _myURLReq :URLRequest = new URLRequest(_url);
private var _myURLRequest :URLRequest;
//リクエストを発行
private var _myXMLLoader :URLLoader = new URLLoader();
private var _myLoader :Loader;
private var _thumLoader :Loader;
//ステージサイズに合わせて表示する画像の枚数
private var _thumNum :uint = Math.floor(stage.stageWidth/80);
//画像どうしの間隔
private var _thumInterval :uint = 10;
//FLICKR画像を表示するサイズの指定
private var _flickrSize :String = "s";
//その他
private var _thumContainer :Sprite = new Sprite();
private var _imgContainer :Sprite = new Sprite();
private var _myXML:XML;
public function FlickrPhoto() {
setStageProperty();
setStageEvents();
layout();
this.addChild(_thumContainer);
this.addChild(_imgContainer);
}
internal function setStageProperty():void {
//ステージの伸縮を「拡大・縮小なし」に設定(必須)
stage.scaleMode = StageScaleMode.NO_SCALE;
//ステージの位置を「左上」に設定(必須)
stage.align = StageAlign.TOP_LEFT;
}
private function setStageEvents():void {
//ステージリサイズ時のイベントリスナー登録
stage.addEventListener(Event.RESIZE,onStageResize);
}
private function layout():void {
_myXMLLoader.addEventListener(Event.COMPLETE,setPhotoXML);
_myXMLLoader.load(_myURLReq);
}
private function setPhotoXML(e:Event):void {
_myXML = new XML(_myXMLLoader.data);
for each(var xmlObj:Object in _myXML.photoset.photo) {
_flickrId.push(xmlObj.@id);
_flickrFarm.push(xmlObj.@farm);
_flickrServer.push(xmlObj.@server);
_flickrSecret.push(xmlObj.@secret);
}
for(var i:uint = 0; i < _flickrId.length; i++) {
_flickrUrl.push("http://farm" + _flickrFarm[i] + ".static.flickr.com/" + _flickrServer[i] + "/" + _flickrId[i] + "_" + _flickrSecret[i] + "_" + _flickrSize + ".jpg");
_myURLRequest = new URLRequest(_flickrUrl[i]);
_thumLoader = new Loader();
_thumLoader.load(_myURLRequest);
_thumLoader.x = 12 + (i % _thumNum) * 83;
_thumLoader.y = 12 + Math.floor(i / _thumNum) * 83;
_thum.push(_thumLoader);
addChild(_thumLoader);
stage.addEventListener(Event.RESIZE,onStageResize);
}
}
private function onStageResize(e:Event):void {
var _w :uint = stage.stageWidth;
var _h :uint = stage.stageHeight;
var _num:uint = _w/80;
for(var i:int = 0; i < _thum.length; i++){
_thum[i].x = 12 + ( i % _num ) * 83;
_thum[i].y = 12 + Math.floor( i / _num ) * 83;
addChild(_thum[i]);
}
}
}
}
『感ずること』
オブジェクト指向のイメージがなかなか掴めない、霧がかかった状態。。。
