Flex勉強会第87回@北陸(福井)に参加してきました。

というわけで行ってきましたFlex勉強会。
勉強中のProgressionについてスピーキングさせていただきました。

今回はスピーカーということでかなりの緊張具合。発表にも如実にでてたと思いますｗ

できればこういうことは経験させてもらってうまく発表できる人になりたいですね。

今回のセッションので作ったサンプルはこちら。
→サンプル1
→サンプル2

できればスライドもアップしたかったですけどslideshareでうまく表示されない。。

作品のチュートリアルもできればアップしたいですね。それはまた後日。。

他の方のセッションも大変参考になりました！

今回はFlashを使って外部機器を操作する（または逆）なフィジカルコンピューティングの話が多かったですね。あとはUIについて（デザイナーとしてこれとても大事！）。

ほか、北陸のFxUG兄弟wが今度のAIR DAで発表される作品の発表とAdobe轟氏によるAIR2.0についてのお話。

ためになるはなしが多かったです。

今後もできるだけ参加していきたいと思います。

次回は１月に富山で開催予定です。

Flex勉強会第87回@北陸(福井)

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

ロールオーバーで反転するFlash

初歩的なことですが備忘録として。



→サンプル

まず新規でムービークリップ（名前は任意）をひとつ作ります。

丸を描画して、そいつがくるっと反転しているような動きをタイムラインで作ります。
1.丸の描画（仮に直径200）
2.モーショントゥイーンの作成
3.5フレーム目にキーフレームの挿入
4.5フレーム目の丸を幅「0」に変形
5.10フレーム目にキーフレームの挿入
6.10フレーム目の丸の幅数値を元に戻して（200）、色を変更

ここまでで閉じてくるっと反転したようなうごきになります。

今回のサンプルはロールアウトしたら元の色に戻りようにしたいので
同様の方法で色を元にもどす動きを同じフレームで作る。下記のような感じ。



このままだとずっとクルクルまわるだけなので、actionscriptを記述。

as用のレイヤーを作って1フレーム目と10フレーム目に　stop();　と記述。

続いてロールオーバー、ロールアウトで動くようにしたいので透明ボタンの追加。
ボタン用レイヤーを作って丸の大きさの透明ボタンの配置。
透明ボタンに対して以下のactionscriptを記述。

on (rollOver) {　　//ロールオーバー時の動き
if (_currentframe > 10) {　　//10フレーム以下の時にロールアウトしたら
gotoAndPlay(20-_currentframe);　　//20-（ロールアウトしたフレーム数）に移動
} else {　　//そのほかの場合は
gotoAndPlay(2);　　//2フレーム目に移動
}
}
on (rollOut) {
if (_currentframe < 10) {
gotoAndPlay(20-_currentframe);
} else {
gotoAndPlay(10);
}
}

フレームはこんな感じ。



ひとつのパーツとして使って
全体的に面白そうなFlashが作れそうですね。

和風・伝統模様なテクスチャ

Project DDさんで見つけましたのでメモ。

和風なサイトを作るときに隠し味的なところに使えそうです。

こういうの探してました。

直リンクは以下。

Fireworksの和風・伝統紋様テクスチャ

背景をFlashで動いてるように見せる方法

→サンプル

背景に動きを持たせたい。
スタイルシートのbackgroundで背景画像を指定するように動画を設置したい。

そんなときに使える方法を調べました。

最初はcssでswfを背景に指定するんかと思ったけど違うみたいですね。

positionでうまいこと位置を指定して背景に見せてる感じかな。

以下コード
------------------------------------------------------------------------------------------------------

[HTML]

<body>
<object type="application/x-shockwave-flash" width="550" height="400" data="index.swf">
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
<div id="content">
<img src="title.gif" alt="" />
<p>背景をFlashで動かすサンプルです。Flashの上に文字をのせることもできます。テキストはいるテキストはいるテキストはいるテキストはいるテキストはいるテキストはいる</p>
</div>
</body>

[CSS]

body{
margin:0;
padding:0;
position:relative;
}

object {
position:absolute;
top:0;
right:0;
z-index:0;
outline:none;
}
#content {
position:absolute;
top:30px;
left:30px;
margin:0;
z-index:5;
}

なにかとつかえそうですね。

資格取得スクールのサイトを制作しました

知人の紹介で福井と金沢にある資格取得スクールのサイトを制作させていただきました。



資格取得ならWeb通学システムのLEC金沢駅西校【提携校】&LEC福井南校【提携校】

赤を基調とした色彩となっています。

受講生が増えてくれるとうれしいです。