フルFLASHサイト作成のポイントと注意点

このQ&Aのポイント
  • フルFLASHサイト作成のポイントと注意点をまとめました。メニューの背景切り替え、ローディング、コンテンツの切り替え、背景の拡大縮小、スライドショーの作成などについて説明します。
  • フルFLASHでサイトを作るためには、アニメーションやアクションスクリプトの基礎知識が必要です。また、最新のactionscript3.0を使用するか、簡単なアニメーションやアクションスクリプトだけで作るかによって、省エネ性やユーザー側のデメリットが異なります。
  • フルFLASHサイト作成におけるハードルは高いですが、HTMLやCSSの知識があるなら取り組むことができます。しかし、フルFLASHサイトはSEO対策には不向きであり、ページ表示の遅さやモバイルデバイスへの対応などにも注意が必要です。
回答を見る
  • ベストアンサー

フルFLASHサイトの作り方を教えてください。

はじめまして。 今、フルFLASHでサイトを作りたいと考えています。 いろいろな書籍を読みあさってはいるのですが、どれもひよこや熊などのイラストを動かしたりする手法は乗っているのですが、肝心のサイトつくりが身についていません・・・ 今までHTMLやCSSのサイトは何度も作成してきたので知識はあるほうだと思うのですが、FLASHについてはホームページのTOPに使用する簡単なモーショントゥイーンによるアニメーションは作成できるのですが、ボタンによる動作やアニメーションの組み合わせ?はまったくです。 やりたいことはシンプルだと思うのですが・・・ 1)メニューをクリックすると背景画像がスムーズに切り替わる 2)ローディングを作りたい 3)中のコンテンツ(テキスト画像のみ)が中のボタンをクリックするとスムーズに切り替わる 4)背景がウインドウサイズに合わせて拡大縮小する。 ※できれば5)スライドショー?のようなページも作りたい 以上のみになります。 これくらいでも(よくわかってないのですが)ハードルは高いのでしょうか? そもそもアニメーションと簡単なアクションスクリプトだけで作ったものと最新のactionscript3.0のような技術で作られた省エネ?FLASHサイトの違い、特に前者のユーザー側にとってのデメリットってなんでしょうか? 質問が長文になってしまいましたが、どうかよろしくお願いいたします。

noname#64096
noname#64096
  • Flash
  • 回答数1
  • ありがとう数26

質問者が選んだベストアンサー

  • ベストアンサー
  • BlurFiltan
  • ベストアンサー率91% (1611/1754)
回答No.1

> どれもひよこや熊などのイラストを動かしたりする手法 言わんとされている雰囲気はわかります。 しかしそれは, 絵の描き方の基礎 と それを使った動き だと思いますしそれが基礎です。 また,もしそれがちゃんとできるのでしたら, ひよこや熊などをカッコイイ写真に置き換えれば良いだけです。 つまりひよこや熊を 描いて 動かす ことよりも, カッコイイ写真などを動かす方が 描く 手間が少なくなる分, Flashとしては簡単(作成レベルを下げること)になります。 ただし, ひよこや熊を動かしていてもセンスは上がりませんから, その辺のセンスは実際のサイトをたくさん見るとか, 写真雑誌を読むとかWeb雑誌を読むとかして身につけないとならないと思います。 つまりFlashとは離れた書籍などを読んで修行する必要があると思います。 たとえば次のページには, ひよこや熊までにも至らない「ボール」の色々な動かし方が書いてあります。 「モーショントゥイーンと効果」 http://1art.jp/flash2/chapter/3/3.htm →拡大・縮小  Startボタンを押せばボールが拡大します →明度  Startボタンを押せばボールが白くなります →着色  Startボタンを押せばボールの色と位置が変わります →アルファ  Startボタンを押せばボールの透明度と位置が変わります →詳細  Startボタンを押せばボールの透明度と色と位置が変わります > 1)メニューをクリックすると背景画像がスムーズに切り替わる 上サイトの「アルファ」にある ボール を写真に置き換えればできるでしょう。 ボールでそれができなければ写真でもできません。 ステージ上に置いた(読み込んだ)写真は(描いた絵も同じく), グラフィックシンボルにもムービークリップシンボルにも変換されていませんから, とりあえずステージ上に置いた写真をグラフィックもしくはムービークリップに変換して, それを動かせば(透明度を変えれば)良いと思います。 もう少し凝ったもので写真を使った説明もあります。 「写真の出し入れ(4)」 http://www.flashiroha.com/motion/p_transfer/phototransfer4.html 写真を使って説明されてはいますが,結局「ボール」と同じです。 > 2)ローディングを作りたい 「Now Loading Flash」などとGoogleなどで検索してみてください。 http://www.google.co.jp/search?hl=ja&q=Now+Loading+Flash&lr= ものすごくたくさんの Now Loading の作り方や, そのまま使用可能なサンプルが置いてあります。 > 3)中のコンテンツ(テキスト画像のみ)が中のボタンをクリックするとスムーズに切り替わる 「中のコンテンツ」をムービークリップ内に作成し, 上の「アルファ」のような原理でムービークリップ内でスムーズに切り替えるようにして, そのムービークリップにインスタンス名を付けてムービークリップ内のタイムラインを MovieClip.gotoAndPlay(?); させれば良いのではないでしょうか。 その他色々方法はありますが,ボールでも熊でもひよこでも同じです。 > 4)背景がウインドウサイズに合わせて拡大縮小する。 Flash を HTML に貼り付けるとき, px ではなくて % で貼り付けると基本的に Flash の中身はすべて拡大縮小します。 もっと色々とカスタマイズしたい場合は,次のような方法もあります。 Flashゲーム講座&ASサンプル集【表示に関する情報について】 http://hakuhin.hp.infoseek.co.jp/main/as/stage.html ↑出てくるのは ひよこ や 熊 のようなキャラと格子の背景ですが, この辺も他のものに置き換えて考えれば良いと思います。 そんな感じです。 結局 Flash を動かす動かし方の説明なんて, カッコイイ写真を使っても使わなくてもすることは同じです。 ボールでできれば写真でもできる。 写真でできればボールでもできる。 カッコイイ写真などで誤魔化される説明より, シンプルなものでの説明の方が良いと思いますよ。

noname#64096
質問者

お礼

ありがとうございます。 お礼が遅くなり申し訳ございません。 一度ボール?を中心に基礎から勉強してみます。 まだ、アクションスクリプトが全く理解できていないのですが・・・ とにかく頑張ってみます。 本当にありがとうございました。

関連するQ&A

  • モーショントゥイーン

    FLASH5を使用しています。 モーショントゥイーンでアニメーションをさせた後のフレームにキーフレーム若しくは 空白フレームを挿入するとモーショントゥイーンが続いてしまいます。 まったく別のアニメーションを作成したいのですが、どうすれば新しいモーショントゥイーンを 作成することが出来ますか? 作っているのは、ボタンロールオーバーで指定したラベルに飛び、アニメーションをさせるというものです。 レイヤーを変えれば簡単なのですが、あまりレイヤーを増やしたくないのです。

  • flashのローディング率とトゥイーンの同期

    制作環境Flash CS3、初心者です。 flashのローディング画面を作成しているのですが、 flashのローディング率とモーショントゥイーンの動きを同期させることは可能でしょうか? 具体的には、メーターのようなイメージを作成し、 その針が読み込み率の0~100%に同期してメーター画像のの0~100の部分を進んでいくという感じです 。 (わかりにくかったらすみません) このようなしくみはどのように作れば良いのでしょうか?よろしくお願いします。

    • ベストアンサー
    • Flash
  • Flashでのアニメ作成について

    FlashMXを独学で使っています。今回アニメを作成するに当たって、画像をイラストレーター(V.10)で作成し、Web保存し(gif)、FirewoksMxで書き出しFlashに読み込んでいますが困ったことに、背景画像(レイヤー)の上にキャラクターの画像(透明gif=別レイヤー)を重ねると輪郭(黒)の縁の背景に重なる部分がが白くにじんだ感じで出てしまいます。やむなく画像作成の段階で背景とキャラクターを合成して読み込んでいますが、キャラクターをモーショントゥイーンで動かしたいのでできればキャラクターを独立した画像にしたいのですが、どうすればいいのでしょうか?また、Flashアニメ(キャラクターの動き)をスムーズに作成するための参考になるサイトをご存じの方は教えてください。ちなみにアニメと言ってもごくシンプルなアニメです。単純な背景の上を2等身キャラが歩くだけのアニメなのですが。

  • 画像の背景が・・・(FLASH)

    FLASH MXで画像をアルファで徐々に透明になるようにしているのですが そこでちょっと困ってます。 FLASHの背景は白ではなくオレンジです イラストレータでマットをオレンジで透過GIFで書き出して FLASHで読み込み、貼り付けたまでは背景と一体化しているのですが モーショントゥイーンを設定して再生すると 画像の背景が少し薄くなって四角い画像が入っているのがばればれで どの方法でやってもうまくいきません。 ひとつだけ、イラレで直接FLASHにコピペした場合はうまくいきます しかし、フォントが読めないとか指定してもえらく細くなったり とうまくいきません。 何か方法はないでしょうか?よろしくお願いします。

  • Flash ASを使った画像フェードの方法について

    Flash ActionScriptを使った画像フェードの方法を教えてください つい最近、興味をもってFlashを始めている初心者です。 Flash Proffesional CS5を使って複数の画像をじわーっと変えるようなFlashを 作りたいと思っています。 分からないながらもいろいろ試行錯誤したところ、モーショントゥイーンで アルファを設定することで希望するフェード効果が得られるようになりましたが、 これをモーショントゥイーンではなく、ActionScriptをつかって実現する方法を 教えてください。 現在は添付画像のように作っており(説明用の画像で実際のものではありません)、 画像1の始まりをフェードインするところからスタートして、15フレーム目、画像2に 遷移するときに画像1と画像2がフェードで切り替わり、同じく画像2と画像3が フェードで切り替わり、そして最後35フレーム目に『gotoAndPlay(6);』のアクション を設定して画像1へループさせているのですが、このループ時にも画像3から画像1へ 切り替わるときにフェードさせたいのです。 いろいろ調べたりしているのですが、とっかかりが掴めずに困っております。 なにぶん始めたばかりでわからないことだらけなのですが一生懸命頑張りたいと 思っております。どなたか方法について教えていただければ幸いです。

  • モーショントゥイーンの作り方について

    Flashでアニメーションを作成する時に2つのキーフレームを作成後、間のフレームを選択してモーショントゥイーンを行いますが、プロパティパレットの「トゥイーン」を「モーション」に設定する方法と、キーフレームの間のフレームを右クリックして「モーショントゥイーンを作成」を選ぶ方法とでは、タイムラインの表示(キーフレームの左側に実線が表示される)が違ってきます。 昔からこの2つの違いが分からなくて悩んでいます。 これは、何がどう違うのでしょうか? よろしくお願いします。

  • flashのみのサイトを作りたいのですが・・

    flashのみで構成されているサイトを作りたいと思い、いろんな初心者用サイト、本などを見てみました。 が、アニメーションの基本やボタンの作成、ある程度のスクリプトなどばかりが書いてあるものばかりでした。 人によっていろいろな作り方があるというのはわかるのですが、 全体の構成というか、ページ階層の振り分け方や、 もっと具体的に書いたもの(例えば実際に10ページくらいのフラッシュサイトを作る過程)などが詳しく載っているものはないのでしょうか? ボタンや、アニメーションなどの部品では作れるのですが、実際に1つのサイトを作るとなるとページ移動の際のボタンなども含めた全体のアクション等で混乱しまいます・・ それとも、この質問自体がおかしいのでしょうか?^^; 初心者でもわかるような、解説サイトや本などありましたら教えていただけないでしょうか? よろしくお願いいたします。

  • Flashの質問です。

    こんばんは。 Flashについて質問させていただきます。 オブジェクトがそのオブジェクトの中心を軸にして90度回転するアニメーションをつくりたいのですが、モーショントゥイーンで行うと、回転終了時にがたついてしまいます。 位置がずれてしまっているのだと思い、回転前と回転終了時のオブジェクト位置を調整してからトゥイーンを設定しても、やはり回転終了の1つ前のフレームから回転終了のフレームにかけて位置がずれてしまっています。 そのため、回転している最中(モーショントゥイーンで補正されている部分)に回転軸がずれているのだと思うのですが、ずれずにすむ方法(軸を固定する等)はありますでしょうか。 使用しているソフトはFlash CS3です。 使い始めたばかりで不慣れなため、自分の求めているアニメーションを作るのにこの操作であっているのかも確信がない状態です。 もしかすると初歩的な質問かもしれませんが、よろしくお願い致します。

  • モーション&シェイプトゥイーンを同じレイヤーで?

    Flash初心者です。 あまり専門用語はわからないのですが、今FlashでHPを作成しています。 アニメーションを作っているのですが モーショントゥイーンの後に、同じレイヤーでシェイプトゥイーンを 作ることはできないのでしょうか? 何度やってみても|●------|●|のようになってしまい うまくつながりません。 普通なら|●>----->●|といった感じで 矢印でつながりますよね。 新しいレイヤーでシェイプトゥイーンのみ作ればうまくいくのですが 「モーショントゥイーンの図が移動してきて、次に形を変えていくといった動作」の場合、 新しいレイヤーでシェイプトゥイーンを作る時に、モーショントゥイーンと全く同じ図をもう一度描いて、重なるように配置して…と大変です。 なにかうまい方法はありませんでしょうか? わかりずらい説明で申し訳ありませんが、お分かりになる方 いらっしゃいましたらご回答お願いします。

    • ベストアンサー
    • Flash
  • ムービークリップとシェイプトゥイーンの使い分けについて

    こんばんは。 つい一ヶ月程前からFLASH CS4でActionScriptを勉強しはじめ、 現在サイト製作中です。 以下URLのサイトのように、メインメニューをクリックしたら オブジェクトのボックス(四角い箱)が下に伸びる(heightが高くなる) アニメーションを作ろうとしておりますが、 FPSを24程度にしてムービークリップのクラシックトゥイーンで ボックスを伸ばそうとすると、カタカタとしたぎこちない動きに なってしまい、下記のサイトのような滑らかな動きになりません。 http://www.minus.dk/ シェイプトゥイーンでボックス(上記のように四角い箱が縦に伸びる動き) をアニメーションすると、同じFPS24でも滑らかな動きになりますが、 シンボル化できない為、ASでターゲット指定ができません。 こういう場合、やはりオブジェクト(四角い箱)をムービークリップ化し、 FPSの数値を上げてアニメーションするのが適切な方法でしょうか? サイトのアニメーションによっても様々だと思いますが、 その場合の適切なFPS値などがあればご教授ください。 因みに、FPS60程度にするとモーショントゥイーンでボックスを伸ばしても スムーズな動きが再現できます。 宜しくお願いいたします。

    • ベストアンサー
    • Flash

専門家に質問してみよう