12月のブログ---ぬえさぶろうのAnimate放送部

複数の写真をエンドレスで流す仕組み

設定
写真サイズ	680＊380
写真枚数	8枚
画面サイズ	1280px * 720px

変数
変数名	初期値	用途
allList	-	全ての写真のリスト
indexList	-	スクロールさせる写真のリスト
scrollWidth	1280px	スクロールさせる横幅
mc.width	680px	写真の横幅
gap	10px	写真と写真の間隔
blockWidth	690px	写真+間隔のブロックの幅
count	3	表示できる写真の枚数
speed	4	写真が移動する速度
nextIndex	3	次の写真の配列でのインデックス番号
movex	0	-

/*複数の写真をエンドレスで流す*/
var allList:Array = [];　/*全ての写真のリスト*/
var indexList:Array=[]; //スクロールさせる写真のリスト
var scrollWidth:Number=stage.stageWidth; //スクロールさせる横幅
var mcWidth:Number = 680; //写真の横幅
var gap:Number = 10; //写真と写真の間隔
var blockWidth:Number = mcWidth+gap; //写真+間隔のブロックの幅
var count:uint=Math.ceil(scrollWidth/blockWidth)+1; //表示できる写真の枚数　8枚 
var speed:uint = 4; //送りの速度
var nextIndex:uint = count; //次の写真の配列でのインデックス番号
var movex:int = 0;

setUp();
addEventListener(Event.ENTER_FRAME,xEnterFrame);

/*セットアップ*/
function setUp():void{
	var mc:MovieClip;
	for(var i:uint=1; i <= 8; i++){
		mc=this["mc_"+i];　//変数名を設定
		allList.push(mc); //allListに写真を格納
	}
	//indexListのセットアップ
	for(var j:uint=0;j<allList.length; j++){
		mc = allList[j];//格納した写真を代入
		if(j < count){
			indexList.push(j);
			mc.x = blockWidth * j;
			mc.y = 70;
		}else{
			mc.x = -1000;
			mc.y = -1000;
		}
	}//for(var j:uint=0; j < allList.length; j++)
}//setUp

//写真を右から左へ流す
function xEnterFrame(eventObj:Event):void{
	for(var i:uint=0; i<indexList.length; i++){
		var index:uint = indexList[i];
		var mc:MovieClip=allList[index];
		mc.x = blockWidth * i - movex;
		mc.y =70;
	}
	movex += speed;
	if(movex > blockWidth){
		movex = 0;
		nextSet();
	}
}/*xEnterFrame*/

function nextSet():void{
	indexList.shift();
	indexList.push(nextIndex);
	if(nextIndex < (allList.length-1)){
		nextIndex++;
	}else{
		nextIndex = 0;
	}
}/*nextSet()*/

2024/12/23

memo

倉庫番ゲームを通じてActionScript3.0の使い方をまとめることで、今年の集大成としたい。

自機や敵・背景のキャラクターを表示する

【拡大・縮小】一回転したらアイコンが消える

2024/12/16

ActionScript


var v_rad: Number = 0; //半径
var v_degree: Number = 0;
var v_speed: Number = 3;
var i: uint = 0;
var icon_degree: Number;
var mc: MovieClip;
var icon_flg: Boolean;
var count: int = 0;

addEventListener(Event.ENTER_FRAME, icon_enterframe);

function icon_enterframe(evt: Event): void {
	trace(currentFrame);
	for (i = 0; i < 8; i++) {
		v_rad += 0.5; //半径
		//半径の最大値で停止する
		if (v_rad >= 50) {
			v_rad = 50;
		}
		mc = this["icon_" + i];
		icon_degree = i * 45;
		v_degree += 0.2; //回転速度
		//一周したら閉じる
		if (v_degree > 360) {
			if (icon_flg == false) {
				v_rad--; //半径
				mc.alpha -= 0.1;
				//半径の最小値で停止する
				if (v_rad < 0) {
					icon_flg = true;
					v_rad = 0;
					mc.alpha = 0;
				}
			} /*if (icon_flg == false) */
		} /*if (v_degree > 360) */
		//回遊する円
		mc.x = 4 * v_rad * Math.cos((v_degree + icon_degree) * Math.PI / 180) + kanda.x;
		mc.y = v_rad * Math.sin((v_degree + icon_degree) * Math.PI / 180) + kanda.y;
	} /*for (i = 0; i < 8; i++) {*/
} /*icon_enterframe*/

三角関数を使った横回転

2024/12/15

ActionScript

/*三角関数を使った位置制御で立体的な円周移動を表現*/
var v_rad:uint = 100;
var v_degree:Number = 0;
var v_speed:Number = 3;
var i:uint=0;
var icon_degree:Number;
var mc:MovieClip;

addEventListener(Event.ENTER_FRAME,icon_enterframe);

function icon_enterframe(evt:Event):void{
	for(i=0; i<8; i++){
		mc = this["icon_"+i];
		icon_degree = i*45;
		v_degree += 0.2; //回転速度
		//回遊する円
		mc.x = 2*v_rad * Math.cos((v_degree+icon_degree) * Math.PI/180)+kanda.x;
		mc.y = v_rad * Math.sin((v_degree+icon_degree) * Math.PI/180)+kanda.y;
	}
}

一昔前にはやったカルーセルメニュー

【まだまだ途中】ピストン

2024/12/14

ActionScript

/*【要改善】ピストンをつくろう*/
var frame: uint = 30; //フレームレイト
var arm_r: Number = 32; //アームの初期値の半径32.5
var arm_angle: Number = 0;
var rad_re: int;
var wheel_deg: Number = 6; //1フレームごとに回転する角度
var wheel_rad: Number; //ホイールの軌道をアームが回る
var wheel_centerX: Number = 542;
var wheel_centerY: Number = 411;
var arm_head_distance:Number = 0;
var h_distance:Number = 105;
var h:Number = 0;
var w:Number = 32.5;
var l:Number = 110;

arm.addEventListener(Event.ENTER_FRAME, arm_EnterFrame);
wheel.addEventListener(Event.ENTER_FRAME, wheel_EnterFrame);
head.addEventListener(Event.ENTER_FRAME, head_EnterFrame);

function wheel_EnterFrame(eventObj: Event) {
	/*ホイールを時計回りに１秒間で回転させる*/
	/*30フレームなので、１フレーム12度で回転する*/
	wheel.rotation += wheel_deg;
	wheel_spec_txt.text = "ホイール\n" + "x座標:" + wheel.x +"\n" + "y座標:"+ wheel.y +"\n" + "ホイールの角度:" + wheel.rotation;
}
function head_EnterFrame(eventObj: Event) {
	//headの位置をアームの上間接に合わせる
	h = Math.round(Math.sqrt(l * l - w * w));
	head.y = arm.y - h;
	head.x = wheel_centerX;
	head_spec_txt.text = "ヘッド\n" + "x座標:" + head.x +"\n" + "y座標:"+ head.y +"\n" + "ホイールとの距離:" + h;
}

function arm_EnterFrame(eventObj: Event) {
	/*ホイールに接しているアームを円運動させる*/
	arm_angle += wheel_deg;
	wheel_rad = arm_angle * Math.PI / 180;
	arm.x = wheel_centerX + arm_r * Math.cos(wheel_rad);
	arm.y = wheel_centerY + arm_r * Math.sin(wheel_rad);
	/*ヘッドに接しているアームの角度を変更する*/
	var rad: Number = Math.atan2(head.y - arm.y, head.x - arm.x);
	rad_re = Math.round(rad * 180 / Math.PI);
	arm.rotation = Math.round(rad_re);
	arm_head_distance = Math.round(Math.sqrt(w*w+h_distance*h_distance));
	arm_spec_txt.text = "アーム\n" + "x座標:" + arm.x +"\n" + "y座標:"+ arm.y +"\n"
 + "角度:" + rad_re +"\n" + "アームとヘッドの距離"+arm_head_distance;
}

今後の改善点: ヘッドとアームの接合部が不安定になるので、改善が必要！

三角関数の基本

2024/12/11

ActionScript

三角関数を基本から学びなおそう

/*三角関数を使って振り子を動かす*/
var rad: Number; //ラジアン
var deg: Number; //角度
var startTime: Number; //時間

_mc.addEventListener(Event.ENTER_FRAME, _mc_EnterFrame);

function _mc_EnterFrame(eventObj: Event) {
	/*経過時間を取得する*/
	startTime=getTimer()/1000;
	/*sinの値を取得*/
	rad = Math.sin(startTime);
	/*ラジアン値を角度に変換*/
	deg =rad * 180 / Math.PI;
	_mc.rotation = deg;
}

COS (コサイン)


var rad: Number;
var deg: Number;
var startTime: Number;

_mc.addEventListener(Event.ENTER_FRAME, _mc_EnterFrame);

function _mc_EnterFrame(eventObj: Event) {
	/*経過時間を１秒単位で取得する*/
	startTime=getTimer()/1000;
	rad = Math.cos(startTime);
	deg =rad * 180 / Math.PI; /*ラジアンを角度に変換*/
	_mc.rotation = deg;
}

sin(サイン)とcos(コサイン)はどう違うの？: 動画開始、振り子の初期位置が違うので要注意

ピストンをつくろう

2024/12/02

Animate と AfterEffects

AnimateのActionScript3.0とAfterEffectsのエクスプレッションの比較をしよう

用語

平方根 Math.sqrt( )
アークタンジェント Math.atan2()
ラジアンからディグリーに変換する式

アークタンジェント

左右に移動するスターを矢印が追う

ラジアンからディグリーに変換する式

/*ラジアンを度数に変換する*/
degree = radian * 180 / Math.PI

アークタンジェントの実践検証

未完成なピストン

ピストンの制作を実践したのですが、残念ながら完璧なものが作成できませんでした。どうしても、ヘッドとアームの接続がうまくいかずに動作させるとぶれてしまいスムーズな動きが実現できませんでした。未完成ながら、ここまでまとめたコードを記載しておきます。


/*【要改善】ピストンをつくろう*/
var frame:uint = 30; //フレームレイト
var wheel_deg:uint=12; //1フレームごとに追加される角度
var arm_deg:uint = 0; //アームの初期値
var arm_r:uint = 32.45; //アームの初期値の半径32.45
var arm_centerX:Number = 542;
var arm_centerY:Number = 411;

arm.addEventListener(Event.ENTER_FRAME,arm_EnterFrame);
wheel.addEventListener(Event.ENTER_FRAME,wheel_EnterFrame);
head.addEventListener(Event.ENTER_FRAME,head_EnterFrame);

function wheel_EnterFrame(eventObj:Event){
	/*ホイールを時計回りに１秒間で回転させる*/
	/*30フレームなので、１フレーム12度で回転する*/
	wheel.rotation += wheel_deg;
}
function head_EnterFrame(eventObj:Event){
	//headの位置をアームの上間接に合わせる
	head.y = arm.y-105;
	head.x = arm_centerX;
}

function arm_EnterFrame(eventObj:Event){
    /*ヘッドに接しているアームの角度を変更する*/
	var rad:Number = Math.atan2(head.y-arm.y,head.x-arm.x);
	arm.rotation = rad*180/Math.PI;
	arm_deg = (arm_deg+12)%360;
	/*ホイールに接しているアームを円運動させる*/
	arm.x = arm_r*Math.cos(arm_deg*Math.PI/180)+arm_centerX;
	arm.y = arm_r*Math.sin(arm_deg*Math.PI/180)+arm_centerY;
}

名前	いとうともお
仕事	PCの修理受付・取扱説明書作成
好物	大豆食品
スキル	C言語 ActionScript3.0 JavaScript PHP