Progressionの勉強してます

去年くらいからFlash制作のフレームワーク「Progression」についていろいろと勉強してます。

ただ他にもHTML5とかjQueryとかについても興味がでてきたのでそっち方面調べたりしてて、なかなかスキルが向上してないのもほんとの事実なのです。。

これじゃいかんなと思ってたし、とある事情もあるのでそろそろ本気で勉強しようと思って、最近はProgression関係だけにしぼって勉強してます。で、勉強に当たって参考にさせてもらってる本とかサイトを紹介します。

Progressionの勉強にオススメな本

ProgressionによるFlashコンテンツ開発ガイドブック



Progression開発者である阿部 貴弘氏が執筆陣に参加されている公式ガイドブックです。公式本ということで、Progressionについての紹介と、コンポーネントスタイル、タイムラインスタイル、クラススタイルそれぞれでの制作方法について詳しく書かれてあります。基本的なことから応用的なことまで書いてあるので、Progressionを始めるにあたってとてもオススメな一冊です。

詳細！Progression 4 Flashフレームワーク入門ノート




最近買ったんですが、こちらもオススメです。記事上部の画像はこちらのもの。前記の「ProgressionによるFlashコンテンツ開発ガイドブック」で基本的なことを学んで、こちらの本でさらに応用的なことについての知識を深めることができます。Flash IDEを使ってのサンプル制作が多く紹介されているので、読んでると制作意欲がわいてきます。

ところで「オススメな本」と言いましたが、これら以外にProgressionについて書いてある書籍ってあるんですかね？

オススメサイト

Flash画面遷移フレームワーク「Progression 4」公式ガイド

gihyo.jpで連載されてたProgressionの紹介記事です。全部で8回分の記事があり、コンポーネントスタイル、タイムラインスタイル、クラススタイルでの制作方法についての説明があります。ちょっと前までこちらのサイトのコードを写経して勉強してました。第4回でのサンプルファイルがうまく動かないのは僕だけ？？

といったところを参考にさせてもらってます。

やっとこさ少し理解できた感じはありますがまだまだ奥が深そうです。早くバリバリ使いこなせるようになりたいものです。

Flex勉強会が福井でありますよ。

9月11日に「Flex meets Progression」というFlexの勉強会があります。

今回はFxUG北陸の福井担当の@shoito さんからお声がけいただきまして、以前やった「Progression勉強しよう会」と合同で開催させていただくことになりました。

なのでProgression系のお話をなにかさせていただこうかと思います。

考えてみたら去年の11月（だったかな？）に初めてFxUGでお話させてもらったときもProgressionの話したなぁ。Web系勉強会で人前で話したのもそのときが始めてでした。緊張しまくったことを思い出しましたよ。

そのときはデザイナーから見るFlash制作ということで、Progression使えば簡単にFlashサイト作れます、みたいなデザイナーさん向けの話をしました。ちなみに参加者にデザイナーさんは1人だったこともいい思い出です。

今回はFlexユーザーさん向けになにか話できたらいいなぁと思ってます。できたらいいですね、はい。見事できたら褒めてください。

去年からそんなにスキルは上がってないことは自覚してるので、当日までになんとかがんばります！

参加登録はこちらからです。

Flex meets Progression - Flex勉強会第121回＠福井
http://atnd.org/events/7277

[Progression]Progression勉強しよう会を開催しました。

5月22日に福井初（？）のProgression勉強会「Progression勉強しよう会 vol.1 in Fukui」を開催しました。

初の自分主催の勉強会でした。企画から会場準備、告知、運営、進行を全部やったわけですがいろんないろんな人たちに助けていただけてなんとか無事終了することができました。無線LANルーターをご提供いただきました@shoito さんありがとうございます。wifi環境設定してくれた@haruiruka ありがとう！

今回は第1回目ということなので「Progressionって何なの？」「どうやって使うの？」ということを参加していただいた皆さんに知ってもらおうかなというテーマで企画しました。勉強会自体は去年の12月くらいからやりたいなと思ってたのでcss niteでProgressionネタで講演された@mathatelle 氏に会う度にスピーカーのお願いしてましたw 快く引き受けてくださいまして本当にありがとうございました！

@mathatelle さんはコンポーネントスタイルでの制作チュートリアルということでデモをまじえながら説明していただきました。毎度味のあるスライドで、セッション内容もわかりやすかったです。Progressionさわったことのない方もその魅力と制作方法をわかっていただけたかなと思います。「Progression学習ノート」というサイトも運営されていますのでそちらも要チェックです。

・コンポーネントスタイルでの制作チュートリアル by@mathatelle


あと、スーパー高専生の@itsuki_kosen くんもすごく乗り気で自分からスピーカーに立候補してくれました。クラススタイル制作は実は初めてらしくかなり苦労されたそうですw 内容はデザイナー向けにわかりやすくクラススタイルでの制作をデモをまじえて解説してくれました。60分オーバーのセッションだったのですが内容がわかりやすく充実していたのであっという間でした。次は120分のセッションお願いしますw

・クラススタイルでの制作チュートリアル for designer by@itsuki_kosen
セッションのスライド


あと、当日無茶振りでLTしていただいた@samba さんと@coelacanth さんもありがとうございました！おそらくまた無茶ぶると思いますのでこれに懲りず今後とも宜しくお願いしますw

・Filemakerを使ってXML管理 @samba


・Progression in Flex @coelacanth

ブログ記事もありました。
FlexでProgressionフレームワークを使うケースについて

勉強会中に参加者のかたから「デザイナ－がコンポーネントスタイルでつくったコンテンツをあとでプログラマーがクラススタイルさわるみたいに編集できるの？」という質問をいただきました。Skypeで参加していただいたProgression開発者の@nium さんに質問させていただいたところ出来るそうです。今後はその辺をすこし調べてみたいですね。あと、FlashDevelopでイチからProgressionをつかう方法をか。

ちなみに今回僕のセッションでやったスライドはこちら。
（フォントかわっちゃってる。。orz）

Progression勉強しよう会 vol.1 in Fukui by @shirokuro331

View more presentations from shirokuro331.

なにかおかしいところがあればディスっていただければ幸いですw

ご参加いただきました皆様ありがとうございました！
今後もやっていこうと思いますので宜しくお願いします！

[書評]ProgressionによるFlashコンテンツ開発ガイドブック

Progression本読みました。これが初の書籍らしいですね。

感想としては文句なしの充実度！
新しくリリースされたProgression4での制作方法について詳しく書いてあります。

先日モスで一人読書会をしてきました。以下はそのときのメモ代わりのツイート。

• コンポーネントスタイルでの制作。レイヤーに配分っていうのが前のバージョンになかった機能かな？ほかはあんま変わんない感じ。理解できる


• タイムラインスタイルでの制作。自分にとってここからハードルが一気にあがるw だいたいはわかるかな？でもなんとなくめんどくさそうな印象。コンポーネントスタイルでいいのでは？と思う。簡単なサンプルで説明してくれてるからかな。


• クラススタイルの制作はやっぱりtemplatesフォルダのファイルをコピーしてシーンをつくるんだな。この作業がなんとなくアナログな感じがするのは私だけかな？


• ＣastＢuttonクラスで拡大とかできるんだー


• アニメーションは表示オブジェクトを操作するもの。それ自体に設定した方がシンプルだし、シーンオブジェクトが軽量になる。


• CHAPTER02まで読了。すごくわかりやすいし読みやすい！今までいまいち消化不良だったことが解消されていく。


• へぇー、AIRアプリも作れるんだ。作りたいコンテンツによって環境設定すべし。


• おもしろそうなサンプルいっぱいのってるなぁ。写経したいw


• 読書会終了ー。

コンポーネントスタイルでしか作ったことがなかった自分でも理解しながらクラススタイルでFlashコンテンツ作ることが出来ました。

サンプルコードも充実していて、いろんなFlashコンテンツに応用できそうです。
どんどん勉強して実際の制作にProgressionを取り入れていきたいです！

[Progression]Progression勉強会をします。

福井県で初（？）のProgression勉強会を開催します。
日時は5月22日（土）の14:00からです。

お申し込みは下記URLからどうぞ。（ATND）
→Progression勉強しよう会 vol.1 in Fukui

今回は初回ということでProgressionってなに？というところからスタートしていきます。

Progressionに興味のあるフラッシャー、デザイナー、デベロッパーの皆様是非ご参加ください。
またProgressionネタでお話していただけるスピーカーのかたも募集します。

お問合せやご要望は@shirokuro331 までどうぞ。

【5/9追記】
今回の勉強会が公式Blogに紹介されました。
blog.progression.jp

さらに開発者の阿部 貴弘さんがskypeで参加してくれることになりました！
twitterすごい！＞＜

【5/11追記】
昨日申し込みの定員を確認しました。
ご参加いただく皆様ありがとうございます＆よろしくお願いします！

[Progression]Progression コンポーネントスタイルでボタンをアニメーション させる方法

先日のエントリーで作品自体は公開したのですが作り方については書いてなかったのでメモ。

今回はボタンのアニメーションの作り方についてのエントリー。
→サンプル

1. 新規シンボルでボタンを作成


2. 「color」レイヤーにボタン画像を描画


3. 「コンポーネント」レイヤーに「RollOverButton」コンポーネントを設置


4. 「label」レイヤーを作成。1フレーム、10フレーム、20フレーム目にキーフレームを挿入してそれぞれに必要なラベル名を記入


5. 下の画像のような形でモーショントゥイーンを作成する。


6. 1フレーム目はアルファ60％

これで完成となります。



大事なのは「label」レイヤーに書いた各ラベル名の意味
【up】・・・ムービークリップからロールアウトした際に表示するフレームラベル、またはフレーム番号を設定します。
【over】・・・ムービークリップをロールオーバーした際に表示するフレームラベル、またはフレーム番号を設定します。
【current】・・・ボタンに設定された移動先が Progression のカレントシーンであった場合に表示するフレームラベル、またはフレーム番号を設定します。

他には、
【down】・・・ムービークリップをクリックした際に表示するフレームラベル、またはフレーム番号を設定します。

上記は公式サイトより引用させていただきました。

※上記内容には一部間違った解釈で書いている内容があります（ラベルの所）。
近日中に修正いたします。ご迷惑をおかけしまして申し訳ありません。
m(_ _)m　（09.12.09）

※修正しました。ご指摘いただいた@mathatelle 氏に感謝します！ （09.12.13）

そろそろクラススタイルの勉強したいと思います。

立ちふさがるActionScript...orz
俺は負けんぞー！

progression 画像スライドのメモ

Indexページがあって、そこから画像スライドのページに遷移するようなサイトを作る。

肝となるのはスライドページの作り方。

Indexページがあって、そこから画像スライドのページに遷移するようなサイトを作る。
肝となるのはスライドページの作り方。

→作ったもの



1.シーンエディタで構造を定義。今回は下図のような形とした。（クリックで拡大）



2.シーンエディタで「書き出し」→「キャストをシンボルに書き出す」で
ライブラリに使用するMovieClipシンボルを作成。

3.各シンボルに画像を配置。
このとき「Index」シンボルには「RollOverButton」コンポーネントを配置。
「パラメータ」の「navigationPath」に「/index/1」と記述する。
そのほかのシンボルにはお好みでコンポーネントを配置。

4.ボタン用のMovieClipシンボルの作成。
「ActionScriptに書き出し」のチェックを忘れずに。

5.次の画像（シーン）に進む用のボタンには「NextButton」コンポーネントを、
前の画像（シーン）に戻る用のボタンには「PreviousButton」コンポーネントを配置。

6.「コンポーネントインスペクタ」で「useTurnBack」を「true」にする。（シーンを繰り返し移動する）

7.ボタンシンボルを「side」シンボル内に配置。ボタンをまとめる。

8.パブリッシュして出来上がり。

あら簡単w

progressionのコンポーネントスタイルでの制作

progressionのコンポーネントスタイルでサンプルサイト作ってみました。
※この記事はあくまで自分用に書きました。いくつかおかしいところがございますのでご注意ください。



→progressionサンプル

といってもシーン遷移の際にコンポーネントを適用しただけの簡単なものです。
備忘録として。

1. まずサイトの構成をシーンエディタで設定します。
（トップと他2ページの構成です）


2.新規のシンボル作成でキャストの名前にあったムービークリップを作成。
（「Actionscriptに書き出し」にチェックを入れる）

3.ムービークリップ内に画像を配置。
コンポーネントパネルよりコンポーネントを選択（画像のそばにドラッグ＆ドロップ）

4.3の作業を必要なキャスト分行う。

5.ボタンの作成。
2の作業を行い、コンポーネントパネルからボタン用のコンポーネントを選択
パラメータパネルで遷移先のシーンを記述（diaryの場合は「/index/diary」）

6.5の作業を必要なボタン分行う

覚えてるのはこんな感じです。

間違ってるとこも多いかも。。
あまり参考にしないほうがいいかもです。。

そろそろちゃんとした記事を書けるようになりたいなぁ　orz