• ベストアンサー

横にスクロールしたい

http://www.ntv.co.jp/zoomin/profile/index.html このようなものを作ろうとしていますが 矢印をクリックしたら横にスクロールするというやり方がよく分かりません よろしくお願いします 同じ質問したんですがいまいち出来なかったで再び質問します 初心者で毎回このサイトを活用しています

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

  • ベストアンサー
noname#35109
noname#35109
回答No.1

前回,他の方の回答にあったように, とりあえず読み込んでみられましたか? 読み込んでみると,即,その時点で 「ガッテン承知いたしました!」 チャンチャン…♪ と来なければ,終わっているような気がします。 終わってるというより,まだ始まっていないのでしょうね,多分。 前回のご質問の回答にあるとおりなのですが…。 出てくるスクリプトは stop(); と on (release) { gotoAndPlay(??); } この2つだけです。 この2つで,フレームを行ったり来たりしているだけで, 極々基本的な Flash のアニメーションです。 極々基本的な分,作業は面倒くさくて, 全ての矢印ボタンクリックの場合につき,全て場合のモーショントゥイーンを作ってあるのです。 作り方の説明を見て理解するより, 現物を読み込んでみて, stop(); と gotoAndPlay(); の組み合わせを, 自分の力で考える方がずっと簡単だと思いますよ。 一応は説明に挑戦したいとは思いますが, 現物の読み込みよりわかりやすいかどうかは全く自信がありません。 ///////////////////////////////////////////////////////////// 書かれているFlashでは,人がたくさん出てきますが, 多すぎるので,この説明では9人ということにしておきます。 9人の人がいて,3人ずつが見えるようにモーショントゥイーンで動かせば良いのです。 まず,9人の人を1つのムービークリップに変換します。 この9人で1つになったムービークリップをモーショントゥイーンで左右に動かせば良いのです。  ○  ←1人の人  大    のつもり  ○○○●●●◎◎◎ ←9人で1つのムービークリップ  大大大大大大大大大   のつもり まず,最初,3人の人  ●●●  大大大 が見えるようにステージの中央に9人で1つのムービークリップを配置します。 次の図で┌見える┐とかいてある部分だけが, ステージだと思ってください。 他の部分はステージ外作業エリアです。           ┌見える┐  □□□□□□□□□□□□□□□□□  □□□□○○○●●●◎◎◎□□□□  □□□□大大大大大大大大大□□□□  □□□□□□□□□□□□□□□□□ 9人で1つのムービークリップを配置したら, タイムラインでフレームを伸ばします。 20フレームくらいで良いのではないでしょうか。 そして作成したフレームの最終フレームをキーフレームにして,              1        20  □ レイヤー 筆・・|●///////[]|●| 最終フレームでは, 左の3人が見えるように, 9人で1つのムービークリップを右に移動させます。 「Shift」キー & 右ドラッグで水平移動させることができると思います。 移動できたらタイムラインのフレーム1を選択して, 下のプロパティインスペクタ(プロパティパネル)から  トゥイーン[モーション  v]  イージング[100  ] ▼ にします。 要は モーショントゥイーン でつないで イージング をかけるだけのことです。 イージング を正の数に大きくするとだんだんゆっくりになる度合が大きくなります。           ┌見える┐  □□□□□□□□□□□□□□□□□  □□□□○○○●●●◎◎◎□□□□  □□□←大大大大大大大大大→□□□  □□□□□□□□□□□□□□□□□   ↓↓↓モーショントゥイーンA↓↓↓           ┌見える┐  □□□□□□□□□□□□□□□□□  □□□□□□□○○○●●●◎◎◎□  □□□□□□□大大大大大大大大大→  □□□□□□□□□□□□□□□□□ これで, 真ん中の3人が表示された状態から, 左矢印(←)ボタンをクリックしたときに, 左の3人が見えるようになるモーショントゥイーンが完成します。 矢印ボタン(←・→)も一応上の図には入れていますが, 矢印ボタンについては後から考えるので今は無視していてください。 先にアニメーションだけを作ってしまいましょう。 と言っても以下同様です。 全ての場合についてのモーショントゥイーンを作成するのです。 フレーム21~フレーム40 までの空白フレームを作成して, フレーム21に,フレーム1のムービークリップをコピペします。 コピペですが, フレーム1のムービークリップを選択して, フレーム1のムービークリップを「右クリック」→「コピー」 タイムラインでフレーム21を選択, 「編集」→「同じ位置にペースト」できれいに同じ位置にペーストできると思います。 40フレーム目をキーフレームにして, そのキーフレームのムービークリップを今度は左に移動, モーショントゥイーンでつなぎイージングをかけます。           ┌見える┐  □□□□□□□□□□□□□□□□□  □□□□○○○●●●◎◎◎□□□□  □□□←大大大大大大大大大→□□□  □□□□□□□□□□□□□□□□□   ↓↓↓モーショントゥイーンB↓↓↓           ┌見える┐  □□□□□□□□□□□□□□□□□  □○○○●●●◎◎◎□□□□□□□  ←大大大大大大大大大□□□□□□□  □□□□□□□□□□□□□□□□□ フレーム41~60も同様です。           ┌見える┐  □□□□□□□□□□□□□□□□□  □○○○●●●◎◎◎□□□□□□□  ←大大大大大大大大大□□□□□□□  □□□□□□□□□□□□□□□□□   ↓↓↓モーショントゥイーンC↓↓↓           ┌見える┐  □□□□□□□□□□□□□□□□□  □□□□○○○●●●◎◎◎□□□□  □□□←大大大大大大大大大→□□□  □□□□□□□□□□□□□□□□□ フレーム61~80も同様です。           ┌見える┐  □□□□□□□□□□□□□□□□□  □□□□□□□○○○●●●◎◎◎□  □□□□□□□大大大大大大大大大→  □□□□□□□□□□□□□□□□□   ↓↓↓モーショントゥイーンD↓↓↓           ┌見える┐  □□□□□□□□□□□□□□□□□  □□□□○○○●●●◎◎◎□□□□  □□□←大大大大大大大大大→□□□  □□□□□□□□□□□□□□□□□ タイムラインは次のようになると思います。 A~D は モーショントゥイーンA~D のことです。                A      B     C      D  □ レイヤー 筆・・|●>-->|●|●>-->|●|●>-->|●|●>-->|●| いちどパブリッシュやムービープレビューしてもらうとわかりますが, スクリプトは何も書いていないのでひたすらループ再生するだけです。 そこで, ActionScript 専用レイヤーを作って, フレーム20,40,60,80 をキーフレームにして, フレーム1,20,40,60,80 に stop(); を書きます。                A      B     C      D  □ レイヤー 筆・・|○   []|○     []|○     []|○     []|○|  □ レイヤー 筆・・|●>-->|●|●>-->|●|●>-->|●|●>-->|●| これで, 各モーショントゥイーンが勝手に再生されなくなります。 あとは, 矢印ボタン専用レイヤーを作成して, そのレイヤーに矢印ボタンを置き(書き), それぞれの場合に応じた, ---------------------- on (release) { gotoAndPlay(??); } ---------------------- を実験しながら書けば終わりです。 最初の最初のボタン(フレーム1)についてだけ書いておくと, 「←」ボタンで, 左の人たちが見えるようになるのですから, モーショントゥイーンA をすれば良いのですから, --------------------- on (release) { gotoAndPlay(2); } --------------------- です。 「→」ボタンで, 右の人たちが見えるようになるのですから, モーショントゥイーンB をすれば良いのですから, --------------------- on (release) { gotoAndPlay(21); } --------------------- です。 ボタンが必要な場所(フレーム)や不要な場所が出てきますから, そのフレームをキーフレームにして,不要なボタンを消してください。 ここら辺は, 本当に考えながら実践したほうが簡単です。 ///////////////////////////////////////////////////////////// というわけです。 ここまで書いてはみましたが, やはり説明を見るより,考えた方が早いと思いますが…。 以上のような物が楽勝で作れるようになってから, 「質問:重ね順を変えたい」 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2239167   ↑教えて!goo  ↓OKWave (同じです) http://okwave.jp/kotaeru.php3?q=2239167 に挑戦という感じです。 レベルは「質問:重ね順を変えたい」の方がはるかに上のことです。 このご質問でするようなことは, Flash の F の字にもならないようなレベルのことです。 とにかく, stop(); と gotoAndPlay();,そして play(); と gotoAndStop(); は, ActionScript の基本中の基本です。 そしてモーショントゥイーンは, アニメーションでの基本中の基本ですから, 色々作成してみて,是非とも早く身につけてください。 身につけるのなら本が良いですよ。 図説などがたくさんあって,わかりやすい本が良いです。 最初の最初,ネットはあまりよくありませんが, 例えばネット上で比較的親切なサイト, 「FLASHの枝」 http://1art.jp/ ここ↑のサイトで言うと, http://1art.jp/le.htm Lesson14 までに, モーショントゥイーン,イージング,stop();, play();, gotoAndStop();, gotoAndPlay(); 全て出てきています。 一方,swapDepths() となると, http://www.1art.jp/index2.htm このページの  追加Lesson   深度とは? まで行かなければ出てきません。 さらに,ご質問にあったのは,それのさらに応用編です。 とにかく, モーショントゥイーン,stop();, play();, gotoAndStop();, gotoAndPlay(); を自分で考えるのが一番です。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • またまた質問です

    http://www.ntv.co.jp/zoomin/profile/index.html このようなものを作ろうとしていますが 矢印をクリックしたら横にスクロールするというやり方がよく分かりません よろしくお願いします 初心者で毎回このサイトを活用しています

  • 重ね順を変えたい

    http://www.ntv.co.jp/zoomin/profile/index.html このようにFLASHを作りたいのですが重ね順をクリックしたら、重ね順が変わっていますよね どうしたら出来るですか? FLASHmxを使用しています

    • ベストアンサー
    • Flash
  • 横にスムーズスクロールしたい

    以前似た質問をしたのですが少し進展があったのでもう一度質問させて下さい。 私はjavascriptにはほとんど詳しくないものです。 複数のリンクを横に並べ、「次へ」のボタンをクリックすると横にスムーズにスクロールするjavascriptを組みたいと思っています。 今考えているのは http://youmos.com/reference/smooth_scroll.html こちらのサイト様の横バージョンを作りたいと思っています。 色々と試行錯誤してみましたが横にスクロールすることがうまくできなかったためどなたかご教授願えないでしょうか… 宜しくお願い致します。

  • IEなどの横スクロールについて

    IEに表示されてるHPをスクロールするとき、キーボードの矢印キーで操作するのですが、 横に長いページを見たときに、横スクロールの速度が縦スクロールに比べてかなり遅いのですが、設定を変えれるのでしょうか?

  • 横にスクロールさせたいのですが

    FC2でブログを書いています、初心者です。スタイルシートなどは殆どわかりません。 最近デジタル一眼レフを購入し写真をアップさせたのですが画像(700×900という設定でアップロードしています)が大きい為今まで右端にあったカレンダーやプロフィールがすべて下にいってしまいました。 画像の大きさは変えたくないので、横にスクロール出きる様にしカレンダーなどを元の右端に置きたいのですが可能でしょうか? 同じテンプレートでもスクロール出来る方のものとそうでないものとを拝見した事があるのですが。 宜しくお願いします。

  • クリックすると横にスムーズスクロールするもの

    いつもお世話になっております。 何度かこの質問をさせて頂いたのですが、また挑戦しているので教えて下さい。 ※長文です。 矢印をクリックすると下の「内容」というテーブルが左右にスムーズスクロールするものを作りたいと思っています。 分かりやすく言うとアップルの動画のページのようなjavascriptを組みたいのです。   ┌──┐ ← │内容│ →   └──┘ 今やってみているのは 以下のURLのマウスオーバーでテーブルの内容が上下にスクロールするというものを マウスオーバーではなくクリックにして、上下スクロールではなく左右のスクロールにする。 http://www.makoto3.net/softbank/fix/ss063/ss063.html onclickにしてもマウスオーバーのイベントが残っている感じでマウスが乗っている間はスクロールしていまいます。 次に http://www.akikobrand.com/html/index.html こちらの「Javascriptで横スクロールさせる」を作り替えて </script> </head>以降を <a HREF='#'>→</a> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> <div style="overflow:auto;width:100px;"> <table border="1" cellpadding="0" cellspacing="0" width="1800"> <tr> <td width="600"><img src="001.jpg" border="0"> </td> <td width="600" valign="bottom"><a name="javascript:slidePage(true,0,600)"></a> <img src="002.jpg" border="0"> </td> <td valign="bottom"><img src="003.jpg" border="0"> </td> </tr> </table> </div> としてみましたが、スムーズスクロールにならないのと、矢印のクリックが一度しかききません。 これをクリックする毎に右へ移動するようにしたいです。 この場合どちらを使えば良いか、またその場合どうすればいいかどなたか宜しくお願い致します。

  • 横スクロールを縦スクロールに変換したい

    ちょっと違うのですが、こちらのサイトをご覧ください。 http://www.rinkokikuchi.com/# このサイトでは横スクロールデザインですが、マウスの縦スクロールをしても横にスクロールできるようになっています。 私が今困っているのはパララックスを使った縦スクロールのサイトを作っているのですが、 マウスのホイールを横にスクロールした際にもサイトを縦にスクロールできる様にしたいのですが、分かりません。 縦横どちらでもスクロールできる様にしたいです。 どなたか教えて頂けませんでしょうか。

    • 締切済み
    • CSS
  • 複数の画像を横にスクロールさせる方法について

    複数の画像を横にスクロールさせる方法について こちらのサイト(www.japanican.com/index.aspx)の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるのはどのようにすればいいのでしょうか。できれば、CSSとhtmlのタグを教えていただければうれしく思います。 また、横についているボタンだけにするとか、下のスクロール部分だけにするとかも教えて下さい。 よろしくお願いいたします。

  • 横へスクロール

    あるボタン(例えばnext)を押すと、画面が横へゆっくりスクロールするようなものを作りたいのです。 どこかにそれが書かれているサイトはないかと探したのですが、どうやって検索していいのかもわかりません。。 どうぞよろしくお願いします。

  • 複数の画像を横にスクロールさせるボタンについて

    複数の画像を横にスクロールさせるボタンについて こちらのサイト(www.japanican.com/index.aspx)の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるボタンはどのようにすればできますか。Javascriptは扱ったことがないのでわかりやすく教えていただければ助かります。よろしくお願いいたします。