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

画像1枚でナビゲーション

CSSプロフェッショナルスタイルを参考にナビゲーションの制作。
今までナビゲーションの画像をロールオーバー時に変えたい場合は、通常時とオーバー時の2種類をリンクの数だけ用意してやってたけど、この本にはたった1枚の画像だけでできる方法が・・!
なんて最近じゃ良く使われてる手法らしいけどね~。ぬはは!もぐりじゃ。

ってことで作ってみた。
画像はこの1枚だけ。
完成ページ

うーん、ステキ。
ただ単にbackground-positionで弄ってるだけなのにね。こういうのを思いつく人って頭良いよなぁ。。

ブラウザの振り分け。。

ここ最近覚えた事のまとめ。

古いブラウザでCSSを適用させなくしようのコーナ~その1。
まずheader内にこれを書く。

<link rel="stylesheet" type="text/css" href="import.css" media="all" />
mediaをscreen以外にすることでネスケ4.xをはじく。
さらにimport.css内で、

@import "abc.css";
とすることでIE4.xもはじく。

この間「なんでこれらの古いバージョンをはじくのか分かんない」って書いたけど、古いものはCSSの解釈がいまいちで、そのままCSSを適用するとレイアウトが滅茶苦茶になってしまうかもしれないから、だったらCSS無しのプレーン状態の方がまだいいんじゃないの?ってことみたい。

でもIE4.xでもCSSを適用させたいんですけど!って時は、
@import "abc.css";

@import url(abc.css);
にすると適用されるようになる。

ただしこの@importってのは初期のネスケ4でフリーズするバグがあるから、これを使う場合は先に書いたmediaの属性を必ずscreen以外にするべし。
っていうのがこの間買った本から自分なりにまとめたもの。

今度は勝手に作ったコーディングコンテスト用のページでprint用のものを作ってみよっかな。楽しみw

放置オンライン

野球つくオンラインが始まってもうそろそろ2週間かな?
最初は一勝するごとにワクワク、溜まったポイントで選手カードを引くたびにドキドキだったのが、今ではただの放置ゲー。
する事といったら選手のオーダーを決めるぐらい。
今後大幅に内容を変更して再度βをするならまだ期待はできるけど、このままだと黒歴史になりそうな・・。

今日から弄り始めたのはここではちょっと公開できない(したくない)プライベートのサイト。
別に法や倫理に触れるとかそう言うんじゃない歴とした真面目なサイトだけど、だからこそ隠しておきたいのです・・。

まずはトップページから作り始め。いきなりテーブルが3箇所ってどうなんだろう。

番外編-まとめ

コーディングコンテストの参加者は応募する際にいろいろと書かなければならない項目があったみたいだから、既に終了していて更に勝手に作ってみたにもかかわらず書いてみたw

------------------------------------------------------------
■サイトURI
------------------------------+
http://hobbyblog.biz/design/CC01/index.html
http://hobbyblog.biz/design/CC01/products.html

------------------------------------------------------------
■CSSによるコーディング歴※
------------------------------+
半年
節税対策のような興味半分のような、そんな感じで年末ギリギリに買ったstudio8で遊んでたらハマッた。

------------------------------------------------------------
■作業環境関連のデータ(OS、オーサリングソフト、エディタ)※
------------------------------+
DW8
FW8
PaintshopPro6
TeraPad

WinXP,IE6,FF2,Opera9,NN7

------------------------------------------------------------
■おおよその作業時間
------------------------------+
index - 5-6時間
products - 同上

------------------------------------------------------------
■苦労した点
------------------------------+
まだ全てにおいて苦労しないと。

------------------------------------------------------------
■自由コメント
------------------------------+
2回目があれば参加したいなぁ。。本業でもなんでもないただの趣味でやってる事だけどw ------------------------------------------------------------

明日からはプライベートなサイトのリニューアル開始。
でもここでは中身を見せられない(秘密なサイト)ものだからどうすっぺか・・。

番外編-完成

3日前に買った本を見ながら最終調整。
ここにきてやっと"@import"の意味がわかったから、media="all"でネスケ4.xを除外、@import"";でIE4.xを除外。
でもでもこの2つのブラウザを使える環境に無いから、除外した結果を見れないのが悲しい。
/*html*/
<link rel="stylesheet" type="text/css" href="css/import.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/import_products.css" media="all" />

/*css*/
@charset "shift_jis";
@import "base.css";


あとはformの各要素にlabelを付加。これも今回始めて知った事なんだけど、こうやって文字とフォームに関連性を持たせることで、うん、どうなるんだ!
たぶんやらないよりはやった方がいいんだろうけど、どこを調べても書いてることが難しくてオイテケボリ・・。

最後はW3C Markup Validation ServiceさんにOKをもらって終了!
初めて生"Valid"を見たw

番外編-制作5

products.htmlは一部のロールオーバーと角丸を残すのみ。
あとバグのせいかブロックからテキストがはみ出したりしてるから、そこはCSSハックで対処するのがいいのかな?

ところで左メニューのリンク横にある矢印は、リンクの上にカーソルを重ねると色が変わるようになってるんだけど、
今までロールオーバーって言ったらマウスを重ねたテキストや画像そのもの自体にしかアクションを起こせないと思ってたんだけど、
ひょっとして背景を弄れば全く関係無い所でもアクションを起こせるんじゃないの?と思いついてやってみたら見事成功。

もちろんプロに言わせればこの程度は当たり前のことなんだろうけど、ふと思いついたものが実際にできたってのは力が付いた証拠かもしれない!?
やっぱこういうのって楽しいなぁ~。

番外編-制作4

productsページを製作中。
まだ左カラムとロールオーバー部分、各ボックスの角丸には手をつけてないけど、いろんな場所でindexページのCSSを流用できるから思ったより早くできそう。

今回ブラウザでの確認はIE6とfirefox2のみ。operaやNNはなんか怖いw
あとはここでsafariでのキャプ画像も見れるけど、このブログを通じて作ったものでは一度も使ったことがなかったかも。
プロじゃないんだしわざわざ確認する為だけにMacを買うなんてできないんだから、せめてこれぐらい使わないでどうすんだと怒られてもいい位のなまけぷり。
暇があったらやってみよう。。

CSSプロフェッショナル・スタイル

amazonのレビューで評判が良かったから、世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイルを買ってみた。

2005年12月発売の本だから「最先端」なものではないかもしれないけど、CSSの基本的な書き方からtips、実際にあるサイトのCSSから分析をしてみたりとなかなか面白い内容。
今まで迷って妥協してたところがこれで一気に解決できそう・・な気はする。うん、これはかなりいい本かもしれない。
なにより読んでて楽しいw

番外編-制作3

トップページ完成

目から鱗だったCSSでのロールオーバー箇所は、ロゴ,プライバシーポリシー,サイトマップ,最新情報の「過去の~」の部分,最新製品情報の灰色部分*3の7つ。
ただし一つ、「過去の~」の部分をOperaで無視される。
昨日もあれからいろいろと試したけど結局原因が掴めなかったから、ここだけJavascriptにしちゃおうかな~と思ったけど、それってスマートやないやん?ってことでこっちも無視!これでお互い様だ。ふはは・・orz

たぶんトップページの制作時間は5-6時間ぐらい。自分なりには早くできたかなー。でももう一つのページはもっとかかりそうだ・・。
あっ、次行く前にCSSファイルを複数に分けたほうが分かりやすいかしらん。

番外編-制作2

なんとなーくこんな感じで製作中。
トップページに関してはも少しで完成かな。

そんなことよりロールオーバーってJavaScriptを使わずにCSSでもできるんだねぇ・・。
参考「Masahiko Isshiki WEBSITE」さんのCSSによる画像切替(ロールオーバー)に成功!

いつもDreamWeaverで勝手にやってもらってたけど、こっちの方が断然スマートに思える。何よりソースが綺麗。
ただOperaではちょっとおかしな部分も・・まぁこれはいつも通りどこかで何かやらかしてしまってるんだろうorz
ま、どーしても解決できなければJavaScriptに逃げてよう、自動だから楽だしw

このトップページが終わったら次はproductsページ。
そしてこのブログのリニューアル。
あとはプライベートで運営してるサイトもリニューアル。
だいぶん力が付いた(と思ってる)からマシなものが作れるかな。
うーん、忙しい。

番外編-制作1&やきゅつくトレード

現在やくつくオンラインでトレード中。
今日からルーキーリーグに昇格したからトレードが解禁ってことで、参加者みんながトレードトレードと大騒ぎ。そしてその流れの乗っかってトレードを募集してみたら、個別メッセやメールやらが来てむちゃくちゃ忙しい・・。
でもひいきチームの選手が集まるのは嬉しいなぁ。例えそれがベンチウォーマー確定選手であってもw

さてさて、今作ってるのはコーディングコンテストのものだけど、これって勝手にupしていいのかという重大な疑問がw
ま、でも例えダメでも作る分には問題ないだろうから構わないんだけど、なによりなにより難しいorz
初めてz-index使ったし、覚えたてのCSSハックもいくつか使ったし・・それなのに(そのせいで?)あちこちボロが出てきてるから、たぶん大きな修正作業が必要と思われる・・。

んーんーでも良い勉強にはなりそうだ。

design12-完成

12作目、完成

上から順に、ロゴ画像、ナビ(緑)、空画像、ナビ(茶色)はフツーに配置。
そこにソファーの画像を相対で。

右下のNews部分も相対配置。
ここは縦が長くなっても大丈夫なように、いつものIDを3つ使ったやり方で。

が!問題なのはAbout部分。
ここもIDを3つ使ってやろうと思ってたんだけど、裏にある薄い背景画像をpositionで指定すると文字の上に重なっちゃう。
もしかしてここはz-indexの出番!?といろいろ試してみたけど、どれも文字の上から動こうとしてくれない。
結局背景は周りの枠を含めて固定という形で妥協。
firefoxで文字を大きくするとヤバス。。

番外編 - コーディングコンテスト

なかなか興味深いものを発見。
コーディングコンテスト Vol.1 ~Coder's High~

与えられたデザインを見ながら同じものを自分なりに作ってみようという趣旨の大会らしい。
もっとも既にコンテストは終わってるし、仮にまだ受付中だったとしてもまず参加に耐えうるレベルじゃないからスルーしてたと思うけど、だからこそ!今やってみるw

サンプルを見ながら作るって言うのは今やってる事と同じだけど、たぶん比較にならないぐらい難しいんだろうなぁ。
受賞者のソースをいくつか見たけどさっぱり理解できんかったし・・。

そうそう、ソースを見てみると<head>内に <link rel~~> ってのを沢山記述してる人が多いんだよね。
正直それが何を意味してるのかわかんないけど、たぶん見る側にとってやさしくするための配慮なのかなぁって気はする。
自己満で終わらせないためにはここら辺も覚えていかないとね。

これが終わったらこのブログのデザインも変えよかな~。


PS. 初totoBIG\(^o^)/オワタ

D12-li以下に2pxの隙間

にゅにゅ、またしても不思議な現象発生。
下の画像はナビゲーションの一部。


なぜか下側に2pxの隙間ができてる。
こういう時は画像の一番下の色(黄緑)を背景に指定すれば違和感なく見せられる、と本に書いてあったけど、いやいや違う、なぜこうなるんだと原因を探らなければ。

参考になったのは
BlurBlue-Note」さんの「<li>要素をinline化すると隙間ができる問題の回避策

ふむふむおぉなるほど・・改行すると隙間と認識されてしまうのか・・。
解決策はいくつかあるみたいだけど、ここでは最後のコメントタグを使う方法を使ってみる。
その結果~。


成功!
ホントいつもいつも大先輩方には(勝手に)助けられております。

D12-やきゅつくオンライン

やきゅつくONLINEのβテストに当選したから昨日からちょくちょくとやってるんだけど、やることが少なくていまいち盛り上がらない。

去年ハマリにハマッたファミスタオンラインは全部自分で操作できたから、ストライクゾーンがハチャメチャでも楽しめはしたけど、やきゅつくは操作できないゲームだからそれ以外の部分でしっかり遊ばせてもらわないとなぁ・・。
もっともβテストだからこれで完成って訳じゃないんだし、今後に期待はしてるんだけども。


さて、12回目は。
おなじみテンプレートモンスターの無料テンプレからNo.17。
今回は作る際に少しでも楽できるようにと、予め画像関係は全部作っておいた。ていうかこれが本来あるべき手順のはずなんだ。


なんか第9回と似てなくもない。

Design11- 完成

11個目完成~

昨日悩んでたところはShunさんに助けられ無事解決。
もしかしたら今までも似たような現象を直さずにスルーしてたかもしれない。。こりゃいかん。
CSSハック・・うむうむ、そろそろステップアップってことで調べてみようかなぁ。
ただ単に似たようなのを作ってるだけじゃ勉強も何もないし、徐々に徐々に奥深くへと潜り込んでいきましょい。

Design11- ID無視

あーもう参った。

下の画像は今回作ってるテンプレの一部分。


左側はIEで見たもの、右側はfirefoxで見たもの。
分かりやすくピンク色の背景にしたのはIDの #news で、その中に .leftNews と .rightNews の2つをfloatで配置してるんだけど、これをfierfoxで見ると・・ #news の高さがたったの10pxにしかなってなくて、その中にある2つのclassが外にはみ出してる。
しかもこの10pxの高さはpadding-bottom:10pxで指定しているものだから、この部分を削除すると #news は完全無視。なぜだ・・。

とりあえずは height を指定してその場はごまかしてるけど、これだと文字を大きくするとフツーにはみ出しちゃうんだよなぁ・・はふぅ。

Design11-ID名を分かりやすく

11回目はお馴染みの所からNo.39。
前回までのテンプレでID名が間違っていた事を反省して、今回からは誰にでも分かりやすいネーミングを心がけようと決意、そして検索。

参考にさせていただいたのは
CSS HAPPYLIFE」さんのもう、class名やid名で悩まないんだからっ!!
hamashun.com」さんのClass名とID名の命名規則
RED LINE」さんのclass名、id名の付け方

何かの本で"_"はダメって読んだ事があったからこれは意識して使わないようしてきたけど、その代わりに多用してきた"-"もIE3で読み取れないとの事・・。
ただ今現在IE3を使ってる人がどれくらいいるのかって事を考えればそんなに重要な問題でもなさそうだけど、別に"-"なんて使わなくても全く問題はないんだから今日からは一切使わずに、代わりに"-"以降の最初の文字を大文字で表記。

で、大まかなデザインはこんな感じ。


なんか・・カッコイイ。

Design10-完成

今日は母の日~。
プリザーブドフラワーってちょっと高めなのを除けば綺麗だし長持ちするし普通の花より好きだなぁ。
今年も喜んでもらえて良かった良かった。

10作品目、完成
前回作ったロゴを違和感無くはめ込むような色使いを、というのを裏目的として作ってたらどうも目に優しくない感じに・・。

今回はオールCSSって訳じゃなくって、右下の商品リストだけtableにしてみた。
こういうリストを表示するときはどっちがいいんだろう。重要な部分だけに崩れにくさを考えればtableかなぁ・・。
まぁ確実に言える事は、CSSで出来る事を別の方法でやってしまってはこのブログの存在意義が揺らいでしまうと言う事だ!

Design8,9-再

8,9修復完了。
HTMLは無事だったからIDとCLASS名を元になんとか作り直せたかも。
ただおかしな所が何箇所か・・これは初期Verにもあったのか、それとも修復Verの造りが雑すぎたからなのか・・まぁ初期に比べて雑なのは間違いないんだけどねw

こんな風に一度自分が作ったものを見直すと、間違ってる部分とか癖とかを知る事ができていいかも。
#footerを#fotterって書いてたりとか・・・今まで全部間違ってたよ orz

No.10は先送り~。

がぁぁぁぁぁ・・・

前回前々回のCSSが壊れてる・・。
Dreamweaverでページ上部の注意書きを直した時に壊れ?たCSSを上書きしてやってしまったらしい・・。

ググってみたらcorns blogさんの「Dreamweaver 8ファイル破損事故」やT-STUDIOさんの「CSSがごっそりと消える件」にまさにドンピシャな内容が・・確かにディレクトリ移動&ディレクトリ名変更をしたけどそれが原因・・便利な機能だけに今まで頻繁に使ってたけどまさかこんな落とし穴があるとは・・ショックすぎるorz

まぁ半ば遊びというか勉強がてらに作ってるサイトだから、誰に影響も無いだけマシと前向きに捉えることができるのだけど・・でも今日はやる気なくした orz

Design10-制作1

眠い眠い。油断すると寝てしまいそう。

記念すべき10作品目の講師としてお招きいたしますのはいつもと同じ無料テンプレからNo.10さん。
リンク張っとこうかしら。
テンプレートモンスター

大まかな構成はこんな感じ。


特にこれといって目新しいところも無く、ちっとばかしトリッキー(?)だった前回のと比べれば間違いなく簡単。
この程度なら躓くことなく余裕で完成できそうだ!(なーんて強がってみる)

Design9-完成

ワンセグを見るとあっという間にバッテリーが無くなる・・。
PCしながらワンセグを見てテレビも見てという贅沢な時間もそう長くは続かない・・。

さて、完成(CSS壊)。

ページ上部の水色部分は#header。
そして完全に場違いなロゴマークと右側のメニュー*3は共に相対指定。

その下のナビゲーションはliでリストにして、それをfloat:leftで回り込み。

そしてメインに突入。
まずナビより下全体を#main-columnで囲んだら白背景の#left-columnと黒背景の#right-columnをfloat:leftで回り込み。
ここで#main-columnの背景に白と黒を半々に分けた画像を指定して、更に背景色を黒にする。
これでどちらか片側がものすごく縦長になったとしても大丈夫だし、ウインドウを最大にしても右側をずーっと黒くできる。

で、肝心のposition。
葉っぱ画像の#welcomeはtop:0のleft:0。
真ん中のNEWS部分#center-columnはtop:0のleft:330px。
この#center-columnはテキストが長くなっても大丈夫なように、↓の様にIDを3つ作って対処。
<div id="center-top">
<div id="center-bottom">
<div id="center-column">
<p>このページは~</p>
</div>
</div>
</div>
#center-top{
position: absolute;
top: 0;
left: 330px;
width: 230px;
background: url(image/canter_top_bg.gif) no-repeat top left #aaa;
padding-top: 70px;
}
#center-bottom{
width: 230px;
background: url(image/canter_bt_bg.gif) no-repeat bottom #fff;
padding-bottom: 50px;
}
#center-column{
width: 230px;
background: url(image/canter_bg.gif) repeat-y #339967;
color: #fff;
}


うん、とりあえず大丈夫かな?
その場その場の対処療法的な部分も何箇所かあるけど・・見た目はまぁ良いんではなかろうか。ちょっとおふざけが過ぎたロゴ以外はw

Design9-制作2

携帯をW44Sに機種変してきた。Haru割りとポイントを使って315円!初ワンセグを鑑賞中~。

さてさて、今回のテンプレはなかなか手ごわい。今日しんどかった部分のメモ。clearは重要なのです・・。

#main-column内に#left-columnと#right-columnをそれぞれfloat:left;で配置。
widthも指定しているしこの部分は問題無し。OK!と思ったのに、暫くしてfirefoxで確認したらレイアウトがだだ崩れ。
こういう時にまず疑うべき所は・・やっぱりclearの記述忘れ。

#left-columnと#right-columnは背景の色が違うから、縦に長い方にあわせる為にツートンカラーの背景を#main-column全体に指定。
が!
firefoxで背景が表示されない。
試しに#main-columnに10pxのborderを指定したら、これまたレイアウトがだだ崩れ。
もしかしたら~と#main-columnの外にclearを記述したら無事解決。

これって・・IEをメインで使ってるからマズイのか!?

Design9-制作1

次は・・
前回と同じく無料テンプレートから、No.12を元にお勉強。
ちょっとややこしいかな。これもpositionが鍵を握っていそう。


構成


#naviの下は全体を#main-columnで括って、その中に#left-columnと#right-columnの2つをfloatで回り込ませて配置。
positionの基準はその#main-columnとして、オレンジ色の画像部分と青い#center-columnの2つを相対配置。
これでできるか・・!

Design8-完成

完成(CSS壊)

やっぱりpositionで手こずったー。
相対指定でウインドウを小さくするとNewsのボックスが左のテキストに被っちゃう、かといって固定は綺麗じゃない。
この完成Verでは左の画像とテキストをdivで括ってそこを基準とすることでなんとかまとめてはいるんだけど、これもウインドウを小さくするとあららのら。
リキッドデザインでも各ブロックの最低幅を設定できればうまく行くんだけどなぁ・・後でできるのか調べてみよう。

ていうか一番手こずったのは文章かもしんない・・。

Design8-制作1

眠い眠い。
寝正月に始まり寝GW。
世間が許すならこのまま寝2007でいたい。

新テンプレ制作の1つ目は簡単なものからいっとこうってことで、テンプレートモンスターの無料テンプレートNo.29を参考にしてみる。
テンプレ単体にリンク貼っちゃまずいよねぇ。。

さて、構成はコレ。



タイトル画像を中央寄せ。サイト名はH1で括ってtext-indent:-9999px;で画面外へ?
その下にあるナビゲーションも全体を中央寄せでH2。各リンクの横幅は一定じゃないっぽいから、padding一括でよさそう。

「Welcome~」の文字は画像かな・・どっちにしろH3。
下の画像とテキストはfloatで回りこみ。

問題は右側のボックス。
これは普通に相対指定するだけで良いのかなぁ・・というかそれしか思いつかないんでそれで。
ではぼちぼち作り始めますか。

先生がいないと

携帯より初投稿、しようと思ったら投稿画面のレイアウトがだだ崩れでやる気なくなった・・よっていつも通りPCからの更新。

どんなテンプレート作ろうかな~ってゲームしながら寝ながらテレビ見ながら考えてたら、何か参考にして作ったほうが良いんじゃないかという案が浮かんでしまった。
自分で考えて自分で作ってたら正解なんてないんだし、そして結局「こんなもんでいいか」って妥協で締めてるし、やっぱり何か目標となるものがあってこそ勉強になるのではないかと。
ただそのまま参考に≒パクって作ってしまっては著作権がどーのこーのとそんな問題がからんできそう。


で、調べてみた。
ホームページのレイアウトを真似たら著作権侵害になりますか?/OKweb
ホームページのレイアウトは著作物か/日本ユニ著作権センター
Webデザインと著作権/NEXTWISE

つまり、ロゴや画像、文章は当然アウトだけど、通常のデザインやレイアウトなら大丈夫。ただし凝ったモノを真似したらダメかも。という感じ。
その凝ったもの凝ってないものの境目ってのが微妙だけど、通常のサイトを作るだけならまぁ問題ないが、flash内のレイアウトやアニメーションをそのまんま真似するのはダメだろうと。

もちろん作ったものを配布する事はしないし、それでお金を獲るなんてありえない。作る際にもソースをコピーなんてしない。そもそもこのブログはテンプレートを公開する目的で存在してるんじゃなくて、CSSやflashにデザイン,レイアウトを勉強したその結果を載っけてるブログなんだし。だからまぁ問題は無いだろうと・・いや、でも問題あったら連絡くださいね・・。

と最後には弱気になってしまったけど、そんな感じで新章(?)スタート!

Flash本2冊目

新しい本を買ってみた。
Flashモーションデザインハンドブック

この間の「バナー広告見本帳」が中級者向け、こっちは初心者を脱した人向けという感じ。
そんな凝ったサイトを作るわけでもないし、一番使うであろうボタン関係の作り方を学ぶんであればこっちの本だけで十分かなぁ。

さて、明日からはまたテンプレ制作を再開。
ただ今まで見たいにテーマを絞って作るんじゃなくて、flashを効果的に使ったレイアウトのみのプレーンなサイトを作っていく予定。
勉強勉強。

昔の映画風flash完成

昔の映画風flashかんせーい。
完成

以下全部メモ。
各レイヤーはこんな感じ。


as - AS専用
noise - もやもやしてるノイズ
line - 縦線ノイズ
start_text - テキスト「下町探訪」
end_text - テキスト「素人のうぇぶでざいん」
photo - 写真

1フレーム目で変数の初期値を設定。
line = 0;
gettime = getTimer();
starttime = 4000; //4秒
endtime = 10000; //10秒
3フレーム目。
1フレーム目で取得した時間(gettime)から(starttime)秒経ったら4フレームへ。それまでは2-3フレームのリピート。
この間はstart_textレイヤーに配置した「下町探訪」のMCを表示。
if(getTimer() >= gettime + starttime){
gotoAndPlay(4);
}else{
gotoAndPlay(2);
}
5フレーム目。
1フレーム目で取得した時間(gettime)から(endttime)秒経ったら6フレームへ。それまでは4-5フレームのリピート。
この間はphotoレイヤーに配置した画像を表示。
if(getTimer() >= gettime + endtime){
gotoAndPlay(6);
}else{
gotoAndPlay(4);
}
そして6フレーム目でstop();
最後にlineレイヤーに配置した縦線フィルムノイズMCに直接書き込んだAS。
ここでは同時に表示する数は3本。
それぞれランダムに数字を取得して、横幅とアルファ値と表示位置を毎回取得、複製。
onClipEvent(load){
//フラグの初期化、同時に表示するライン数
flag = true;
if (_root.line >=3){
_root.line =0;
}

//複製時の名前
linename = "MC_line"+_root.line; }
onClipEvent(enterFrame){ //横幅とアルファ値
rdm = Math.ceil(Math.random()*5);
if(rdm == 0){
this._xscale = 100;
this._alpha = 40;
}else if(rdm == 1){
this._xscale = 80;
this._alpha = 30;
}else if(rdm == 2){
this._xscale = 50;
this._alpha = 20;
}else{
this._xscale = 0;
this._alpha = 0;
} //複製
if(flag == true){
this.duplicateMovieClip(linename,_root.line);
_root.line++;
flag = false;

this._x = Math.ceil(Math.random()*224);
this._y = 0;

}
}


思い描いたものができたことに満足。きもち~!

昔の映画

昨日の記事でflashはこの辺でいいかな~とか言っておきながら今日もflashを弄ってたり。

いま作ってるのは24風バナー のときになんとなく思いついた「映画風のflash」。
昔の無声映画みたいな白黒の風景に、フィルムノイズがピシピシっと走るもの。

フィルムノイズはduplicateMovieClipでコピーして、全体のもやもやしたノイズはアルファ値を低くした複数の雲画像をフレームごとに配置して、それをリピート。でなんとなくそれっぽく。
でもなんかしっくりこないなぁ。
ここは気分転換にゲームでもやって明日またいじってみよう・・!

デザインリスト

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

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

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

カテゴリリスト

月別アーカイブ

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

人気blogランキング