Home

このブログは移転しており、現在更新していません。移転先はこちらです。

Web 酒 肴

«前へ || 1 | 2 | 3 | 4 | 5 |...| 11 | 12 | 13 || 次へ»

[Flex]カスタムエフェクトの作成 #2

以下のAdobeのサンプルを参考にしながら自分でも作成してみた。

トゥイーンエフェクトについて

ファクトリクラス

TestEffect.as

package
{
    import mx.effects.IEffectInstance;
    import mx.effects.TweenEffect;

    public class TestEffect extends TweenEffect
    {
        public function TestEffect(target:Object=null)
        {
            super(target);
            instanceClass= TestEffectInstance;
        }

        override public function getAffectedProperties():Array{
            return ["rotation"];
        }

        override protected function initInstance(inst:IEffectInstance):void{
            super.initInstance(inst);
            TestEffectInstance(inst).angleFrom = 0;
            TestEffectInstance(inst).angleTo = 360;
        }
    }
}

ファクトリクラスを作成するときに最低限必要な4つのルール

  1. コンストラクタの実装

    コンストラクタ内では必ずsuper()メソッドを実行すること。 引数に受け取ったターゲットオブジェクトも渡す。

  2. instanceClassの設定

    通常はコンストラクタ内で実行する。インスタンスクラスとしてどのクラスを使うかの指定。 Classタイプのオブジェクトを指定するとのこと。(例のようにクラス名をそのまま代入するイメージ)

  3. initInstanceメソッドのオーバーライド

    必ず最初にsuper.initInstance()メソッドを実行する。 引数として受け取ったインスタンスクラスをそのまま渡す。

    また、その他、事前に準備したい自分のエフェクト固有の値などはここでセットする。 例ではインスタンスクラスに回転の開始角度と終了角度を代入している。

  4. getAffectedPropertiesメソッドのオーバーライド

    エフェクトのターゲットとなるオブジェクトに対して、どのパラメータを変更するかを指定する。 しかし、実際にはこのメソッドはなくても動いた。 どういうときに使われるかは不明だが、念のため指定しておいたほうがいいのだろう。 (何かの拍子にエラーが発生したりするのかもしれないため。) 今回はrotationプロパティを変更するため"rotation"という文字列を配列形式で返している。

インスタンスクラス

TestEffectInstance.as

package
{
    import mx.effects.Tween;
    import mx.effects.effectClasses.TweenEffectInstance;

    public class TestEffectInstance extends TweenEffectInstance
    {
        public var angleFrom:Number;
        public var angleTo:Number;

        public function TestEffectInstance(target:Object)
        {
            super(target);
        }

        override public function play():void {
            super.play();
            createTween(this, angleFrom, angleTo, duration);
        }

        override public function onTweenUpdate(val:Object):void {
            target.rotation = val;
        }

        override public function onTweenEnd(val:Object):void {
            super.onTweenEnd(val);
        }
    }
}

ファクトリクラスを作成するときに最低限必要な2+1つのルール

  1. コンストラクタの実装

    受け取ったターゲットオブジェクトを引数にsuper()メソッドを実行するだけでいいみたい。

  2. playメソッドのオーバーライド

    エフェクト開始時に呼び出されるメソッド。今回はTweenEffectInstanceを継承しているため、createTweenメソッドを実行する必要がある。createTweenメソッドの引数は通常以下のようになる。

    createTween(this, 開始値, 終了値 [, アニメーションの継続時間(ミリ秒), アニメーション実行の最小回数(/秒) ] )
    

    慣れないうちは createTween(this, 開始値, 終了値) でいいと思う。

  3. TweenEffectInstance.onTweenUpdateメソッドのオーバーライド

    こちらはTweenEffectを継承したエフェクトを作成しているときのみの制約。 アニメーション更新のタイミングごとに呼び出されるので、ターゲットオブジェクトのプロパティを更新する。 今回の例ではrotationを更新すればよい。 これで回転処理のアニメーションが実行される。

また、TweenEffectInstanceにはonTweenEnd()メソッドのようにアニメーション終了後に呼び出されるメソッドもあり、後処理などが必要な場合は適時オーバーライドすればよい。


ここまでできれば後は以下のようにMXMLファイル内で上記で作ったTestEffectを指定してやればよい。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400">
    <mx:Button x="150" y="150" label="回転します" width="100" height="100" mouseDownEffect="{TestEffect}"/>
</mx:Application>

できた。 思ってたよりも簡単だ。

[Flex]カスタムエフェクトの作成 #1

なぜこんなことをしようとしているかというと、理由はこちら。

B-Wiki - Flex3勉強会第68回@大阪参加受付 - Flex User Group

※桜をRIAで表現できれば素敵ですね~

これをやってみたいと思ったから。 桜の花びらが舞いながらオブジェクトが消えていくエフェクト。 昔のパチンコ「花満開」とかであった(知らんか)チープな感じでOK。

ってことで一切予備知識なしで調べながら取り組む過程を残していきましょう。

まずはAdobeのドキュメント

基本ですね。 ここです。

Adobe Flex 3 カスタムエフェクトの作成について

ここによると以下の2つのクラスを用意する必要がある。

  1. ファクトリクラス

    mx.effects.Effectもしくはそのサブクラスを継承する。エフェクトのパラメータ(ズームサイズとかエフェクト持続時間など)を受け取り、インスタンスクラスに引き渡す役割を持つ。 以下のようなMXMLで使用しているWipeDownはこのファクトリクラスのことのようだ。 名前も Zoom や Fade などそのエフェクトそのものを表わす名前にする慣例らしい。

    <!-- Define factory class. -->
    <mx:WipeDown id="myWD" duration="1000"/>
    <!-- Assign factory class to effect targets. -->
    <mx:Button id="myButton" mouseDownEffect="{myWD}"/>
    <mx:Button id="myOtherButton" mouseDownEffect="{myWD}"/>
    
  2. インスタンスクラス

    エフェクトの実際の処理を実装するクラス。ファクトリクラスがインスタンスクラスを使用して各コンポーネントのエフェクトを実行していくようなイメージだろう。エフェクト処理そのものは、インスタンスクラス内に書くわけだ。ZoomInstanceやFadeInstanceのように、エフェクト名の末尾にInstanceとつける慣例らしい。


以上、どうやら構成はかなりシンプルだ。 しかし、それだけではない。 ファクトリクラスにしてもインスタンスクラスにしても、目的に応じてある程度の機能を備えたクラスが既に準備されているようだ。

ファクトリクラスには以下の代表的なクラスがある。

クラス名 目的
mx.effects.Effect 単純なエフェクト。つまり一瞬で消えるとか、色が変わるとか、変化に時間の経過を伴わないもの。
mx.effects.TweenEffect アニメーションなどの一定時間再生するエフェクト。ResizeエフェクトなどはこのTweenEffectを継承しているらしい。

今回はアニメーションを必要とするため、TweenEffectを継承して作っていこう。 続く。

「Flex3勉強会第65回@大阪」参加&発表してきた

今回はwonderflのサービスを利用して何か作ってこようという企画。 wonderflは色んなライブラリも使えて、特に3Dとかアニメーションにすごく強いけど、なぜか僕は何も使わず裸一貫で戦ったw

「電流イライラ男」、ぜひ遊んでください。

電流イライラ男 - wonderfl build flash online

製作時間はFlexBuilder使って、5時間くらい。 プレイ時間は7時間くらいw

ソースコードはリンク先から見れるし、修正して機能追加することなんかもできるので、興味があればぜひ。

すうじあむに『数学ガール』掲載

『数学ガール』はJavaやPerl関連の著者としても有名な結城浩さんが執筆した、数学を題材とした小説です。 内容はかなり硬派な数学の話題となっているのですが、その中にほんわかとした高校生の青春や恋愛が顔を見せ、 時にそれが数式と絡み合いながら進んでいく物語となっています。

僕も購入しましたが、正直言ってかなり難しい。 少なくとも高校の理系数学はある程度すらすらできる人じゃないと読めないと思います。 その分、数学が得意な人には読み応えがあり知的好奇心をかきたてられるものとなっています。

で、この数学ガールですが、なんとその原稿の一部をすうじあむに掲載させていただく許可をもらいました。 結城さんと何度かメールのやりとりをさせてもらいましたが、一方的にお願いしているにも関わらず、こちらの事情も汲んだ上で話をしてくれるとても優しい方です。

数学ガールを読んだことのない人は、ぜひ読んでください。

すうじあむ - セレクション - 数学ガール(Web版)

また、すうじあむに掲載しているのは本書の中のごく一部なので、面白ければぜひ書籍を読むことをお勧めします。

[ActionScript][アニメーション]Flex勉強会@京都開催しました

先日(2/7)、京都でFlex勉強会を開催しました。20人以上の方が参加してくださり、おかげさまでその後の懇親会も含めて大変盛況でした。 会場を提供してくれた上、様々なご協力をいただいたソフトディバイスさん、本当にありがとうございました。

僕もActionScriptでのアニメーション入門を少し発表したので、その時の資料に少し手を加えたものを掲載しておきます。 wonderflというサービスを使い、ソースコードとサンプルを画面上で見れるようにできました。 便利ですね。

勉強会に使える無料のオンラインプレゼンテーションまとめ(Zohoがすごい!)

Flex User GroupでFlex勉強会@京都を開催するにあたって、自分も何か発表をすることになりました。 パワーポイントで資料を作ってもいいんだけど、以下の点でオンラインプレゼンテーション作成サービスのほうが便利じゃないかと。

  • 会社や自宅、場所を問わずネタを思いついたときに編集できる
  • 勉強会が終わった後で、ブログなどで簡単に公開できる
  • Flexで作ったSWFファイルをプレゼン資料に埋め込むことができる(かもしれない)

さらに、今回の環境ではネットワークを使わずに発表したいから、ローカルにエクスポートできるタイプのものが望ましい。 できればFlexを埋め込みたいのでPPT形式ではなくHTML形式で。

さらに重視した項目を重要度順に書くと以下

  • 日本語の入力が問題なくできる
  • バージョンの管理ができる
  • 使用感が良い

色々見ていくうちに、やはりというかGoogleDocsのPresentationsを超えるものがなかなか見つからない。 結局Googleかよ、と諦めかけたその時、全てをひっくり返す出会いが。

SaaS型プレゼンテーション作成:Zoho Show

考えていた使用法がほとんど実現できる。 文句なしで今回はZohoを採用することに決定!どうやらZohoは他にもWord, Excelなどのようなオフィス系のサービスも揃えており、有料サービスも合わせるとオンライン会議やCRMなどありとあらゆるビジネスツールを揃えているようだ。また、日本語対応に非常に力を入れているように感じられるのもポイントが高い。

勉強会での使いやすさから考えると今回は

1位 Zoho Show

2位 ThinkFree.com (←ついさっき検証できた。これはひょっとして単独2位かも)

同点2位 Google Docs - Presentations

となった。 ただし他の視点から比較するとまた違った結果になるかもしれないので、今回の調査結果を掲載しておきます。

前提

  • オンラインでプレゼンテーションが作成できるもの(PPTやPDFのファイルをアップロードするだけのものは省く)
  • 日本語入力に対応しているもの

1位 Zoho Show

1. 日本語メニュー対応○ 設定によりメニューを日本語化可能
2. オンラインでの公開
3. 外部サイトへの埋め込み(ブログパーツのように)
4. バージョン管理
5. インポート機能
6. エクスポート機能○ PPT,ODP,PDF,HTMLなど
7. SWFの埋め込み△ 可能だが表示サイズの調整がうまくできなかった。
8. 使用感○ まだやや不安定な部分はあるが許容範囲内
9. その他多彩なクリップアートやテーマなど、本当に行き届いている。Zoho Show以外にも他のアプリも色々ある。Zohoとは検索ができないGoogleみたいなもの?他のアプリは未検証だが、とにかくこのプレゼンテーション機能に関しては素晴らしい。

2位グループ

Google Docs - Presentations

1. 日本語メニュー対応× どこかでできるのかも?
2. オンラインでの公開
3. 外部サイトへの埋め込み(ブログパーツのように)×
4. バージョン管理
5. インポート機能
6. エクスポート機能○ PPT,PDF,テキスト
7. SWFの埋め込み×
8. 使用感
9. その他大方の事はそつなくこなせる。常に基準として考えられてしまうのはやはりGoogleのスゴイところか。

ThinkFree.com

1. 日本語メニュー対応×
2. オンラインでの公開
3. 外部サイトへの埋め込み(ブログパーツのように)×
4. バージョン管理×
5. インポート機能
6. エクスポート機能○ PPT,PPTX,PDFなど
7. SWFの埋め込み×
8. 使用感
9. その他テーマテンプレートなども用意されており、オンライン版パワーポイントという感じ。この手のものでアニメーションを設定できるのは貴重。ただし、どこもかしこもパワーポイントなので、パワーポイントを超えるメリットがあまり感じられない。

大きく引き離された3位グループ

PresentationEngine.com

1. 日本語メニュー対応×
2. オンラインでの公開
3. 外部サイトへの埋め込み(ブログパーツのように)×
4. バージョン管理×
5. インポート機能×
6. エクスポート機能△ 有料機能(未検証)
7. SWFの埋め込み△ Flexは無理だったがFlashはいけた
8. 使用感
9. その他特定の形式に固定されたテンプレートに、画像や文書、音声を埋め込んでいくという形式。作りたいものが提供されている形式にあっているのなら、簡単な手間で見栄えのよいものができる。ただし、ページタイトルなどヘッダの部分はほとんど日本語が通らない。

BrinkPad.com

1. 日本語メニュー対応×
2. オンラインでの公開△ 機能はあるが使えなかった。
3. 外部サイトへの埋め込み(ブログパーツのように)×
4. バージョン管理×
5. インポート機能×
6. エクスポート機能△ 独自XML形式のみ
7. SWFの埋め込み×
8. 使用感
9. その他オンラインお絵かきツールとプレゼンテーションの間という感じ。ただしどちらの視点でも機能不足。

AjaxPresents

1. 日本語メニュー対応×
2. オンラインでの公開×
3. 外部サイトへの埋め込み(ブログパーツのように)×
4. バージョン管理×
5. インポート機能×
6. エクスポート機能○ PPT,ODP
7. SWFの埋め込み×
8. 使用感
9. その他文字のサイズを変更しようにもうまくいかず。アプリケーションも安定しないっぽいので調べる気にもならず終了。Firefoxのみ対応。

今回の趣旨に合わなかったグループ1(日本語入力未対応)

SlideRocket.com

1. 日本語メニュー対応×
2. オンラインでの公開
3. 外部サイトへの埋め込み(ブログパーツのように)
4. バージョン管理
5. インポート機能
6. エクスポート機能有料オプション
7. SWFの埋め込み△ 埋め込みはできたがFlexは動作しなかった
8. 使用感
9. その他全てFlashでできており使用感や表現力はピカイチ。音楽やビデオの埋め込み、多様なエフェクトなど引き込まれるプレゼンテーションを作れそう。日本語が入力できないことが本当に残念。

280 Slides

1. 日本語メニュー対応×
2. オンラインでの公開○ 後述のSlideShare.comに公開される
3. 外部サイトへの埋め込み(ブログパーツのように)
4. バージョン管理×
5. インポート機能△ 日本語は文字化けする
6. エクスポート機能○ PPTX
7. SWFの埋め込み×
8. 使用感
9. その他日本語が入力できないこと以外はある程度使える。

PreZentit.com

1. 日本語メニュー対応×
2. オンラインでの公開? 見つからなかった
3. 外部サイトへの埋め込み(ブログパーツのように)×
4. バージョン管理×
5. インポート機能×
6. エクスポート機能○ HTMLのzip圧縮
7. SWFの埋め込み×
8. 使用感
9. その他メニューはフランス語(?)だが、設定により英語に変更可。日本語が通らないがエクスポートしたHTMLを編集すればうまくできた。機能が少なくシンプルなので簡単なHTMLプレゼンテーション作成ツールとしては使えるかも。でも日本語の手直しが大変そう・・・

今回の趣旨に合わなかったグループ2(プレゼンテーションの作成・編集ができないもの アップロードのみ)

SlideShare.com

1. 日本語メニュー対応×
2. オンラインでの公開
3. 外部サイトへの埋め込み(ブログパーツのように)
4. バージョン管理×
5. インポート機能○ PPT,PTS,POT,PDF,ODPなど多種
6. エクスポート機能
7. SWFの埋め込み×
8. 使用感
9. その他アップロードタイプとしては必要なものは網羅できている。勉強会終了後にPPT資料をアップロードして共有するのには十分使える。

Vcasmo.com

1. 日本語メニュー対応
2. オンラインでの公開
3. 外部サイトへの埋め込み(ブログパーツのように)
4. バージョン管理×
5. インポート機能
6. エクスポート機能○ HTML
7. SWFの埋め込み×
8. 使用感
9. その他字幕をつけることなどができる。スライドごとの表示時間などを設定し、動画に変換される。写真などに字幕をつけてスライド表示するのに向いている。

Spresent.com

1. 日本語メニュー対応
2. オンラインでの公開
3. 外部サイトへの埋め込み(ブログパーツのように)
4. バージョン管理×
5. インポート機能
6. エクスポート機能△ 独自形式
7. SWFの埋め込み△ FlashはできたがFlexは無理だった。
8. 使用感
9. その他会員登録が休止中。復旧は6月予定とのこと。ローカルアプリケーション版(有償)の10日間トライアルがあるので、そちらを試した上での想像を元に評価しているので各項目の信頼性は低い。

以上。

どれも使い込む度に新しい発見があります。ThinkFree.comはもっと使い込めばかなり強力になるかも。何よりアニメーションが使えるのが便利。 ただし、Zoho Showも開発元によればアニメーションを開発中とのこと。アニメーションが搭載されればZoho Showに敵うところはないかもしれない。 唯一、SlideRocket.comが日本語入力に対応すれば可能性はあると思われます。

[続報]字幕付きDVD四苦Hack続報

問い合わせをしたメーカーから返信があった。

DVDでは~(中略)~アンチエイリアシングが機能いたしません。 ~(中略)~現状この部分に関しては回避することができない状態です。

申し訳ありません。

何卒よろしくお願いいたします。

ちょwおまww


追記

TVで見るとある程度普通に見れるようだ。 PCで見たときは字幕のギザギザ感が気になったのだけど・・・。
どちらにせよDVDの規格の問題らしく、ソフトでどうこうできるものではないらしい。

«前へ || 1 | 2 | 3 | 4 | 5 |...| 11 | 12 | 13 || 次へ»

Home

Search
Feeds

Page Top