CustomEffectViewer作ってみました

Progressionの制作のお供にいかがでしょうシリーズ第二弾、『CustomEffectViewer』を作ってみました。

ちなみに第一弾は『TransitionGenerator』です…

制作に至る過程

先日、ClockMakerさまが、『ClockMaker Effects』をリリースされましたよねぇ…

とても素敵なエフェクトで、僕も早速使わせて頂きました。

そこで感じたのは、使う度にコンポーネントパネルからドラッグ＆ドロップして、x、yの位置を指定するのは、ちょっと手間がかかるなぁ…と。

『TransitionGenerator』を作った時に、（個人的にですが）ステージに配置ボタンがとても便利に感じました。

加えて『Progression勉強会 in 大崎』の際、「今後、カスタムエフェクトが出来た場合、パネルに追加ってされるんですか？」とのご質問を頂き、「頑張って追加します！」と宣言した手前、やらない訳にはいかないなぁ…と。

早速ClockMakerさんに、「ClockMaker Effects使わせて頂いていいでしょうか？」と聞いてみたところ、「どうぞ～！」と快く了承して頂いたので、制作に取りかかることに…

制作に取りかかってみたら…

そんな訳で制作に取りかかることになるんですが、いろいろありまして…

『TransitionGenerator』を作った際には、TransitionManagerを使ってfl.transitionをコントロール出来たので、割と簡単に作ることが出来ました。

でも今回はそれが使えないので、かなり困りまして…

そこでClockMakerさまに、「TransitionManagerではなく、何を使ってEffectを動かしているんでしょうか？」とか、「コンポーネントのクラスファイルを読み込みたいんですが、怒られちゃいます～！」とか、いろいろ質問をさせて頂きました。

大してProgressionやAS3を理解していない僕にも、非常に分かりやすくお答え頂きました。ClockMakerさま、本当にありがとうございます！

今回の『CustomEffectViewer』は、勉強も兼ねてProgressionを使って作成してみました。

サイト作成だけではなく、こういったものを作るのにもProgressionって便利ですね！

僕のつまらない話はこれくらいにして、本題である使い方に入りたいと思います。

事前の準備

事前の準備として、ClockMaker Effectsをインストールしておく必要があります。

『ClockMaker Effects』のページからmxpファイルをダウンロードできるので、ダウンロード後、Adobe Extension Managerを使ってインストールしておきましょう！

インストールが上手くいけば、コンポーネントパネルにClockMaker Effectsが表示されているはずです。

ここまで終わっていれば、事前準備はOKです！

使い方

『TransitionGenerator』と使い方は一緒です。

こちらからCustomEffectViewerのmxpファイルをダウンロードして頂き、Adobe Extension Managerを使ってインストールしてください。

インストールが無事完了すると、ウィンドウ→他のパネル→CustomEffectViewerが表示されているはずです。

ウィンドウ→他のパネル→CustomEffectViewerを選択し、パネルを表示させておきます。

使いたいエフェクトにチェックを入れ、「プレビューする」ボタンを押します。

そうすると、パネルの下の方で、「エフェクトはこんな感じですよ～」みたいな簡易Previewが行われます。

これを使おう！　と決まったら、「ステージに配置する」ボタンを押します。

するとチェックを入れていたEffectのコンポーネントが、ステージに配置されます。

自動的に配置されたコンポーネントが選択されている状態で、パラメーターのtargetInstanceの箇所に、Effectを適用したいMovieClipインスタンス名を入れます。

あとはパブリッシュすればOKです！

これを使えば、ちょっとは楽できるかなぁ…と。

ステージに配置ボタンを押した後は、配置が完了するまでジュースでも飲みながら、あるいはストレッチなどしてお待ちいただければいいかと…

今後

新たなCustomEffectがリリースされ、作成された方の了承が頂ければ、パネルにどんどん追加していきたいと思います。

日本は広いので「CustomEffectViewer使ってますよ～！」と、どなたか一人でも言っていただけることを期待して…