円高オーサリング

2010.09.07(火)

円高ですね。

最近輸入物の果物とかの恩恵を受けているbeshinです。

と、いうわけでTweenMaxやTweenLiteの有償版、ClubGreenshockを購入してみました。

無償版と比べていくつかプラグインの機能追加されているのですが、とりあえず、よく使いそうなdynamicPropsとtransformAroundCenterを紹介してみようと思います。

まずは、dynamicProps

Tween系のエンジンって、どこどこまで何秒かけてっていうのが基本なので、最終のどこどこの値が動的に変化するアニメーションには使えなかったりしますね。(あんまり無いけど)

わかりやすい例でいうと、画面のサイズが変わったときとか、マウスを追いかけるとか、例外的な処理を書いて、アニメーションをスキップさせたりして対応していたのですが、このdynamicPropsを使うと、うまいことやってくれるみたいです。

TweenLite.to(mc, 1, {
dynamicProps: {
x:this.mouseX
,y:this.mouseY
}
});

private function _getX():Number {
return stage.stageWidth / 2;
}

private function _getY():Number {
return stage.stageHeight / 2;
}

注意しないといけないのは、ゴールとなる値をFunction型で指定しないといけないことくらいです。ろくにドキュメントを読まずに、適当にやっていた僕は、しばらく悩みました。ドキュメントは大事です。しっかり読みましょう。

次に、transformAroundCenterです。
通常、Flashって基準点があって、それを基準に移動とか、回転とかをするんですが、transformAroundCenter使うと、インスタンスの中心を基準にいろいろな変形処理をやってくれます。

TweenLite.to(mc, 1, {
transformAroundCenter: { x:stage.stageWidth / 2, y:stage.stageHeight / 2 },
ease:Quad.easeOut
});

さらに、transformAroundPointというのがあって、任意の点を基準に動かしたりということも出来ます。

ただ、このtransformAroundCenterですが、使えるプロパティが限られてます。TransformAroundPointVarsのプロパティがそれにあたります。
scaleX:Number、scaleY:Number、rotation:Number、width:Number、height:Number、shortRotation:Object 、x:Number、y:Number

実は、この二つを組み合わせることができると便利そうだなと思っていたのですが、そんな感じの事情でうまくいきませんでした。

後から知ったんですが、flパッケージにある、MatrixTransformerクラスを使っても同じようなことが出来るみたいですね。

任意の点で回転させるサンプル。
var mat:Matrix = mc.transform.matrix;
MatrixTransformer.rotateAroundExternalPoint(mat, 任意のX座標, 任意のY座標, 回転);
mc.transform.matrix = mat;

というか、やり方としてはこれで求めたmatrixをdynamicPropsでTweenさせればいいんじゃね?という話になりますね。

ライブラリ依存しまくりな今日この頃ですが、ちょっとした時間も惜しいときとかにいかがでしょうか?

円高の今がチャンスですよ。

Tweensyを使ってみる

2010.06.29(火)

どうも、pearmasterです
夏至を過ぎ本格的な夏が近づいてきた今日この頃、相変わらず溶けてます

あぢぃ。。。

さて、とある案件でFlashコンテンツを作成しています
構造的には簡単なんでprogressionですすーいと進めていってるんですが、
ここで問題が発生・・・

1つ1つのSceneが長いので、2回目以降のユーザの為にスキップできるようにしてほしい
と、要望が入りましたとな

さてどうしよう。。。
今まではDoTweenerで動きを設定していたんですが、それだと色々難しい
うーむ・・・
ということでTweensyとやらを使ってみることにしました
だって高速って書いてあったんやもん
続きを読む »

OkAGOSTINI (オカゴスティーニ)第4号 ボタンで操作

2010.06.18(金)

darmanです。
自分名前、岡田って言うんですけど、
そのノリで「OkAGOSTINI」っていうフラッシュの練習台を作ってます。
簡単に偉そうに言うと、僕が作るオカゴスティーニ フラッシュをどんな方法でもいいから再現してください。
とったものです。

いま、1~3号までやってますが、
ついに4号を出します。
というか、出さざるを得なくなったので作りました。

第四回はマウスイベントを巧みに使ってインタラクティブな動きを作ろうです。
真ん中の四角をみんなでよってたかっていじっちゃおうというフラッシュです。
さあ、みんなで考えよう!

続きを読む »

FlashDevelopでASDoc

2010.06.15(火)

フラッシュ制作をしていくと、
「俺の、俺による、俺のためのクラス」がちまちま作られていくわけですが、
見返してみるとこのクラス結局何したいの?
っていうのが大量発生するわけです。

そこで、自分が汗水流して作ったクラスちゃん達を
埋もれさせないためになにかドキュメントにまとめたい。

そんなときにはこれ!
「ASDoc!」

なじみがあるのは、FlashのビルドインクラスやProgressionのASDocかと思われます。

・ActionScript 3.0 コンポーネントリファレンスガイド
http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/
・Progression 3.1 – API Reference
http://asdoc.progression.jp/

あ、なんかプロっぽくていいね!すごくいい!
では、早速作ります。
続きを読む »

W3CDTF形式の文字列をDate型に変換したい

2010.05.27(木)

こんにちわ。娘がついにつかまり立ちしまして目が離せないbeshinです。

RSSとか扱うときに、日付がW3CDTF形式だとFlashでそのまま使うことができませんよね。

W3CDTF形式というのは、要するにこんな感じで表記されている日付です。
2005-04-23T17:20:00+09:00

new Date(“2005-04-23T17:20:00+09:00″);

とかで、変換してくれたらいいのですが、そうもうまくいかないみたいです・・・

いつもは笑うくらい適当に力技で文字列操作とかしてDate型に変換して扱っていたのですが、as3corelibのDateUtilクラスにparseW3CDTFというstaticなメソッドが用意されてて、簡単にDate型にパースできることにさっき気づきました。世の中便利ですね。

使い方は

var date:Date = DateUtil.parseW3CDTF(“2005-04-23T17:20:00+09:00″);
trace(date)//Sat Apr 23 17:20:00 GMT+0900 2005

簡単でしたね。

今週ものこり少なくなりましたが、一生懸命がんばりましょう。

でわでわ。ごきげんよう。

ビットシフトでセンタリングとか久々のCasaとか

2010.01.28(木)

サイコロ当たったわけじゃないけどbeshinです。

Flashでセンタリングさせるときとか、いろいろ2で割ったりとかしてたんですが
ビットシフトでできることをさっき知りました。
なんか圧倒的におしゃれなのでこっちでやろうと思います。

private function _onStageResize(e:Event = null):void {
x = stage.stageWidth / 2 – width / 2;
y = stage.stageHeight / 2 - width / 2;
}
↓↓↓↓↓
private function _onStageResize(e:Event = null):void {
x = (stage.stageWidth >> 1)-(width >> 1);
y = (stage.stageHeight >> 1)-(width >> 1);
}

ちなみにビットシフトについてはあんまり意味がわかってなくて
こうやればこう動くっていうのだけ知ってる感じ。
きちんと勉強しないとだめですね。

あと、Casa libのDistributionがSprite継承してることをさっき知りました。
wrapper系はこれ拡張して使うかんじなんですかね?
class hogehoge extends Distribution的な

http://as3.casalib.org/docs/org_casalib_layout_Distribution.html

でわでわ。

よくつかうものとかの備忘録

2009.11.11(水)

こんにちわ。あいかわらず確変継続中でサイコロ当たりまくりのbeshinです。
いろいろネタは溜まっているので、ちょっとずつ投下していきます。

僕みたいなへっぽこASerがコード書くと、簡単な処理でもなぜかif文だらけになったり、動くけどすごく複雑になっちゃったり、そういうことって多々あります。

でも案外便利な関数が用意されていて、それらをちょっと応用することで、すごく簡潔に書けることってたくさんあるんですね。

毎回過去のコードを参照してコピペするのが面倒くさくなったので備忘録としてメモっておきます。

■一定の数までカウントがアップすると0に戻る(下の例だと5まで行くと0にもどる)
this._count = (this._count + 1) % 6;

■範囲の限定(0~100まで)
var max:Number = 100;
var min:Number = 0;
this.x = Math.max(min,Math.min(max,this.x));

■配列の値がすべて同じであるかどうか(数値限定)
最大値と最小値を出して比較
最大値
arr.sort(Array.NUMERIC)[arr.length-1];
最小値
arr.sort(Array.NUMERIC)[0];

■配列の複製
var arr:Array = [10, 8, 9, 5, 2, 3, 4, 6, 7];
var arr2:Array = arr.slice();
sliceは配列の一部を切り取って、別の配列として返す。

■テキストフィールドのアルファ
Flashフォントの埋め込みをしないと、テキストにアルファがかからない。と思っていました。
blendMode = BlendMode.LAYER;
TextFieldの親コンテナにBlendMode.LAYERを指定すると、普通にいける。
via:http://wonderfl.net/code/7beb8650734b794c73fde3cc45f96a93acc05fb1

■PV3Dのオブジェクトのピッタリ狙った位置とサイズに2Dのムービークリップを重ねる技術
Camera3D の focus * zoom がちょうどスクリーン座標と 3D 座標が一致する距離。
this._camera.z = this._camera.focus * this._camera.zoom;

■Camera3Dの簡単設定
対象のtoransformコピーして、rotationしてmovieBackfoword!
var target:DisplayObject3D;
var distance:Number = 100;
this._camera.transform.copy(target.transform);
this._camera.moveBackward(distance);

そういえば娘が生まれました。百絵っていいます
主に笑ったり泣いたりウンチしたり寝たりしています。

package{
public class Momoe extends Beshin{
public function Momoe(){}
public function 泣く(){trace(“あーーーーー”)}
public function 笑う(){trace(“あうあうあう”)}
private function ウンチ(){trace(“ぶりぶりぶり”)}
private function 寝る(){trace(“ZZZ・・・”)}
}
}

いろいろぶんかい

2009.09.30(水)

サイコロよく当たるなあ。beshinです。

今回は分解です。
分解って楽しいですよね。元に戻せないところとかも含めて楽しいですね。

というわけで色分解です。
なんか思ったより簡単にできたんですが、ベースの色とBlendModeによって、RGBに分解されたり、CMYに分解されたり、これはこういうもんなんでしょうか・・・結果はうまいこといったんですが、実は理屈があんまりわかってません。

あんまりわかってません。

とりあえず、読み込んだjpg画像を読み込んで、copyChannelで分解したbitmapDataを配列に格納して、matrix変形を加えながらdrawしてる感じです。

■RGB(クリックすると分解します)

This movie requires Flash Player 9

■CMY(クリックすると分解します。ところでKはどこだ?)
This movie requires Flash Player 9

ビルかわいいよビル

ドット絵

2009.09.16(水)

こんにちわ。涼しくなってきたので全力で自転車をこぐbeshinです。

最近、夕方になるともっぱら公園でのんびりしてます。でも蚊がたくさんいるので

かゆいです。

というわけで、今回はドット絵を描いてみようと思います。
yoshiwebさんのこの記事を読んで、これならプログラムでドット絵書けるんじゃね?と思ったのでやってみました。

flash on 2009-10-8 – wonderfl build flash online

ドット絵といえば、マリオですよね。クリックすると、表示面が入れ替わります。

各ドット絵は配列で管理してます。

例えばマリオならこんな感じですね。各数字が色と関連付けされてます。

var arr:Array = [
[0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0],
[0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0],
[0,0,0,0,2,2,2,3,3,2,3,0,0,0,0,0],
[0,0,0,2,3,2,3,3,3,2,3,3,3,0,0,0],
[0,0,0,2,3,2,2,3,3,3,2,3,3,3,0,0],
[0,0,0,2,2,3,3,3,3,2,2,2,2,0,0,0],
[0,0,0,0,0,3,3,3,3,3,3,3,0,0,0,0],
[0,0,0,0,2,2,1,2,2,2,0,0,0,0,0,0],
[0,0,0,2,2,2,1,2,2,1,2,2,2,0,0,0],
[0,0,2,2,2,2,1,1,1,1,2,2,2,2,0,0],
[0,0,3,3,2,1,3,1,1,3,1,2,3,3,0,0],
[0,0,3,3,3,1,1,1,1,1,1,3,3,3,0,0],
[0,0,3,3,1,1,1,1,1,1,1,1,3,3,0,0],
[0,0,0,0,1,1,1,0,0,1,1,1,0,0,0,0],
[0,0,0,2,2,2,0,0,0,0,2,2,2,0,0,0],
[0,0,2,2,2,2,0,0,0,0,2,2,2,2,0,0]
]

今回アニメーションにBetweenAS3を使ってみようと思ったのですが、連打したときの挙動が怪しかったので、いつものようにTweenMaxでトゥィーンしています。
とおもったら、こんな記事が。
これでいけるようになるのかな・・・?

ソースは、papervision3dでCubeにする際の処理がすげえ力技なので、
もうちょい修正してわんだふるにあげるかもしれないです。

追記:10/08wonderflにあげました。

パーティクル祭り

2009.08.24(月)

こんにちわ。このサイトってこういうテーマを掲げてたことをさっき思い出しました。
今日も西日がまぶしいbeshinです。

皆さんは「パーティクル祭り」をご存知ですか?

少し前にWonderflというサイトで盛り上がったのが記憶に新しいです。そんな祭りにすっかり乗り遅れて遠目で見守っていたのですが、少し時間ができたのでいろいろな人が書いたコードをみて勉強してみました。

普通FLASHとかで複数のオブジェクトを動かす場合って、配列とかFP10とかだったらVectorとか使うと思うのですが、どうやらlinked List?(あんまりわかってない)というのを使ってるみたいです。大昔に読みかけてそのまま枕にしてしまった、(ほんとうにすみません)デザインパターン入門本に書いてたイテレータパターン?(あんまりわかってない)ってやつなんですかね?こういう風に使うんですね。

というわけで、僕もつくってみました。画像は僕のTwitterアイコンです。基本的に自分大好きなんです。

flash on 2009-8-24 – wonderfl build flash online

コード汚いですね。すみません。
流れ的には、

  1. 画像を読み込んで、1pxずつgetPixelで解析してPerticleオブジェクトにし、linked Listを形成する。
  2. マウスの動きに合わせて、setPixelする。while ((p = p.next) != null) っていうのが速いみたい。
  3. クリックすると、はじまります。もう一度クリックするとちょいエフェクトかかります。

Wonderflはじめて触りました。
ローカルで実験してたので、あれだけど、こういう場合FORK?するのが正しいんですね。すみません。

どうでもいいですが、「パーティクル」で変換すると「パーティ来る」とセレブな変換が行われるので、おもわず「行く行くー!」と言いそうになります。