feb19.jp

Nobuhiro Takahashi
Designer / Engineer

アニメーションの調味料「イージング」の使い分けレシピ (透明度、UI、音量)

この記事は FLASHer Advent Calendar 2016 1日目の記事です。

 

FLASHer とは

Adobe Flash (現 Adobe Animate) を使用している / 使用していたデザイナー、エンジニアの総称です。Flasher はそのまま訳すと「露出狂」という意味があります。

2016 年現在、前者 GEEK 民族の浄化が行われたので、インターネットで検索をかけると本来の意味での露出狂の画像が見ることができます。会社で検索をかけるのは気をつけて下さい。(なお、本当に露出していた伝説の FLASHer がいます。気になる方は [Flasher 露出] で検索)

なぜ FLASHer である GEEK 民族浄化が起きたか・Flash の歴史・Flash とは何だったのか・あのカレーは何なのか、詳しく今後の Advent Calendar で誰かが書いてくれると思いますのでご期待ください(無茶振り)。

 

本題

今回は FLASHer たちがあーでもないこーでもないと議論し合っていた「イージングの使い分け」について、セオリーとされていた伝統工芸ノウハウをご紹介します。CSS / JavaScript だけでなく、iOS / Android Animation、Unity ほか様々なプラットフォームで応用できると思います。

 

イージングとは

モーション/アニメーション/トゥイーンを構成する要素です(ここではモーションと言います)。

モーションを構成する要素は、

  1. オブジェクト自体の大きさ・色・形
  2. それが置かれている環境・状況
  3. それと共に発生する前後関係
  4. デュレーション(時間)
  5. イージング

などなどがありますが、その中のイージングは「時間に対する値の変化具合」のことで、こんなグラフを書いたりします。

easeOut.png

左上に膨らんでいる=「最初一気に変化して、だんだん変化が減速していく」イージング、easeOut 型のグラフです。

 

Linear (等速=easeNone) / easeIn (加速) / easeOut (減速) / easeInOut (加速して減速) の 4 種類が主なイージングです。

同じ 0.5 秒 のモーションですが、それぞれのオブジェクトの動きに対して違った印象を受けると思います。イージングは「同じこと言ってんだけど言い方が素敵/トゲがある」とか、モーションにおける「性格」のようなものなのかなと思っています。

ちなみにアプリによっては easeIn と easeOut の表記が逆だったりするのでご注意ください(Adobe AfterEffects など。どっちが正しいのかわからないです)。

 

このイージングを調整・組み合わせたりすることで、モーションに性格を与えることができます。

この拡大・回転が Linear なモーションを、

easeOut な動きにした場合、

メリハリのあるモーションになりました。

 

では、いくつかモーションのパターンで、イージングの使い分けについて見ていきましょう。
透明度の変化・UI の反応・音量の変化の 3 パターンを今回はご用意しました。

 

① 透明度

基本的に Linear を使用します。

これは映像のフレームレートが低い時、映像のちらつきが問題になりやすいので、Linear にするのが一番影響がでにくいといった理由です。ただし、モーションの時間(デュレーション)が長い時や、ちらつきに耐えうる再生環境、高いフレームレートが出る環境であれば問題になりにくいです。

そういった条件が問題にならない場合は、私はあえて、フェードインでは easeOut 、フェードアウトでは easeIn を使って味をつけています。

サンプルの alpha 100% を 0% にするフェードアウトのモーションです。

Linear は安定したフェードアウトです。

easeOut はややさらっと消えていっている印象です。

easeIn はスポットライトが消灯したかのような闇に溶ける印象があります。

あくまで好みだと思いますが、自分は物理現象に近いモーションが好きで、フェードアウト時は「明かりを見た後暗い場所に行くと明かりの形がぼんやり残っている」感覚を受ける easeIn を選択することが多いです。

なんとなく視認性として、 alpha 0 〜 9% の時と 91 〜 100% の時のオブジェクトだと、前者はかなり視認するのが難しいですが、後者ははっきり視認できるところもヒントになると考えています。

上段が alpha 0 〜 9%、下段が 91 〜 100% です。

状況に応じて最適なイージングは変わるので、納得いく値を試してみるのが良さそうです。

 

② UI のクリック・タップ時

easeOut が基本です。

クリックして UI が反応したことを伝えるフィードバックのモーションと、クリックして UI が出現するモーションの二つが大きくあると思いますが、UI でタップ直後のアニメーションは easeOut が鉄板です。

UI が反応するモーション:

easeOut:スパーンと出てくれるので気持ちいいです。

過度な easeIn 成分が入ってしまうと「出が悪い」「UI が軽快でない」と感じてしまうので、注意が必要です。
UI のモーションは、静的なモーションの気持ちよさではなく、操作感・軽快さを考えるのが重要だと思っています。

easeIn:ちょっともったいぶった感じを受けます。

もちろん場合によっては効果的です。Apple は iOS 10 で iPhone のホームボタンを押してアプリからホーム画面に戻る場合、 easeIn のモーションを採用しています。なんとなく「奥に落下していく」という印象を受けますが、これがなんとも気持ちがいいですね。

あえての無機質な表現であれば、Linear も悪くありません。
デュレーションを短めにして、チカチカさせるだとか、コンピューター/ UI 感のある表現も選択肢としてはアリだと思います。

Linear:パキッと表示します。

やはり迷ったら easeOut がオススメです。

 

③ 音量

Linear も悪くないのですが、easeOut がオススメです。

1番目は Linear 、2番目は easeOut、3番目は easeInなフェードインアウト:


(注意:画像内の表記が間違っています)

曲にもよりますし、相変わらず好みだと思うのですが、 2 番目が一番色気がある印象を受けませんでしょうか。

オーディオのクロスフェードでは、消えていく側は easeIn or Linear で現れていく側は easeOut or Linear にすると自然なクロスフェードになります。

12 年ほど前作曲の勉強をしていた時、先生に「バタフライフェード」みたいな名前を教えてもらった記憶があるですがググっても出てこないので記憶違いな気がします。

 

失われた?伝統工芸

近年、元 FLASHer が主戦場していることの多い CSS / JavaScript フロントエンド・モバイルアプリ界隈には、FLASHer がノウハウを閉ざしてきていたのか文章的な記録をあまり残してこなかったのか理由はわかりませんが、あまりこれらのイージングについてのノウハウが継承されていないのか、 UI フレームワークなどで粗悪なデュレーション・イージングが内部で指定されているものが世の中には多く存在しており、残念なシーントランジションになっているウェブサイトやアプリをよく見かけていました。

しかし今年は Single Page Application が増えてきたのか、素晴らしいトランジション・インタラクションをもつウェブサイトやアプリがまた増えてきた気がします。それらを制作しているフロントエンドエンジニア・クライアントエンジニアの方々の活躍を拝見し、自分もまた刺激を得たり、こういった伝統工芸を若いクリエイターの方々のお役に立てたらと思っていた矢先、このアドベントカレンダーを見つけたので参加することにしました。

明日のアドベントカレンダー 2 日目を担当するのは、そんな素晴らしいウェブサイトを制作されている @yuichiroharai さんの記事です!楽しみですね。

 

いかがでしたでしょうか?

文字詰めのように、調整に時間が掛かる上、条件も状況も様々なので、セオリーやデザインのパターンはなかなか定義しにくいのですが、フィニッシュ時には気をつけた方がいいことなので、大枠を作る時はあまり気にせず作って、プロダクション開発時の最終調整で詰めていくのがよさそうです。

* このページに含まれるグラフィカルなサンプルのモーションは全て Adobe Animate CC 2017 CreateJS プロジェクトで作成・出力しました。(音は Apple Logic Pro X)
* 指摘・ご意見等は @feb19 までいただけると幸いです。

Flash Builder 4.7 で電子署名できなくなってて AIR が書き出せないので adt コマンドでターミナルから署名するでござるよケンイチ氏の巻

Flash Builder で配布する AIR アプリケーションを作るには「リリースビルドの書き出し」からビルドし、最終的に電子署名を行って air ファイルを作りますが、Flash Builder 4.7 のバグなのか電子署名を行うためのインターフェースがごっそり抜けているのでターミナルから adt コマンドを叩く必要があるようです。

Flash Builder 4.7 の ActionScript プロジェクトでターゲット Flash Player 10.1.0 未満が選択できない問題

Flash Builder 4.7 がリリースされて Flash Builder 4.6 が入手できなくなりましたが、この Flash Builder 4.7 、Flash Player 10.1.0 未満の ActionScript プロジェクトが作れなくなったという問題があってつまづいたのでメモ。(設定を変えればできるようになりました)

Adobe Flash Builder をターミナルからクリーンして起動

ちょっとしたことですが、ハマったのでメモ。

Flash CS6 がデフォルトでは Flash Player 10&10.1 / 10.2 のプロファイルが入っていないので入れる

Flash CS6 のデフォルトでは Flash Player 10&10.1 / 10.2 のプロファイルが入っていないので入れる方法

Flash Player 10 で小数点を歩みだしたあたりからこれは来るなと思っていましたが、プロジェクトにもろ影響するのでそれの対処法。

Flash Professional 追加機能セット "Linkage Name Utilities" を発売しました。

Flash Professional 追加機能セット Linkage Name Utilities を発売しました。

既に設定されているリンケージ名の頭に文字列を追加したりできる Flash 追加機能を発売します。Gumroad を使ってみたかったのです。僕も缶コーヒー一杯分 120 円で販売してみます。よろしければお買い求めください。

AIR アプリ自動アップデート機能の実装

AIR アプリ自動アップデート機能の実装

AIR アプリを作って、配布するとします。そのアプリのアップデータを配布したいときは、自動アップデート機能(正確には通知機能)をアプリに実装しておけばいいのですが、それを簡単に実装できる air.update.ApplicationUpdaterUI が便利です。

Flash の SWZ ファイルって何ぞや

Flash の SWZ ファイルって何ぞや

textlayout.swz とか。何も考えずに使わないといけないから使っていましたけど。このファイルについてちょっと詳しく知りたくなったので調べてみました。

FlashBuilder と FlashProfessional による SWC ワークフロー

FlashBuilder と FlashProfessional による SWC ワークフロー

.swc というファイルをご存知でしょうか。swc ファイルは Adobe Flash Compiled Component File、「コンパイル済み Flash コンポーネント」で、このファイルを flash や flex でのパブリッシュ/ビルド時リンクしておくことで、コンポーネント内の UI やロジックを呼び出して使用することができます。

FlashPlayer 11 対応コンテンツを FlashBuilder 4.5 で作る

FlashPlayer 11 対応コンテンツを FlashBuilder 4.5 で作る

いやー久しぶりの投稿。ネタは結構有るんですけどね。まずは Flash Player 11 がリリースされたので。Flash Builder 4.5 ではこんな感じで設定できます。Flash Builder 4.5 結構最初はブーブー言ってたけど最近は気に入っています。Flash Builder 4 とか 3 でも基本的には同様にやればできると思います。

AS3 で bit.ly API を使う

AS3 で bit.ly API を使う

短縮 URL 使いたかったので bit.ly 使う事にしたのです。bit.ly は、もの凄い長い URL を短い URL に変換してくれるサービスです。Twitter / Facebook / mixi / ameba とかのつぶやき、マイクロブログへの投稿時にちょっと URL をくっ付けさせてもらうときに便利。

次世代 Flash Builder (Burrito) プレビュー版を触ってみた

次世代 Flash Builder (Burrito) プレビュー版を触ってみた

次世代 Flash Builder "Burrito" のプレビュー版が公開されていました。60日間は体験版として利用できるようですが、Flash Builder 4 (Standard でも Premium でもいい) を持っている人は、そのシリアルを入れれば、プレビュー版(しかも Premium)の使用期限を延長して使い続けられるようなので使ってみる事にします。

AS3 で GoF デザインパターン [00] - 目次

ActionScript 3.0 で Gang of Four デザインパターン [00] - 目次

以前、ちょっと思い立ってチマチマ「GoF による 23 のデザインパターン」を勉強していました。Evernote にメモしてありましたがメモが増えすぎたのでブログへ吐き出し連投(23回+目次)します。

AS3 で GoF デザインパターン [23] - Interpreter

ActionScript 3.0 で Gang of Four デザインパターン [23] - Interpreter パターン

ツリー構造で構文解析結果を表す際に使用されます。が、何に使うのかはイマイチよくわかりません。

AS3 で GoF デザインパターン [22] - Command

ActionScript 3.0 で Gang of Four デザインパターン [22] - Command パターン

命令一つ一つをクラスにすることで、まずコードが読みやすくなったり、処理を後で実行したり、ログを取ったり、やり直したり、ロードを待ったりできます。命令をキュー的に実行して、redo / undo の対応もできたりします。

AS3 で GoF デザインパターン [21] - Proxy

ActionScript 3.0 で Gang of Four デザインパターン [21] - Proxy パターン

インスタンスは必要になってから作るようにする事で無駄をなくす事を目指したパターンです。

AS3 で GoF デザインパターン [20] - Flyweight

ActionScript 3.0 で Gang of Four デザインパターン [20] - Flyweight パターン

要はオブジェクトプール。同じものを共有して無駄を省きます。

AS3 で GoF デザインパターン [19] - State

ActionScript 3.0 で Gang of Four デザインパターン [19] - State パターン

状態をクラスにし、何通りかの状態のクラスの中で、状況に応じて実行するメソッドを変えるデザインパターン。

AS3 で GoF デザインパターン [18] - Memento

ActionScript 3.0 で Gang of Four デザインパターン [18] - Memento パターン

状態を保存するデザインパターン。カプセル化の原則を破る事無くインスタンスの状態を保存するという感じです。

AS3 で GoF デザインパターン [17] - Observer

ActionScript 3.0 で Gang of Four デザインパターン [17] - Observer パターン

観察者パターン。観察対象に観察者を登録しておいて、状態が変化したときに観察者に通知をもらうことで、観察者が観察対象の状態に応じて処理を行います。

AS3 で GoF デザインパターン [16] - Mediator

ActionScript 3.0 で Gang of Four デザインパターン [16] - Mediator パターン

とあるクラスの中に、他のクラスを入れる変数が色々あって、別のクラスでもそんな感じでお互い変数に入れ合っていて、入れ替わるたびにお互い渡し直すのは煩雑になりがちなので、それらの変数をまとめて持つクラスを一つ作って管理させるとスッキリするっていう設計です。

AS3 で GoF デザインパターン [15] - Facade

ActionScript 3.0 で Gang of Four デザインパターン [15] - Facade パターン

複雑なクラス群があって、使用する側が Facade クラスに問い合わせれば窓口となって対応してくれるような、「窓口を作る」設計手法が Facade パターンです。

AS3 で GoF デザインパターン [14] - Chain of Responsibility

ActionScript 3.0 で Gang of Four デザインパターン [14] - Chain of Responsibility パターン

責任のたらい回しパターン。自分に与えられた問題が処理不能な場合は次に答える人に問題を投げ渡していくパターンです。

AS3 で GoF デザインパターン [13] - Visitor

ActionScript 3.0 で Gang of Four デザインパターン [13] - Visitor パターン

構造を渡り歩きながら処理を行うデザインパターンです。

AS3 で GoF デザインパターン [12] - Decorator

ActionScript 3.0 で Gang of Four デザインパターン [12] - Decorator パターン

飾り枠(Decorator)と、中身(Component)をインターフェースと委譲と継承で同一視することで、中身自身も同じデコレーションされる対象にすることが出来ます。

AS3 で GoF デザインパターン [11] - Composite

ActionScript 3.0 で Gang of Four デザインパターン [11] - Composite パターン

再帰的な構造をクラスで表現するためのパターンらしいです。再帰的って意味わかんないですね。入れ子構造とかになる構造のことだと思います。

AS3 で GoF デザインパターン [10] - Strategy

ActionScript 3.0 で Gang of Four デザインパターン [10] - Strategy パターン

アルゴリズムを状況によってそっくり入れ替えるパターン。

AS3 で GoF デザインパターン [09] - Bridge

ActionScript 3.0 で Gang of Four デザインパターン [09] - Bridge パターン

委譲を利用して、処理と機能を分離し、階層分けして、クラスを効率的に増やしていけるようにするパターンです。

AS3 で GoF デザインパターン [08] - Abstract Factory

ActionScript 3.0 で Gang of Four デザインパターン [08] - Abstract Factory パターン

沢山のオブジェクトで構成されるオブジェクトを生成するときに利用すると便利です。いくつものオブジェクトの組み合わせの「セット」を、Abstract Factory を継承したサブクラスでまとめておくと、別のセットにはまた Abstract Factory のサブクラスを作成してどんどん作成していくことが出来ます。

AS3 で GoF デザインパターン [07] - Builder

ActionScript 3.0 で Gang of Four デザインパターン [07] - Builder パターン

複数の様々なオブジェクト(機能)を持ったクラスを作りたいときにそれらをまとめるクラスを作っておくと、便利、ってことだと思います。

AS3 で GoF デザインパターン [06] - Prototype

ActionScript 3.0 で Gang of Four デザインパターン [06] - Prototype パターン

要は clone() です。BitmapData.clone() や Event.clone() など、クラス内にインスタンス自身をコピーするメソッドを用意することです。

AS3 で GoF デザインパターン [05] - Singleton

ActionScript 3.0 で Gang of Four デザインパターン [05] - Singleton パターン

一人っ子パターン。インスタンスを生成する場面で使用されるパターンで、そのインスタンスは二つ以上作られないとすることができます。プロジェクトで一つのインスタンスを共有したいときに使われます。

AS3 で GoF デザインパターン [04] - Factory Method

ActionScript 3.0 で Gang of Four デザインパターン [04] - Factory Method パターン

インスタンスの生成をサブクラスに任せるパターンです。Abstract Factory と違って、生成のみを受け持ち、自身は状態を持ちません。

AS3 で GoF デザインパターン [03] - Templete Method

ActionScript 3.0 で Gang of Four デザインパターン [03] - Templete Method パターン

テンプレートメソッドパターンは、処理をサブクラスに任せるデザインパターンだそうです。条件分岐を行う処理がある場合、その条件分岐の処理部分をサブクラスで実装するといったような具合です。

AS3 で GoF デザインパターン [02] - Adapter

ActionScript 3.0 で Gang of Four デザインパターン [02] - Adapter パターン

既に作られている物と必要な物の間のズレを、埋めるようなデザインパターンだそうです。新しい環境や別の環境上で動作させたいクラスがあるとして、その動作が安定しているクラス自体を改造するのではなく、変換役となるアダプターを用意して機能をラッピングする(なので Wrapper パターンとも言う)デザインパターンです。

AS3 で GoF デザインパターン [01] - Iterator

ActionScript 3.0 で Gang of Four デザインパターン [01] - Iterator パターン

データの集まりを順番に取り出していく場合に使用されるデザインパターンです。

AIR で SQLite を使う

AIR で SQLite を使う

AIR AS3 には SQLite のデータベースを作成、操作できる API が用意されているので、それでデータベースをクリクリいじることができます。テキストファイルでデータを管理するのはパフォーマンス的に遅い(多分)ので、 DB ファイルを使って高速にデータのやりとりを行います。まずは SQLite について↓。

Flash 上でパブリッシュしたとき、型宣言されていない変数・関数があったら警告を出す

Flash 上でパブリッシュしたとき、型宣言されていない変数・関数があったら警告を出す

Flex SDK (mxmlc)や Flex Builder とかでコンパイルすると、型宣言されていない変数・関数があると警告が出ます。Flash CS3/CS4/CS5 ではデフォルトででない設定になっているので、これを有効にする方法のメモ。

Flash Builder 4 Standard 導入

Flash Builder 4 Standard 導入

色々メモリリークチェックとか出来る Premium は必要になってからでいいやということで Standard 版を購入しました。というか Premium は高いねん。比較表はこちら。とりあえず導入後のセッティングとか入れたプラグインとかメモ

AIR で JSON 形式ファイルの入出力

AIR で JSON 形式ファイルの入出力

AIR 祭り開催中。今回はファイル入出力。AS3 で扱っている Object 型のデータを JSON ファイルとして保存してみるメモ。

Adobe CS5 ティザーサイトオープン

Adobe CS5 ティザーサイトオープン

カウントダウンが始まっています。いよいよ CS5 ですね。global launch 12 April なんて書いてあるから直訳すると 4 月 12 日世界発売ですけど、 CS4 までは本国で出てから一ヶ月後ぐらいに日本版は発売されていましたので、どうなんですかね。online for exclusive なんでオンライン限定なんですかね。ちなみにどうでもいいですが、僕今月引っ越しもするので金銭的に死にそうです。iPad 貯金切り崩すか悩んでいます。

AIR でファイルがドラッグアンドドロップされたことを NativeDragEvent で検知する

AIR でファイルがドラッグアンドドロップされたことを NativeDragEvent で検知する

最近また AIR が楽しい気がして触っているのですが、 Google で AIR 関連記事を探すと、 AIR beta 版の頃(または Apollo だった頃)の記事が上位にきて、すでに廃止された作法、API を使っていたりするのでちょっと困っています。

自分の中で整理するために、しばらくこのブログで基礎的な AIR の記事をアップしていきます。というか割と AIR 忘れたのでメモです。

AS3 の演算子 ||= について

AS3 の演算子 ||= について

AS3 だけでつかえるものではないのですが、AS3 での動作を確認したのでこんな表題にしました。最近巷ではやっている最速文法マスターの、AS3編で、見慣れない演算子「||=」というものがあったので、これについて調べてみました。

Flash CS4 で Flex SDK (mx パッケージ、クラス) を使う

Flash CS4 で Flex SDK (mx パッケージ、クラス) を使う

Flex 用のライブラリとかを見ると mx パッケージとか使われていたりするので、そんなときは Flex SDK を Flash CS4 に設定すれば使えるようになる。

Flash CS5 を予習 ~Text Layout Framework (TLF) 編~

Flash CS5 を予習 ~Text Layout Framework (TLF) 編~

Text Layout Framework (TLF) を使って、Flash コンテンツのテキストを縦書きにします。

先日縦組みレイアウトのブログサイトで初めて素敵なデザインのサイト「macromarionette」さんを見つけました。Flash Player 10 から導入された Flash Text Engine (FTE)。これをより使いやすくするためのフレームワーク Text Layout Framework (TLF) ベータ版がアドビから提供されたので、これを利用されているそうです。TLF は Flash CS5 から正式に組み込まれるので、正式版で仕様や方式が変わっている/追加されていることは大いにありえるのですが、面白そうなので予習として勉強開始&メモ。

AS3 で Flash コンテンツに YouTube Player を埋め込む

AS3 で Flash コンテンツに YouTube Player を埋め込む

AS3 用の Google 公式 YouTube 埋め込みプレイヤー API が公開されました。いままでは AVM1 用プレイヤーか、JavaScript 経由で操作するクロムレスプレイヤーしか無かったので、これでかなり簡単に Flash サイト内で YouTube プレイヤーを埋め込むことができるようになりました。ただし Flash Player 10 以上。(一応 Player 9 でも動くけどエラー出ます)

AS3 で SWFAddress 2.4 を使う ( Flash でブラウザの戻るボタン、パーマリンクに対応する )

AS3 で SWFAddress 2.4 を使う ( Flash でブラウザの戻るボタン、パーマリンクに対応する )

Flash サイトのページ内で移動すると、ブラウザの戻るボタンが聞かないとか、直接あのページを紹介したいのにあのページの URL (パーマリンク)がないとかいう話はもはや過去。今は SWFAddress でフルフラッシュサイトの全ページにパーマリンクを貼って、戻るボタンやなんやらでサクサクみれるフル Flash は作れるようになっているのです。
そんな用途に使う ActionScript/JavaScript ライブラリ「SWFAddress」について。

SWFAddress 2.4 リリース

SWFAddress 2.4 リリース

SWFAddress が 2.4 にバージョンアップしていました。主にバグフィックスと、最新ブラウザ環境のサポートだそうですが、さらに URL を変更したのが Flash 内部か外部か判別することが可能になる INTERNAL_CHANGE と EXTERNAL_CHANGE イベントが追加されています。

AS3 の FileReference.upload() の使い方と注意すべき点

FileReference.upload() の使い方と注意すべき点

ユーザー参加コンテンツで「ユーザーが自由にファイルをアップロードしたいです。画像とか。」とかを作る場合、Flash Player 9 以上、AS3 ならば FileReference.upload() を使ってファイルをアップロードします。

Flash CS5 Professional で iPhone アプリを作れるように

Flash CS5 Professional で iPhone アプリを作れるように

アメリカで開催されている Adobe MAX 2009 にて CS5 がお披露目。来年 4 月に本国で発売という噂も(なので日本は 5 月ぐらいに発売?)・・・。肝となるのはやはり iPhone アプリを開発することの出来る機能が追加されることでしょうか。Objective-C でいつでもどこでも登場する謎の @ マークに悩まされていたあなたも(僕も)サクサク AS3 で開発が可能。

Flash Develop に見切りを付けて Flex/Flash Builder Eclipse plugin を入れるプレイ

Flash Develop に見切りを付けて Flex/Flash Builder Eclipse plugin を入れるプレイ

もうここ最近 Windows 環境で ActionScript を書くときは FlashDevelop 一択じゃね?と思っている僕ですが、Mac との環境を同じにしたいとか、なんか Flex とか渋いぜと思うと Flex/Flash Builder eclipse plugin なんぞをいれたくなる次第。Flash Develop はアイコンのデザインが好みじゃねーんだよ!と捨て台詞を吐いて。

loader.unload と addChild/removeChild に関する、Flash Player 9 と 10 の微妙な差異

loader.unload と addChild/removeChild に関する、Flash Player 9 と 10 の微妙な差異

Flash CS4 Professional で開発を行っていると、ムービーをプレビューで確認するときは基本的に Flash Player 10 になってしまうので、Flash Player 9 用コンテンツを作っているとややその動作の差異に頭を悩ませる事はしばしばあります。

ありがとう Tweener/最終版 Tweener 1.33.74 小技

ありがとう Tweener/最終版 Tweener 1.33.74 小技

Flash のトゥイーン系ライブラリのスタンダードとも言える Tweener の開発を、最新版である Tweener 1.33.74 をもって終了すると、作者 Zeh Fernando 氏のブログで発表されました。日本語訳はこちら

Flash CS4 の新モーショントゥイーンは「ピクッ」ってならない

Flash CS4 の新モーショントゥイーンは「ピクッ」ってならない

「回転したムービークリップ」(特に写真とかを含むムービークリップだとわかりやすい)に Flash CS3 までのモーショントゥイーン(CS4 で言うクラシックトゥイーン)を適用すると、キーフレームとそうじゃないフレームで、微妙に表示座標(または回転角)がずれていて、タイムラインを再生すると「ピクッ」ってなる有名なバグ(というか仕様だろうな)に悩まされていたけど、CS4 で新規搭載したモーショントゥイーンだと、ならない。

AS3でポップアップウィンドウ(2009/春)

AS3でポップアップウィンドウ(2009/春)

Flash Player 9以上、Action Script 3.0用にパブリッシュして(つまりAVM2環境下)、ポップアップウィンドウで何らかのページを表示させる方法。最近(2009年春)の場合。

AS2、AS3のFileReferenceクラスを使って、オリジナルダウンローダーを作る

AS2、AS3のFileReferenceクラスを使って、オリジナルダウンローダーを作る

ファイルをローカルにダウンロードさせるコンテンツを作る時、一般的にAS2までならgetURL、AS3ならnavigateToURLでそのファイルに直接リンクさせるのですが、問題点はブラウザによってはウィンドウが一瞬無駄に開いたり、(MP3ファイルなど)関連付けの設定によっては再生が始まったりしまうことがあります。(最悪なんか余計なソフトが立ち上がるとか)

AS2、AS3で、MovieClipの一部だけをキャプチャする

AS2、AS3で、MovieClipの一部だけをキャプチャする

AS2、AS3共にMovieClipをBitmapDataとしてキャプチャするには、BitmapData.drawを使用します。そのとき、たとえばx座標50px、y座標50pxの位置から縦横100pxだけというように、一部だけ切り取ったようにキャプチャする方法のメモです。

SWFWheelを使う

SWFWheelを使う

SWFWheel(旧HigeWheel)というMacでもマウスホイールイベントを受け取れるようにするオープンソースのASライブラリのサンプルと解説です。

Adobe CS4予約受付開始

Adobe CS4予約受付開始

Flash CS4含め、Adobe CS4の予約が開始されてますね。

A Flash Polyphonic Synthesizer

A Flash Polyphonic Synthesizer

Flash Player 10の機能「Dynamic Sound Generate」を使って、ポリフォニックシンセサイザーを作ってみました。画面をクリックすると、FlashPlayerがアクティブになり、キーボードで演奏できるようになります。

AS3でPHPと通信する

AS3でPHPと通信する

AS3からPHPにPOSTし、PHPからURLLoaderDataFormat.VARIABLE形式でデータを受け取る、AS2のLoadVars.sendAndLoadな方法。

AS3でJSONを読みこむ

Flash CS4 Professionalからはメタデータが使えるらしい

JSONという形式のファイルをAS3で読み込んでアレコレしてみる場合のサンプルと解説です。

Flash CS4 Professionalからはメタデータが使えるらしい

Flash CS4 Professionalからはメタデータが使えるらしい

要は、Flex用に書かれているActionScript3.0コードによく見かけられるこの記述、

[SWF(width = "320", height = "240", backgroundColor = "0xFFCC00", frameRate = "30")]

これが、Flash CS4 Professionalから使えるとのこと。

Flash Player 10 Astroを予習。Dynamic Sound Generate編 #3

Flash Player 10 Astroを予習。Dynamic Sound Generate編 #3

zkさんのブログで知りましたが、先日のFlashPlayer 10のアップデートで、音のサンプルデータを取得するイベントが、Event.SAMPLE_DATAだったのが、SampleDataEvent.SAMPLE_DATAに代わった模様。

Flash CS4 Professional (US)のドキュメントが公開

Flash CS4 Professional (US)のドキュメントが公開

http://help.adobe.com/en_US/Flash/10.0_Welcome/

されています。いよいよですね。

JavaScriptで、FlashPlayerのバージョンを判別する

JavaScriptで、FlashPlayerのバージョンを判別する

今のところ、FlashPlayer 10を入れていると、見れないFlashサイトをよく見かけます。どういう風に見れなくなるかというと、「あなたのPCには、FlashPlayerが入っておりません、または入っているFlashPlayerのバージョンが、対象のもの(例えば8)以上ではありません。最新のFlashPlayerをこちらのページからダウンロードしてください」といった文言が出て、その先が表示されないというもの。

Flash Player 10 Astroを予習。Dynamic Sound Generate編 #2

Flash Player 10 Astroを予習。Dynamic Sound Generate編 #2 チャルメラ編

音をFlashPlayerで生成して鳴らすことができるようになったので、その音の音階(高さ)や音価(長さ)を変化させて、一つ簡単なメロディーを演奏させてみたいと思います。

Flash Player 10 Astroを予習。Dynamic Sound Generate編 #1

Flash Player 10 Astroを予習。Dynamic Sound Generate編 #1 ラの音を鳴らす編

さてとりあえずFlashPlayer 10 beta2の開発環境を整えたところで、早速個人的にやりたかったダイナミックサウンド生成を試してみます。

Flex SDK 3で、Flash Player 10(Astro)を予習する

Flex SDK 3で、Flash Player 10(Astro)を予習する

Flash Player 10コンテンツにおける、現状の開発環境を整えていきましょい。

AS2で読み込んだ外部画像にスムージングを適用する

AS2で外部から読み込んだBitmapにスムージングをかける

ちょっとめんどくさいかつ、忘れがちなので一応メモ。AS3は楽なんだけどねぇ。

AS2でTextFieldの行数を取得する

AS2でTextFieldの行数を取得する

AS2ではTextFieldの行数を取得するためのプロパティやメソッドはありません(AS3にはTextField.numLinesがあります)。

AS2でTextFieldの行数を取得するには、TextField.maxscrollを使えば、取得することはできるのですが、TextFieldの行間(TextFormat.leading)を操作してしまうと、TextField.maxscrollの値が変化してしまうので、想定する行数とは異なる値になってしまうことがあります。

FlashPlayer 10 beta 2 が出てる

FlashPlayer 10 beta 2 が出てる

FlashPlayer 10(コードネーム ASTRO)で何ができるようになるかっていると、簡単な3D表現が行えるようになっていたり、インバーキネマティクス(物体の骨と関節の物理シミュレーション)ができるようになったり、ダイナミックに音声合成したりシンセサイザー的なことが行えるようになったり、様々な点で表現面で強化が行われているようです。そのPlayer 10のbeta版がでていたわけですが、それのbeta 2がリリースされました。以下、その際の変更点など。

AS2とAS3でSingletonクラスを作る

AS2とAS3でSingletonクラスを作る

各種DataManagerとか、レイアウト指定とか、SharedObjectとか、いろんなところに使えるデザインパターン「Singletonパターン」、AS2とAS3での実装例。

7.17更新! AS3版でコンパイルエラー出てました。。。すいません。asファイルからブログ用に書き直したときにarguments.calleeとしないといけない所を、arguments.callerとしていました。もし使おうと思って使っていただいた方にはご迷惑をおかけしました。。

ActionScriptで極座標を用いて星を描く

ActionScriptで極座標を用いて星を描く

ActionScriptには、Point.polar(距離, 角度)というメソッドがあって、座標(0, 0)からみた任意の距離と角度にある点の座標を算出してくれるので、これを使って正多角形を作ったり星を描いたりします。というわけで正多角形や星を描くクラスを作ってみました。

デフォルトのコンテキスト(右クリック)メニューを非表示にする

デフォルトのコンテキスト(右クリック)メニューを非表示にする

なにもやらないと「拡大」や「縮小」、「100%表示」などの表示が出てしまうわけですが、それを非表示にする方法のメモ。

AS3のEvent.REMOVEDがなかなか便利なので使用方法と注意点

AS3のEvent.REMOVEDがなかなか便利なので使用方法と注意点

Tweenerとか、FMSのストリーミングとかを使うときにとても便利かも。他にも応用範囲はいくらでもありそう。そんな訳で、「インスタンスがremoveChildされた時/する時」を取ることができるイベント定数「Event.REMOVED」についてのメモと、実例。中盤はAS3のイベントフローについての解説になっています。ついでにREMOVED_FROM_STAGEも解説。

AS3のInteractiveObject.mouseEnabledにご注意

AS3のInteractiveObject.mouseEnabledにご注意む

AS2ではMovieClip.enabled = false;なんてやって、そのムービークリップをマウスに反応させないようにしていたわけですが、AS3ではInteractiveObject.mouseEnabledでやりますよ、と先日の記事で解説したのですが、実は落とし穴が。

AS3でXMLを読み込む

AS3でXMLを読み込む

最近忙しくてなかなか更新できないのですが、とりあえず、シンプルなXMLファイルを読み込んでアレコレしたいときのためのメモ。というわけで、以下、ソースと解説。

ActionScript 3.0 ビジュアルリファレンス買いました

ActionScript 3.0 ビジュアルリファレンス買いました

ActionScript辞典と言えば、「ActionScriptビジュアルリファレンス」なわけでしたが、待望の3.0版がでましたよ。

Red5ってFMSの代わりになるのだろうか

Red5ってFMSの代わりになるのだろうか

FlashでストリーミングというとFMSということだけど、色々コストつくからっていうので、オープンソースプロジェクトのRed5とかを利用してみるとかいうのはありなのだろうか。

Simple Youtube Viewer on AIR

Simple Youtube Viewer on AIR

ブラウザを起動せずに、Youtubeの動画を観ることができるソフトを作りました。OSを選ばないAdobe AIRアプリケーションなので、Windows 2000、XP、Vista、Mac OS X 10.4.9以降で動きます。Linuxもそのうち動かせるようになるみたい。

Simple Youtube Viewerの、特設ページへどうぞ

AS2ではMovieClipのArrayをMovieClipのプロパティでArray.sortOnできない

AS2ではMovieClipのArrayをMovieClipのプロパティでArray.sortOnできない

AS3だと、MovieClipを入れたArrayを「MovieClipのプロパティでArray.sortOn」することはできるけど、AS2だとできない。

AS3のSoundMixer.computeSpectrumの問題点と対処法

AS3のSoundMixer.computeSpectrumの問題点と対処法

先日仕事でAS3サイトを制作したのですが、そのサイトのサウンドオンオフボタンの演出として、SoundMixer.computeSpectrumを使った表現をなんとしてでもやる、というものがありました。しかし実際やってみると、なかなか地雷いっぱいトラブルいっぱいで難しかったです。というわけで、その地雷とその対処法。

AS3でAS2のMovieClip.enabledはどうなった

AS3でAS2のMovieClip.enabledはどうなった

InteractiveObject.mouseEnabledになりました。

3D物理演算エンジンWOWEngineとPapervision3D 2.0 GreatWhite

3D物理演算エンジンWOWEngineとPapervision3D 2.0 GreatWhite

2D平面の中での物理演算フレームワークはAPEとか、Box2DFlashAS3とかFisixとか他にもいろいろあったけど、最近初めて3D空間上で物理演算するフレームワークWowEngineが出てきました。

AS3で音のボリュームやパンを操作する

AS3で音のボリュームやパンを操作する

AS3で音のボリュームやパンを変更するには意外とめんどくさくて、一回SoundTransformを抜き取って、変更して、それをもう一度代入するといった方法をとらないといけません。

続・Function.call()の使い道

続・Function.call()の使い道

前回のエントリー「Function.call()の使い道」に関して、いくつか間違い(というか僕の勘違い)があったので、真・Function.call()の使い道、リベンジエントリーです。

Function.call()の使い道

Function.call()の使い道

知ってました?プログラミングにおけるものすごい基本的なことだったのかもしれないのですけど、こんな便利なことができるのです。

AS3でポップアップウィンドウを呼び出す

AS3でポップアップウィンドウを呼び出す

ポップアップブロックを表示させずに、ポップアップウィンドウを呼び出す手法。たぶん、AS2でもできるんじゃないかとか思うんですけど、試してないからわかりません。

AS3でSoundを制御する

AS3でSoundを制御する

AS3はSound関連のクラスが増えて、制御するには複数のクラスを使う必要があるので、それのメモ。

AS3で読み込んだ外部画像にスムージングを適用する

Papervision3D 2.0 GreatWhiteで空間に浮かぶカード100枚

AS3にはBitmap.smoothingというプロパティがあるので、これをtrueにするだけで読み込んだビットマップに対してスムージングを適用することが可能。AS2は意外とめんどくさい

Papervision3D 2.0 GreatWhiteで空間に浮かぶカード100枚

Papervision3D 2.0 GreatWhiteで空間に浮かぶカード100枚

そんな最近よく見かけるインターフェース。Penのサイトでもあった気がする。というわけで、前回同様、1.5で作れるけど2.0で作るとどういう風になるかテストその2。

Papervision3D 2.0 GreatWhiteでマウスに反応するキューブを作る

Papervision3D 2.0 GreatWhiteでマウスに反応するキューブを作る

Papervision3D 1.5版との違いを比較しながらご覧ください。

AS3でTweener 1.31.67を使う

AS3でTweener 1.31.67を使う

AS3でTweener入門。AS2でもx,y,scaleX,scaleYとかのプロパティをAS2用にするだけでできます。

Papervision3D 2.0 - Great White

Papervision3D 2.0 - Great White

Papervision3Dが大幅アップデートで2.0(コード名:GreatWhite)に。何が変わったかというと。。。

AS3でNowLoadingな処理

AS3でNowLoadingな処理

AS2では_root.getBytesLoaded()とか使って作ってたアレです。

AS3でTweenを使う

AS3でTweenを使う

Tweenerは便利なんだけど、他社や他者と共同作業とかする場合とか、Tweenを使っておいた方がいい場合がある。そんなときのためメモ。

AS3でEventDispatcherを使う

AS3でEventDispatcherを使う

AS3でカスタムイベントを作るにはEventDispatcherを使います。

AS3で外部のSWFをロードする処理

AS3で外部のSWFをロードする処理

AS3ではloadMovieやらMovieClipLoaderやらが無くなったので、Loaderを使いましょうというだけの超初歩的サンプルとコードのメモ。

FMS2でストリーミング速度が落ちたとき低いビットレートの映像に切り替える方法

FMS2でストリーミング速度が落ちたとき低いビットレートの映像に切り替える方法

FMS2だと、NetStreamのクライアントステータスメッセージ(info.code)に「NetStream.Play.InsufficientBW」というコードがあるのですが、これを使えばたとえば映像のストリーミング速度が落ちたとき、自動的に低いビットレートの映像に切り替える事が可能です。

Adobe MAXにいってきました

Adobe MAXにいってきました

会社に俺をAdobe MAXへ行かせろオーラを常に送っていたら行かせていただけることになりまして、行ってきました。どうやら役員の人も数名行ったそうですが、あまり時間の都合で行けなかったとか。俺も会社の会議とかで見たかったセッションに参加できないなんていう由々しき事態にはなっていたのですがちょっと見れただけでもよかったかな。(なんてったって俺的には会社持ちだろうからタダだし)

AsBroadcasterを使ってメニューを作る

AsBroadcasterを使ってメニューを作る

AsBroadcasterを使うタイミングがあった(というか使ってみようと思った)ので、AsBroadcasterを使ってメニューを作るという、一見遠回りしてるだけなトピック。

Papervision3Dでマウスに反応するキューブを作る

Papervision3Dでマウスに反応するキューブを作る

Papervision3Dをはじめてみました。Papervision3Dを導入し、単純に空間にキューブを表示するところから、そのキューブに色や画像をテクスチャとして配置する方法、そして表示するキューブ=3Dオブジェクト(DisplayObject3D)を、「ロールオーバーしたとき」や「クリックしたとき」のようにマウスでイベントを発生させるための方法などなど。

Flash Media Serverで動画ストリーミング

Flash Media Serverで動画ストリーミング

仕事で使う事があったのでメモ。FMS2で動画をストリーミングする方法。

FlashCS3でビットマップやムービー、XMLを読み込む方法

FlashCS3でビットマップやムービー、XMLを読み込む方法

ActionScript3.0では、loadMovie()やらMovieClipLoader()が無くなっててちょっと混乱したのでメモ。

getter/setterの意味が分かった

getter/setterの意味が分かった

get/setとかgetter/setterとかいうあれの意味がようやくわかりました。publicなプロパティにアクセスするだけなのになぜそんな手間が?と思ってたのですが、プロパティに直でアクセスするのはよくないかららしい。あと他にもいろんな意味が。というわけでメモ。

Flash Videoをひたすら簡単に自作Flashに組み込むためのクラス

Flash Videoをひたすら簡単に自作Flashに組み込むためのクラス

.flvを簡単に自分の作ったSWF内に組み込むためのクラスを作りました。これを使う事で、通常よりはるかに簡単にビデオギャラリーなどのFlashコンテンツを作る事ができます。

アルファチャンネルグラデーションマスクを使う

アルファチャンネルグラデーションマスクを使う

よく使うのだけど未だに時々慌てるのでメモ。アルファで消えて行くムービークリップを使って、序々に右からフェードアウトしていくテキストなんてものを作る事が可能です。

外部クラスを作る(ActionScript3.0)

外部クラスを作る(ActionScript3.0)

前回のエントリー「外部クラスを作る(ActionScript2.0)」をActionScript3.0版にした場合、以下のように置き換えられます。

外部クラスを作る(ActionScript2.0)

外部クラスを作る(ActionScript2.0)

ActionScript2.0では外部asファイルとしてクラスを作成する事ができます。クラスを作成すると、スコープやらなにやらそのクラス内で処理を行う事ができるので、なれると非常に便利だったりします。また、お気に入りのテキストエディタで作業ができるというのもポイントが高いです。Flashのアクションスクリプトエディタはやっぱりなんだかんだいって使いづらいです。

Flash CS3でAIRが書き出し可能になったので

Flash CS3でAIRが書き出し可能になったので

お約束のデスクトップデジタル時計を作ってみました。ちなみにAdobe AIR for Flash CS3 ExtensionはAdobe Lab.からダウンロード可能です。Flash CS3からAIRを書き出す事が可能になったので、Flash CS3+AS3の本領が発揮されますね。以下、作り方をまとめてみました。

Flashで作られたユーザーインターフェースと使い勝手

Flashで作られたユーザーインターフェースと使い勝手

ウェブにおける表現というのはFlashというテクノロジーと高速なインターネットインフラによって飛躍的に向上してきた。今では音声、動画はあたりまえという時代。フルフラッシュサイトも当たり前のように存在してきている。だが、Flashにおける表現の模索はいまだ続いている。

プロトタイプベースのクラス拡張

プロトタイプベースのクラス拡張

ActionScript1.0と2.0を見直したい。1.0と2.0は書き方は多少違えど、内部で同じ形式に変換してるわけだから、1.0で書かれているプロトタイプ拡張用.asファイルを#includeして使うなんて使い方ができるわけで。

Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート

「Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート」を買いました。

最近ActionScript3.0と書かれている本にめっぽう弱い。やっぱなんだかんだいって自分、不安なんだろうな。AS3にきちんと移行できるかどうか的な。

配列をシャッフルする

配列をシャッフルする

基本的なアルゴリズムですが、静的クラスで配列シャッフル関数を作ったのでご紹介。

Flash プロフェッショナル・スタイル CS3対応

Flash プロフェッショナル・スタイル CS3対応

Flash関連の本を久しぶりに買いました。CS3になってAS3になってFlashはどう変わるかというものも興味があったのですが、ウェブ広告物制作時におけるフローや豆知識など、今までのFlash本とは違うと感じ、買ってしまいました。

Flash RemotingとAMF

Flash RemotingとAMF

ユーザー参加型コンテンツのFlashコンテンツを作成する場合、サーバーサイドプログラムとの連携は必須になります。Flash RemotingでAMFを使った連携方法についてまとめてみました。

ランタイムビットマップキャッシュ(.cacheAsBitmap)

ランタイムビットマップキャッシュ(.cacheAsBitmap)

.cacheAsBitmapは使い所によっては凄く便利だと言うのは知っていて時々使っているのだけど、どうもよく分かっていなかったので、何故効果が現れないのか混乱することがしばしば(というか逆効果になったりするし)。というわけで頭の整理を行うために.cacheAsBitmapについてまとめてみました。

Flash周りのキャッシュ対策

Flash周りのキャッシュ対策

SWFファイルやそのSWFで読み込んだ外部テキストや外部XMLは、ユーザーのブラウザキャッシュに残ります。そのため、再びサイトに訪れたユーザーはキャッシュされたそのSWFファイルを読みます。これは一度見たサイトはすばやく閲覧できるという意味ではいいのですが、常に新しい内容が更新されるSWFの場合は、更新された情報が反映されないため、このファイルをキャッシュに残させない「キャッシュ対策」が必要になります。

Twitter入門

Twitter入門

Twitterをはじめてみました。ウェブ制作者の端くれとしてやっとくべきかなぁ思い、とりあえず入ってみたのです。そしたら最初は全然面白そうじゃないなぁと思っていたんですけど、実際やってみたら凄く楽しくて、ハマっちゃいました!(Nさん)

AS3.0に対応するために覚えなければならない事

AS3.0に対応するために覚えなければならない事

FlashCS3とActionScript3.0の登場によって、AS1やAS2で作業していた我々Flashオーサーにとって大きな変化が求められています。いくつか個人的にメモをしたのでそれを貼り付けておきます。

FuseKitを使う

FuseKitを使う

FuseKitというのは簡単なActionScriptだけでアニメーションをさせるためのツール。とだけ思っていたのですが実はそれ以上の機能が用意されていたということを知り自作のトゥイーンエンジンを卒業すべきかどうか悩んでいたりします。悩んでいるついでにFuseKitを実際に使いどういうことが出来るのか判断してみるため、解説をしてみました。結果的にはものすげえ使えるってことがわかったわけでして。

Recently Entries