shirokuro331-log: 10月 2009

2009年10月25日日曜日

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

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

→progressionサンプル

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

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

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

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

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

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

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

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

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

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

2009年10月10日土曜日

ロールオーバーで反転する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の和風・伝統紋様テクスチャ

2009年10月8日木曜日

背景を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;
}

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

2009年10月3日土曜日

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

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

資格取得ならLEC金沢駅西校【提携校】-LEC福井南校【提携校】_1254541911048

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

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

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