Home > Archives > 2008-05

2008-05

RectをaddTweenしてみる


この前のエントリ(ActionScriptで基準点を変更する)のが出来るのかは、結局分からなかったんですが…

別の角度から考えてみたら、RectをaddTweenすることが出来たので、その過程をメモっておきます。

★サンプル

JavaScriptを有効にしてご覧ください。

Rectを描いて、xとyの値を設定し、addChildした状態はこんな感じです。(100、100に配置)

RectをaddChildした状態

イラストの様に左上を基準点にして、配置されます。これにaddTween(scaleXとscaleYに任意の値)を設定すると、以下のようになってしまいます。

RectをaddTweenで拡大した状態

左上を基準に、右下に向かって(★サンプルの左側のように)拡大されてしまいます。

そうではなくRectの中心から拡大して欲しいので、それを表してみると以下の様になります。

中心を基準に拡大した状態

先ほどのイラストと見比べてみると…

描写したRectを見比べた状態

緑のRectの位置にするには、「赤のRectのwidth」から「青のRectのwidth」を引いた値を出して、その値の分だけ左上に移動させてあげれば良さそうです。

青のRectのwidthを仮にdwとすると、赤のRectのwidthはdw * 拡大率で求めることが出来ます。ここで拡大率をspreadとすると、以下の様に表せます。

//拡大率から移動させる距離を求める
var distance:Number = ((dw * spread) - dw) / 2;

これを左上に移動させるとなると、こんな感じでしょうか…(オブジェクトはs)

//拡大率から移動させる距離を求める
var distance:Number = ((dw * spread) - dw) / 2;
var distanceX:Number = s.x - distance;
var distanceY:Number = s.y - distance;

これをaddTweenに設定してあげれば、何とかなりそうです。

作成してみたスクリプトはこんな感じ

//使用するクラスをimportしておく
import  caurina.transitions.Tweener;
import flash.display.Sprite;

//描写するオブジェクトをsとする
var s:Sprite = new Sprite();

//sの各種設定
//xの値
var dx:int = 0;
//yの値
var dy:int = 0;
//width
var dw:int = 50;
//height
var dh:int = 50;

//Tweenerの拡大率
var spread:Number = 1.5;
//拡大したものをもとに戻す
var general:int = 1;

//Tweenerする時間の設定
var second:int = 1;

//移動させる距離
var pointX:int = 150;
var pointY:int = 150;

s.graphics.beginFill(0xCCCCCC);
s.graphics.drawRect(dx,dy,dw,dh);
s.graphics.endFill();

//実際に移動させる
s.x = pointX;
s.y = pointY;

addChild(s);

//拡大率から移動させる距離を求める
var distance:Number = ((dw * spread) - dw) / 2;
var distanceX:Number = s.x - distance;
var distanceY:Number = s.y - distance;

//ロールオーバーした時の処理
s.addEventListener(MouseEvent.MOUSE_OVER,rollover);
function rollover(event:MouseEvent):void{
Tweener.addTween(s, {x:distanceX,y:distanceY, _scale: spread, time:second, transition:"easeOutBounce"});
}

//ロールアウトした時の処理
s.addEventListener(MouseEvent.MOUSE_OUT,rollout);
function rollout(event:MouseEvent):void{
Tweener.addTween(s, {x:pointX,y:pointY, _scale:general, time:second,transition:"easeOutBounce"});
}

もっと簡単な方法がありそうな気がしますが…

基準点の変更


ちょっと気になることをメモしておく

drawRectで矩形を描写し、addChildで表示リストに追加する。それを任意の位置に移動させ、Tweenerを使ってマウスオーバーしたら、大きさを1.5倍にしたい

import  caurina.transitions.Tweener;
import flash.display.Sprite;

var s:Sprite = new Sprite();
s.graphics.beginFill(0xCCCCCC);
s.graphics.drawRect(0,0,50,50);
s.graphics.endFill();
s.x = 150;
s.y = 150;
addChild(s);

s.addEventListener(MouseEvent.MOUSE_OVER,rollover);
function rollover(event:MouseEvent):void{
Tweener.addTween(s, {scaleX:1.5, scaleY:1.5, time:1, transition:"linear"});
}

こんな感じにすると、描画したRectの基準点は左上なので、マウスオーバー→左上を基準に右下にTweenするものが出来上がる。

そうではなくて、Rectの中心を基準にして、Tween(拡大)するものにしたい。

MovieClipシンボルを作成→基準点を中心にすれば可能だけども…

シンボルを作成せずに、ActionScriptで作成したRectの基準点を、左上から中心に変更出来るのだろうか?

調べてみなければ…

ProgressionをClassベースでやってみる(3)


クラスベースで作成した完成サンプルの手法を、東京てら子サンプルキットに適用させてみようと思っているんですが… う~ん、やっぱり上手くいかない…

↓クラスベースのサンプルでは、IndexButtonに四角を描写して、IndexSceneでaddChildさせている。

// load イベントを受け取る

protected override function _onLoad():void {

	progression.container.addChild( new IndexButton() );

	progression.container.addChild( new MySceneButton() );

	}

これと同じことが出来ないのかなぁ… と思って試しているんですが…

  1. 東京てら子のworkshopkitのIndexButtonに、同じように四角を描写する。
  2. サンプルと同じように、IndexSceneにaddChildを追記してみる
protected override function _onLoad():void {
	// コマンドを登録します。
	addCommand(

	// 表示リストに追加します。
	new AddChild( progression.container, _intro ),

	// 表示リストから削除します。
	new RemoveChild( progression.container, _intro ),

        //↓この一行を追記してみる
        progression.container.addChild( new IndexButton() );

これでパブリッシュすると、怒られる!

public class IndexScene extends SceneObject {

  (略)

  private var _indexbutton:IndexButton;

  (略)

  public function IndexScene( name:String ) {

   (略)

   _indexbutton = new IndexButton();

   (略)

  protected override function _onLoad():void {

	// コマンドを登録します。
	addCommand(

	// 表示リストに追加します。
	new AddChild( progression.container, _intro ),

	// 表示リストから削除します。
	new RemoveChild( progression.container, _intro ),

        //↓この一行を追記してみる
        new AddChildAt( progression.container, _indexbutton,110 ),

それなら、表示リストに_navigationや_backgroundを追加している手法と同じにすればいいのかと思い、上記の様に変更()してみても、上手くいかない…

Navigation.asにボタン機能はまとめて書くべきなの? と思って今度はNavigationに上記のIndexButtonをaddChildしてみても…

これまた上手くいかない…

う~ん、Progressionムズカシイ!

ProgressionをClassベースでやってみる(2)


ページ遷移の簡単なサンプルを作成してみました。

丸がボタン、四角がコンテンツのつもりです。

サンプルページを見る

Progression Framework – Trac内のクラスベースでの制作スタイルに公開されているサンプルを元に作成しました。

今回はボタンにマウスオーバーした時に、ツールチップを表示させたいなぁ…と思っていたので、それを試してみることに…

リファレンスを見ると、ツールチップを表示させるには、ToolTipクラスを使うと書いてあります。なので、サンプルファイルにToolTipを追加してみたのですが、怒られました。

現在、僕が使用しているProgression Frameworkのバージョンは2.0.21。ちなみに上記からダウンロードしたサンプルのバージョンは、2.0.13みたいです。

サンプルファイルのsrc>classes>classes>jp>progression>core>displayフォルダにあるのは、ToolChip.as。

最新バージョンではsrc>classes>classes>jp>progression>core>displayフォルダにあるのは、ToolTip.asとなっています。

どうやらクラス名が変わっているみたいです。

ですので、サンプルファイルに追記する場合には、ToolChip。新しくファイルを作成していく場合には、ToolTipを使うことになります。

加えて今回は、CastTextFieldクラスを使ってみました。

使い方は、CastTextFieldクラスをimportして、new CastTextField();でインスタンスを作成してみました。

import jp.progression.casts.CastTextField; 
public var cast1:CastTextField; 
cast1 = new CastTextField(); 
cast1.text = "MySceneページ";

果たして、この使い方が正しいのかは分かりませんが、今のところ問題なく動作しております。

このサンプルのファイル一式をアップしておきます。突っ込みどころが満載だと思いますが…

サンプルファイル一式をダウンロード(ZIP形式:512KB)

ProgressionをClassベースでやってみる(1)


早速Classベースでの作成に挑戦。

ダウンロードした「東京てら子ワークショップキット」を参考にしながら作成しているのですが、早くも躓く…

Classファイルやフォルダなどは、上記のサンプルと同じにしています。

IndexButton.asファイルを作成し、コンストラクタに以下を記述。

public function IndexButton() {

			//ボタンの役割を果たす円を作成
			graphics.beginFill( 0x0000FF );
			graphics.drawCircle( 50, 250, 50);
			graphics.endFill();

			// クリック時に移動する先のシーン識別子を指定します。
			sceneId = new SceneId( "/index" );

			// マウスオーバー時のツールチップ内容を指定します。
			toolTip.text = "トップページに移動します。";
		}

作成した円をナビゲーションボタンとして使いたいので、IndexScene.asのオーバーライド・イベントメソッドの箇所に記述してみました。

protected override function _onLoad():void {
			// コマンドを登録します。
			addCommand(
				// 表示リストに追加します。
				new AddChild( progression.container, _intro ),
				// 表示リストから削除します。
				new RemoveChild( progression.container, _intro ),

				// 表示リストに追加します。

				//↓これが正しいのか分からない!
				progression.container.addChild( new IndexButton() ),

				new AddChildAt( progression.container, _navigation, 100 ),
				new AddChildAt( progression.container, _background, 0 )
			);
		}

Progression.verbose.enabled = true;にしてプレビューしてみると、こんなエラーが出る。

TypeError: Error #1034: 強制型変換に失敗しました。flabaka.navi::IndexButton@2fe12e1 を jp.progression.core.commands.Command に変換できません。

ボタンをMovieClip→リンケージ設定で作成、プレビューときは、ワークショップのサンプルの通りにやってみたら上手くいったのだが…

基本をきちんと理解出来ていないなぁ…

Home > Archives > 2008-05

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top