http://www.wwl.co.jp/
↑のサイトのようにブラウザの大きさを変えたときに
メニューや画面下の帯部分(オブジェクト)が
少し遅れて画面端から何%、何ピクセル等
指定された場所に自動で移動する方法を
知りたいのですが教えて頂けないでしょうか。
説明が下手で分かりづらいと思いますが
よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
#1です。
うまくできませんか?
ご質問を見直してみて,私が一部見落としている点があることに気付きました。
>> 少し遅れて画面端から何%、何ピクセル等…
この「少し遅れる」部分も必要だったのですね。
そしたら
,「Stage.onResizeリスナーイベント」は特に必要はありません。
もっとアバウトに,#1の参照先であるURLの回答の下の方にあるように,
onEnterFrame だけでできます。
#1で引用した 「パーセントで配置したフラッシュについて」 より簡単なのですが,
ちょっと違う部分もありますから,あらためて補足回答をしておきます。
やることやスクリプトは簡単なのですが,
図的説明を文字でしなければならないため,長い回答です。
=======================================
ご質問で書かれてあるURLは,
何が難しいのかというと(どの部分の発想が難しいのかというと),
ステージの大きさに合わせてオブジェクトを移動させる部分ではなくて,
ステージの大きさが変わっても,オブジェクトの大きさが変わらないという部分です。
そして,オブジェクトの大きさが変わらないのに,その座標が動くと言う部分がプラスされます。
ステージの大きさに合わせてオブジェクトを移動させるだけでしたら,
フレーム1 の最初に,
Stage.scaleMode = "exactFit";
という1行を書けば良いだけになります。
このページ↓の,
http://hakuhin.hp.infoseek.co.jp/main/as/stage.h …
上下左右にフィット
[ サンプル表示(別窓) ]
このFlashのサンプル - stage_01_03_fla6.fla(19kバイト)
と書いてある部分の [ サンプル表示(別窓) ] をクリックしてもらうとその結果が表示されます。
しかし,
そのサンプルを見ていただければわかりますが,
ウィンドウの縦横の比によって,中のオブジェクトが変形してしまいますし,
そもそも,大きさが拡大縮小されてしまいます。
だからこの方法ではうまく行きません。
そこで#1の参照先 「パーセントで配置したフラッシュについて」 でも書いた,
Stage.scaleMode = "noScale";
が必要になるのです。
ここまで考えつけたら,
後は指定場所に指定のものを動かせば良いだけのことになります。
#1で書きましたように,
全部のオブジェクトに対して1つ1つの説明は無理です。
ご質問で書かれているURLのページの,
下の黒い「フッタ」の部分と,その上の「メニュー」についてだけ,
サンプル例を書いておきます。
本番ではなくてサンプル例だと思ってください。
新規ドキュメントを作成して,
塗りで横1000ピクセル(適当),
高さ50ピクセル(適当)くらいの
黒い四角を描いてください。
その塗りをムービークリップに変換するのですが,変換するときの「基準点」が大切です。
四角い黒塗りを「右クリック」→「シンボルに変換」
でシンボルに変換ダイアログが出てきます。
図示すると次のような感じです。変形していたらすみません。
///////////////////////////////////////////////
名前(N):[ 任意の名前 ]
タイプ(T): ◎ ムービークリップ 基準点(R):□□□
○ ボタン □□□
○ グラフィック □□■
///////////////////////////////////////////////
このように,
タイプ(T) でムービークリップを選択して,
基準点(R) の部分で右下にチェックを入れて「OK」をしてください。
これで黒塗りのムービークリップの右下が座標の基準になります。
そして,
その黒塗りムービークリップを選択して,
下のプロパティインスペクタで,インスタンス名を付けてください。
ここでは,「footer」 というインスタンス名にしておきます。
次にメニューの部分ですが,
何かこれも塗りでてきとうな四角を描いてください。
ステージ上を図示すると次のような感じです。
場所は適当で良いです。
┌───ステージ──────────────┐
│
│
│
│ □□□□□ ←メニュー(インスタンス名 menu )
│ □□□□□ ↓フッタ(インスタンス名 footer )
│■■■■■■■■■■■■■■■■■■■■
│■■■■■■■■■■■■■■■■■■■■
└────────────────────┘
メニュー部分もやはり,ムービークリップシンボルに変換するのですが,
このときの基準点は "左下" にしてください。
基準点(R): □□□
□□□
■□□
このメニューの基準点はどこでも良いと言えばどこでも良いのですが,
一応,この左下を基準にした方が,
フッタとの距離感覚がつかみやすいので左下にしておきます。
そして,メニューの塗りムービークリップを選択した状態で,
下のプロパティインスペクタでインスタンス名を付けます。
ここでは 「menu」 というインスタンス名を付けておきます。
今のところ,
レイヤーは 1レイヤー ですが,
レイヤーの追加で 2レイヤー にしてください。
挿入したレイヤーを上のレイヤーにして,
その上のレイヤーにスクリプトを書きます。
□ レイヤー 筆・・|○| ←スクリプト用のレイヤー
□ レイヤー 筆・・|●| ←ムービークリップのあるレイヤー
↓上レイヤーに書くスクリプト(コピペ可)↓
-----------------------------------
// 拡大縮小なし
Stage.scaleMode = "noScale";
// ステージの左上を基準にする
Stage.align = "TL";
// 移動するスピードの設定
var speed = 3/10;
// 1フレーム進む時間ごとに毎回実行
this.onEnterFrame = function() {
// 各ムービークリップの座標を変える
_root.menu._x += (20-_root.menu._x)*speed;
_root.menu._y += (Stage.height-50-_root.menu._y)*speed;
_root.footer._x += (Stage.width-_root.footer._x)*speed;
_root.footer._y += (Stage.height-_root.footer._y)*speed;
};
-----------------------------------
これでパブリッシュしてもらうと良いのですが,
その前に HTML での表示を100%表示にしなければなりません。
「ファイル」→「パブリッシュ設定」で出てくる
パブリッシュ設定ダイアログで
サイズ(D):[ムービーに合わせる ▼]
となっているところを
サイズ(D):[パーセント ▼]
幅(W): 高さ(E)
[100 ]×[100 ] パーセント
にしてパブリッシュしてください。
Flash が 100% で貼り付くタグが書き込まれた HTML がパブリッシュされますから,
その HTML をブラウザで開けば,だいたい思うような感じにできていると思います。
HTMLの話ですが,
ブラウザは何も書かないデフォルトのままでは,周囲にマージンの隙間ができます。
これを対処するには,
パブリッシュされた HTML をメモ帳などテキストエディタで開いて,
おそらく次のようになっていると思われる bodyタグの部分,
<body bgcolor="#ffffff">
これを,ご質問で書かれているURLのように
<body bgcolor="#ffffff" marginwidth=0 marginheight=0 leftmargin=0 topmargin=0>
と書き替えると,マージンが 0 になって,
隙間なしの Flash 100% 表示になります。
=======================================
だいたい以上です。
説明は長いですが簡単なことなのです。
他のオブジェクトにもインスタンス名を適当に付けて,
onEnterFrame = function() 内の,
_root.menu._x += (20-_root.menu._x)*speed;
_root.menu._y += (Stage.height-50-_root.menu._y)*speed;
のように,
ステージ枠を意識して座標を指定してやれば良いです。
例えば,
「myObj」というムービークリップをステージの中心に配置したければ,
「myObj」の基準点をそのムービークリップの中心にして作成し,
スクリプトとしては,
_root.myObj._x += (Stage.width/2-_root.myObj._x)*speed;
_root.myObj._y += (Stage.height/2-_root.myObj._y)*speed;
これを追加すれば良いのです。
「+=」 は加算後代入演算子で,例えば
A += 1;
は
A = A+1;
と同じ事です。
その他は数学が苦手な私でもわかる,算数レベルのことだと思います。
なんとか考えてください。
//// 環境 ////////////////////////
上記作成環境並びに操作方法説明 Flash 8 対応
上記サンプル作成可能環境 Flash MX 以上
上記サンプル動作可能環境 Flash Player 6 以上
この回答への補足
教えて頂いたとおり設定した所、ステージに合わせてオブジェが
自動で動くようになりました。ありがとうございます。
そこでまた一つフッター部分について質問があるのですが、
今回教えていただいた方法ですとブラウザを広げた時に一瞬
空白(背景色)が表示されてしまうのですが
http://www.wwl.co.jp/のフッターはステージを広げた時に
背景色(このページでは白い壁の画像)がみえないように
フッター(グレー色部分)が下方向+左右方向に伸びていると思うのですが
こちらの方法もご存知でしたら教えて頂けないでしょうか。
よろしくお願いいたします。
No.1
- 回答日時:
ブラウザのサイズなどは,Flash 単独では取得できません。
windowクラスのメソッドが ActionScript にはありませんから。
しかし,ステージのサイズなら取得できます。
HTML の ソースを見ればわかりますが,
--- 引用 ---
<EMBED src="top.swf" loop=false menu=false quality=high scale=noscale bgcolor=#ffffff WIDTH="100%" HEIGHT="100%" NAME="toppage" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></E …
つまり,100%表示です。
100%表示だと,ステージのサイズがブラウザの全面と一致するので,
ステージのプロパティを基準に ブラウザ各オブジェクトを動かすことは可能になります。
逆に 100%表示でなければ ActionScript では不可能です。
とりあえずココ↓に原理は集約されていると思いますから,参考にしてみてください。
「パーセントで配置したフラッシュについて」
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1838609
↑教えて!goo ↓OKWave (同じです)
http://okwave.jp/kotaeru.php3?q=1838609
このご質問で引用されているURLはオブジェクトが多いのです。
1つ1つのオブジェクトに対して,
「基準点」がここで,スクリプトがこうで…
と書いていると,とても書き切れませんし,作ろうとされているものはまた違うと思います。
すみませんが,
「Stage.onResizeリスナーイベント」
http://www.fumiononaka.com/TechNotes/Flash/FN030 …
や,ムービークリップの基準点,
「インスタンスの基準点」
http://homepage3.nifty.com/ginga-b/MX/inst_refpo …
などを参考にしながら,
上記「パーセントで配置したフラッシュについて」を中心に考えてみてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- モニター・ディスプレイ WindowsノートPC 13.3で画面縮小したい 画面全体が見えない めり込んでしまってます 1 2023/01/22 13:42
- 中古パソコン PCに入っている色々なアプリ等が起動しなくなりました 11 2023/06/16 16:20
- Excel(エクセル) テキストの背後にあるオブジェクトとは 3 2023/01/03 20:22
- Visual Basic(VBA) VBA 画面上のカーソルに文字数字を入力するコードを教えて下さい 1 2022/10/30 10:31
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- その他(ブラウザ) cvsファイルをダウンロードすると、自動で拡張子がExcelのものになる 5 2022/07/20 21:21
- その他(ブラウザ) ブラウザでの音量(YouTubeなどの視聴)が自動的に下がってしまう。(できれば直したいです。) 2 2023/07/15 08:52
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- オープンソース IT用語、ソースとオブジェクト、改変と翻訳と翻案の違いなど どのようにりかいすればよいのですか 1 2022/09/09 10:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スマホでサイトの画像を長押し→...
-
arduino プログラムについて
-
uwscでExcelに自動記入
-
Giam
-
laptop go2からの買い替え、lap...
-
私のコンピューター上のファイ...
-
Flashコンテンツを使ったWebサイト
-
Flashをブロックしないで
-
Adobe Flash Player
-
Windows10重い
-
パソコンのリカバリーについて
-
ロック画面に天気を表示したい
-
Adobe(マクロメディア)のFLAS...
-
adobe flash playerは無料です...
-
自分でチラシを作りたいです!...
-
ヘッダーデザインをするさい形...
-
FLASH MX で作成した、flashやA...
-
この曲のタイトルを教えてください
-
Flash MXで作成したフラッシュ...
-
キャラクター設定について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
flashで画面いっぱいに拡大でき...
-
flashの背景色(stageの色)を...
-
FLASHでの色変更
-
actionscript3.0 で数学や物理...
-
経過時間待機
-
onClipEvent の enterFrameとlo...
-
photoshopで書いた四角の枠の中...
-
VBScriptでMsgBoxのYesNoボック...
-
webページ上、TABフォーカス出...
-
プログラミング、アーキテクチ...
-
VBAで改行の入ったデータの正規...
-
python ボタンを押すと複数の関...
-
YOASOBI
-
RPG(AS400)の本、サイトってあ...
-
別のアプリケーションのテキス...
-
テキストボックスの中身をリセ...
-
ホームぺージ制作で間違って重...
-
五芒星は、悪魔崇拝とどういう...
-
else if文の順序を変えることに...
-
【VB.NET】別Formのボタンが押...
おすすめ情報