Flash webサイトは、視聴者の注目を集め、サイト上のユーザーエク Flash webサイトは、HTML、PHP、ASPまたは他の言語で開発された通常のテキストコード化されたwebサイトとは異なります。 X座標とY座標に基づいてオブジェクトを配置し、オブジェクトに何をするか、またはタイムラインに基づいてユーザーがFlashサイトをどのように移動す
このFlashチュートリアルでは、Adobe MacromediaのFlash CS5、CS5simply standing for Creative Suite,5th editionを使用して、非常に基本的なFlashウェブサイトを作成する方法をお教えします。 それでは、始めましょう。
1. 最初のステップは、Flashでワークスペースを作成することです。 フラッシュを開き、画面の上部にある”ファイル”をクリックし、”新規”を選択することから始めます。 以下のようなウィンドウがポップアップ表示され、どのような新しいドキュメントを作成するかを確認できます。 このFlashチュートリアルでは、”ActionScript2.0″を選択し、Flash開発者が作業するのを少し簡単にしてから、”OK”をクリックします。 これにより、空白の白い四角が画面に表示されます。
2. ここから、ステージのサイズを幅790px、高さ630pxに変更します。 これを行うには、プロパティウィンドウを選択し、サイズプロパティの横にある編集ボタンをクリックすると、これに似た新しいウィンドウがポッ そして、我々はそれにしている間、のは黒に私たちの背景色を変更してみましょう。
3. 今、私たちは私たちの文書は、我々はそれを望むようにサイズを持っていることを私はそれを保存することをお勧めします、簡単な目的のために、私は ファイルを保存したら、先に行くと、”ホーム”をインポートしてみましょう。jpg”画像ので、我々は我々のフラッシュサイトの背景を設定することができます。 これを行うには、上部の[ファイル]をクリックし、[インポート]の上にカーソルを置き、[ライブラリにインポート]を選択します。 これはあなたが”サイト画像”フォルダに移動し、”ホーム”を選択するためのボックスを開きますポップします。jpg”。
ライブラリにインポートしたら、それをステージにドラッグしてから、配置タブを使用して中央に配置し、ステージの下部に配置します。 整列タブが開いていない場合は、トップバーの”ウィンドウ”に移動し、”整列”を選択します。
4. 物事を整理するために、タイムライン上のこの層”bg pic”の名前を付けてみましょう。 これを行うには、”レイヤー1″をダブルクリックし、その名前を変更するのと同じくらい簡単です。 私たちは私たちの背景画像レイヤーの名前を付けた後、我々は我々のコンテンツのための別のレイヤーを作成します。 これを行うには、いくつかの方法があります：あなたは行くことによって、上部のメニューバーからそうすることができますInsert–Timeline–New Layer;または”bg pic”レイヤー名の上
先に進んで、あなたのタイムラインに三つの新しいレイヤーを追加し、上部、”ナビゲーション”、”フッター”、および”コンテンツ”から始まり、”bg pic”が下部のレイヤーであ そして最後に、その上のロックアイコンに対応するそのレイヤーのドットをクリックして、”bg pic”レイヤーをロックしましょう。 タイムラインは次のようになります:
5. Flashウェブサイトナビゲーションを作ってみましょう。 “ナビゲーション”レイヤーのフレーム1をクリックします。 これは、ステージ上に配置されたものはすべて”ナビゲーション”レイヤーに移動することを意味します。 ツールバーから”T”extツールを選択し、Flashサイトに必要なページリンクごとに個別のインスタンスを作成することから始めます。 このフラッシュデザインでは、私は六つのページ、ホーム、約、ブログ、リンク、FAQと連絡先のために計画しました。 それでは、これらのリンクごとに6つの個別のテキストインスタンスを作成して、次のようなステージを作成しましょう:
6. “ナビゲーション”層にこだわって、今先に行くとボタンにこれらのテキストブロックのすべてを変換してみましょう。 テキストブロックをリンクに変換するには、変換したいテキストをクリックするだけで、青いボックスがテキストをフレーム化して選択したことを 次に、選択したら、右クリック（またはMacの場合はクリックを制御）して、「シンボルに変換」を選択します。
7. “シンボルに変換”を選択すると、新しいメニューが表示され、どのようなシンボルに変換したいのか、シンボルに名前を付けたいのかを尋ねられます。 それは私がいつもシンボルが何であるかで名前を接頭辞にしたいフラッシュでシンボルを命名することになると、それはあなたが大規模な、より複雑なフラッシュサイトを構築するために、単純なフラッシュのウェブサイトを作るから行くと、ライブラリで見つけることが整理され、簡単に物事を保つのに役立ちます。 ボタンの場合、私は通常接頭辞”bu”を使用するので、私の”ホーム”ボタンの場合、私は私のシンボル”buHome”という名前になります。 については”bubabout”、ブログは”buBlog”などになります。 先に行くとボタンにあなたのテキスト要素のすべてを変換します。
8. 私たちは私たちのボタンに適用しようとしているホバー効果は、テキストと黒に白から変化するテキストの後ろに白いカラーボックスになるだろう。 のは、”buHome”から始めましょう。 私たちのボタンに素敵な間隔を与えるために、我々はステージの上からステージと8pxダウンの左手マージンからで私たちの”buHome”20pxで開始するつもりだ。 これを簡単に調整するには、”buHome”ボタンをクリックしてプロパティウィンドウに移動し、”位置とサイズ”の下でX座標を”20″に、Y座標を”8″に変更します
さて、”buHome”ボタンをダブルクリックしてタイムラインがどのように変化するかに注意してください。 あなたはまた、数字が私たちのメインステージにあった各フレームの上のテキストに気づくでしょう、これらは私たちが設定できるボタンの属性です。 我々は、単一の”アップ”フレームから私たちのタイムラインを展開することから始めましょう、それは今、単に右クリック（またはコントロール+Mac上でクリッ
9. 今、私たちは”ヒット”の下に新しいキーフレームを持っていることを先に行くと、私たちは私たちの視聴者がリンクをフォローするためにクリックできるよ これを行う最も簡単な方法は、フラットな画像になるまでテキストボックスを2回分割することです。 これを行うには、「ホーム」テキストを選択し、Control+Bを2回（またはMacではCommand+Bを2回）押します。 あなたはそれが個々の文字に分解離れてテキストを分割する最初の時間は、二度目は平らな画像であり、あなたのターゲットヒットボックスを上に広
テキストを分割したら、ツールバーのテキストツールの下にある四角形ツールを選択し、”ホーム”という単語の上に四角形を作成します。 「ヒット」ゾーンは視聴者には表示されず、クリックしてリンクをたどることができるlive areのみを定義しています。 私は私の”ヒット”領域を設定するとき、私はそれが突き出て、背景色とブレンドしないように不快に明るい色を使用するのが好きな理由です。
10. 次に、”Down”属性と”Over”属性のキーフレームを挿入しましょう。 “ダウン”は”アップ”と同じままになりますが、我々は”アップ”効果を変更したら、我々はキーフレームを分離するためにそれらすべてを分割しない場合、それは”ダウン”
すべての属性を個別のキーフレームで取得したら、”オーバー”効果に取り組むことができます。 これを行うには、テキストの後ろに白いホバーブロックを配置できるように、新しいレイヤーが必要になります。 だから、”レイヤー1″をクリックし、”レイヤーを挿入”を選択します。 新しいレイヤーが表示されたら、テキストの後ろにカラーブロックを表示したいので、”レイヤー1″の下にドラッグする必要があります。 そして、”Over”状態の間にのみ表示したいので、”Over”状態と”Down”状態のために”Insert keyframe”を実行してください。
これで、”レイヤー2″の内側の”Over”状態をクリックしてボックスを描くことができます。 私は、単語の左右に20pxのマーキングが素敵に見えるだけでなく、Flashウェブサイトナビゲーションボックスの黒い部分全体を垂直に埋めると思います。 これを行うには、テキストよりも40px幅のボックスが必要なので、テキストをクリックすると52.85px幅が表示されます。 私たちのナビゲーションバーの黒い領域は、私たちのボックスも同様に37pxの高さでなければならないことを意味し、37pxの高さです。 長方形ツールを選択し、プロパティウィンドウに移動し、塗りつぶしの色を白（#FFFFFF）に設定し、ストロークの色を設定しないで、ボックスをドラッグします。 ドラッグした後に微調整が必要な場合は、クリックして選択し、プロパティウィンドウに移動して幅を92.85、高さを37に変更するだけです。 次に、それを所定の位置に移動するには、X座標が-20に設定され、Y座標が-8に設定されていることを確認してください。
ボタンを作成する最後のステップは、”レイヤー1″の”Over”状態をクリックし、テキストを選択し、プロパティウィンドウの色を黒（#000000）に変更することです。 これまでにすべてを正しく行った場合、ボタンステージは”Over”状態でこのようになります。
先に行くと、あなた自身でボタンの残りの部分を行うことができるかどうかを確認してください。 あなたの次のボタンは、ホバー効果を可能にするために、あなたの前のボタンの右側から40pxの間隔を空ける必要があることに注意してくださ このための簡単な計算は、幅+X座標+40です。 すべてのボタンが同じY軸を維持するように、Y座標は8のままにする必要があります。 そして、あなたの”ホバー”効果は、あなたのテキストよりも40px広く、左右に20pxの余白があるはずです。 あなたの”ホバー”正方形のX座標とY座標は常にX：-20とY：-8でなければなりません。
どのようにフラッシュのウェブサイトを作成するには、Flashのウェブサイトのサイトはこれと一致していますか？
そうでない場合は、心配する必要はありません。 確かにそれはボタンの配置の誤算でした。 ここにあなたのための少しチートシートがあります。ホーム:X=20
About:x=112.85
Blog:x=206.85
Links:x=289.7
FAQ:x=379.25
連絡先：x=461.75
そして、覚えておいて、それらのY軸は常に8でなければなりません。
まだプロジェクトを保存していない場合は、プロジェクトを保存するだけでなく、ボタンが正常に動作しているかどうかを確認するために、これまでに行ったことをエクスポートするのにも適しています。 あなたの編集可能を書き出すため。flaファイルに.webブラウザで読み取り可能なswf形式は、ファイル–エクスポート–ムービーのエクスポートのいずれかに行くことができます。 または、ショートカットキーを使用して、windowsマシンではControl+Shift+Enterを、MacではCommand+Shift+Enterを押します。
11. 今どこかに行くためにそれらのリンクをプログラムすることができます。 “BuHome”をクリックし、”アクション”ウィンドウを選択します。 [アクション]タブの右上隅に、その横に「コードスニペット」のアイコンが表示され、そのアイコンのすぐ右側にある別のアイコンが表示され、魔法の杖のよ ボタンを機能させるために必要なActionScriptを記述するのに役立つので、ワンドをクリックしてください。左側の
はスクロールボックスになります。 「Timeline Control」をダブルクリックしてメニューを展開してドロップダウンし、「goto」をダブルクリックします。 これにより、メニューが右に表示され、より具体的な質問が表示されます。 まず、「Go to and stop」ラジオボタンをクリックし、シーンはそのままにし、タイプの下で「フレーム番号」を「フレームラベル」に変更し、フレームの下に「ホーム」を入力します。 それだけです。
今先に行くと、あなたのボタンの残りのためにそれを行うが、”フレーム”名は、あなたがプログラミングしているリンクと一致する必要があります。 たとえば、Aboutボタンのコードを開発しているときは、”Frame”の横にあるボックスに”about”と書くだけです。
12. 私たちのタイムラインの後者の層の下に私たちの方法を作業し、次のアップは”フッター”でなければなりません。 このために、私たちはちょうど私たちのサイトの下部を閉じて、それに少し余分な美学を与える方法として、いくつかのソーシャルメディアのリンクで基本的なフッターを作成しようとしています。 しかし、我々はフッターに飛び込む前に、我々はそれで行われていると誤ってその層に何かを台無しにしたくないので、のは、先に行くと私たちの”ナビゲーション”
私たちのフッターのために、私たちは30pxの高さだと私たちのステージの幅にまたがる60％の不透明度を持つ黒い長方形を作成するつもりです。 これを行うには、まず”フッター”レイヤーのフレーム2にいることを確認します。 すでにそこにいる場合は、ツールバーから長方形ツールを選択し、長方形をドラッグするだけです。 ステージ上に三角形ができたら、それを選択してプロパティウィンドウに移動し、上記の属性を入力することで、簡単に完璧に編集できます。 次に、適切な形状のサイズと不透明度を取得したら、「整列」ウィンドウに移動して、長方形に「水平中心を整列」と「下端を整列」するように指示できます。
13. さて、最初に私たちのライブラリにそれらをインポートすることにより、私たちのフッターにそれらのソーシャルメディアのアイコンを追加してみましょう。 あなたはステップ3からこれを行う方法を覚えていない場合は、私はあなたにヒントを与えるでしょう。 ファイル-インポート-ライブラリにインポートします。 そして、あなたは”電子メールをインポートしたいと思っています。png”、”facebook.png”、および”ツイッター。png”です。
彼らがあなたのライブラリに入ったら、先に行って、あなたのステージにドラッグします。 それらを配置する場所は個人的な好みですが、私は右下隅に私のものが好きです。 私のY座標は606に設定されていますが、私のX座標は次のとおりです。
Facebook:X=715
Twitter:X=740
Email:X= 765
14. あなたのソーシャルメディアサイトにアイコンをリンクしたい場合は、プロセスは、我々が行ったナビゲーションボタンと非常に似ています。 リンクしたいアイコンをクリックし、”アクション”ウィンドウを開きます。 今回は「Timeline Control」に行くのではなく、「Browser/Network」に移動して「getURL」を選択します。 これにより、これに似たメニューが選択され、対応するURLを適切なボックスに入力し、リンクを開くウィンドウ（現在のウィンドウ、新しいウィンドウなど）を選択する必要があります。
15. 今、私たちはあなたが先に行くと、それをロックすることができます私たちのFlashウェブサイトのフッター層で行われていることを、我々はコンテンツに フッターのように、我々は60％の黒の背景と不透明度を持つ別の長方形をドラッグすることによって開始するつもりです。 この長方形を幅355px x高さ483pxにして、サイトの右側にx：395Y：77でネスレします。 これらの変更を適用するには、”プロパティ”ウィンドウの下で行うことを忘れないでください。
長方形を適切なサイズに設定したら、エッジを柔らかくして少し磨きます。 これを行うには、長方形を選択し、画面上部のメインメニューバーの”変更”に移動してから、”形状”を選択し、”塗りつぶしのエッジを柔らかくする”を選択します。 これは、あなたのエッジを柔らかくしたいのですが、どのような距離とステップ数を尋ねる小さな新しい画面をポップアッ 私は10の距離、4つのステップと拡大は私たちのためのトリックを行う必要がありますと思います。
16. 長方形の上にテキストを入力するには、テキストボックスも作成する必要があります。 これを行うことは、ボタンを作成するために行ったことと、長方形を作成する方法の組み合わせです。 ツールバーから長方形ツールを選択し、ステージ上のボックスをドラッグします。 私は私の周りに10pxの余白を許可したので、私のテキストボックスは幅335px×高さ463で、X：405とY：87に座っています。
あなたのテキストボックスが作成されたら、あなたが好きなテキストを入力することができます、私はちょうどスポットを埋めるためにいくつかのLoremイプサムを入力するつもりです。
17. 私たちのFlashウェブサイト上のホームページが作成され、私たちの全体のFlashサイトがほぼ作成されます。 ここからは、フレームラベルと私たちの次の5ページを作成したいとしています。 タイムラインに戻って、他のすべてのレイヤーの上に新しいレイヤーを作成し、”アクション”という名前を付けます。 レイヤーが作成されたら、”アクション”レイヤーのフレーム2をクリックし、プロパティウィンドウに移動します。 “アクション”フレーム1がまだ選択されている状態で、”プロパティ”ウィンドウの”ラベル”の下にある”名前：”というラベルのボックスに”ホーム”と入力します。 “アクション”のフレーム1の下に小さな赤い旗を見ているものがポップアップ表示されます。 これは、私たちのホームページがタイムライン上にあり、今から”buHome”がここを指す場所であるため、フレーム1が”home”とラベル付けされていることを意味します。 また、このキーフレームの下にフレームを追加してタイムラインを展開すると、フラグの横に”ホーム”と表示されます。
フラッシュウェブサイトがすべてのページをまっすぐに再生しないようにするには、各フレームで停止するように指示する必要があります。 “アクション”フレームのフレーム1がまだ選択されている場合は、ボタンをプログラムした”アクション”ウィンドウに戻ります。 また、ボタンと同様に、タイムラインコントロールを使用してサイトに”停止”するように指示します。 だから、先に行くと、サイトがフレーム1で停止することを知っているように、”停止”をダブルクリックします。
18. 私たちのフラッシュのウェブサイト上で次の5つのページを作成するには、簡単です。 まず、フレーム2に新しいキーフレームを挿入します。 これを行うには、”アクション”のフレーム2をクリックし、”bg pic”のフレーム2にドラッグして、すべてのフレームを強調表示する必要があります。 次に、右クリック（またはMacでControl+クリック）して、「キーフレームを挿入」を選択します。 あなたは、我々は今、私たちのタイムラインのフレーム2に取り組んでいるので、それはだ、フレーム2に移動したタイムラインを垂直に実行される赤の
我々はすでにflashウェブサイトを作る方法を学び、すべてを作成するすべてのハードワークを行ってきたので、今は正しいページに対応するために少し編集 私たちの第二のリンクは”約”であるので、フレーム2を私たちの”約”ページにするのが最も理にかなっています。 まず最初に、アクションのフレーム2をクリックし、プロパティに戻り、これに”about”という名前を付けましょう。 その後、ホームページで行ったようにここで停止するように指示する必要があります。 だから、”アクション”のフレーム2を選択して、”アクション”ウィンドウに戻り、タイムライン制御の下で”停止”をダブルクリックします。
今、あなたの”コンテンツ”レイヤーのフレーム二つを選択し、それはあなたがあなたの約ページに欲しいものと一致するようにテキストを編集します。 あなたがそれを終えたら、先に行くと”bg pic”レイヤーのロックを解除し、その画像を削除します。 画像が削除された後、インポート”について。jpg”あなたのライブラリに、ステージにドラッグし、”整列”ウィンドウとプレストを使用して、ステージの水平方向の中央と下部にそれを整列させます！ あなたのページはこれに類似しているべきである。
今、あなたはフラッシュウェブサイトの専門家であることを、あなた自身で最後の四つのページを作成 再度エクスポートし、ナビゲーションをテストして、リンクが適切なページに移動するかどうかを確認してくださ
Flashが複雑すぎると感じている場合は、Wixの無料のドラッグアンドドロップサイトビルダーを使用することをお勧めします。
著者について: フリーランスのwebデザインと執筆分野で十年以上で、スコット*スタントンは、過去十年間、業界で最もホットなデザイントレンドと曲がりの鼓動パルスに彼の指を持っていました。 スコットは定期的に書いていますWix.com 無料のウェブサイトビルダー。