as3_ステージサイズに背景画像を合わせる

fitstage
↑クリックでサンプル開きます。

背景画像を開いているウィンドウ(ステージ)に合わせてぴったりのサイズで表示する場合の処理です。サンプルを開いたら、ウィンドウサイズをいろいろ変更してみてください。
開いている、ウィンドウの縦横比が画像の比率同じとは限らないので、以下のように、横を基準として残りをはみ出すか、縦を基準として残りをはみ出すか、の2通りで画像のスケーリングをする必要があります。

例 背景画像 640×420ピクセルの場合
f1
STAGE(青枠)が横長のときは、Widthを基準にスケール
f2

STAGE(青枠)が縦長のときは、Heightを基準にスケール
f3

それと、ウィンドウを凄く小さくしたときに、同じように画像が小さくなってもいいんですが、通常は最低でも見せたいサイズを決めておいて、それ以下にならないようにすます。
STAGE(青枠)が最低見せたいサイズより小さくなった場合
f4

以上の条件をAS3で書くと以下のような感じになります。

//MIN_WIDTHには最低表示したい横幅
//MIN_HEIGHTには最低表示したい縦幅
// img_yx は元画像の height / widthをした比率
// img_xy は元画像の width / heightをした比率を入れておきます

//ステージの縦横比と、読み込んだ写真の比率を比べる。
			if(stage.stageHeight / stage.stageWidth < img_yx){	
			//横を基準にする場合
				if( stage.stageWidth>MIN_WIDTH){	//最低保証サイズより多きければ横幅基準でスケール
					img.width = stage.stageWidth;
					img.height = stage.stageWidth *  img_yx;
				}else{	//最低保証サイズより小さい場合は最低保証サイズでスケール。
					img.width = MIN_WIDTH;
					img.height = MIN_WIDTH *  img_yx;
				}
			//縦を基準にする場合
			}else{																			
				if( stage.stageHeight> MIN_HEIGHT ){	//最低保証サイズより多きければ縦幅基準でスケール
					img.width = stage.stageHeight *  img_xy;
					img.height = stage.stageHeight;
				}else{//最低保証サイズより小さい場合は最低保証サイズでスケール。
					img.width =MIN_HEIGHT * img_xy;
					img.height = MIN_HEIGHT;
				}
			}

スケールをするときに、基準点をステージの左上にしておくと良いです。
プログラムの始まりのほうで以下の指定をしておきます。

stage.align =StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

ちなみに、ステージを変更された時に実行されるイベントとしてEvent.RESIZEというのがあるので、そのイベントaddEventListnerして登録したfunctionの中にリサイズの処理を書いておきましょう!

stage.addEventListener(Event.RESIZE, resizefunc);

function resizefunc(event:Event){
	//ステージリサイズの時の処理
}



Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)







as3_フルスクリーンモード

fullimg

Flash をフルスクリーンにするには stage のプロパティのdisplayState にモードをセットします。
フルスクリーンモードはFLASH起動時からいきなり設定することができないようなので、ボタンなどユーザーからの操作イベントの中に記述しないとダメみたいです。

フルスクリーンにする

stage.displayState = StageDisplayState.FULL_SCREEN;

フルスクリーンからウィンドウモードにする

stage.displayState = StageDisplayState.NORMAL;

フルスクリーンの切り替えボタンに
下記のように書いておけばOK

//fullscreenBtnというボタンがあるとして
var fulls:Boolean=false;
fullscreenBtn.addEventListener(MouseEvent.CLICK, fullbtnclick);

public function fullbtnclick(event:MouseEvent):void {
	if(fulls){
		stage.displayState = StageDisplayState.NORMAL;
		fulls=false;
		//アイコンの絵を変える処理など
	}else{
		stage.displayState = StageDisplayState.FULL_SCREEN;
		fulls=true;
		//アイコンの絵を変える処理など
	}
}

ただしESCキーを押しても、フルスクリーンからウィンドウモードに戻れるため、FLASH内のボタンを押さずにウィンドウモードに戻っちゃう場合もあります。
その場合、画面に表示されてるボタンが「ウィンドウに戻る」のままになってしまうので以下のようなイベントリスナーも必要です。

addEventListener(FullScreenEvent.FULL_SCREEN, fullscrcheck);
function fullscrcheck(event:FullScreenEvent):void 
{ 
    if (event.fullScreen) 
    { 
        // フルスクリーンになったときの処理 (ボタンの絵を変えるなど)
    } 
    else 
    { 
        // ウィンドウモードになったときの処理 (ボタンの絵を変えるなど)
    } 
} 

このリスナーを登録しておけば、スクリーンモードが変更された場合に呼び出されるのでESCで戻った場合も反応します。

最後に、FLASHを埋め込むHTMLタグ部分に

allowFullScreen="true"

のオプションを追加しておけばフルスクリーン対応になります。



Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)







as3_外部ページへリンク

AS3では、AS2までつかえていたGetURLは使えなくなりました。

ちょっと面倒なのですが
flash.net.URLRequestクラスのインスタンスを作成してURLを指定してから、
flash.net.navigateToURLでページへ飛びます。

//URLの指定
var url:URLRequest = new URLRequest( "http://hondakiyoshi.com/" );
//ページへジャンプ
navigateToURL( url );

URLRequest.urlプロパティーにあるので
後から書き換えできます。

//URLの指定
var tourl:URLRequest = new URLRequest( "http://hondakiyoshi.com/" );
tourl.url = "http://google.co.jp";
navigateToURL( tourl );
//最初にhondakiyoshi.comを指定していますが、書き換えてるのでgoogleに飛びます。

getURL1つだけでOKだったのに比べるとめんどいですね。

ちなみにボタンをクリックしたときにリンクするサンプル。
(アフィリエイトではないので気軽にクリックしてくださいw)

ソースコードはこちら。

buybtn.addEventListener(MouseEvent.CLICK, buybtnClick);

function buybtnClick(event:MouseEvent):void {
	var tourl:URLRequest = new URLRequest( "http://www.amazon.co.jp/");
	navigateToURL( tourl  ,"_blank");
}






WE LOVE HYSTERIC GLAMOUR

hysjeans

design_dazzy flash_hondakiyoshi

本日UPのZOZOTOWNトピックスWE LOVE HYSTERIC GLAMOUR
FLASHを使ったリッチコンテツ。
見所は、とにかくでかい写真。フルスクリーンでどうぞ。
ヒスのかっこよさを細部まで伝えるには大画面しかない!
とりあえずkenji edaの写真が凄い。







as3_ライブラリの素材から画面に表示

ライブラリの素材を画面に表示

actionscript3ではライブラリのムービークリップやビットマップをクラスとして定義できるので、通常のクラスと同じようにインスタンスを生成してaddChildで表示リストに追加します。
(※AS2のころだったらattachMovieClipでリンケージ設定したライブラリのムービークリップをステージに配置していましたけどAS3は使えません。)

クラス名を設定して↓
proas3
あとは、インスタンスを作成します。
addChildで表示リストに追加

var ballmc:MovieClip = new ball();
addChild(ballmc);

ライブラリにあるクラスが連番名などになっていて複数処理したい場合はflash.utils.getDefinitionByNameを使ってクラス名を文字列から指定します。

var carmc:Array= new Array();	
for (var i:int = 0; i<10; i++) {
  var ClassName:Class = Class(getDefinitionByName("CAR"+i));
  var carmc[i]:MovieClip = new ClassName();
  addChild(carmc[i]);
  carmc[i].x = i *100;
}

ビットマップ画像の場合はflash.display.Bitmap,flash.display.BitmapDataを使います。

var mybitmap:BitmapData = new myphoto(0, 0); //引数が2つ欲しいのでダミーで入れる。
var photoBMP:Bitmap = new Bitmap(mybitmap);
addChild(photoBMP);






as3_回転のアニメーション

回転のアニメーションに関係するよく使う式を2つ書いておきます。

1. 角度と半径から座標を出す方法

回転のアニメーションなどで使います。
式はこんな感じ。

x座標 = Math.cos(角度 * Math.PI / 180) * 半径;
y座標 = Math.sin(角度 * Math.PI / 180) * 半径;

角度の数値を足しながら回転をするアニメーション

サンプルコードはこんな感じです。
半径40ピクセルの円を描いてアニメーションします。x,yで最後の方で足している320と50は中心位置のオフセット値。

var rot:Number=0;
ball.addEventListener( Event.ENTER_FRAME, scrollbana );

function scrollbana( event:Event ):void{
	var a:Number = 0.15;
	var b:Number = 0.7;

	event.target.x =Math.cos(rot * Math.PI / 180)*40+320;
	event.target.y =Math.sin(rot * Math.PI / 180)*40+50;

	rot+=10;
	if(rot>360)rot=0;	
}

2. 座標から角度を出す方法

さっきとは逆で、座標から角度を調べます。
目的のオブジェクトがある方向に回転するときなどに使います。
式はこんな感じ

角度 = Math.atan2(y座標,x座標) * 180 / Math.PI;

サンプル:矢印がマウスの方向へ向きます。

ソースコードはこちら。
矢印を中心にするために、矢印(event.target)のx座標,y座標をそれぞれ引いて0基点にしてます。

ball.addEventListener( Event.ENTER_FRAME, ballrot );
function ballrot( event:Event ):void{
	var rot = Math.atan2(stage.mouseY-event.target.y  ,  stage.mouseX - event.target.x ) * 180 / Math.PI;
	event.target.rotation = rot;
}

前回のイージングでマウスに追従するのと組み合わせると

回転になると、sinとかcosとか出てきてそれだけでなんかイヤですねーーー。



Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)







as3_movieclipを動かす(減速イージング+慣性)

慣性がついてゴムで引っ張られたように戻って止まる移動。
前回の減速イージングほど使う頻度は多くないですけど知っておくと便利

基本は減速イージングと似ていますが、違いは”止まりにくい”という点です。
スピードが速ければ速いほど止まりにくい
を再現するための計算は下記のような感じで書けます。

動かしたいMC座標 +=( 目的地座標 – 動かしたいMC座標 ) * 減速係数 + 前回の移動距離 * 慣性に関わる係数

前半部分までは、減速イージングと同じです。
違いは後ろの「前回の移動距離 * 慣性に関わる係数」が今回追加している式です。
例えば前回100移動していて係数が0.3とかなら30足されます。
前回多く移動(スピードが速い)していればしているほど、目的値を余計に移動してしまうので止まりにくくなって。移動距離によっては目的値を通り過ぎてしまうこともあります。

コードで書くとこんな感じ。
(toxとtoyは目的地がはいってるものとします)

var a:Number = 0.15;
var b:Number = 0.7;
	
lastx = ( tox - event.target.x)*a +  lastx*b ;
event.target.x += lastx;
lasty = ( toy - event.target.y)*a + lasty*b;
event.target.y += lasty;     

このサンプルは、1.5秒置きにランダムな目的値に向かってます。

↑のサンプルのソースコードはこんな感じです。

ball.addEventListener( Event.ENTER_FRAME, scrollbana );
var lastx:Number=0;
var lasty:Number=0;

function scrollbana( event:Event ):void{
	var a:Number = 0.2;
	var b:Number = 0.8;
	lastx = ( int(tox.text) - event.target.x)*a +  lastx*b ;
	event.target.x += lastx;
	lasty = (  int(toy.text)  - event.target.y)*a + lasty*b;
	event.target.y += lasty; 
}


var movtimer:Timer = new Timer(1500);
movtimer.addEventListener(TimerEvent.TIMER, timefunc);
movtimer.start();	

function timefunc(evt:TimerEvent){
	var rx = int(Math.random()*640);
	tox.text = rx.toString();
	var ry = int(Math.random()*100);
	toy.text = ry.toString();
}

マウスカーソルに追従するアニメとかで良くみかけます。



Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)







as3_movieclipを動かす(減速イージング)

flashムービーを作るときにもっとも基本になるのがムービークリップをアニメーションさせることだと思います。
actionscriptでムービークリップを動かす時に良く使うのが以下の仕組みで、
目的値に向かって減速していって最後に止まるというものです。
FLASHアニメのかっこよさげなものは、ほぼこれを使っておけば間違いないです。

減速する座標移動の計算は下記のとおりです。

動かしたいMC座標 +=( 目的地座標 – 動かしたいMC座標 ) * 減速係数

目的座標を現在座標で引き算することで、目的値までの距離を出します。
その距離にたいして減速に関わる数値(0.1~0.3程度がいい動きします。)の値で掛けることで1回の移動距離が決まります。
それを+=で足すことで移動していきます。
減速
ブルーの線が1回に移動する距離で、常に距離の10分4だけ進むので
近づけば近づくほど1回の移動距離が短くなっていきます。
これが減速していく理由です。

実際にはこんなコードになると思います。
ballを tox , toyで指定した場所まで移動。

ball.x += ( tox - ball.x ) * 0.3;
ball.y += ( toy - ball.y ) * 0.3;

[ ダウンロード ]
このサンプルは1秒おきに、目的地のtoxとtoyにランダムで数値が入るようにしています。

例えばマウスに追従するならこんな感じ

ball.addEventListener( Event.ENTER_FRAME, scrollbana );
function scrollbana( event:Event ):void{
	var a:Number = 0.3;
	event.target.x +=  ( stage.mouseX - event.target.x)*a;
	event.target.y +=  ( stage.mouseY - event.target.y)*a;
}

[ ダウンロード ]

前回のスクロールバナーを減速イージングで表現するとこんな感じ。

[ ダウンロード ]

複数のムービークリップが同時に動くときに使うとかっこいいかもですね
たとえば、画像ギャラリーなどで写真の絞り込みなんかに使うとか。
サンプル↓(下のall ,block,wallなどで絞り込みができます)

[ ダウンロード ]

これも前回のXMLの読み込みでやった方法でデータとしてXMLを読み込み、photoの数だけ写真を読み込み、その後categoryの属性によって絞り込むというものです。
XMLはこちら↓

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<root>
	<photo image="1.jpg" category="block" />
	<photo image="2.jpg" category="block" />
			/* 途中略 */
	<photo image="18.jpg" category="sky" />
</root>

ちょっとしたムービーでも、イージングがかかってるだけど高品位に見えます。



Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)