mouseChildren
メモーメモメモ。
●●.mouseChildren = false;
●●.mouseEnabled = false;
上に飾りのSpriteなんかを置きたい時に便利。
サムネイル付きフォトギャラリー
前回追加したような自動遷移や切り替えエフェクトは付いてません。
左側にサムネイルが付いてて、クリックすると右側にその写真が表示されるアレです。
今回のは元写真を縮小してサムネイルにするタイプではなく、サムネイル用の画像を別に用意するバージョンにしました。
またダラダラ長くてすみません。
XMLはこんな感じ。
<?xml version="1.0" encoding="utf-8"?> <date> <photoset img="img/00.jpg" thumb="img/t00.png" txtArea="コメント01"></photoset> <photoset img="img/01.jpg" thumb="img/t01.png" txtArea="コメント02" ></photoset> <photoset img="img/02.jpg" thumb="img/t02.png" txtArea="コメント03" ></photoset> <photoset img="img/03.jpg" thumb="img/t03.png" txtArea="コメント04" ></photoset> <photoset img="img/04.jpg" thumb="img/t04.png" txtArea="コメント05" ></photoset> <photoset img="img/05.jpg" thumb="img/t05.png" txtArea="コメント06" ></photoset> </date>
actionscript3.0
// Tweensyライブラリ読み込み
import com.flashdynamix.motion.Tweensy;
import com.flashdynamix.motion.TweensyTimeline;
// Colorクラスの読み込み
import fl.motion.Color;
//htmlから受け渡されたmyVarの読み込み
var flashVars:Object = this.loaderInfo.parameters;
var myVar:String = flashVars['myVar'];
var thumBoard_mc:MovieClip;
thumBoard_mc = new MovieClip();
var myXML:XML;
var i:int; //次・戻るボタン用の変数
var ti:int; //サムネイルボタン用の変数
var photoLength:int;
var comboXML:String = myVar; //htmlから受け渡された変数
var a_URL:URLRequest = new URLRequest("photo.xml");
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(a_URL);
var imgLoader:Loader = new Loader();
var myLoadObject:MovieClip = new myLoading();
var thumLoader:Loader = new Loader();
var thumSet:MovieClip = new thumBoard();
// ***** XMLがロードされる度に行われる処理 *****
xmlLoader.addEventListener(Event.COMPLETE, xComplete); //XMLの読み込みが終わったら実行
function xComplete(event:Event):void {
XML.ignoreWhitespace = true; // 文字化けしないように空白行を削除
myXML = new XML(xmlLoader.data);
i = 0;
photoLength = (myXML.photoset.length() -1); //フォトセットに何枚写真が入ってるか
// 初期表示の写真
xLoadImage(); //imgLoaderに新しい画像を読み込む
imgLoader.x = 0;
imgLoader.y = 0;
var cTrans1:ColorTransform = new ColorTransform(1,1,1,0,0,0,0,0); //アルファを０で読み込む
imgLoader.transform.colorTransform = cTrans1;
// テキスト表示ですよ
txtArea.text = String(myXML.photoset[i].@txtArea);
// ローディング表示
var myLoadObject:MovieClip = new myLoading();
board_mc.addChild(myLoadObject);
myLoadObject.x = 380;
myLoadObject.y = 270;
// 「読み込み中」が点滅するTweensy
var ct:ColorTransform = myLoadObject.transform.colorTransform;
ct.alphaMultiplier = 0;
var myRepeat:TweensyTimeline = Tweensy.to(myLoadObject.transform.colorTransform, ct, 0.5, null, 0, myLoadObject);
myRepeat.repeatType = TweensyTimeline.YOYO;
myRepeat.repeats = -1;
// 次の画像の読み込みが終わったらアルファを１に戻して、画像を表示＆「読み込み中」を削除する
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, doComplete);
function doComplete(eventObject:Event):void {
var ct:ColorTransform = imgLoader.transform.colorTransform;
ct.alphaMultiplier = 1.0;
Tweensy.to(imgLoader.transform.colorTransform, ct, 0.3, null, 0, imgLoader);
imgLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, doComplete);
board_mc.removeChild(myLoadObject);
}
// サムネイルの実行セット。枚数分繰り返す。
for(ti = 0; ti <= photoLength; ti++) {
xThum();
}
addChildAt(thumBoard_mc, 1);
}
//imgLoaderに新しい画像を読み込む
function xLoadImage():void {
var imgURL:URLRequest = new URLRequest(myXML.photoset[i].@img);
imgLoader.load(imgURL);
board_mc.addChild(imgLoader);
}
// TweensyでimgLoaderを白くする
function xToWhite():void {
var ct:ColorTransform = imgLoader.transform.colorTransform;
ct.redOffset = 230;
ct.greenOffset = 230;
ct.blueOffset = 230;
Tweensy.to(imgLoader.transform.colorTransform, ct, 0.3, null, 0, imgLoader);
}
// TweensyでimgLoaderが白くなったのを元に戻す
function xToOriginal():void {
var ct:ColorTransform = imgLoader.transform.colorTransform;
ct.redOffset = 0;
ct.greenOffset = 0;
ct.blueOffset = 0;
Tweensy.to(imgLoader.transform.colorTransform, ct, 0.3, null, 0, imgLoader);
}
//************* サムネイル関連 ************
function xThum():void {
var thumURL:URLRequest = new URLRequest(myXML.photoset[ti].@thumb);
thumLoader = new Loader();
thumLoader.load(thumURL);
thumSet = new thumBoard(); //ライブラリに用意していたサムネイルサイズの空MC。
thumSet.addChild(thumLoader);
//例のサムネイルが並べる部分。x=20,y=40の位置に、横(90px＋右margin:10px)縦(90px＋下margin10px）で、横二列で並べています。ああ分かりにくい。
thumSet.x = (ti % 2)*100 + 20;
thumSet.y = Math.floor(ti / 2)*100 + 40;
thumLoader.name = String(ti); //インスタンス名を付与！
thumSet.buttonMode = true; //ボタン機能付与、カーソルが手型になる
thumSet.addEventListener(MouseEvent.MOUSE_UP, xThumClick); //クリックイベントを付与
thumBoard_mc.addChild(thumSet); //何枚もバラバラ状態のサムネイルを1セットにするため突っ込む。
// ↑今回はホントはいらないかもだけど、xmlの切り替えやサムネイルを入れ替える時なんかに必要になる…気がする。
}
//サムネイルをクリックしたら行う処理セット
function xThumClick(eventObject:MouseEvent):void {
var target = DisplayObject(eventObject.target); //クリックした画像をターゲットに認定。
trace(target.name);
xToWhite(); //imgLoaderを白くする
i = Number(target.name); //ここで次・戻るボタン用の変数「i」に、サム用の「ti」を代入しないとずれる。
// テキスト表示
txtArea.text = String(myXML.photoset[i].@txtArea);
// ローディング表示
var myLoadObject:MovieClip = new myLoading();
board_mc.addChild(myLoadObject);
myLoadObject.x = 380;
myLoadObject.y = 270;
var ct:ColorTransform = myLoadObject.transform.colorTransform;
ct.alphaMultiplier = 0;
var myRepeat:TweensyTimeline = Tweensy.to(myLoadObject.transform.colorTransform, ct, 0.5, null, 0, myLoadObject);
myRepeat.repeatType = TweensyTimeline.YOYO;
myRepeat.repeats = -1;
var intervalId:uint = setTimeout(xWait, 120); //0.12秒後に
//次の画像をimgLoaderに読み込みなおす
function xWait(){
var imgURL:URLRequest = new URLRequest( myXML.photoset[target.name].@img);
imgLoader.load(imgURL);
board_mc.addChild(imgLoader);
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, doComplete);
function doComplete(eventObject:Event):void {
xToOriginal(); //白くなったのを元に戻す
imgLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, doComplete);
board_mc.removeChild(myLoadObject);
}
trace("MemoryUsage : "+Math.round(System.totalMemory/1024)+"KByte");
}
}
this.stop();
大佐さん、どうですかね？
「んにゃっ、トウモロコシのひげうまいよ？」
そうですか。
【フォトギャラリー追加機能：その1】自動で次画像へ遷移する
以前作ったフォトギャラリーに、とりあえず自動スライドショー機能だけ付けてみました。
放っておくと次の写真へと切り替わります。
クリックで作例を表示します。
現在の仕様は、
- 4秒で次の画像に切り替わる。
- nextボタン・preボタンを押すと、自動切り替え機能を一度停止して、5秒後に再開する。
- 最後の画像まで行ったら最初の画像に戻る。
- 同じく、最初の画像から前に戻ると最後の画像に戻る。
となっています。
ばばっと書いてみただけなのでダラダラ長くなってしまいました。美しくない！
参考程度にどうぞです。
詳しい解説…というとおこがましい感じですがそんなモノはしばらくしたら書いてみたいと思います。書く！
続きを読むSystem.totalMemory メモリ使用量の表示
// メモリ使用量の表示
trace("MemoryUse : "+Math.round(System.totalMemory/1024)+"KByte");出力ウィンドウにどのくらいコンピュータのメモリを食っているのか表示されます。開発中のお供に最適。
…とは言え何KByteまでが「OKライン」なのかよく分からんのだけど。
フォトギャラリーとかでメモリチェックをしてみると、画像切り替える度にどんどんメモリ使用量が増大していく。
アラマ！どこまで増えちゃうのかしら！と思って見てると、突然ガクンと減ったりする。
これはFlash側が勝手に「ガベージコレクション」とかいうことをして、いらなくなったファイルを削除してCPUへの負荷を軽くしてくれているそうなのです。
ほほーう。
なかなか出来る子じゃないか。
でもやっぱり自分で考えて軽くする努力をしないと、どんどん重くなっちゃうんですけどね。
よく使うけどすぐ忘れちゃうのでメモ。
参照元忘れてしまったごめんなさい。
Flash AS3でXMLフォトギャラリー作成 解説編 その3【前後の画像に切り替えるボタンを付ける】
どもども。
今回は進むボタンと戻るボタンを作って、画像を切り替えられるようにしましょう。
以下は前回書いた、読み込む画像を指定している部分のスクリプトです。
//前回書いたスクリプトの一部
var imgURL = new URLRequest(myXML.photoset[i].@img);それならば、進むボタンを押すたびにiに1を足していってあげれば、2番目のphotoset、3番目のphotosetとなって画像が切り替えられちゃいますね！そのスクリプトを書いてみましょう。 続きを読む
