Amazon.co.jp ウィジェット
 

全画面FlashのMCの再レイアウト

追記:画像を背景(Stage)一杯に拡大するクラスも作りました。併せてどうぞ。

ここ数年よく見かける全画面Flashですが、もちろんウィンドウサイズが毎回違うので、MovieClip(MC)の位置をいちいち計算してレイアウト、表示しています。そのための関数も軸ごと(例えばロゴは左上に付いて、メニューは下についてなど)に書き換えたりしなければいけないので、面倒でした。他にもaddListener、Stage.scaleMode、Stage.alignなど毎回書くのは面倒です。Action Script初級者には少し難しい表現であります。もちろん上を目指す上ではどれも必須のものですが。なのでそれらをまとめて”Utilitiesクラス”とすることによって簡略化してみました。


使い方はクラスを呼び出し、パブリッシュ時のステージサイズを指定し、それぞれMCと軸にしたい位置を指定するだけです。以下、実行コードです。

var UTL:Utilities = new Utilities();

UTL.setupStage(550,400);//ステージサイズを指定、Stage.align、Stage.scaleModeを設定

UTL.setReplace(MC,"TL");//MCをTopLeftに指定

このたった3行でMCの位置を自動で再計算してくれます。他のMCも追加したい際は最後の行を追加するだけでOKです。第ニ引数の”TL”が軸に指定したい位置です。上⇒T、中⇒M、下⇒B左⇒L、中⇒C、右⇒Rという設定になっています。しかしまだまだ無駄が多かったり足りない部分もあるので今後改良したいと思います。例えばリサイズ時に背景がウィンドウサイズと同じ大きさにというのもけっこう使いますよね。ほかにも便利な関数や素材ができたら公開していこうと思います。以下、サンプルとリソースです。

サンプル (9つのMCをそれぞれ各位置に指定)
Utilities.zip(12KB)

この記事に対して9件のコメントがあります。

  1. 荻田のコメント

    はじめまして。
    荻田と申します。

    このUtilitiesを使わせていただいていまして、一つ気になったのですが、
    現状、外部SWFをベースとなるSWFにloadclipで読み込んで、Utilitiesによって中央に来るように設定しているのですが、
    読み込み中(ローディング中)にブラウザのサイズを変えてしまうと、MC(中、中)に設定してある物に関して、基準となる場所が変わってしまいます。

    読み込み完了後、再リサイズでまた中央に来るのですが、
    何か対応策等があれば教えて頂きたいのですが、可能でしょうか。

    よろしくお願い致します。

  2. 匿名のコメント

    荻田さま

    未確認ですが、おそらく読み込み中はMCのwidthとheightがundifinedを返すからではないでしょうか?
    とりあえず読み込み完了時(onLoadInt)にsetReplaceしてみてはいかがでしょうか?

  3. 荻田のコメント

    レス遅くなり申し訳ございません。
    コメント頂きありがとうございます。
    今回作業が急ぎだったため、読み込まれる側MC(外部SWF)の方に、画面中央に再レイアウトのASを記述することで回避できました。
    onLoadIntの方も試してみたいと思います。
    ありがとうございました。

  4. いくらのコメント

    はじめまして。
    大変使い易く汎用性の高いスクリプトを公開していただき有難うございます。
    とても感謝しています。

    外部SWFロードした後、
    ブラウザサイズを変更するまで、外部SWFが表示されません。こちら、どのように対処すればよろしいのでしょうか?

    また、じわっと指定位置に戻るスクリプトに関してですが、IE6で見た場合(Firefoxでは起こりませんでした)、配置されたMCが画面の外からシュっと入ってくるアニメーションが起こるのですが、これを解除することはできますでしょうか?

    よろしくお願いします。

  5. dskymdのコメント

    いくらさん

    とりあえずこんな感じで外部swfを読み込んでみましたが問題ないですね。
    もう少し詳しく、教えていただければと思います。
    http://dskymd.com/_data/utl.zip

    IE6の件はこちらでは同じ現象が起きませんでした。症状が起きたページなど教えていただけますでしょうか。

  6. いくらのコメント

    ご返信ありがとうございました。

    >もう少し詳しく、教えていただければと思います。

    読み込んだ後、ブラウザサイズを変更するまで、指定位置に戻らないのです、、

    また、指定位置ですが、
    外部ファイルを読み込むと、指定位置がずれてしまいます。例えばコンテンツの真ん中に読みたいのですが、センターからずれてしまいます。 これはどうしてでしょうか?

    それと、背景画像の自動拡大のスクリプトも触らせてもらいまいした。 使えるようになったら凄く嬉しいなと思いまして。
    なのですが、フレームを移動し、背景画像を差し替えると、拡大が上手く行かなくなってしまいます。。 こちら、原因は何でしょう?  

    http://testplace.tank.jp/testtest.zip

    >IE6の件はこちらでは同じ現象が起きませんでした。症状が起きたページなど教えていただけますでしょうか。

    すみません!
    IEからでなく、
    FirefoxのアドオンのIE Tabを使用して、
    FF上からIE機能で閲覧した時に起こった現象でした。

    どうぞよろしくお願い致します!

  7. dskymdのコメント

    >また、指定位置ですが、
    外部ファイルを読み込むと、指定位置がずれてしまいます。例えばコンテンツの真ん中に読みたいのですが、センターからずれてしまいます。これはどうしてでしょうか?
    読み込む前のMCの大きさをもとに計算しているからです。
    読み込んだ後に位置指定するか、予め大きめの透明なMCを内包することで解決できるはずです。
    これは今後修正する余地のある部分ですね。

    >それと、背景画像の自動拡大のスクリプトも触らせてもらいまいした。 使えるようになったら凄く嬉しいなと思いまして。
    なのですが、フレームを移動し、背景画像を差し替えると、拡大が上手く行かなくなってしまいます。。 こちら、原因は何でしょう?

    背景画像の縦横比率が違うからです。
    画像が切り替わったタイミングで以下の関数を実行すればいいはずです。
    また、内包する画像は左上(0,0)に配置する必要があります。

    _root.BGI.winObjGroup[backimg].updateBG();

  8. KUJIRAのコメント

    すばらしいスクリプトをありがとうございます。大変便利に使わせてもらっております。

    いくらさんのおっしゃる IE6の件 ですが、やはりわたしもWINDOWS INTERNET EXPLORER 6 でたぶん同じようなことが起きます。

    MAC の FLASH MX PRO でつくっており、MAC のFIREFOX 2 , SAFARI では起きないのですが、WIN IE6 のみ
    読み込む最初の時、またはリロード時、各MC が、左上の方から、指定位置にスルッと移動して位置につきます。

    わたしの場合、MCは、右上、右下、中央左 の三つです。中央左の設定のMC は上からでてくるような感じですね。

    自分なりに原因を探してみたんですが、どうもわかりません、、少しいじって、回避できるようでしたら、、と思って書き込みさせていただきました。

    お時間がある時にお返事いただけたら幸いです。

  9. dskymdのコメント

    KUJIRAさん
    使っていただいてありがとうございます。

    IE6起きる症状とありますが、
    それは上のいくらさんと同じFireFoxのアドオンで見たときでしょうか?
    この場合だと僕の方でも同様の現象が起きました。ただ、実際のWin IE 6では起きていないのでこのアドオンの仕様によるものだと思います。

    ですので僕の方では根本的に対応ができないです。

    ただ今後のためにもMCが指定位置に来た時などでイベントを配信するなどして対応ができるようにしたいと考えています。

    とりあえずの処置としてはMC出現のタイミングを遅らせるなどでしょうか。

    すいませんがよろしくお願いします。

コメント