さんまがおいしい季節だねー(´・ω・`)

透過背景 Flex3 ウェブアプリの作り方

Flash,一人でできるもん! — タグ: , , — さくら @ 2009/03/20 2:34

さくらです♪こんばんわ☆

昨日なんとなく興味が湧いたんで、背景に透過色を使った Flash ウェブアプリの作り方をググルで調べたの。そしたらさくらのブログが出てきたわ。…って、載ってるわけないじゃないの!調べてる本人のサイトなんだから。

まあそんなこんなで色々調べてみたんだけど、結論としてはFlash Player の wmode パラメータを transparent にセットする必要があるってことみたい。Flex3 SDK のマニュアル調べても載ってないはずだわ。
Flash Player のパラメータは、Adobe Tech Note の Flash OBJECT and EMBED tag attributes に書いてあるの。
パラメータについてはそっちを見てちょうだい。

とりあえず ActionScript と MXML アプリでちょっとだけやり方違うから、両方説明するわね。
あ、期待させといて悪いけど、MXML の説明はかなりいいかげんよ。

透過背景 ActionScript ウェブアプリの作り方

ActionScript で背景透過ウェブアプリを作る方法は簡単よ。
普通にコンパイルしてから wmode=”transparent” を付けて Flash Player を呼び出せば OK よ。

まずこんなソースを用意して TransparentExample1.as として保存するの。

package {
    import flash.display.*;
    import flash.text.*;
    public class TransparentExample1 extends Sprite {
        public function TransparentExample1() {
            var t:TextField = new TextField();
            t.wordWrap = true;
            t.text = "TransparentExample1";
            addChild(t);
        }
    }
}

次に mxmlc でコンパイルするわ。-default-size は HTML と合わせた方がいいわよ。

$ mxmlc -default-size 100 50 TransparentExample1.as

最後に HTML を書くわ。

<div style="position:relative;height:50px">
<p>aaa</p>
<div style="position:absolute;top:0;left:0">
<object
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
  width="100" height="50">
<param name="movie" value="TransparentExample1.swf">
<param name="quality" value="autohigh">
<param name="wmode" value="transparent">
<embed
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  type="application/x-shockwave-flash" width="100" height="50"
  src="TransparentExample1.swf" quality="autohigh"
  wmode="transparent"></embed>
</object>
</div>
</div>

実際に表示してみるとこんな感じよ。テキストが二重になってるのが分かるかしら?

aaa

さくらのブラウザだと、スクロールしたりウィンドウ切り替えしたりすると Flash がちらちらするわ。
これじゃ使い道は微妙ね。

透過背景 MXML ウェブアプリの作り方

Flex3 の MXML の場合 Application の backgroundGradientAlphas を [0.0,0.0] にすると、Application は透過になるわ。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  backgroundGradientAlphas="[0.0,0.0]">
    <mx:Label text="TransparentExample2"/>
</mx:Application>

このコードだと、背景は透過だけど Label が非透過なんで結局非透過アプリになるってことね。
透過 PNG を使った Image とかなら大丈夫なはずだけど、さくらはいうほど MXML には興味無いんで気になる人は自分で調べてちょうだい。
どっちにしても、この MXML アプリも wmode=”transparent” で Flash Player を実行しないと透過にならないわよ。

なんか Flex3 って JavaScript だと簡単なことが大変なのね。
しょうもないところでつまずくことが多いので、Flash の勉強もちょっと疲れてきたわ。

さくら

0 Comments »

コメントはまだありません。

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity