Ads by Google
新しい記事を書く事で広告が消せます。
ニコニコ動画風スクロールコメント
FXUGの方で、なんか挑戦してるっぽい人がいたので、自分も挑戦してみました。
スクロールテキストのデモ
コード的には、前に上げた粉々エフェクトを改造したものです。それぞれのTextFieldにTweenをつけるより、パフォーマンス的には有利です。もっとも、インタラクティブにすらするつもりがないなら、流す前にビットマップ化してしまうのが一番速いかも。
はみ出したテキストを隠すのにmaskを作成しています。
ScrollLabelを派生させることで、単なる移動以外にも拡大縮小だの透明度だの色の変化だの回転だのがつけられます。
テキストは、せっかくなのでRichTextEditorが吐き出すHtmlTextに対応させました。
改行も有効にしているので、ソースコードなんかを流すともう読みにくいことこの上ないです。
もっとも、実際にニコニコを作成しようとすれば、もっと大変です。
あれにはコメントを保存して再生時に同期させる機能があったはずで、適切なタイミングでコメントを流すための仕掛けが必要かと。
コメントの重要度でフォントサイズやアルファを決定したりしたあと、URLリンク込みで流してやれば、けっこううっとうしいバナー広告が作成できて楽しいですね。
ニコニコのように動画を下に敷けば、動画付き動的バナー広告が実現できて楽しいかもしれません。
スクロールテキストのデモ
コード的には、前に上げた粉々エフェクトを改造したものです。それぞれのTextFieldにTweenをつけるより、パフォーマンス的には有利です。もっとも、インタラクティブにすらするつもりがないなら、流す前にビットマップ化してしまうのが一番速いかも。
はみ出したテキストを隠すのにmaskを作成しています。
ScrollLabelを派生させることで、単なる移動以外にも拡大縮小だの透明度だの色の変化だの回転だのがつけられます。
テキストは、せっかくなのでRichTextEditorが吐き出すHtmlTextに対応させました。
改行も有効にしているので、ソースコードなんかを流すともう読みにくいことこの上ないです。
もっとも、実際にニコニコを作成しようとすれば、もっと大変です。
あれにはコメントを保存して再生時に同期させる機能があったはずで、適切なタイミングでコメントを流すための仕掛けが必要かと。
コメントの重要度でフォントサイズやアルファを決定したりしたあと、URLリンク込みで流してやれば、けっこううっとうしいバナー広告が作成できて楽しいですね。
ニコニコのように動画を下に敷けば、動画付き動的バナー広告が実現できて楽しいかもしれません。
BlazeDSでDynamicクラスを使って手抜きをする
とうとう、大学時代の某先輩が結婚したという知らせが届きました。
いよいよ自分も後がない、と悟った今日この頃。
皆様いかがお過ごしでしょうか。
まあいいや(何が）。
ところでワタクシ、ここではGUIのことばかり書いていますが、ちゃんとBlazeDSも触っています。
今やってる仕事ではStrutsのプロジェクトをFlexに移植しているのですが、つくづくFlexって便利だと思いますね。
簡単なウィザードのフレームワークを作っておいて、Strutsでのそれぞれの入力画面に対応させると、一人でも3ヶ月ぐらいで移行対応できちゃいます。
Actionのロジックをサービスに置き換えるだけですね。
作り方によっては、JSPとFlexのGUIをひとつのプロジェクト内でまとめてしまうことも出来ます。
私は片付けついでにキレイサッパリJSPを消してしまったのですが、充分可能であると思いました。
あ、BlazeDSの話でした。
JavaのBeanをそのまんま受け取れるのはいいのですが、そのまま受け取ろうとすると、受け取ることが出来るのは1階層のみのプロパティしかもっていないObject型の戻り値になってしまうのがわずらわしいですよね。
詳しいことはマニュアルに書いてあるのですが、基本的には文字列か数値といった、直列化出来る最低限の情報しか移行されません。
これをなんとか全部受け取るには、Flex側でも同じ構造のクラスを作成し、RemoteClassタグをつけてやるのが一般的です。
自動的にこのクラスのオブジェクトとしてFlex側でキャストされるので便利ですが、Java側と常に同じ構造になるようにコードをメンテナンスしなければならないのがちょっとというかかなりイヤです。
AS3側のコードを自動生成させてやる方法も提案されていますが、AS3側だけ用いるプロパティをよけいにつけてやりたいときなどには使えません。
たとえば、データグリッドに流し込むデータのプロパティに、削除のためのチェックフラグを持たせたいことは良くあります。自動生成させてから改めてdelプロパティを実装しなおすのはカンベンですよね。
そこで、手放しではオススメできないことを承知の上で、とっておきの方法を。
[RemoteClass]タグをつけたdynamicクラスをFlex側で宣言しちゃいます。
で、プロパティは何も実装しません。
こうするだけで、ちゃんと型をもったオブジェクトとして、プロパティが含まれた状態でサービスから受け取ることが出来ます。
それだけでなく、別のリモートクラスが入れ子になっていても、子オブジェクトがFlex側で宣言されているクラスである限りキャストされるので、孫プロパティまできちんと受け取れます。
しかも、Flex側でのみ利用するプロパティやメソッドも、[Transient]指定することで、クラス定義内でキッチリ記述することが可能です。
開発中だけこの状態にしておいて、仕様が確定したらstrictなクラスで書き直す、という道もあります。
というか、それがまっとうな道でしょうか。
盆休み中にまたひとつデモでも・・・と思っていたのですが、姪っ子と実家で花火する予定なので、また今度。
いよいよ自分も後がない、と悟った今日この頃。
皆様いかがお過ごしでしょうか。
まあいいや(何が）。
ところでワタクシ、ここではGUIのことばかり書いていますが、ちゃんとBlazeDSも触っています。
今やってる仕事ではStrutsのプロジェクトをFlexに移植しているのですが、つくづくFlexって便利だと思いますね。
簡単なウィザードのフレームワークを作っておいて、Strutsでのそれぞれの入力画面に対応させると、一人でも3ヶ月ぐらいで移行対応できちゃいます。
Actionのロジックをサービスに置き換えるだけですね。
作り方によっては、JSPとFlexのGUIをひとつのプロジェクト内でまとめてしまうことも出来ます。
私は片付けついでにキレイサッパリJSPを消してしまったのですが、充分可能であると思いました。
あ、BlazeDSの話でした。
JavaのBeanをそのまんま受け取れるのはいいのですが、そのまま受け取ろうとすると、受け取ることが出来るのは1階層のみのプロパティしかもっていないObject型の戻り値になってしまうのがわずらわしいですよね。
詳しいことはマニュアルに書いてあるのですが、基本的には文字列か数値といった、直列化出来る最低限の情報しか移行されません。
これをなんとか全部受け取るには、Flex側でも同じ構造のクラスを作成し、RemoteClassタグをつけてやるのが一般的です。
自動的にこのクラスのオブジェクトとしてFlex側でキャストされるので便利ですが、Java側と常に同じ構造になるようにコードをメンテナンスしなければならないのがちょっとというかかなりイヤです。
AS3側のコードを自動生成させてやる方法も提案されていますが、AS3側だけ用いるプロパティをよけいにつけてやりたいときなどには使えません。
たとえば、データグリッドに流し込むデータのプロパティに、削除のためのチェックフラグを持たせたいことは良くあります。自動生成させてから改めてdelプロパティを実装しなおすのはカンベンですよね。
そこで、手放しではオススメできないことを承知の上で、とっておきの方法を。
[RemoteClass]タグをつけたdynamicクラスをFlex側で宣言しちゃいます。
で、プロパティは何も実装しません。
こうするだけで、ちゃんと型をもったオブジェクトとして、プロパティが含まれた状態でサービスから受け取ることが出来ます。
それだけでなく、別のリモートクラスが入れ子になっていても、子オブジェクトがFlex側で宣言されているクラスである限りキャストされるので、孫プロパティまできちんと受け取れます。
しかも、Flex側でのみ利用するプロパティやメソッドも、[Transient]指定することで、クラス定義内でキッチリ記述することが可能です。
開発中だけこの状態にしておいて、仕様が確定したらstrictなクラスで書き直す、という道もあります。
というか、それがまっとうな道でしょうか。
盆休み中にまたひとつデモでも・・・と思っていたのですが、姪っ子と実家で花火する予定なので、また今度。
テーマ : Adobe Flex3 - ジャンル : コンピュータ
NavBarのバグ
前回のエントリから妙に忙しくなり、更新がスッポリ空いてしまいました。
まだ忙しいので、今回はサンプルなしです。
今回はFlex2の頃からバグベースに載っているのに、まだ直っていないNavBarのバグについてです。
NavBarはButtonBar,ToggleButtonBar,TabBarの祖先で、TabNavigatorとも関わりの深いコンポーネントです。ViewStackをdataProviderとして持つことができ、主にViewStackの表示を切り替えるのに利用します。
NavBarは、一部のプロパティをViewStackが子として持つContainerと連動するようになっています。
ContainerのlabelとiconはTabのlabel、iconにそれぞれ連動していますし、ContainerのenabledをfalseにするとTabも不活性になり、選択できなくなります。
困るのは、この連動を実現するためのイベントリスナーが、ContainerがViewStackから外された後にも解放されないことです。
つまり、ContainerをTabNavigatorからremoveChild()した後、別のコンポーネントに貼付けても、TabNavigatorのもつTabBarはContainerに対するイベントを監視しています。そして、例えばlabelプロパティを書き換えると、TabBarのTabのlabelも更新しようとします。
更新してくれるならまだいいのですが、既にTabBarのDataProviderであるViewStackは子としてこのContainerを持っていないので、エラーを発生します。
さらに悪いことに、これらの登録されたイベントリスナーはprivate属性なので、外から外そうとしても（Functionを指定できずremoveEventListener()が使えないので）解放できません。
また、Containerへのリベントリスナーが残っているので、TabBarはガベージコレクションの対象外となり、メモリに残ってしまいます。使い方によっては重大なメモリリークの原因になりかねません。
なるべく早く直ってほしいものです。俺のために。
まだ忙しいので、今回はサンプルなしです。
今回はFlex2の頃からバグベースに載っているのに、まだ直っていないNavBarのバグについてです。
NavBarはButtonBar,ToggleButtonBar,TabBarの祖先で、TabNavigatorとも関わりの深いコンポーネントです。ViewStackをdataProviderとして持つことができ、主にViewStackの表示を切り替えるのに利用します。
NavBarは、一部のプロパティをViewStackが子として持つContainerと連動するようになっています。
ContainerのlabelとiconはTabのlabel、iconにそれぞれ連動していますし、ContainerのenabledをfalseにするとTabも不活性になり、選択できなくなります。
困るのは、この連動を実現するためのイベントリスナーが、ContainerがViewStackから外された後にも解放されないことです。
つまり、ContainerをTabNavigatorからremoveChild()した後、別のコンポーネントに貼付けても、TabNavigatorのもつTabBarはContainerに対するイベントを監視しています。そして、例えばlabelプロパティを書き換えると、TabBarのTabのlabelも更新しようとします。
更新してくれるならまだいいのですが、既にTabBarのDataProviderであるViewStackは子としてこのContainerを持っていないので、エラーを発生します。
さらに悪いことに、これらの登録されたイベントリスナーはprivate属性なので、外から外そうとしても（Functionを指定できずremoveEventListener()が使えないので）解放できません。
また、Containerへのリベントリスナーが残っているので、TabBarはガベージコレクションの対象外となり、メモリに残ってしまいます。使い方によっては重大なメモリリークの原因になりかねません。
なるべく早く直ってほしいものです。俺のために。
テーマ : Adobe Flex3 - ジャンル : コンピュータ
粉々エフェクト
とある事情からこちらのブログにお引っ越ししました。
どんな事情かは、新しいタイトルとこれまでなかった表示要素から推察していただけるかと(^^;
だってやってみたかったんだもん。
さて、記念すべき最初のエントリーはデモ付きで。
画面内のコンポーネントをクリックすると、パーツが粉々に吹っ飛びます。
以前にも書いたのですが、最近、ActionScript3.0 アニメーションという本を買いまして。
これ自体はとても良い本で、参考になる部分がかなり多いのですが、Flex使いからみると「Flexで使うにはどういうインターフェイスを用意すべきか」という疑問が出てきます。
Flexのエフェクトは基本的に３種類あるのですが、元になるコンポーネントのプロパティをいじったり、フィルターをかけたりするものが主で、この本にあるような大量のShapeを使ったビジュアルアニメーションをやるには、どう書いたらいいかよくわからない。
そこで、このデモではエフェクトの書式をあえて無視して、コンポーネントをビットマップ化して分割し、それをレイヤーの中でばらまく、といったことをやっています。
Shapeの動きそのものは摩擦とScaleを同期させているだけで、上記の本の最初のほうに書いてある基本的なロジックです。
デモではレイヤーそのものにDropShadowフィルタをかけていますが、速度低下がほとんどなくて良い感じです。
まぁ、こんなエフェクトのかかったアプリケーション作りたい人なんかいないんだろうけど、開発中のストレス解消におひとつ。
どんな事情かは、新しいタイトルとこれまでなかった表示要素から推察していただけるかと(^^;
だってやってみたかったんだもん。
さて、記念すべき最初のエントリーはデモ付きで。
画面内のコンポーネントをクリックすると、パーツが粉々に吹っ飛びます。
以前にも書いたのですが、最近、ActionScript3.0 アニメーションという本を買いまして。
 | ActionScript 3.0 アニメーション (2007/10/30) Keith Peters 商品詳細を見る |
これ自体はとても良い本で、参考になる部分がかなり多いのですが、Flex使いからみると「Flexで使うにはどういうインターフェイスを用意すべきか」という疑問が出てきます。
Flexのエフェクトは基本的に３種類あるのですが、元になるコンポーネントのプロパティをいじったり、フィルターをかけたりするものが主で、この本にあるような大量のShapeを使ったビジュアルアニメーションをやるには、どう書いたらいいかよくわからない。
そこで、このデモではエフェクトの書式をあえて無視して、コンポーネントをビットマップ化して分割し、それをレイヤーの中でばらまく、といったことをやっています。
Shapeの動きそのものは摩擦とScaleを同期させているだけで、上記の本の最初のほうに書いてある基本的なロジックです。
デモではレイヤーそのものにDropShadowフィルタをかけていますが、速度低下がほとんどなくて良い感じです。
まぁ、こんなエフェクトのかかったアプリケーション作りたい人なんかいないんだろうけど、開発中のストレス解消におひとつ。
テーマ : Adobe Flex3 - ジャンル : コンピュータ
| HOME |