blog.alterna.in

先日α版が公開されたBetweenAS3ですが、昨日から少しずつ触ってみました。
Tweenerしか使ってなかったので、BetweenAS3をTweenerレベルまで使えるようになったら移行しようと思ってます。アップデート終了しましたし。

impot周り

いわゆるcaurina.transitions.Tweenerにあたるもの（tweenの発行とeasing）を使おうとしたときに必要なのは以下。


org.libspark.betweenas3.BetweenAS3
org.libspark.betweenas3.easing.*


easingがlinerでいいよーという場合にはorg.libspark.betweenas3.BetweenAS3のみで問題ないはずです（あんまりないと思いますが。）
あと後述するイベントハンドラへの登録まで行う場合はさらに以下の内容のクラスが必要です。


org.libspark.betweenas3.tweens.ITween
org.libspark.betweenas3.events.TweenEvent

または

org.libspark.betweenas3.tweens.IObjectTween
org.libspark.betweenas3.events.TweenEvent


という感じでTweenEventと、ITweenもしくはIObjectTweenが必要。
ITweenと、iObjectTweenの違いも後述。

Tweenさせる。

本題です。どう書くか。

1

BetweenAS3.tween(mc, { x:100 }, null, 1.0, Cubic.easeOut).play();

第一引数：ターゲットとなるオブジェクト
第二引数：tween先（Tweenerと同じように指定する）
第三引数：tween元（Tweenerにはなかった！）
第四引数：時間（BetweenAS3のデフォルトだと1.0、Tweenerだと0だったはず）
第五引数：easing（タイプを指定して、そのプロパティでin,outなどを指定）

注意：play()ってちゃんと書きましょう。

これで、Tweenerと同じようにtweenはできたはず。

TweenEvent

これが個人的に一番うれしいところ。
TweenerでもonCompleteはあるんだけど、コードが煩雑になってしまうので、あんまり使いたくなかったんです。（使ってたけど）

BeTweenAS3では、イベントハンドラへ登録することができるようになったのでかなりいい感じです。

1
2
3
4
5
6
7
8

var myTween:ITween = BetweenAS3.tween(mc, { x:100 }, null, 1.0, Cubic.easeOut);
myTween.addEventListener(TweenEvent.COMPLETE, onComplete);
myTween.play();
 
private function onComplete(e:TweenEvent):void
{
    trace("COMPLETE");
 }

非常にスッキリでわかりやすい！すてき！
これ、かなり好きなんですが、ITweenだとBetweenAS3.tween()でtweenをつくったときのターゲットとなるオブジェクトにアクセスできないみたいです。
なので、ターゲットにアクセスしたいときは、ITweenじゃなくて、IObjectTweenをつかいます。

1
2
3
4
5
6
7
8

var objTween:IObjectTween = BetweenAS3.tween(mc, { x:100 }, null, 1.0, Cubic.easeOut);
objTween.addEventListener(TweenEvent.COMPLETE, onComplete);
objTween.play();
 
private function onComplete(e:TweenEvent):void
{
    trace(e.target.target);
 }

TweenEvent.target.targetでターゲットとなるオブジェクト（mc）にアクセスできます。
あとは、かなりお世話になっていたColorShortcutsとか、fladdictさん制作のMatrixShortcutの絶対座標でのTweenあたりをフォローできるようになれば完全に乗り換えができる気がします。
以上をふまえて、完全に個人的なテンプレコードを。
これ元に改変していけばTweenの発行、イベントリスナへの登録、ターゲットへの参照が楽ちんです。

1
2
3
4
5
6
7
8
9
10
11
12
13

import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.tweens.IObjectTween;
import org.libspark.betweenas3.easing.*
import org.libspark.betweenas3.events.TweenEvent;
 
var objTween:IObjectTween =  BetweenAS3.tween(mc, { x:100 }, null, 1.0, Cubic.easeOut);
objTween.addEventListener(TweenEvent.COMPLETE, onComplete);
objTween.play();
 
private function onComplete(e:TweenEvent):void
{
    trace(e.target.target);
}

まとめ

BetweenAS3は、まだアルファ版なのでまだ修正が有ると思いますが、期待しつつ待ちたいと思います。
また、去年の今頃Tweenerに出会ってASを書く楽しさを知りました。
いろんなサイトを検索しまくって、それでもうまくいかなくて、Tweenできた時はすごくうれしかったです。
今後そういうBetweenAS3はそういう初心者が入門的する際に使ってもらえるライブラリになるんじゃないかな、と勝手に思っていたりもしています。
僕が体験したようなうれしい！みたいな感動を最初はコピペでもなんでもいいので体験できるとAS書く人がどんどん増えるんじゃないかなーと思います。
最後のテンプレコードはそういう意味も含めて書きました（半分は自分のためです）

最近サイトをリニューアルしたSNAPですが、新しく+ryuというデザインブランドを立ち上げました。

ABOUT US

デザインは人々に「楽しさ」や「やさしさ」、「気づき」など、心に平和をもたらすものでなければならないと思います。
つまり、デザインのフィールドは常にポジティブでなければならないのです。
+ryuは限定された1つの目的のためだけにあるわけではありません。+ryu という流れの中にあります。デザインの可能性に光をあて、新たなフィールドを開拓し、「場」を育て、大きな流れとして機能します。その活動が結果として、社会を照らすあたたかな光となることを願っています。

この+ryuのプロダクト第１弾として、iPhoneアプリ「eye clock」をリリースしました。
「時間をエンターテイメントする」というコンセプトから生まれた作品です。

今後も+ryu名義でiPhoneアプリに限らず、いろいろな活動を行っていきますので、よろしくお願いします。

ahomuのところの伝えるために〜が面白かったんで、自分のやり方もまとめておこう。

といっても、最近はめっきり作っていないので、学生時代のプレゼン資料（主にslidesライブラリで作っていたんだけど）の作り方を振り返る。

この作り方は主に「話す、発表する」という時に使うパターン。配布資料がある場合はまた別途作るんだけど、話したい内容から、どんだけムダを削り、必要なもののみにしてビルドアップしていくか、っていう作り方。

1.しゃべりながら、テキストエディタに殴り書きをする

まずは、プレゼンをしている状況を思い浮かべながら、ひたすらしゃべってみる。そしてしゃべりながらメモ帳とか、テキストエディタに内容を書いていく。
話している内容にムダがあってもいい、どうせあとで削るんだから。
たとえば、グラフなどを入れたい場合も「このグラフを見ていただくと…」などと書いていく。

2.テキストエディタを見ながら、いらない部分を削る

しゃべり終わったら、そのテキストを眺める。膨大にムダな部分があるはず。
この段階で、プレゼンのおおまかな流れをつくっていく。話す順番に違和感はないか、内容にムダはないか、不利になることを話していないかなどを見つめて削ったり、順番を入れ替えたりする。
入れ替えると、話した内容の前後関係も調整したりする。

ここで、いわゆる「原稿」にあたる部分ができる。実際に見ながら話すことはほとんどないけど。

3.削った文章の中から、資料に含める内容を検討し、さらに削る。

原稿の文章をすべて入れる訳ではないので、原稿の中から、必要最小限の内容をリストアップしていく
見出しであれば２０文字以内、テキストを１行程度にまとめていく。
この段階で、スライドがだいたい何枚くらいになっていくか分かる。

4.削った文章に優先度をつけ、見出し、文章、キャプション、画像、などの素材にしぼっていく

リストアップした内容から、実際にどの内容を大見出し、小見出し、文章、キャプションにするかを決定する。
グラフなどが必要であれば、それもリストアップし、準備しておく。

5.実際に資料にしていく。

実際に資料にしていく段階でも、文字の長さ、内容は適当か、前後関係に違和感はないか、などを見ながら調整をかけていく。

6.資料を見ながらまたしゃべってみる。

実際に資料ができたら、それを見ながらしゃべってみる。２でできた内容と話したい内容はぶれていないか、などに気をつけて自分でチェックしながらはなしていく。

基本的にはこんな作り方で作っていく。

この作り方の一番のメリットは、かなり制作時間が短縮できることと、資料を作りながらしゃべり込みを行っているので、内容が頭に入っているというのが大きいと思う。

結局は話して伝えるので、話ながら作っていった方がいいだろう、というのがこの作り方。