背景画像を継ぎ目無く無限スクロールさせる方法
- 背景画像を自然に無限スクロールさせるための方法を教えてください。
- モーショントゥイーンではうまくいかず、アクションスプリクトの使用が必要でしょうか？
- ステージのサイズは300～500px程度で、画像サイズはフォトショップで調整できます。
- ベストアンサー
背景画像をを継ぎ目無く無限スクロールさせる方法
つい最近Flashの勉強を始めた者ですm(__)m 当面の目標として、背景画像として使っている空の画像を、雲が流れているような感じて左から右へ自動スクロールさせたいのですが、継ぎ目無く自然に無限スクロールさせるためには、どの様にするのがわかりやすい方法でしょうか？ モーショントゥイーンでは中々うまくいかないのですが、継ぎ目無く自然に無限スクロールさせるためにはアクションスプリクトを使わなければ無理なのでしょうか？ ステージのサイズは300～500px程度、スクロールさせる空のjpg画像のサイズはフォトショップで調整出来ます。 やり方がわかる方、アドバイス頂ければ大変助かります。どうかお知恵をお貸し下さい。よろしくお願い申し上げますm(__)m
- net_kisi
- お礼率100% (30/30)
- Flash
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
>> 教えて頂いた「gotoAndPlay(1);」を使っていろいろ試してみているのですが、なかなかうまくいかないです・・ 使っているスクリプトはgotoAndPlay();のみ。 まずメインのアニメーションの最終フレームに「gotoAndPlay(81);」， 雲のムービークリップの中に「gotoAndPlay(1);」。 それだけです。 アニメーションも単純なモーショントゥイーンのみです。
その他の回答 (2)
>> 「gotoAndPlay(1);」のカッコ内の数字の役割は何なのでしょう？数字を変更したらどんな変化があるか試してみます。 雲に限らず，「gotoAndPlay(○○);」は最初の１歩だと思います。○○は普通，数字を入れて，フレームナンバーを示します。 もっとなれてくれば変数名でも良いです。 スクリプトの小技をコピペするより，ちゃんとアニメーションができること。 それが一番にたいせつなことで，次にStopとかgotoという基本的スクリプトが必要です。 最もイラレとかでベクトル系の作図をされていたら問題がないと思いますが，アニメーションの前にまず作図かもしれません。 雲に関してですが， Design Pocket TaMaGoさん(http://namatamago.com/)が良い感じの雲の流れのサンプルを紹介してくれています。 http://flash.namatamago.com/lesson/lesson_middle_natural/lesson_middle_natural_20020411_010101.php もし，自分でそれなりにできた場合(できた場合です) 参考にされれば色んな表現方法が見つかるかもしれません。 マスクとかスクリプトとか色々使われていますが，基本が出来た上で参考にされるのは良いと思います。
- 参考URL：
- http://flash.namatamago.com/lesson/lesson_middle_natural/lesson_middle_natural_20020411_010101.php
お礼
sassakuさま、続いてありがとうございます。 Design Pocket TaMaGoさんというサイト、知りませんでした。大変勉強になるサイトですね。教えて頂いてありがとうございました。 教えて頂いた「gotoAndPlay(1);」を使っていろいろ試してみているのですが、なかなかうまくいかないです・・ 40フレームで左端から右端まで雲が流れるアニメーションをモーショントゥイーンで作っているのですが、アクションスプリクト記述用の別レイヤーを 作ってアニメーションの最後のフレームである40フレーム目に「gotoAndPlay(1);」を入れてみたのですが何も変わらないみたいです・・ ちなみに、「gotoAndPlay(1);」のかわりに「stop();」を入れてみたら、アニメーションがループしないで、ちゃんと一回の再生で止まります。 「gotoAndPlay(1);」を記述するフレームの位置とか記述するレイヤー、()に指定するフレームの番号などを間違っているのでしょうか？ とりあえず、いろいろ試してみます。
Flashの機能というより，まず雲画像の左辺に雲画像の右辺をつなげたとき ちゃんと継ぎ目がなくて，ちゃんとループする画像かどうかが問題です。 （↑HTMLの背景に使ったとき，左右には無限につながるような画像） ちゃんとつながるような雲画像であった場合，複雑に考えず，単なるアニメーションでできます。 使うスクリプトは「gotoAndPlay();」というフレームアクションだけです。 □←ステージ ■←雲画像 として ..□ ■■ ↓ ..□ .■■ ↓ ..□ ..■■ gotoAndPlay(1); 雲画像がステージと同じか，大きかった場合は，おおまかにはこんな感じです。 gotoAndPlay(1);をしたときに一瞬画像が止まったようにみえたり， 時間的にズレる場合は，gotoAndPlay(2);にするとか，gotoAndPlay(1);するときの雲の位置を左右に調節するとかしてください。 雲以外，何も登場しないアニメーションであれば，これでOKです。 でも，たぶんそんなことはないと思います。 だから，ふつうはこのアニメーションをムービークリップの中に作り，背景として配置しておいて，その前で別のオブジェクトを上のレイヤーで動かします。 雲画像をぴったり左右に合わせるには，グリッドに吸着や，線に吸着を使ってうまくつなぎ合わせてください。 ちなみに雲画像はオブジェクトにしておいて，すべて別レイヤーで動かしてください。
お礼
詳細なご説明ありがとうございます！ 雲画像を継ぎ目無くつなげるために、雲画像をコピーして２枚にし、一枚を左右反転させた物をくっつける事でなんとか対処しています。 ちなみに今日自分で考えたやり方は、雲画像を普通にモーショントゥイーンでステージの右端まで流し、また左端にループする瞬間の違和感を目立たなくするために、、ムービーの最初と最後にフェードイン・フェードアウトを入れるとか、または雲と同じ色の別レイヤーを作り、雲画像が右端から左端にループする時にに自然にかぶせてごまかす、という物です。どっちがいいかな？というより、的はずれ、ですね（＾＾； さっそく今夜、sassakunさんからお教え頂いたとおり、挑戦してみます。ちなみに「gotoAndPlay(1);」のカッコ内の数字の役割は何なのでしょう？数字を変更したらどんな変化があるか試してみます。 書き忘れていましたが、FlashMX2004を使っています。 どうもありがとうございました（＾＾
関連するQ&A
- 画像の無限スクロールについて
FLASH初心者です。 いろいろ探しましたが、上手くいかず、わからないのでアドバイスお願いします。 ページが読み込まれると同時に、画像が下から上に向かう無限スクロールをさせたく、いろいろやってみましたが、どうしても途切れて空白になる時間が出来てしまったり、繋ぎがスムーズにいかなかったりします。 画像は縦62pxが1つ、縦82pxが4つの2セットをグループ化し、625.4pxとなっています。 ソースは、ホームページで検索したのを参照しました。 ↓ onClipEvent(enterFrame) { this._y -= 3;; if(this.getBounds(_root).yMax < 0) { this._y += 625.4;; } } なにとぞ宜しくお願いします。
- ベストアンサー
- Flash
- FlashMXで横にスクロールする画像の速度について
いつもお世話になっております。 Windows98SEでFlashMXを使い始めました。（CPU900Mhz、メモリ384程度だったと思います…） 手始めに今持っている画像で横にスクロールをさせる実験を行っているのですが、スクロールはするものの、動きがぎこちなく思えます。 ネット上で見かけるFlash広告やムービーは滑らかに横スクロールしている気がするので、おそらく自分の設定が悪いと思うのですが…綺麗にスクロールさせるためには、何か手段が別にあるのでしょうか。 お分かりの方、回答をお願いいたします。 なお、次のような形でファイルを作成しています。 サイズ：640*480 フレームレート：12fps 画像：写真画像のJPEG(1024*480)をライブラリに読み込んだもの1枚 レイヤーは1つで、1フレーム目にX=0,Y=0で画像を配置し、モーショントゥイーンを作成、15フレーム目をX=-150,Y=0にしてスクロールさせています。 ひょっとして、Flashでスクロールさせるには画像が大きすぎるのでしょうか。
- ベストアンサー
- グラフィックソフト
- マウスに反応した画像スクロール
例えば500px×500pxの画像があるとして、それを200px×200pxのサイズのFlashで見せたいと思っています。当然Flashの方がサイズが小さいので画像の全体像は見えませんが、マウスの動きに反応して右なら右、下なら下にスクロールさせたいのです。このとき、ループではなく、画像の端までスクロールしたら止めたい（できればゆっくり・そっと止めたい）んですが、検索しようとしてもせいぜい「action script 画像 スクロール」ぐらいしか思いつかず、そういったスクリプトのサンプルが見つかりません。もしご存じの方、慣れているからそれぐらいなら書いてやるというような優しい方、おられましたらよろしくおねがいします。 イメージとしてはこんな感じです。 http://www.uniden.jp/jijitsu/
- ベストアンサー
- Flash
- FLASHでの画像無限スクロール基準点
みなさん、ハジメマシテ。 現在マウスの位置によって画像が無限にスクロールするものを作っているのですが、ウィンドウサイズを変更しても基準点をセンターに持っていきたいのですが、サイズを変えた時の基準点が、最初に表示した時の基準点から変わりません。。 ソースは下記の通りです。 //初期化 function init() { w = content._width; x0 = Stage.width/2; cnt = Math.ceil(Stage.width/w)+4; scrollWidth = w*cnt; //ステージ幅に合わせてムービークリップを複製する for (i=1; i<=cnt; i++) { x = w*(i-2); y = content._y; props = {_x:x, _y:y}; //contentを複製する newMC = content.duplicateMovieClip("scrollMC"+i, i, props); //新しいムービークリップにイベントメソッドを設定する newMC.onEnterFrame = scrollxMC; } //複製元のムービークリップを隠す content._visible = false; } //ステージを横スクロールするメソッド function scrollxMC() { with (this) { if (_x<(-w)) { _x += scrollWidth; } else if (_x>(Stage.width+w)) { _x -= scrollWidth; } _x -= (_root._xmouse-x0)/10; } } //初期化の実行 init(); x0がここで言う基準点だと思うのですが、これをウィンドウサイズが変わってもセンターにくるようにするにはどうすればよろしいでしょうか？？ お手数ですが、お力添えよろしくお願い致します。
- 締切済み
- Flash
- 画像を拡大した時の位置ズレの修正方法を教えてください
フラッシュで簡単なアニメーションを作りたいと思っています。 右上を中心に画像が少しずつ拡大(ズームアウト)していくという動きをつけたいと思いモーショントゥイーンで拡大させました。 拡大自体は問題なく出来たのですが、再生すると何故か画像がブレてしまいます。 (ガタガタと画面自体が揺れる感じです。) 配置した画像の初めと終わりの位置がずれているのかと思い整列させてみたのですがやはり上手くいきません。 また、試しに左上を中心にしたらぶれることなく望んでいたものが出来ました。 右上を中心にスムーズに拡大させる方法を教えて頂けますようお願いします。 使用しているのはflash mxで、画像自体はフォトショップで作ったjpg画像を読み込んでます。 よろしくお願いします。
- 締切済み
- Flash
- ＦｌａｓｈＭＸへ画像を挿入した時の背景を透明にするには？
ＦｌａｓｈＭＸを始めてまだ２～３ヶ月です。初心の域です。 ＰＣに関してもまだまだ初心です。 Paint Shop Proで、月の画像を丸く切り抜き、背景を透明にして、jpg保存しました。 そして、ＦｌａｓｈＭＸに、月を画像の挿入し、ライブラリに登録し、月をドラッグして紺色の背景（レイヤー）にかぶせて、モーショントゥイーンで動かしたかったのですが、挿入した月の画像には四角く白い背景があります。 背景を透明か、月だけにしたいのですが、何か方法はありますか？ PCはWin98、SEです。 宜しくお願いします。
- 締切済み
- グラフィックソフト
- Flashでのマウスの位置に合わせてスクロール。
作業環境 PC : Windows7 Flash : Flash8 Actionscript : 2.0 困っています。 Flashの制作でマウスの位置に反応して左右にスクロールするのもを作りたいのですが、マウスに反応はしてくれても、画像のループ処理がうまくいかず、画像が途切れてしまいます。 ■参考にしているサイト http://acchan.s55.xrea.com/flash/scroll_menu/0501/scroll_menu0501b.html 僕が作ろうとしている状況は、下記の通りです。 ・ステージサイズ1160pxで、高さは223px ・スクロールする画像の全体での長さは3240px ・スクロールする画像は各ボタンになっていて、180pxが18個並んでいます。 理想としては、マウスの位置に合わせて、画像が両サイドに永久ループし、マウスオーバーしている画像は、その画像のリンク先に飛ばせるようにしたいのです。 どうかお力おお貸しください。 宜しくお願い致します。
- ベストアンサー
- Flash
- 画像サイズの縮小方法
こんにちは PhotoshopCS2を使用しています。 解像度72dpiの1200px×800pxの画像を135px×90pxというサイズに 縮小したいのですが、フォトショップの画像解像度でサイズを縮小すると 画像がピンぼけしたような、荒い画像になってしまいます。 これは画像サイズが小さくなりすぎるためしょうがないのでしょうか？ きれいな画質のままで、サイズだけ小さくすることは可能なのでしょうか。 どなたかお知恵を拝借できますでしょうか。 よろしくお願いします！！
- ベストアンサー
- グラフィックソフト
- 【jquery】スクロールで背景画像もついてくる
よろしくお願いいたします。 jqueryを使って背景画像をスクロールと一緒についてくるようにしたいのですが、 思い通りにいかず、質問させていただきたいと思います。 やりたいと思っていることは、 まず背景画像1（1.jpg）をbodyにbackgroundに設定して、 その上に<div></div>タグで背景画像2（2.png：透過画像）をbackgroundに設定し、 背景画像2だけスクロールと一緒についてくるようにしたいと思っています。 現状のソースは以下になっています。 【html head内】 <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#haikei').css('background-position', '50%'+ parseInt( y / 3 ) + 'px'); }); }); </script> 【html body内】 <div id="haikei"> <div id="wrapper"> <div id="header"> ～略～ </div> <div id="contents"> ～略～ </div> </div> </div> 【CSS内】 #bg01 { background: url(2.png) top center repeat-y; } 今の状態だと、動き自体は思い通りに動いてくれるのですが、 背景画像を表示させたい位置がありまして、 <div id="header"></div>内には2.pngを表示させず、 <div id="contents"></div>の部分から2.pngを表示させて スクロールについてくるようにしたいと思っています。 下記のように、 <div id="wrapper"> <div id="header"> ～略～ </div> <div id="haikei"> <div id="contents"> ～略～ </div> </div> </div> と、<div id="haikei"></div>の位置を変えてみましたが、 これだとスクロールしたときに、<div id="header"></div>の下から 画像が途中からはみ出てくる？ような感じで、きれいにスクロールされません。 さらにCSSのrepeat-yをno-repeatに変えて試してみましたが、 その場合画像がページの一番下まで動いてくれません。 （途中までしか画像がついてきてくれない感じです） 方法としては、2.pngの表示開始位置を<div id="header"></div>より下に位置指定すれば うまくいくのかなと思ったのですが、書き方がわからず。。。 なにかうまくいく書き方はないでしょうか・・？ もしくは上記の方法以外でも、実現できそうなやり方や、 参考になりそうなサイトがあればお教えいただきたいと思っています。 ちなみに、私が参考にさせていただいたサイト様はこちらです。 http://www.webopixel.net/javascript/350.html わかりにくい点がありましたら、補足いたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- JavaScript スクロール制御
javascriptの動作についてご教授下さい。 ウィンドウ画面が横1275px 縦925pxで パージ内容が横長の横2350px 縦925pxの ページ全体を横軸スクロールで表示可能なサイトで、 <img>タグで画像を非表示（配置はセンター付近）し、 ある画像リンクへの文字列をクリックでjavascriptから その<img>を非表示から表示に切り替えています。 (ページイメージ) |リンク文字位置| |img位置| 横2350px----------------------------------------------------→ で、今回の質問なのですが、リンク文字はページ右辺に配置しており javascriptからimgを可視化するとスクロールが初期位置(横0)に戻ってしまいます。 スクロール位置はそのままで画像の可視化・非可視化を切り替えたいのですが、ムリなのでしょうか？？ いちよう可視化後に scroll()でスクロールの位置を指定していても スクロールが初期位置(横0)に戻ってしまいます。↓↓↓ この現象はJavaScriptの仕様なのでしょうか？？ 横長のページであることと、リンク文字の配置は仕様として 変更できないものとお願いいたします。 環境 WinXP SP3 IE8(8.06) 画像切り替えソース //引数urlの画像をimgで表示する関数 function visi(url) { //imgのプロパティを取得 var jpg = document.getElementById('jpg_link'); jpg.style.visibility = "visible"; jpg.style.display = "block"; jpg.src = url; //scroll(1500,0); ← 1500まで行くが初期位置に戻る・・・ }
- ベストアンサー
- JavaScript
お礼
sassakunさま、本当にありがとうございますm(__)m
補足
すみません、下記のお礼を書き込んだ約２０分後に、やっと出来ました！ （雲の画像は適当ですが・・） 雲画像はメインのタイムラインではなく、シンボル内のタイムラインでアニメーションしていたのですね。 最初と最後のフレーム（1と160）以外に、29、80、103フレームをキーフレームにする意味はイマイチわからないですが・・ 雲画像のシンボル内の、レイヤーで分けた雲画像の並べ方、非常に勉強になりました。雲が流れるFlashにあこがれ私は最近Flashを勉強し始めたので、第一段階の目標がクリア出来てすごくうれしいです。 sassakunさまのサンプルflaファイルが完璧に理解できるまで、もうちょっと頑張ってみますね！