Web Tech

説明その１：JavaScriptを使用したダイナミックテキスト。
JavaScriptの「ダイナミックスタイル」を使う。あんまし古いブラウザや古いホームページ作成ソフトでは表示が変わらない。（GoLive6.1もダメ）
テキストの色を変えるダイナミックスタイルの例は以下。グリーンのテキストの上にマウスカーソルがのると色が赤に、テキストからマウスカーソルが離れると再びグリーンに戻る。
ここのテキストカラーが変わる

＜JavaScriptを使用したダイナミックテキストのやり方＞
ここのテキストカラーが変わる

テキストにリンクを設定するには、 fontタグの外にリンクタグをつける。
このテキストは色が変わるし、押すとYahooに飛ぶ

<a href="http://www.yahoo.co.jp/">このテキストは色が変わるし、押すとYahooに飛ぶ</a>

これもjavascript「onmouseover=」を利用。中にテキストのある複数の四角形の画像を使用してナビゲーションバーを作成。この場合、マウスが乗った時のイメージと乗ってない時の同じ大きさの画像各1枚、合計6枚のイメージを作らないとならない。また、色を変更したり字体を変更する場合は作り直しが必要。

ヘッダにjavascriptを記述、Bodyにリンクや使用イメージを記述するがHP作成ソフトだと楽に作れる。
　→GoLiveの場合はイメージをドラッグしてそのイメージのインスペクタから「ロールオーバーイメージ」で設定
　　→DreamWaver8の場合はプルダウン「挿入」から「イメージオブジェクト」「ロールオーバーイメージ」で設定

説明その3：CSSスタイルシートを使用したダイナミックテキスト。

多くの Webページでは、「説明その２」のような中にテキストのあるカラーの四角形のイメージを使用してナビゲーションバーを作成しているが、CSS を使用すれば、必要なのはリンクしたテキストとフォーマットだけ。（上のリンク、もとは「Yahooに飛ぶ」「Googleに飛ぶ」「exciteに飛ぶ」という文字をスペースで区切ってリンクが貼ってあるだけ。通常の書体設定で太字や影文字を設定する感覚で「Navigation」を設定すればこのように表示されるようCSSに記述する）CSS側では「Navigation」にdisplay: block プロパティで四角形の色や大きさ、ブロック幅、書体等を設定すれば、個別のイメージをわざわざ作っらなくても効果的に四角形を作成できるのでしごく簡単。変更も容易だ。

そもそも「CSSスタイルシート」とはワープロやDTP、プレゼンテーションソフト等で言うところの「書式設定」、あらかじめ特定のドキュメント形式（タイトル、見出し、小見出し、本文、リンクなど）に対応するフォント（書体）やサイズ、色、インデント等）を任意のスタイルとして登録した書類を作り、Webページはその「書式設定」を参照するように設定すれば、意図したスタイルで表示される便利な機能。

個別にCSSを記述しても良いがHP作成ソフトだと楽に作れるが.....。
→DreamWaver8の場合は僕のMAC_G5(OS10.4.9)でもG4PowerBoolでもチュートリアルどおりにやってもCSSが全く適用されない。しかもこんなに高いソフトなのにサポートは有料だそうな....。ガルルルル！！！　完成品のソースを見てチェックしたら、こっちにはヘッダーに<link href="任意の名前.css" rel="stylesheet" type="text/css">とある。なんで試しに手動で書き込んでみたらOK。....ったく頭から3回もチュートリアルを試してしまった！！

説明その4：FLASHを使用したダイナミックテキスト。

やり方：Flash 8 pro （マック用）

この時、一番最初の階層はデフォルトで「シーン１」。そこに「Yahooに飛ぶ」と書き、それをシンボル変換する。その時のタイプは「ボタン」（Yahooに飛ぶ　ボタン）。シンボルに変換するには矢印ツールでオブジェクトをクリックして選ばれてる状態（上の画像で「Yahooに飛ぶ」が青い線で囲まれてる状態）でプルダウンメニューの「修正」から「シンボルに変換」を選ぶ。

「シーン１」上にあるその文字（オブジェクト）をダブルクリックして開くと、タイムラインの上に表示されてる「シーン１」の次の階層が「Yahooに飛ぶ　ボタン」になっていなければダメ。

こう表示されてる状態で更にシンボル変換する（ここが重要！）。この時にタイプを「ムービークリップ」名前を「go_Yahoo黄色表示」にする。文字をダブルクリックして開くと、階層が「シーン１」→「Yahooに飛ぶ　ボタン」→「go_Yahoo黄色表示」になっている事を確認！！こうなっていない場合、何かがマチガイ！！「ウィンドウ」から「その他のパネル」「ヒストリー」を選ぶとそれまでやった作業の全部のリストが出る。アンドゥするたびに１ステップずつ戻るので正しい所まで戻ってそこでSAVEしてから続きをやろう。

次にライブラリ上にある「go_Yahoo黄色表示」が選択されてる状態でライブラリのメニュー（わかりにくいけどライブラリウィンドゥ右上にある小さな四角いメニューのアイコン）から『複製』、名前を「go_Yahoo赤色表示」タイプをムービーにする。これをWクリックしてから、左側のツールパレットで「A」を選択して文字入力モードにして「Yahooに飛ぶ」と表示されてる部分をなぞり、下に表示されてるプロパティウィンドウ内、文字サイズの右側にあるカラーパレットから赤を選ぶ。

→ライブラリウィンドウにある「Yahooに飛ぶ　ボタン」と「go_Yahoo黄色表示」（ムービー）、「go_Yahoo赤色表示」（ムービー）をそれぞれクリックしてみるとライブラリウィンドウの確認表示エリアには「go_Yahoo黄色表示」の時は黄色い文字で「go_Yahoo赤色表示」の時は赤い文字で表示が確認出来る。

　で、「Yahooに飛ぶ　ボタン」をダブルクリックするとタイムラインの表示が変わる。

「アップ」の下の黒い部分を長押しするとサブメニューが現れるので「キーフレームの挿入」を選ぶ。
　同様に、「アップ」の下も「キーフレームの挿入」、「ダウン」の下は「空白キーフレームの挿入

次に「オーバー」をクリックし「修正」から「シンボルの入れ替え」を選ぶ。

「go_Yahoo赤色表示」をクリックし「OK」を押す。

タイムラインとドキュメントウィンドウの間にあるアイコンから「オニオンスキンを表示」を選び、「Yahooに飛ぶ」が表示されてる状態で四角形ツールでその部分（ヒットエリア）を塗りつぶす。

リンクを貼る：
シーン１に戻って「Yahooに飛ぶ」を選ぶ（青いワクで囲まれてる状態）。タイムラインの横には「シーン１」が表示されてる状態。プルダウンメニューの「ウィンドウ」から｛アクション」を選びアクションスクリプトの記述画面で以下のように記述する。（Yahooにリンクする例）

のは覚えるのが面倒なので、「ウィンドウ」から「ビヘイビア」を表示、＋を押して「Web」「Webページへ移動」を選ぶと例としてマクロメディアのURLが表示されるのでそこをYahooのアドレスに書き換えてOKを押すと自動的に上のアクションスクリプトが生成される。

ここまでの操作を「Googleに飛ぶ」、「Exciteに飛ぶ」に対しても同様に行う。

JavaScriptやCSSでも似たような事が出来るがなぜクールなサイトはFLASHを使うのか？？

　　→FLASHの場合、テキスト表示と言えども、動画が可能！！
　　→スワップ時にフェードインが出来たり、なんか一味違う印象を与えるエフェクトが可能。

....って事かなぁ。もくろみとしては、マウスが上に乗ると赤に変わるだけじゃなくフェードインで色が変化したり、使い方によってはクールなエフェクトも使えるって事！！

ただし、もしもくろみどおりこの文字自体がムービングにするような時には、更にもう一つ深い階層が入って来る！（例：「シーン１」→「E.BASS-01ボタン」→「E.BASS-01白色表示ムービー」→「E.BASS-01白色表示」）階層がおかしいとこの先、訳が分からなくなるすので、注意！

これで Flash ドキュメントが完成したので、次はFlash ドキュメントを Web ページにパブリッシュしなくちゃならない。

ドキュメントを SWF ファイルとしてパブリッシュするには :

[ファイル]-[パブリッシュ設定] を選択。またはステージ下のプロパティウィンドウにあるパブリッシュ[設定] を押す。
[パブリッシュ設定] ダイアログボックスで [形式] タブを選択し、[HTML] および [Flash] チェックボックスのみがオンになっていることを確認。（普通はデフォルトでこうなっている）
（これは、Web ブラウザでの表示用に SWF ファイルと HTML ファイルのみパブリッシュする設定。）

[パブリッシュ設定] ダイアログボックスで、[Flash] タブを選択し、[バージョン] メニューで [Flash Player 8] が選択されていることを確認。（この設定により、SWF ファイルが Flash 8 形式で書き出される。）

[HTML] タブを選択し、[テンプレート] メニューから [Flash ムービーのみ] が選択されていることを確認。
これは、Flash ドキュメントをブラウザに表示する非常に単純な HTML ファイルのみ生成する設定。

[パブリッシュ] をクリックします。ついついここで[OK] を押しそうになるが[パブリッシュ] をクリック！！
ドキュメントの SWF ファイルバージョンと HTML ファイルが、作業対象の FLA ファイルがあるフォルダに保存される。

[OK] をクリックして [パブリッシュ設定] ダイアログボックスを閉じる。

[HTML]の　＜objyect＞から＜/objyect＞までをコピーして表示させたい部分に貼る。貼ったあとデザインビューでフラッシュのマークの部分をダブルクリックするとswfファイルの格納場所を指定するダイアローグが現れるのでそこで指定してやればやっとOK !!

私の場合、Studio8を買ったのでFLASH8proとDreamWeaver8は同じパッケージだ。にもかかわらず、FLASH8proで作成したオブジェクトを DreamWeaver8に貼り付けると以下のメッセージが出る。メッセージにしたがって「はい」をクリックするとIEでもSafariでもFLASHを貼った部分が何も見えなくなる。「いいえ」ならオッケーだ。