基金訓練webデザイン講座34日目
今日のFLASH
- スロット
あいかわらず、Illustratorのグラデーションが苦手。
今日のところはべた塗りで我慢。
Illustratorでボタンを2つ作る。（通常のボタンと押した後の凹んだボタン）
※IllustratorからFlashにボタンを持ってくるときの注意
新規シンボル（ボタン）を作成して、ボタンの（アップ）の位置にIllustratorのボタン（通常のボタン）を、（ダウン）の位置に凹んだボタンをコピペする。
- 急に止まる文字（ぼかし）
「急に止まる文字」はクラッシックトゥイーン＆フィルターの“ぼかし”を使っている。この場合はX:100px、Y：0で水平方向にぼかしをかけている。（文字を選択して「プロパティ」から「フィルター」→「ぼかし」を選ぶ。）ぼかしは写真のクロスフェードにも使える。
- 回転するトランプ
CSS レイアウト時の注意
CSS レイアウト時の注意
- float する要素には「display:inline;」をセットで記述（→floatした要素のmarginが2倍になるという有名なバグを回避。）
- float する div 要素と、全体を囲む div 要素には width を指定（→なんかカラム落ちする〜 という時はこれで一発解決することが多い。）
- 画像に変な隙間ができる、と思ったら対象の img 要素に「vertical-align:bottom;」（→画像周辺の変な隙間がなくなることが多い。CSSの頭でresetしておくといい。）
- よく使う要素は「zoom:1;」をデフォルトで指定して hasLayout の値を true にしておく（→hasLayout が false であることによって発生する IE 固有のバグのほとんどがこれで回避可。）
- よくわからないけど、何故か表示が崩れる場合は、とりあえず怪しい要素に「position:relative;」を指定してみる
（講師ブログ参照）
パソコン遠隔操作ソフト
基金訓練webデザイン講座31日目
面談も終わり、今日から後半に突入。
時間も限られているので、今後の仕事の方向性を定め、そのために必要な技術を見極め、それを確実に身につけていかなければ。
あと、そろそろソフトもバージョンアップ時かな。。今後の稼ぎための投資だと思えば安い？！
JQuery lightboxをカスタマイズ
index.html内のcss、cssフォルダ内のcssファイルやjsフォルダ内のjquery.lightbox-0.5.jsをいじって見た目を変えてみる。ソースがいろんなところに記載されているのでちょっとめんどう。
jquery.lightbox-0.5.js をカスタマイズ
デフォルトは下記。まずはココをいじってみる。
- 「オバーレイ色」25行目→overlayBgColor: ‘#000′
- 「不透明度」26行目→overlayOpacity: 0.8
- 「拡大後の枠幅」36行目→containerBorderSize: 10
- 「拡大スピード」（1000が１秒）37行目→containerResizeSpeed: 400
- 「上の空き」142行目→(arrPageSizes[3] / 10)
「上の空き」については、“[3] / 10”の分母の“10”を“30”に変えてみると、上のスペースが少し狭くなった。相対的なので、見た目をみながら数字を変えよう。
※167行目にも同様の記載があるが、こっちは触らない。
Sexy LightBox
- Sexy LightBox
- LightBox系のJavaScriptライブラリ。
- アニメにあった動き（ぼよよ〜ん）、角マルフレーム。
- 「jquery.lightbox」と混在できる。
その他のlightbox
※上記2つのlightboxは「jquery.lightbox」と混在できないので要注意！
simpleviewer（Photoshopのプラグイン）
「おぉ！！」授業で実際に使ってみてビックリ！
こんなに簡単にこんな動きができるなんて、スゴイ！！
家でやろうとしたけど、うちのPhotoshopはCS2。
学校から持ってきたダウンロードZIPは合わないので、ダウンロードしようと
ページを探したけど、どっから落としたのかさっぱりわからなくて断念。。
ここのサイトちょっとわかりづらい。。
- PostcardViewerで作ったのがコレ>>
- “SimpleViewer”はCS5では学校のノートPCでは使えませんでした。
（画面の縦幅が600（？）以上ないと実行ボタンが見えない。→ モニターの解像度を変えれば可。）
基金訓練webデザイン講座30日目
授業も早いもんで今日で30日目。授業の日数は数えてみたら61日間。
早くも半分が過ぎようとしています。後半もあっという間に過ぎてしまうんだろうから、限られた時間を大切に、目的をもって集中して授業に臨もう。
Photoshopでカンプ（comprehensive layout）作成
久し振りのカンプ作成でまごまごしてしまった。これではいかん。授業中にも紹介されてたデジハリの本が気になる。→早速Gano君が紹介していたので、ポチッっと買っちゃいました。
文字
- 文字の大きさ（読ませたい→14px、約款とか→12px、読めない→10px）
- メニューの文字は白文字を使うとプロっぽく見えない。
（→薄いグラデーションに濃い文字を乗せるのがベスト。）
- 写真と文字の間は1.5文字は空ける。（→2文字は空き過ぎ）
ガイドを数値で指定
- 表示→新規ガイド（水平方向、垂直方向で指定）
- 見にくい場合はガイドの色を変更[Ctrl]＋[R]
- ガイドをロック
この機能、初めて知りました。便利です！
Photoshopでパノラマ写真
- ファイル→自動処理→フォトマージ
- 横長の写真（光が同じもの）、方向を少しずつ変えて何枚か撮る。
JavaScriptライブラリ
rollover.jsを利用したナビゲーション
- http://www.dnolan.com/code/js/rollover/
- マウスオーバー時点での画像名（_oを付ける）：「xxx_o.jpg」
- 画像にclass名をつける→class="imgover"
- rollover.jsのソースをコピペしてjsフォルダに入れる。
- index.htmlの内にrollover.jsへのリンクを記述（）←（※HTML5で記述しているのでtype属性を省略しています。）
jQuery Lightbox
- zipをダウンロード。（jQuery Lightbox）
- 授業では、解凍したらフォルダ（jquery-lightbox-0.5）ごとXAMPPの中に作ってあるjavascriptフォルダに入れて、Dreamweaverで作業。
基金訓練webデザイン講座29日目
Flashで写真のスライド（タイムライン）
まず最初のムービーはイージングで写真を動かす方法。
モーショントゥイーンで写真を画面ステージ右端から左端へ動かします。
Flashで写真の減速スライド（ActionScript）
こっちは授業で動かなかった。。メインのボックスに画像を5枚くっつけて入れるという作業が抜けていた。
ムービー作成時の注意
- 一度ステージに読み込んだ大きい写真はシンボルに変換したら、ステージから消す。
- 新たに新規シンボル（ムービー）でメインのボックス（main_MC）を作ってそこに5枚の写真を繋げて入れる。（ネスト構造）
- ボタンの役割をするサムネイルはシンボルに変換する時、ボタンではなく、ムービークリップを選ぶ。
基金訓練webデザイン講座28日目
個人面談＆就活情報
- 1時間目は面談と昨日の復習（JavaScriptの画像置換）
- 求人情報に記載されている本当の意味を知ること。
JavaScript&Dreamweaver
JavaScriptで別ウインドウを開く
こちらが作ったもの>>
Dreamweaverだと簡単に作れるけど、画像置換程ではないが、余計なソースが書かれてしまう。
FlashでActionScript
まだ、ActionScript2.0だというのに、すでにかなり難しい。。
これから3.0になったらついていけるのか？？
とりあえず、ソースを書き写して、ムービーが動くということでOKとしよう。。
