このページは「2007年04月」のエントリ一覧です。

flash10-完成

でっけた。
完成

MCをランダム表示
移動方向,速度をランダムで決定
徐々に描かれるアニメーション

どの課題もしっかり理解できて、そして思い通り作れた。
ちなみにこのキャラは落描き?で描いた即席インコさん。

さてflashはこの辺で良いかしらね。久しぶりにテンプレ作ろうかなー。

flash10-制作5

今日の課題は横反転と時間の計測。

まず1つ目、横反転。
これはxscaleを-100にすればOKらしい。
このMCでは変数rdm_movexの値がマイナスなら横反転をしたいんだから、
if( rdm_movex < 0 ){
this._xscale = -100;
}
これでOK!

続いて時間計測。
これはまずgetTimer();で現在の時間を取得して変数stoptimeに代入。
次に待ち時間を変数waittimeに代入。
そして再び現在の時間を取得。この現在の時間が最初に取得した時間+待ち時間以上ならOKってことだから、ASにするとこんな感じ。
stoptime = getTimer();
waittime = 6000;
if( getTimer() >= stopTime + waitTime ) {
OK!
}
バナーはほぼ完成。
デキはともかくだいぶ勉強になった感じだなぁ・・。
もうちょい細かいとこ変更して明日upup!

flash10-制作4

とりあえずキャラクターが描かれるアニメーションは完成。
ただ!ここで問題発生。

キャラクターの向いてる方向は右向きで固定だから、左方向に移動するとき( rdm_movexかrdm_moveyの値がマイナスだった場合 )後ろ向きで移動してしまう。
これは2つの変数のうちどちらか一つがマイナスならMCを横反転、って事ができればうまくいきそうだけど・・やり方が分からない。

もう一つ、移動するためのASをキャラクターのMC自身に書き込んでいるせいか、全て描き終わる前にMCが動いてしまう。というかいきなり動く。
これは時間を計って一定時間経過したら動きましょう・・と言う風にできれば良いんだけどなぁ。

この2つの課題さえクリアできれば一応の完成はしそう。月曜までに!

flash10-制作3

まとめその2
昨日のままだと思ったように行かない部分があったから、今日は修正とか。

シーンの1フレーム目に次のASを記述。
MC複製の際に使用する変数iと、ムービーの横幅と縦幅をそれぞれ変数に代入して保存。
i = 1; // 初期値
beginw = _width; // 横幅
beginh = _height; // 縦幅

続いて2フレーム目にはこれ。
昨日の1フレーム目に書いたASからfor文を取り除いたもの+α。
load_number = Math.floor(Math.random()*3)+1;
MC_set.attachMovie("circle"+load_number, "circle"+i, i); rdm_x = Math.floor(Math.random()*beginw)+51;
rdm_y = Math.floor(Math.random()*beginh)+26;
MC_set["circle"+i]._x = rdm_x;
MC_set["circle"+i]._y = rdm_y; rdm_scale = Math.floor(Math.random()*100)+51;
MC_set["circle"+i]._xscale = MC_set["circle"+i]._yscale = rdm_scale;
シーンの最終フレーム。
if( i == 15){
i = 1;
}else{
i += 1;
} gotoAndPlay(2);

昨日のものは1フレーム目でMCのcircle1~50を一気に作って表示していたけど、今日のは2フレーム目で"circle"+iを1個しか作らない。
ただシーンのフレームが最後に達したときにi+1をしたら2フレーム目にジャンプをする事で次のMCを作成。
今回同時に作られるMCは15個(i = 15)までとして、i = 15になったら1に戻してMCを上書きする。

最後に、flashの外枠を一番上に表示したいから、シーン上に配置した外枠に次のASを記述。
onClipEvent (enterFrame) {
this.swapDepths(999);
}

はぁ。ここまで辿り着くのに何時間かかったろうか・・。
画面の外にMCが移動すると_widthや_heightがどんどん大きくなっていくって事が分からなくて、ずっとそこで躓いてた。ムービーのデバッグをする事で変数とかの数字をリアルタイムで見れると知ったときは感動だったなぁw

明日はいよいよ絵の作成?

flash10-制作2

まとめその1
まずMCを3つ作って(MC_circle1~MC_circle3(テストなのでただの円画像)、それぞれにリンケージを設定。リンケージの意味は理解できてないけど、こういう時に使うものなんだと無理やり理解。
次に空のMCを作って(MC_set)、それをシーン上に配置。
シーンの1フレーム目に次のASを記述。
for (i=0; i
load_number = Math.floor(Math.random()*3)+1;
MC_set.attachMovie("circle"+load_number, "circle"+i, i);

rdm_x = Math.floor(Math.random()*(_root._width-150))+51;
rdm_y = Math.floor(Math.random()*(_root._height-75))+26;
MC_set["circle"+i]._x = rdm_x;
MC_set["circle"+i]._y = rdm_y;

rdm_scale = Math.floor(Math.random()*100)+51;
MC_set["circle"+i]._xscale = MC_set["circle"+i]._yscale = rdm_scale;

}

日本語訳
for (50回繰り返し) {

load_number = ランダムで1~3を抽出;
次のMCを読み込む("MC_circle"+上記の数字, "これが新しい名前", 深度);

初期位置のx座標 = ムービーの横幅=nとして、51~n-99の間からランダムに抽出;
初期位置のy座標 = ムービーの横幅=mとして、26~m-49の間からランダムに抽出; rdm_scale = 大きさ0.5倍~1.5倍からランダムに抽出;
横幅 = 縦幅 = rdm_scale;

}
ただこのまままだと円の画像は静止したままだから、MC_circle1~MC_circle3の円に直接ASを記述。
onClipEvent (load) {
rdm_movex = Math.floor(Math.random()*5)+1;
rdm_pm = Math.floor(Math.random()*2);
if(rdm_pm==0){
rdm_movex *= -1;
} rdm_movey = Math.floor(Math.random()*2)+1;
rdm_pm = Math.floor(Math.random()*2);
if(rdm_pm==0){
rdm_movey *= -1;
}
}

onClipEvent (enterFrame) {
this._x += rdm_movex;
this._y += rdm_movey;
}

日本語訳
最初に1回だけ実行{
rdm_movex = ランダムで1~5を抽出;
rdm_pm = ランダムで0~1を抽出;
rdm_pmが0ならrdm_movexにマイナス符号をつける rdm_movey = ランダムで1~2を抽出;
rdm_pm = ランダムで0~1を抽出;
rdm_pmが0ならrdm_moveyにマイナス符号をつける
}

このMCがシーン上にある限り常に実行 {
横方向の移動速度 += rdm_movex;
縦方向の移動速度 += rdm_movey;
}

骨組みは完成。
どうやら作るのが楽しいぞっと!

flash10-制作1

このまま次のステップに行くのもいいけれど、なんだかんだでこの2週間の間に身についた事もいくらかあるだろうから、最後のまとめとして今までのテーマを複数取り込んだバナーを作ってみる!

とりあえずの目標。
・予め用意したMCをランダムで表示 (しんしんと降る雪 より)
・そのMCは表示の際に少しずつ描かれていくようなアニメーションで (ドローイングイラスト より)
・MCの移動する速度、方向はランダム (これはサンプルに無かったかも)
・見た目が鬱陶しくならなければ背景をスクロール(画像ローテーション より)

あとは気まぐれで追加したりしなかったりと。
でっきるかな~。

flash9完成

TWENTY FOUR風ディジット完成。こんな感じかしら・・。
08計算機風ディジット

メモ。
・1~0の数字を対応するフレーム(1~10)に配置したMCを作成(影の部分)
・別のMC内に2つを配置して、直接ASを書き込む
 →0~10の数字をランダムで抽出、該当するフレームへgoto and stopで~の繰り返し
・暫くしたら指定した数字24を表示させて(左側の数字はフレーム2、右側の数字はフレーム4)繰り返し終了

ここまでがサンプルを参考に作ったもの、そしてここからがオリジナル

・数字のパーツ "|"や"-" もバラバラに配置したMCを作成(明るい部分)
・この部分は永久リピート
・指定した数字24が表示されたら横幅と縦幅をランダムで拡大して表示

これで24と表示された後に黄色いものがバナー上をうごめくように。
これは追加した"明るい部分"に繰り返しを終わらせるコードを書き忘れたらたまたまこうなったという失敗の産物なんだけど、もうちょい練りこめば昔の映画風の画面とか炎とか、色々と使い道がありそう。

さて、バナーの制作はこれで終わり。
明日からは・・どうしよう。

flash9-計算機風digit

突然PCが固まった・・この不安定の原因はメモリじゃなかった?
ケースを開けてみた。SATAケーブルが抜けていた orz
いや、むしろそんな原因でよかったと喜ぶべきか・・。

最後?のバナーは「文字を魅せる 08計算機風ディジット」
電卓みたいなアナログの文字がランダムで次々と変わっていって、最後に変数で指定した数字でストップするというもの。
このサンプルをみて「24」のオープニングを思い出した→これ

ってことで!
「TWENTY FOUR風ディジット」を作ってみるの巻。
ただし今日はまだ未完成の巻。
ちょっと忙しいかも、ゲームで・・!の巻。

flash8-伸びる棒グラフ

今日もPCは安定稼動。
でもまだ信用なんかしてないんだからね!

10伸びる棒グラフ

ほとんどとサンプルの原形をどめていない今回のバナー。
もともとこのバナーにはASが無かったから、精神的にだいぶ余裕をもって取り組む事ができたせいか(?)、自由に作れた。
そのぶん身についたことは・・無いのかも。

とりあえずメモ
・伸びるグラフを複数作る
・そのグラフを別のMC内に全部配置
・それをシーン上に置いたら、拡大とか移動とか好きなことさせて終了

うん、完璧。
そして今日は1回も下書き保存をしないで書いてみる我慢大会を実施中。

バナーはあと1個。か、0個。

メモリ購入

ようやく秋葉原でメモリを購入~。

今つけてるのはサムソンチップのバルクメモリ512M*2枚。
で、買ったのは同じサムソンチップのバルクメモリ1G*2枚を相性保証つきで21,008円。ついでに320GのHDDも買ったから約3万円の出費。交通費も考えればちょっと痛いけど、まぁこんなもんか。探せばもっと安い店もあるんだろうなー、あまり詳しくないから無駄に出費してそう。

さて、早速付け替えてチェックしてみたところ、Memtest86+を3周走らせてエラー無し、スーパーπ3355万桁も1時間20分4秒で完走。
今までは1周かからずエラーだらけ、1677万桁でブルーバックだったからだいぶ良い感じ。
ただ何も前触れも無く再起動がかかる恐怖と半年以上も戦ってきたから、常にビクビクしている自分がいる。これ書いてる最中も何度下書き保存した事かw
これがひとときの休息で終わりませんように・・。

flash7-バネ文字

今日は01拡縮文字/02バネ文字の2つをまとめて。

ダメ、降参。理解できなかった。
バネ文字に書いてあるASがほぼ全滅。謎すぎる。
 親のサイズ*減衰率+初期の横幅-現在の横幅*バネ文字の速さ
ってなんだろう・・?
なんだかもう限界超えたからコピペで終了。

ただ一つ大事な事を学んだ。
テキストはアウトライン化すべし!
てか常識ぽいね・・気をつけよう・・。

きっとあと1つか2つでバナー作りは終わり。

flash6-渦巻き

今日は11渦巻くカラーチップ

正方形がくるっと回転するシェイプアニメ(チップ)を作成。
チップを別のMC内に配置して、シーン上に置いたらASを記述。

・自身を1回だけ複製、深度+1
・初期のサイズとアルファ値を指定
・RGBの%をランダムで指定して色をつける
・1フレームごとにm度回転しながら、nだけ大きくなりつつ、nだけアルファ値を上げつつ、nだけ拡大。一定のサイズになったら削除。
・これを永久にリピート。
 ここではm=23 n=1.7

難し~。一応全てのASは理解したつもりではいるけど、なんか数学の参考書を一気に斜め読みした気分。
試験がない分公式は丸暗記でいいんだけど~、ねぇ、それじゃ身につかない。
しかしmyColorとかnewObjectとかオブジェクト?ってなんじゃいな。

flash5-雪

今日は10こなぁぁゆきぃいぃぃ

雪が降るflashはありきたりな気がするけど、初マトモなASということで挑戦。

中身。
空っぽのMCをシーン上に置いて、そこにASを記述。

・複数作った雪MCの中から1つをランダムで読み込む
・雪MCの横幅、縦幅、アルファ値をランダムに指定
・初期位置のx座標とy座標もランダム指定
・これをn回繰り返し

これで1回の処理。
今回のバナーではn=15にしたから、1回に15個の雪が降ってるハズ。
ただそのままだと1セット振ったきりで終わってしまうから、一通り処理が終わる辺りで再度同じ処理をする事で更にn個の雪を降らせる。
これを4回繰り返して絶えずバナー全体に雪があるような感じに。

小さいサイズの物ほどアルファ値も低くしてあるから、奥行きが感じられてとても綺麗。
最後一度に全部消えてしまうところが惜しいかな、そこをどうにかしたかった。けど無理だった。


初めて面と向かってASと格闘してみたわけだけど、んー、難しい。
サンプルを1行ずつ削除したり値を変えて、あーなるほどここがこう変わるのかぁと見た目で分かったとしても、だから何なんだ!とそこから先が進まない。だから応用が利かないんだよなぁ。
まーでもなんとかなるか!何でも楽しい今だからここで立ち止まらずどんどん進むー。

flash4-湯気

どっこいしょ 09立ちのぼる湯気

ASだらけのバナーの前に、簡単そうなのをもう1個発見。
雲の画像を縦に引き伸ばして、それをいくつか並べたらあとはローテーションさせるだけの湯気バナー。
これだけで湯気に見えてしまうなんて不思議。

今日の制作時間は約30分。簡単。
でも明日up予定のバナーは既に制作時間が2時間越え。リンケージってなんだ。深度ってなんだ。ASも訳分からん・・。

flash3-ドローイング

よいしょ 04ドローイング

バナーの枠を線が延びていくアニメーション。
これってマスクで徐々に見せていくのかと思いきや、普通に1コマ1コマ線を延ばしているだけ。
まぁこの程度の簡単なものだったらマスクでもいいんだろうけど、複雑な線を描くときはこっちの方が断然楽かも。
サンプルは複雑なやつだったんだけどね、仕組みさえ分かればいいやと作ったのはこんな超手抜きものw

さて、次からよくわからんASだらけのバナーに突入!
なんかもういっぱいいっぱいです。

flash2-ルーレット

今日は02画像ルーレット

画像をくるくる回転させて別の画像に・・というよく見るやつ。
これってただ画像の幅を細くしてるだけなのね・・たったそれだけの事で回転しているように見えるってのは面白いけど、からくりを知ってしまうとそれはそれでつまらないなぁって気がしないでもないw

制作時間30分、アクションスクリプトgeturlのみっていう単純なものだけど、いろいろと利用価値がありそうですなこれは。

flash1-ローテーション

今回から(?)ちょっと趣向を変えて、flashだけに的を絞って勉強してみる。
参考にするのはこの本。
FLASHで作る バナー広告見本帳

基礎から学ぶような本も買ってはいたんだけど、なんか違う?求めているような内容じゃないなぁって感じだったからこっちの本も買ってみた。
40以上あるサンプル全てのflaファイルが入ってるから、直接中身を見て知る事ができるし、なによりプロの作ったものを事細かく分析できるのが良さげ。
ただ本の方が不親切すぎてほとんど役に立たないから、結局flashの中身を見て自分で勉強するしか手段が無いのだけども。

手始めに作ってみたflashは01画像ローテーション
スクロールさせる画像を横に2つ並べて、左側の画像の位置を常に取得。
値が画像の横幅分移動したら、元の位置に戻って~のループ。
うん、簡単。
ifとかelseとかjavascriptっぽいから取っ付きやすかった。
今日は気持ちよく眠れそう。

Design7-南極(完成)

しんどかったー。
完成

今回の南極HTML版、大まかなレイアウトはこんな感じ。


logoとmenuはmainを基準に相対指定。
titleはmargin-left: 180px;で上記相対部分と重ならないように。その下は3カラムに分けてそれぞれfloatで回り込み。

これ自体はなんら難しい事ではないのだけど、何故か相対指定したmenuが言う事を聞いてくれないで参った。
メニュー部分は次の3つに分割。
.menu-top{
position: absolute;
top: 140px;
left: -50px;
width: 200px;
background: url(img/menu_bg_top.gif) no-repeat top;
}
.menu{
width: 200px;
background:url(img/bg.gif) repeat-y center;
margin-top: 50px;
}
.menu-bottom{
width: 200px;
background: url(img/menu_bg_bottom.gif) no-repeat bottom;
padding-bottom: 30px;
}
menu-topには背景上部の角丸を、menu-bottomには背景下部の角丸を、menuには真っ白背景を縦にリピートしてリストが増えても大丈夫なように指定。
これ自体そんな問題は無いはず(たぶん)。前回のインテリアのサイトを作ったときも同じことをやったし、このテンプレ全体の背景でも同じ事やってるし。
なのにmenu-topで指定した背景が見えない。

試しにmenuを消してみると・・表示された。もう一度menuを書いてみると・・消えた。
つまりmenu-topの上にmenuが重なってるから見えなくなるらしい・・。
そこでpadding-topやmargin-topでずらしてみたらIE6ではOK!が、firefox2では開きすぎて全体背景の青地が覗いてる。
小一時間の格闘後、結局menu-topの画像を縦長にすることで青地が隠れるようになったわけだけど・・なんか反則?
ついでにfirefoxでは文字を大きくすると左カラムのバナーが隠れる。
うーん、難しい。何か一つのブラウザに重点を置くってやり方はやだからなぁ。頭イタイ。

Design7-南極(制作3)

でけた!
南極

中身が汚すぎて知らない人が見たら理解するだけで数日かかりそうな感じだけど、今はまだ完成図にどれだけ近づけるかって所に重点を置いてるからと言い訳を添えての完成。
第一本人が理解できてない。

さて今回のテーマはこれで終わりじゃなくて、次はflash無しのHTMLで同じのを作ってみる。
勉強勉強!

Design7-南極(制作2)

全てをflashで作ろうなんて無謀だったかもしれない・・。

よく分からないでやってる内にファイルがあちらこちらに散らばってて、ムービークリップがゴチャゴチャ ビットマップがゴチャゴチャ トゥーンがゴチャゴチャ グラフィックがゴチャゴチャ  あのファイルはどこだっけ、あのASはどこに書いたっけ、ていうかこのファイル何!? と混乱状態。
欲しいファイルを見つけるのも一苦労で、やっとのことで見つけたとしても、あれ、何をやろうとしてたんだっけ?と忘れてる始末(ボケ

そもそもまともなスキルが無いくせにやろうとしてることがデカイんだよなぁ。。
ただここでやめるのは勿体無いし明日は結構時間取れるから、もう一踏ん張りだけして24時間後に強制終了ってことにしてみる。
なんか本買った方がいいかなー、やる気ある内に勉強しとかないと。

flashバナーその2

右サイドバーに新しいflashを追加。
この間作ったやつは恥ずかしかったから1日で消したけど、これは暫くほっとく予定。

flashはグラデーションのマスクができないとかって何かに書いてあったから、地面の反射はぼかした長方形をいくつか重ねて対処。
もっとスマートなやり方あるんでないかなぁ・・。

昨日書いた南極のテンプレはflashオンリーで挑戦!
頭の中に描いてる事の中でいくつかやり方のわからないものがあるから、そこでかなり手こずるかもしれないけど、とりあえずやるだけやってみる・・!

Design7-南極(制作1)

特に何も考えず、ただひたすら気の向くままに作ってたらこんなんでけた。
あと付けのテーマは南極。


HTMLで作るかflashで作るか迷うなぁ。
前者だったら左上の半透明ロゴを含めた背景一枚と、メニューをpositionで指定するだけでできそう?
flashだと・・どうすればいいのか見えてこない。先にflashで作ってみて、だめだったらHTMLに逃げ、って形がいいかな。
ペンギンカワユス。

Design6-家具(完成)

トップページ
コンテンツページ
完成。

思い通りに行かない時の対処法、何かおかしな時の原因をどれだけ早く見つけるかが何よりも大事だなぁって気がしたこの2日間。
ソースをだらだら書いてみる。

ページ全体をposition:relative; として、左カラムを position:absolute; left:0; で、右下のナビ(利用規約など)を position: absolute; right: 0; bottom: 0;で配置。
#left-clum{
position: absolute;
left: 0;
background: #fff;
width: 300px;
}
.navi-company{
position: absolute;
right: 0;
bottom: 0;
width: 150px;
background: url(image/fotter_navi.gif) no-repeat top center #d6bb9e;
padding: 10px 0 10px 10px;
}


左のメニューは上と下2つに分けて、背景には白とベージュ一体型の画像を配置。
更にそれぞれ左右にも分けて、float:left; で回り込み。
「インテリア」「小物雑貨」は背景画像にして、同じく「インテリア」「小物雑貨」のテキストを<h2>で囲ったらtext-indent:-9999pxでサヨウナラ。
.top-menu{
width: 300px;
background: url(image/menu_back01.gif) repeat-y #fff;
}
.bottom-menu{
width: 300px;
background: url(image/menu_back02.gif) repeat-y #fff;
}
h2{
text-indent: -9999px;
}


各リストは list-style:none; で消して、変わりに背景に葉っぱの画像。
この前 list-style-image を使ってズレまくったけど、こうやって背景に画像を使えば大丈夫?一応課題クリア~。
li{
background: url(image/list_image.gif) no-repeat left center;
list-style: none;
line-height: 1.7em;
padding-left: 20px;
}


上部の検索は空っぽform、カートは手抜きでただの画像。
.search{
float: left;
width: 290px;
background: #fff;
margin: 5px 0 0 5px;
}
.cart{
float: left;
width: 200px;
height: 85px;
background: url(image/cart.gif) no-repeat #9fcfa0;
}


中央のメニューは左右に分けてfloatで回り込み。
ここも左のメニューと同じく、<h5>でテキストを囲って-9999pxで画面外へ。
.center-left-menu{
float: left;
width: 250px;
background: url(image/menu_center01.gif) no-repeat top center #fff;
}
.center-right-menu{
float: left;
width: 250px;
background: url(image/menu_center02.gif) no-repeat top center #fff;
}
h5{
text-indent: -9999px;
}


最後に下にある「おすすめ新商品情報 」などのメニューは、文字を拡大or行数が増えても大丈夫なように、背景を3つに分けて指定。
.bottom-menu-top{
width: 330px;
background: url(image/menu_bottom01.gif) no-repeat top center #fff;
margin-top: 30px;
padding-top: 10px;
}
.bottom-menu-center{
background: url(image/menu_bottom02.gif) repeat-y center #fff;
padding: 5px 5px 5px 10px;
}
.bottom-menu-bottom{
background: url(image/menu_bottom03.gif) no-repeat bottom center #fff;
padding-bottom: 10px;
}


原因は分からないけどfirefoxでレイアウトの崩れる所があるから、応急処置でなんとか乗り切ったというか逃げた部分が2箇所。
本にCSSハックってのが書いてあったけどそういうのも覚えた方がいいのかな。。
今みたいに試行錯誤するのが楽しかったりもするのだけどw

Design6-家具(制作2)

今回のテンプレは明日出来上がりそう。
positionを思い通りに扱えて、floatも(意図しない所でも)使いまくってなんかややこしい構成になってきてるけど、それだけにちょっぴりスキルアップ感!
ただ完成図を作った段階でこんなにfloatが出てくるとは思ってなかったから、そこら辺が最初から見えてなかったのは問題。
行き当たりばったりで作ってるのです。

それはそうとトラックバックの受付開始を開始。
特に情報を発信しているわけでも無いのであまり必要性はなさそうだけど・・。

Design6-家具(制作1)

今まで作ってきたテンプレは企業を対象としたものであまり汎用性の無いものばかりだから、今度のテーマは個人のサイトにしてみる。
が!
気がついたらまたしても企業のサイト、家具を扱うECサイトになってた・・。

完成予想図 (トップページ / コンテンツ)
 

上部には検索フォームやカートを配置。これは当然上に置かないとね。
左カラムにはメニューとお薦め商品を2つ、そして中央にはもう少し細かく分類したメニューを。
最後にこの手のサイトはバナーが多いから、左カラムの下にデカイのを複数置いて賑やかし。ここが一番楽しくて、一番時間をかけてしまったのは何か違う気がする・・けどキニシナイ!

Design5-宇宙(完成)

とりあえずこの辺で終わらせてみる。完成

んー、なんだろう、デキがいまいちなのは当然だとしても、作り終えた感があまり無い。
たぶん作る前はもっとカッコイイものができると思ってたんだろうなぁ。ま、スキルが足らんかったのだ。何度も作ってるうちにも少しマシなものができるハズ。たぶん。

今回の問題点。
コンテンツを読み込む際の「Nowloading」バーが機能してないから、読み込み中に真っ暗な画面が暫く続く。
遅い回線だとフリーズしたか何かのバグかと思ってしまうから、たぶんこれを放置したままなのは致命的。
や、そもそもテキスト無しのflashオンリーでやってる事自体致命的!?

Design5-宇宙(制作4)

HTMLで言うところのIFRAMEのように、メニューをクリックしてflash内の一部を変えるにはどうすればいいのだろうと調べに調べ、ようやくそれが外部ファイルを読み込むだけという単純な事だと分かり、しかし出来上がったときには既に体力が尽きたような疲労感。だがそれでこそ素人、このブログの存在意義・・。

そんなわけで今回のflashも完成といえば完成。
ただあまりにもシンプルなデキだから、もうちょいエフェクトかまして見た目をごまかしたい。
今日で4日目、明日で5日目、ちょっと仕事が遅いのです。

Design5-宇宙(制作3)

あまり時間が取れない&動作重すぎのダブルパンチで作業が進まない。。

今日やった事は昨日とほぼ同じ、だけどメニューまわりはとりあえず完成。
内容をめもめも。

シーン内に配置してある各ムービークリップ内の画像


常にアニメーションしないように1フレーム目にstop();を記述。
2フレーム目にはラベル「XXX_over」をつけて、ロールオーバー時にここからアニメ開始。
そしてカーソルが重なってる間は常に繰り返されるように、15フレーム目にgotoAndPlay("XXX_over")を記述。
ただこのままじゃカーソルを離した後もずっと繰り返されたままだから、2-15フレームを16フレーム以降にそのままコピー(ラベルは必要ないけど分かりやすくするため「XXX_out」に変更)して、ボタンに

on (rollOut) {
gotoAndPlay (_currentframe+14);
}

を追加。これでカーソルが離れるとフレームが14移動。
つまるところ、ロールオーバー時は2-15の無限ループ、ただしロールアウト時は現在のフレームに+14して16フレーム以降にJUMP。
アニメーションは最終フレームに達すると1フレーム目に戻るから、そこでstop();が効いて繰り返しが終わる。。

これでホントに正解なのか、他にもっと単純なやり方があるのか分からないけど、不具合が無いってことはまぁ問題は無いんだろうなぁという結論。
しかしま~重すぎてストレス溜まる溜まる。今週中には秋葉原行きたいなぁ。

Design5-宇宙(制作2)

flashでナビゲーション制作中。。
メモリが死にかけてるからなのか、昨日からやけに動作が重い。
プレビューすると2回に1回はガガガ・・・と十数秒待たされて、こんなんじゃ根気が続かない、けどとりあえずメモ。

aboutやgalleryって書いたテキストをボタンにして、それを1つずつムービークリップ(MC)内に配置。
MCにはそれぞれロールオーバーやアウト時の処理を記述。
そしてそのMCを全てシーン1に配置。

こうすればそれぞれのボタンがロールオーバーやロールアウト時に独立してアニメ可能?
とりあえず簡単なやつを作って試した限りでは問題なかった。

今日はあまりできずこの辺で終了。水曜までには完成させたい・・!

Design5-宇宙(制作1)

次のテーマは宇宙。
というか今回テーマはどうでもよくって、ほとんどflashだけで構成されたサイトを作るのが目的。
だからレイアウトとかそういうのは何も考えて無いし、背景も分かりやすく真っ黒。
↓15分で作った予想図


右上のタイトルは普通に画像、残り中央部のギャラリー(たった3枚だけ)と、左のメニューはflashで。
全体的にもう少し小さくした方がいいかな、、flashは背景色を透過できない?みたいだから、2カラム構成?
まぁそこらへんは実際作りながら探るとして・・今回は1日じゃできないだろうなぁ。

デザインリスト

このリストで掲載しているテンプレートは
配布用ではありません。詳しくはこちら

オリジナル 参考
  • 1  2  3  4  5  6 
その他

ブログインフォメーション

カテゴリリスト

月別アーカイブ

同一アーカイブ内エントリーリスト

人気blogランキング