Fireworks4入門した
仕事場のPCに入ってる Fireworksは、Dreamweaverのおまけソフトだろうと思って 使ってなかったが、実はDreamweaverより使えるソフトだったらしい。
Dreamweaver4 (2000年リリース) は HTML出力ソフトなので、 HTML/CSS/文字コードへの対応で時代がちがうので、 今となっては使いにくい。
Fireworks4 (2000年リリース) は JPG/GIF/PNG を作成/編集できるという意味では 今使ってる画像形式と変わってない。全然使える。 (スライスやポップアップメニューで出力される HTML等はちと問題だけど、出力されたものを書き換えればいいかな？)
そこでソフト付属の文書で入門してみた。
[ヘルプ - レッスン]
デフォルトはベクターモード。
ビットマップモードのときは枠線が変わる。
ベクターオブジェクトのアニメGIFが簡単に作れる。
スライスはツールまたは[(領域)選択 - 挿入 - スライス] で作成する。レイヤで整理。
画像はFlickrから。
ロールオーバーは今はCSS の a:hover とかで作るよね？ Fireworks4ではJavaScript使ってる。―― Simple RollOverは画像をポイントしたらその画像がswapするのでCSSでできる。Joint RollOverは画像をポイントしたら、その画像以外が変化するので、これはCSSではできなくてJavaScriptになるのか……。すぐに「プレビュー」できるのは Fwのいいところ。
ポップアップメニュー。[挿入 - ポップアップメニュー]。これは「ブラウザでプレビュー」する必要あり。
色の置換。ベクターオブジェクトにしか効かなそう。
URLの置換。複数ファイルを自動的に複数開かせてそれぞれ書き換えることができる。
実行ヒストリからコマンドが作れる。
[ヘルプ - Fireworksヘルプ - チュートリアル]
グラデ塗り。
ベベルのエフェクト。
シンボル化。[挿入 - シンボルに変換 - 種類:ボタン] →ライブラリに追加される。そのインスタンスには左下に矢印マークが付く。
ボタンにテキストを載せる。ボタンをダブルクリックして、ボタンエディタで テキストツール [A]で入力。
整列。[修正 - 整列 - *方向中央揃え]
ロールオーバーを作成する。
['オーバー'タブ選択 - アップのグラフィックをコピー] ボタンの塗りとテキスト色を変える。
ライブラリから MyButtonをドラッグして配置。
ボタンのテキストを変更する。
[オブジェクトパネル - ボタンテキスト - (入力) Enter - 選択対象のみ]
リンクURLを設定。
ジョイントロールオーバーを作成のため、
まず レイヤー 'Disjoint rollovers Art' を作成して、そのレイヤーを選択したまま 'フレーム' を2つ追加する。'Check Cond' と 'Travel Log'。
そして、'Check Cond'フレームで [ファイル - 読み込み] して、読み込みポインタ(「 ←の形) で場所指定して読み込む。
ビットマップ画像をシングルクリック→オブジェクトとして選択。ダブルクリック→ビットマップ編集モードになる。 どこか別の場所をダブルクリック(または [修正-ビットマップモードを抜ける]) →ベクターモードに戻る。
セピア色にする。[エフェクト - カラー調整 - 塗りのカラー]
ドロップシャドウ。[エフェクト - シャドウとグロー - ドロップシャドウ]
同じエフェクトを別の画像にも適用。フレーム 'Travel Log' を選択して、画像を選択。['ヒストリ'タブでコマンドを選択 - 再実行]
ジョイントロールオーバーを作成。
まずフレーム 'Travel_Log'を選択して画像を選択。[挿入 - スライス]でスライスを作っておく。
次にフレーム1, レイヤー 'Buttons' で ボタンを表示して選択。フレーム 'Travel_Log'を選択して、ボタンのほうの中央の円をドラッグして画像にドロップ。
'プレビュー'タブで動作を確認する。
[ファイル - 書き出し] で HTML(JavaScript含む) と画像('スライスの書き出し'を選択しておく) が出力される。
