イナヅマTVログ

2009.12.31
03:23
author: taikiken
0件のコメント

【制作事例】九州ちくご元気計画、トップページFlash

九州ちくご元気計画のトップページFlashを作成しました。

作成したのはトップページ用のFlashコンテンツです。
ブログ feed を取得し、タイトルを縦書き表示しリンクをつけています。

縦書きとリンクには、Text Layout Framework を使用しています。
自動的にコンテンツは Flash Player 10.x 以降でないと見ることができません。

ブログ feed を取得する部分に Progression 3 のコマンド機能を使用しています。
公開コンテンツでの Progression 初使用になります。

Text Layout Framework の API が公開されているものと違うようで苦労させられましたが、MonsterDebugger でインスタンス解析しながら作成しました。
時間に余裕があれば Text Layout Framework のチューンナップできたのにと、少し残念です。

Tween Engine は GTween V2.01 を使いました。
これも初使用でしたが、TweenLight / TweenMax に似たAPIだったのでスムーズに導入できました。

Text Layout Framework は大きな可能性が秘められているようですが、まだまだ開発途上のかおりがしています。
更なる熟成が楽しみです。

SIDEVISION Labs

2009.12.25
01:51
author: taikiken
0件のコメント

Flashで縦書き・段組みだったらText Layout Framework

Adobe の Open Source プロジェクト【Text Layout Framework
Flashデザインのボトルネックだった文字表現を著しく向上させることができます。

次期 CS5 に搭載される Text Engine を先取りしてるのかなぁ。
できることは、Sneak preview で紹介されていることと同じ、だと思う。

gotoandlearn.com: Sneak Peak of Flash CS5
23min.あたりからがText Layout Framework。

日本語などの縦書きやアラビア語などの右から左へ表示する英語以外の言語に対応するなど意欲的な機能が満載です。
段組みやテキストブロックをリンクできるなどDTPアプリに近いことができるようです。

詳細はAdobeのText Layout Framework 1.0 Major Feature Listから引用です。

  • Bidirectional text, vertical text and over 30 writing scripts including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, Vietnamese, and others
  • Selection, editing and flowing text across multiple columns and linked containers
  • Vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography
  • Rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
  • Cut, copy, paste, undo and standard keyboard and mouse gestures for editing
  • Rich developer APIs to manipulate text content, layout, markup and create custom text components
  • ActionScript-based object-oriented model for rich text layout enabling live updates

【実行環境】
Flash Player 10 and Adobe AIR 1.5。
日本語インライン入力には対応できていない様子。(Mac)

【開発環境】
Flash CS4, Flex Builder 3.x, Flash Builder 4.x + Text Layout Framework

Flash CS4 Component
Adobe Labs Downloads
http://labs.adobe.com/downloads/textlayout.html

PDF:http://download.macromedia.com/pub/labs/textlayout/textlayout_flashcomponent_overview.pdf

Flex Bulder, Flash Builder
Flex SDK 4.xに添付済み。
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

できることは分かったけど、ドキュメントが少ないのは気が重い。
できることが多いと使うのは多分めんどくさいはず、ドキュメントのありかをリストアップ。

■インストール
Using the Text Layout Framework with Adobe Flex Builder 3.2
Using the Text Layout Framework with Adobe Flash CS4 Professional

■サンプルファイル
Download examples.

■Adobe lab
http://labs.adobe.com/technologies/textlayout/

■forum
http://forums.adobe.com/community/opensource/tlf/

■開発者ブログ
http://blogs.adobe.com/tlf/

■ActionScript 3.0 Reference for the Adobe Flash Platform
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/package-summary.html
Text Layout Frameworkはflashx.textLayoutにpackageされています。

flashx.textLayout.compose The flashx.textLayout.compose package contains the classes used for breaking text into lines, and arranging lines in containers.
flashx.textLayout.container The flashx.textLayout.container package contains classes for displaying text in the Text Layout Framework.
flashx.textLayout.controls The flashx.textLayout.controls package contains text layout classes.
flashx.textLayout.conversion The flashx.textLayout.conversion package contains classes for importing text to or exporting text from a TextFlow object.
flashx.textLayout.edit The flashx.textLayout.edit package contains classes for editing text in the Text Layout Framework.
flashx.textLayout.elements The flashx.textLayout.elements package contains the core classes used for representing text content in the Text Layout Framework.
flashx.textLayout.events The flashx.textLayout.events package contains event classes for the Text Layout Framework.
flashx.textLayout.factory The flashx.textLayout.factory package contains classes for composing and displaying read-only text in the Text Layout Framework.
flashx.textLayout.formats The flashx.textLayout.formats package contains classes used for representing text formatting in the Text Layout Framework.
flashx.textLayout.operations The flashx.textLayout.operations package contains classes for editing operations applied to the text in the Text Layout Framework.
flashx.textLayout.utils The flashx.textLayout.utils package contains utility classes for the Text Layout Framework.
flashx.undo The flashx.undo package contains the classes that manage the history of editing operations.

API Reference が一番役に立ったような。
ReferenceにのっていないClassがPDFにあったりして困ったりはしたけど・・・

コードサンプルは別の機会に・・・

update2010-01-08
Adobe labs の情報が古いようなので削除します。

2009.12.15
14:24
author: taikiken
0件のコメント

ActionScript 2, mx ライブラリ使用メモ mx.transitions.OnEnterFrameBeacon

ActionScript 2でfpsごとの処理をする時は onEnterFrame を使います。
問題はonEnterFrameMovieClip でしか有効にならないことと、たくさんの MovieClip インスタンスで onEnterFrame を使うと実行スピードが落ちてしまい、コマ落ち状態に陥りやすくなること。

mx.transitions.OnEnterFrameBeacon を使えば MovieClip を継承していないクラス内でも onEnterFrame が使えるようになります。

mx.transitions.OnEnterFrameBeacon_rootの深度:9876へcreateEmptyMovieClipで空のMovieClipを作成し、その MovieClipのonEnterFrame 関数から_global.MovieClip.broadcastMessage ("onEnterFrame")を実行します。

import mx.transitions.OnEnterFrameBeacon;
 
class BeaconTest {
	function BeaconTest () {
		OnEnterFrameBeacon.init();
		MovieClip.addListener(this);
	}
	private function onEnterFrame () {
	// do something
	}
}

onEnterFrame が必要なインスタンスは MovieClip.addListener(listener:Object) する。

var listener:Object = {};
listener.onEnterFrame = function () {
};
 
MovieClip.addListener(listener);

mx.events.EventDispatcher と組み合わせて使う。
などで、複数の onEnterFrame 関数を作らずにたったひとつの onEnterFrame で処理することが可能になります。

2009.12.13
10:52
author: taikiken
0件のコメント

ActionScript 2, mx ライブラリ使用メモ mx.behaviors.DepthControl

ActionScript 2 でインスタンスの深度(重なり順)管理に使える関数は swapDepths, getDepth と限られている。

インスタンスを最前面にするには最前面のインスタンスを変数に保持し swapDepths させる。
そのつど getDepth を使って各インスタンスの深度を走査し最前面のインスタンスと swapDepths させる。

どちらにせよ深度を変えるのに使えるのは swapDepths なので、深度を交換することしかできません。
単純に深度を変更(最前面)し他のインスタンスの深度を変更したくない時はかなり面倒くさい処理を挟まないといけなくなります。

Adobe(当時はMacromedia)開発チームもそれは承知していたようでコンポーネントように便利なクラスを開発してくれています。

import mx.behaviors.DepthControl;
 
// 再背面
DepthControl.sendToBack(target:MovieClip);
// 最前面
DepthControl.bringToFront(target:MovieClip);
// 深度を1段階低く
DepthControl.sendBackward(target:MovieClip);
// 深度を1段階高く
DepthControl.bringForward(target:MovieClip);

関数内部では走査処理が走っているのでインスタンスの数が多くなると当然フレームレートは落ちてしまいます。
めんどうなことはクラス内部で全部処理してくれるので便利に使えます。

2009.12.12
17:45
author: taikiken
2件のコメント

inazumatv.com, ロゴとfaviconをアップデート

favicon:favicon

Logo
inazymatv.com

fiviconとロゴをアップデートしました。
颯爽としてスッキリと引き締まった感じがとても気に入っています。

デザインは TYPOGRAM の Takeshi さんです。
TYPOGRAM の仕事はいつも丁寧で迅速です。
フォントへのこだわりは作品を見ていると良くわかります。
http://www.typoglam.com/work/advertising/toden/toden01.html
最近はライターとしても活躍していて、守備範囲をどんどん広げていっている多才な方です。

今月からフリーになって活動していくとのこと、今後の活躍にも目が離せません。

パッケージデザインやロゴなどでお困りの時にはぜひ声をかけてあげて下さい。
今回は忙しいなか、ましてや友情サービスにもかかわらず引き受けていただいて感謝感謝です。

さて、名刺と封筒の印刷手配はどうしようかなー。

2009.12.11
09:49
author: taikiken
0件のコメント

福岡てら子 3 「音に反応する何か」はパーティー付き

2009年最後の福岡てら子 Vol.3 はプレゼン+忘年会のパーティスタイルです!
ATND:http://atnd.org/events/2429

2009/12/26
Thanks Giving Day(4F) (福岡県福岡市中央区大名1-15-35)
http://r.tabelog.com/fukuoka/A4001/A400103/40020686/

【 スケジュール 】

  • 19:00 受付
  • 19:30 開始
  • 21:30 終了

今回もWwwgooglecom 5ive の @_simo さんの尽力により開催ができることになりました。
ありがとー。

今回のテーマは『音に反応する何か』です。
なんかワクワクします。

私もなんか作っちゃおうと目論んでます。
頭の中では完成しているけど、まだできあがってません。
なんとか当日までには完成させなくては、といつもどおりギリギリのスケージュール。

パーティー参加者 + スピーカー ともども絶賛募集中です。
年末の忙しい時期ですが、ぜひ楽しい夜を楽しみましょう。

まだ申し込みがまだの人はぜひATNDへ。
http://atnd.org/events/2429

2009.12.10
20:21
author: taikiken
0件のコメント

HydroTweenはOpenTweenとして再開発される

HydroTween作者のDonovanさんが自身のブログでHydroTweenの今後についてポストしています。

2009-12-01
HydroTween is now OpenTween and on Github!

HydroTweenとしての開発は止めてOpenTweenとして新しく開発するよってことらしいです。
コードもGoogle Codeからgithubへ移動になっています。

OpenTweenもHydroTween同様GoASAPをバックエンジンとして使用しています。
てことはcycle時のバグ改善は期待薄かもです。
cycle時の挙動バグはGoASAPのバグに由来すると思うからです。

コードを早速落としてみましたが使用法は変わっていません。
HydroTweenのお手軽な感じはそのままです。
go メソッドもそのままになっていました。
CONSTRUCTORの中身もほとんど変わっていないようです。
チェックしたのは

(repeater == null) ? null : ((repeater is LinearGoRepeater) ? repeater as LinearGoRepeater : new LinearGoRepeater(repeater.cycles, repeater.reverse, repeater.easing))

の部分です。
repeater as LinearGoRepeater
だと問題が発生することが分かっていたからでしたが、変更はされていませんでした。

it’s still in the infant stages

と書かれているとおりまだまだ開発初期段階のようです。
連続アニメーションの手段もまだ提供されていません。

ただ、長く放置状態にあったTweenEngineのひとつがまた開発が始まったのは嬉しい限りです。
今後も要注目ですね。 😀

update 2012-04-17
gitのコードも2年前に0.1として登場して以来音沙汰なしです。
Read Meも無い現状は悲しいとしか言いようがありません。
https://github.com/hydrotik/OpenTween

2009.11.13
14:32
author: taikiken
0件のコメント

flight404 on vimemo, Solar rework カッコいい

以前から魅力的な作品を作り続けている flight404 さんの映像作品です。
モーションとか色や音の全てが気持ちイイ。
なによりクオリティーが飛び抜けてる。
刺激とヤル気をいっぱいいただいてます。


Solar rework from flight404 on Vimeo.

flight404 on vimemo 要チェックだと思います。

vimeo は最近 iPhone に対応してました。
ダウンロードが Youtube に比べて遅いのがね・・・

2009.11.07
14:34
author: taikiken
1件のコメント

ActionScript 2, mx ライブラリ使用メモ mx.events.EventDispatcher

ActionScript 3 + Flash Player 10 の話題が旬なことは承知していますが、ActionScript 2 なネタ。

■ mx パッケージ 使いまくり

Flash CS3 以前から添付されてたけどなぜか undocument な Adobe 作成の mx パッケージ。
今では mx パッケージは Flex Builder 用のパッケージだけど、Flash では ActionScript 2 用のパッケージとして添付されています。
このライブラリが結構使えるんだ。

mx.events.EventDispatcher

ActionScript 2 でも addEventListener ができるスグレもの。
removeEventListener, dispatchEvent と ActionScript 3 と同名の関数が用意されてる。

使用方法はビルトインされている ActionScript 3 とはチョイ違う。

import mx.events.EventDispatcher;
 
var dispatcher:Object = {};
EventDispatcher.initialize (dispatcher);

EventDispatcher.initialize の引数に設定した空の Object に EventDispatcher から関数が移植(?)される。

変数 _level0.dispatcher = [オブジェクト #4, クラス 'Object'] {
    addEventListener:[関数 'addEventListener'],
    removeEventListener:[関数 'removeEventListener'],
    dispatchEvent:[関数 'dispatchEvent'],
    dispatchQueue:[関数 'dispatchQueue']
  }

dispatchQueue は EventDispatcher クラス内部で使われる関数のようです。

●使い方

// リスナー(Object)作成
// イベントハンドラ(Function)作成
var listener1:Object = {};
listener.onPress = function (args:Object) {
	trace("listene press type="+args.type+" value="+args.value);
}
 
// イベントにリスナー設定
dispatcher.addEventListener("onPress", listener);
 
// イベント発生時にdispatchEvent実行
button_mc.onPress = function () {
	dispatcher.dispatchEvent({type:"onPress", value:"some value"});
}

dispatchEvent の引数にObjectを設定。
引数のObjectにtypeキーがあることが必須。
typeの値はイベント名(String)。
ActionScript 3 とは違い続けて任意の Key:Value をいくつでも設定可能。

*ActionScript 3 でもイベントハンドラに任意の値の設定はできます。めんどくさいけど・・・

ActionScript 2 でこんな回りくどいことをしてまで addEventListener を実装するかは意見もあるだろうとは思いますが、コードメンテナンスの上でお薦めです。

まぁ、Flash Player 10 対応のコンテンツを作る現在ではムダな知識のひとつですけどね。 😉

でもたまにいるんだよね、今でも Flash Plaer 8 対応で作れって言う人。