progression3の最近のブログ記事

こんにちは。

早いものでブログを放置して2ヶ月を大きく越えてしまいました。

そんなこんなしているうちに、Progression3がめでたく1周年を迎えています。
(本当の1周年は9月4日。作者でもないのにすいません)

そこで勝手に祝ってしまおうじゃないかと思いまして。。。
1周年のお誕生日祝い的な感覚で、100円でも1000円でも寄付したら良いんじゃないかなーと。
(出すぎた真似して本当にごめんなさい)

Progressionの寄付のページ

こんな事勝手にやって怒られるような気もしますが、もっともっと寄付されるべきなのではないかと常に思っています。
という自分もなかなか難しいんですよね。

せっかくの1周年なので皆でお祝いしましょう!


ちなみに技術的なハナシは近々再開しようと思ってます。

昨日、6月12日に"extends Progression 拡張機能コンテスト"の授賞式が行われたのですが、なんとWeb Designing賞を受賞させていただきました!!

受賞したと分かった時は本当に嬉しかったです。

残念ながら授賞式にには参加できず、授賞式自体はUstreamで視聴させていただいておりましたが、他の方の作品はそれは凄い作品ばかりで、驚きの連続でした。本当にあの場に居れなかった事が残念でなりません。

作品自体は他の方に比べると地味なものですが、コンポーネントベース、タイムラインベースであれば容易に導入出来、かつ効率のアップに繋がるのではないかと思っています。

作っていて感じたことは、Progressionは拡張機能を簡単に作成出来る様に作られているという事でした。(一回Progressionの拡張コンポーネント作れば分かると思います)

最近やるやる詐欺が酷い傾向にありますが、これを是正し、Progressionの更なる発展に今後もどんどん貢献していければと思っています。


追伸:勢いでD90を買ってしまいました。アホですね。

ブログを2ヶ月ほど放置していました。
色々やるようになってくると、完成度が気になってしまい、作り始める→やめるのループになってしまって。。。
もともとそんなに経験も無いので完成度を重視してもしょうがないですよね。。。

で、先日行われましたProgression拡張機能コンテスト。なんとか作品を提出させていただきました。

いつもボタンの作成がめんどくさいので、コンポーネントベースで使える様々なボタンをProgression3用のコンポーネントセットとして作ってみました。


提出したスライド
(Slidesライブラリです。右カーソルで動作)


コンポーネントのダウンロード(要Progression3)


作り方やソースコードは整理しながら徐々に公開していこうかと思いますが、実は中身は結構力技だったりして酷いです。制限もあります。
そして、もっと良いネーミング思いつかなかったのか。。という。。。

※スライドに書き忘れていますが、このコンポーネントでボタンをいい具合に見せるにはボタンのヒット範囲に透明MCを置く必要アリです。あと、このコンポーネントを使うボタンにタイムラインアニメーションをさせてはいけません。

ただ、このコンテストを通してコンポーネントの作り方を学べたのは非常に大きかった。Flashのスクリプターとデザイナーの分業、協業の方法が垣間見えた気がしました。ちなみにTweenerを最大限に利用しているので、作りも非常に簡単にできています。

コンポーネントベースで簡単に動きのあるボタンが作れますので、Progressionコンポーネントベース大好き派なあなた!是非使ってみてください。
自分で言うのもなんですが、ドラッグアンドドロップですぐ実装出来るので楽でいいですよ。


ちなみに最後にURLリンク機能追加予定とありますが、次バージョンになってから。。の予定です。


まだまだ精進せねばいけませんね。。

実は結構前から話題には上っておりましたProgressionのget~系メソッドについて、少々書いてみようと思います。

というのもカヤックさんのエントリー(gihyoの記事の紹介をいただいております。ありがたい事です。)とflabakaさんのエントリーでget~系のメソッドが紹介され始めましたので、便乗してエントリーさせていただこうかなと。

今まではProgressionのScene間のデータの受け渡しに関して、「シングルトンでやる」みたいな意見もちらほら聞かれたのですが、今は圧倒的にget~系のメソッドを使っています!という声が多いですね。get~系のメソッドはProgressionに無くてはならない要素の一つだと思います。

さて、どんなメソッドがあるか見てみましょう。

Progressionインスタンスの参照用
getProgressionById(設定したidを持つProgressionインスタンスを取得)
getProgressionBySceneId(指定sceneIdのProgressionインスタンスを取得)
getProgressionsByGroup(設定したgroupを持つProgressionインスタンスを含む配列を取得)
getProgressionsByRegExp(設定したfieldName が条件と一致する Progression インスタンスを含む配列を取得)

Commandインスタンスの参照用
getCommandById(設定したidを持つCommandインスタンスを取得)
getCommandsByGroup(設定したgroupを持つCommandインスタンスを含む配列を取得)
getCommandsByRegExp (設定したfieldName が条件と一致する Commandインスタンスを含む配列を取得)

SceneObjectインスタンスの参照用
getSceneById(設定したidを持つSceneObjectインスタンスを取得)
getSceneByName(指定scenenameのSceneObjectインスタンスを取得)
getSceneBySceneId(指定sceneIdのSceneObjectインスタンスを取得)
getScenesByGroup(設定したgroupのSceneObjectインスタンスをを含む配列を取得)
getScenesByRegExp(設定したfieldName が条件と一致する SceneObjectインスタンスを含む配列を取得)

様々なオブジェクトのインスタンスの参照用(私は主にキャストオブジェクト参照用として使用しています)
getInstanceById(設定したidを持つオブジェクトのインスタンスを取得)
getInstanceByGroup
getInstancesByGroup(設定したgroupを持つオブジェクトのインスタンスを含む配列を取得)
getInstanceByRegExp
getInstancesByRegExp(設定したfieldName が条件と一致する オブジェクトのインスタンスを含む配列を取得)

>elmo様よりミスの指摘がありましたので修正しました。ありがとうございます!

私が把握しているのはこの辺りです。ものすごく充実していますね。まだあるのかな?

この中でも比較的大活躍をしてくれるのがカヤックさんのブログでも紹介されているgetInstanceByIdなのですが、さらに便利なのがgetInstanceByGroupといったGroup系です。

例えばなのですが、メニューボタンが並んでいる場合、このメニューボタンのセットを1つのグループにしておくとgetInstanceByGroupでメニューボタンの参照が配列で取得出来てしまいます。

使った事は無いのですが~ByRegExpもサーバーとの連携あたりで大活躍しそうですね。。(検索に引っ掛けるとか)
本当になんでも出来るフレームワークだなーと感心しながら今日も何かを作っています。

使い方の実例ですが、近々この辺を利用したサンプルを公開しますのでお待ちを。
出来はあまり期待しないでくださいね。
それではー。

こんにちは!
Progressionの拡張の話(カスタムシーンとか)の話を書こうと思ってちょっとしたものを作ったり、出せるようにいじったりとしていたのですが、あまりにも作業が遅れ、世に出す前にProgression拡張機能コンテストの受付が始まってしまいました。。。
このタイミングで出すのはネタが万が一かぶってしまう人もいないとも限らないので、エントリーとしてのお披露目は辞めようと思います。

なので、方針を変更して、本当にいまさらなのですが、3月6日に行われましたProgression勉強会の感想らしきものを書いていこうと思います。


・カスタムコマンド
これは、簡単なものをいくつか作っておりましたので、すぐ理解できました。
こちらとか、こちらのエントリーにも軽く載せてあります。また、nium先生の話にほんの少し登場したLoopCommandはこちらです。

これを大幅にパワーアップされたコマンドがサンプルとして紹介されておりました。
サンプルのコマンドはCommandListクラスを拡張されて作られており、コマンドのシリアルリストと同様の使い方が出来る様になっていました。こっちの方が断然スマートだな!と感心しきりでした。。。。
CommandListクラスを拡張して簡単なものを作るとすればあれかな。。。と今作っていたりします(おそらくコンテストには出しませんけど)。


・カスタムシーン
ざっくり言うとおそらくみなさんカスタムシーンを意識せずに作成していると思います。
同じようなシーンの場合、汎用シーンクラスを一つ作って使いまわすと思いますが、それこそがカスタムシーンなのだと思います。汎用性の高低が今回のコンテストに相応しいか否かという所なのではないでしょうか。誰もが使えるシーンクラスかどうかという所がポイントになると思います。
サンプルとして紹介されたシーンクラスは独自のイベントを追加した形になっていて、かなり実用できそうです。これもスゲーと思いました。


・カスタムコンポーネント
一度もカスタムコンポーネントを作成した事が無かったので、今回一番の目当てはコレでした。作り方自体はants lab.さんのこちらのエントリーとほぼ同内容でした。
後はどうやってProgression用に作るかという事ですが、サンプルとしてアップされているファイルを一式ダウンロードして、その中のshared\classes\jp\progression\components\CoreComponent.asとかshared\classes\jp\progression\components\HandMagicEffect.asとかを見れば良いと思います。
横着でごめんなさい。
(このへんは時間があればじっくり解説したいですね。。。)


私はコンテスト提出用の物をじわじわ作り始めてはいるのですが、正直間に合うかどうか分からなくなってきました。間に合わなかったら即公開ですね。
ちなみに全力で自分用の何かを作っています。

自分であったらいいなと思うものを作れば、それはきっと誰かも使いたいんじゃないかと思いますね。

ちなみにドメイン取りました。こっちもいまさら感ありすぎる。。。

Adobe Maxのレポートでもちらっと触れましたが、Progressionの拡張機能コンテスト開催が正式に告知されました。


extends Progression 拡張機能コンテスト

用意されている商品がとても豪華で。。。凄いです。

私のレベルだとなかなか難しい面もあるとは思いますが、もちろん参加させていただく予定でおります。

また、このブログでも拡張機能の作成方法等コンテストに役立つ情報を随時掲載予定です。

何を作ったら良いか分からないという方も、
とりあえずは簡単なカスタムコマンドから始められるとよいのではないでしょうか?

私はコンテスト以前に作ったカスタムコマンドは随時放出していく予定です。
wonderflにも少しあるので見てみてくださいね。
ちなみにnium先生に手伝ってもらったループコマンドはなかなか使えます。
これ外出しておかないとな。。。。

勉強会も開催されるとの事ですが、もう定員になっちゃってるのかな?もしかしたら枠が増える可能性もあるので、補欠登録しておくと良いでしょう。

アイデアだけは凄く沢山あるのですが、実装出来ないというジレンマを抱えておりますので、アイデアも放出するかもしれませんw

みんなで応募してコンテストを盛り上げましょう!!

こんにちは!
忙しくて目も当てられませんね!びっくりです!

そんな中またProgressionのお世話になるためにプロジェクトを作成しようとしたところ、ちょっとしたミスをしてしまいました。
プロジェクト名が自動的にパッケージ名に入る事を忘れており、
パッケージ名に不正文字を使用してしまったのです。

事の顛末は以下フォーラムに報告してあります。
http://forum.progression.jp/index.php?topic=71.0


既にバグフィックスとなるパッチが公開されています(早い!!)
以下よりダウンロードして下さい。
http://progression.jp/ja/download/3.1.42/#item-patch
Progression3.1.42使用されているみなさんはパッチをあてるか、十分に注意しましょう!

こんにちは!
現在酷く忙しい日々が続いておりまして。。
気分転換にflabakaさんのエントリを利用させてもらって一つぱぱっと作ってみました。。。

それではどうぞ!

本当は2時間以内に作成したかったのですが、XMLの作成に非常に時間を取られてしまいました。
しかもパフォーマンス悪いし。。
文字が止まる事ありますが、待ってると動き始めますのでその辺ご了承下さい。

今回特筆すべき点は。。。
強いて言えばここかな?と
IndexScene.as内でマウスクリックのイベントハンドラで、次のシーンへ飛ばしてる部分です。

private function clickHandler(e:MouseEvent):void {
	if (isCurrent) {
		progression.goto(scenes[0].sceneId);
	} else {				
		if (progression.current.next!=null){
			progression.goto(progression.current.next.sceneId);
		} else {
			progression.goto(progression.firstSceneId);
		}
	}
}

Progressionインスタンスのcurrentプロパティで現在のシーンの参照が取れるので、そのnextプロパティで次のシーンへ飛ばしています。
無かったらIndexに戻しています。

あと自作コマンドも入ってますが、汎用性ほとんど無しです。
いやー今見返してみると酷いソースコードだ。。。

プロジェクトファイル一式はここにおいておきます。

2/9 12:00追記
flabakaさんのレポートに載っていない件があるのを忘れておりました。
Progressionの拡張機能コンテスト開催の件です。
詳細は後ほど様々な場所から発信されると思いますが、2月中旬~下旬くらいに発表になるとの事でした。
私は現在、拡張機能コンテストに参加出来る状況にあるとは言えない状況ですが、なにかしら出せたら。。。と思っています。
みなさんも今からネタを考えておくと良いと思いますよ!みんなでコンテストを盛り上げましょう!!

先日ADOBE MAX 2009が開催され、私も参加してまいりました。
レポートを書かなければ!!と思っていたもののずるずるとこんな日付に。。。
色々考えているので、たぶん皆が忘れた頃に投下する予定です。

そこでMAX会場にてとある人からProgressionのコマンドだけ使いたいんだけどどーすんの?的な事を聞かれましたのでやり方を書いておきます。

まず、なんでも良いのでProgressionプロジェクトを書き出します。
(私はFlash CS3なのでswc書き出しが出来ません。なので今回は通常プロジェクト書き出しの場合ですあしからず。)

それで書き出されたlibsフォルダを以下の図の様に設置します。
今回構成はこんな感じで簡潔にしてあります。
090205_1.jpg

パブリッシュ設定のActionScript設定でクラスパスを設定します。
090205_2.jpg

これで準備完了。

以下ドキュメントクラスです。
commandsのパッケージをインポートするだけ。

package {
	import flash.display.Sprite;
	import jp.progression.commands.*;
	import jp.progression.core.commands.*;
	public class Main extends Sprite {
		public function Main() {
			var rectObj:Sprite = new Sprite();
			//シリアルリストインスタンス作成
			var sList:SerialList = new SerialList();
			//矩形の作成
			rectObj.graphics.beginFill(0x000000);
			rectObj.graphics.drawRect(0, 0, 200, 200);
			rectObj.graphics.endFill();
			//コマンド登録
			sList.addCommand(
				new AddChild(this, rectObj),
				new DoTweener(rectObj, { x:100, y: 100, time:2 } ),
				new DoTweener(rectObj, { scaleX:2, scaleY:2, time:2 } ),
				new DoTweener(rectObj, { x:50, y: 200, scaleX:1, scaleY:1, time:2 } ),
				new DoTweener(rectObj, { x:500, time:2 } )
			);
			//コマンド実行
			sList.execute();
		}	
	}
}

wonderflではコマンドしか使えないのでコマンドだけ使ったサンプルを投稿しています。
こちらも参考にしてくださいね。(最近全然投稿してないんですが。。)

サンプルはこちらに置いておきます。

Progressionのクラスベースは敷居が高い!と思われている方もまずはコマンドから始めてみませんか?

ラーメンサラダの会に来ていただいた皆様ありがとうございました。
楽しいひとときを過ごさせてもらいました。
また次回のお越しをお待ちしております。

また、先日kmxsさんのブログに於いて
フルFlashサイトをProgressionで作り始める時にまず読むべき16の記事
というすばらしいエントリがあがりました。
このブログも紹介いただいております。ありがたいことです。

さて、今回はProgressionに同梱されているnium先生パッケージ内クラスの紹介です。
Util系のクラスはflabakaさんが最近ものすごい勢いでブログにエントリされておりますが、私はフルフラッシュサイトの際に便利なDocumentEventの紹介をしたいと思います。

実のところ、幅、高さが100%になるflashのサイトを作った事がなかったのですが、この前初めてそういった案件を手がけた際、Progressionを用いる事でHTMLに触ることなく簡単に出来てしまいました。正直、驚愕しました。
(でもあとで中身を見て覚えようと思います。)

その際、DocumentEventという素敵なイベントクラスを利用させてもらいました。

通常フルフラッシュのサイトでステージサイズ変更のイベントを取る際は以下の様に記述すると思います。
(ちなみにProgressionの場合なのでstageはprogression.stageで参照しています)

progression.stage.addEventListener(Event.RESIZE, resizeHandler);
private function resizeHandler(e:Event):void 
{
    //ステージサイズ変更時の処理		
}

これが普通だと思いますが、リサイズの処理によってはリサイズ開始時、リサイズ終了時といったイベントが欲しくなる時があると思います。

これをDocumentEventは解決してくれます。

import jp.nium.events.DocumentEvent;
とインポートして使います。
用意されているイベントはINIT,RESIZE_START,RESIZE_PROGRESS,RESIZE_COMPLETEの4つです。

progression.stage.addEventListener(DocumentEvent.INIT, stageInitHandler);
progression.stage.addEventListener(DocumentEvent.RESIZE_START, resizeStartHandler);
progression.stage.addEventListener(DocumentEvent.RESIZE_PROGRESS, resizeProgressHandler);
progression.stage.addEventListener(DocumentEvent.RESIZE_COMPLETE, resizeCompleteHandler);

以下の様にイベントハンドラ内でstageの参照も間単に取得出来ます。これが一番ポイントが高い!!

private function resizeCompleteHandler(e:DocumentEvent):void 
{
    trace(e.stage);
    trace(e.stageHeight);
    trace(e.stageWidth);
}

恐ろしく便利です。

このアーカイブについて

このページには、過去に書かれたブログ記事のうちprogression3カテゴリに属しているものが含まれています。

前のカテゴリはPixel Benderです。

次のカテゴリはProgression4です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。