Technology Archive

Flashのタイムラインに書いたJavaScriptをToolkit for CreateJSで書き出す

はいこんにちは、友人の結婚式で静岡に行ってきた沖です。

今日はタイトルそのまんまですが、Toolkit for CreateJS(以下、Toolkit)というFlashの拡張機能の話です。Toolkitでは、Flashのタイムラインで作成したアニメーションなどの素材を、HTML5のリッチコンテンツフレームワークであるCreateJSから利用できるように変換して書き出すことができます。

そもそもCreateJSってなに?って人は、Web Designingの記事を読むか、他のブログを参照してください。

さて、本題に移ります。例えば、Flashで四角形が縮小するだけのループアニメーションを作成します。

こんな感じです。んで、これをToolkitを使ってFlashから書き出すと、↓のようにHTML5に変換できるわけです。右クリックするとFlash Playerのメニューが出ないでしょ?

これだけでもかなりスゴイわけですが、実はToolkitにはFlashで作ったアニメーション以外にも、タイムラインに書いたスクリプトを書き出す機能もついているのです!

さすがにActionScriptをJavaScriptに変換することはできませんが、直接JavaScriptを記述することができます。例えば、先ほどのアニメーションを配置しているタイムラインの1フレーム目に「this.stop();」を記述すると……

こんな感じでアニメーションが再生されなくなります。このとき、タイムラインにそのまま「this.stop();」と記述しても、ActionScriptとして認識されてしまうため、Toolkitでのパブリッシュ時には無視されてしまいます。

そのため、下のようにブロックコメントで囲った上で、先頭に半角小文字で「js」というキーワードを入れます。こうすることで、Toolkitがブロックコメントの中をJavaScriptとして認識して書き出してくれるようになります。なお、頭に半角スペースが必須です。また、「JS」のように大文字では認識されません。

/* js
this.stop();
*/

使いどころとしては、「最初は停止していて、マウスイベントなどをきっかけに再生されるアニメーション」など、ちょっとしたタイムラインの制御が必要な場合に用いるのがよいと思います。

Toolkitは、あくまでCreateJSで使う素材(アセット)を作るための変換ツールとして位置づけられているため、Flashだけで完パケに持っていくことは避けた方が賢明です(そもそもFlash的にはただのコメントなので、補完も効かない)。

最後に、記事で使っているサンプル一式を置いておきます。参考にしてください!

それでは、よきCreateJSライフを。

IE7のElement.getAttribute()では絶対パスが返ってくる

JavaScriptでハマったのでメモ。

例えば以下のようなHTMLに対して、IE7でElement.getAttribute()を実行すると、なぜか絶対パス(http://~/test.png)が返ってくる。

	<img src="test.png">

ちょっと調べてみると、img要素のsrc属性や、a要素のhref属性などでこのような挙動になるらしい。IE8以降では問題なし。

Web DesigningにCreateJSの記事を書きました

現在発売中のWeb Designing 2012年11月号(Vol.136)に、CreateJSの入門記事を書きました。前号から短期集中として始まった連載の第2回目になります。

今回は、EaselJSで扱える表現の中から、画像表示、マウスイベント、フィルタの3つの表現を取り上げて解説しています。バナーが自動で切り替わるスライドショーを作るチュートリアルもありますので、ぜひご覧ください。

201211-06.jpg

ちなみに、この短期集中連載は全4回を予定していまして、前半(10、11月号)の2回は私が、後半(12、来年1月号)の2回はラーメン旅行カメラマンICSの池田さんが担当しています。

ADC OnAir シーズン1アンケートをやってます

先日出演したADC OnAirですが、10/9に行われたADC Meetup 06のアフターパーティーでの放送をもって、シーズン1の終了となりました。「シーズン1」ということは、シーズン2があるような気もしますが、今のところは未定のようです。

何はともあれ、アンケートに答えると抽選で番組ロゴ入りオリジナル栓抜きが当たるそうなので、是非どうぞ。

ADC OnAir シーズン1アンケート

Mac OS Xで.bashrcを作成する

デフォルトのMac OS Xでは.bashrcが存在しない。作成するには、ターミナルを開いて以下のコマンドを実行。

touch .bashrc

Flash Professionalの起動時間~Windows編

A.e.Suckさんの『Flash Proの起動時間(8〜CS6)』という記事を読んで、Windows版でも同じなのか気になったので試してみました。

結果はこちら!(ドーン)

Flashのバージョン 起動時間 順位
20120511_cs3Flash CS3 Professional 2.2秒 1位
20120511_cs4Flash CS4 Professional 4.2秒 2位
20120511_cs5Flash Professional CS5 6.3秒 4位
20120511_cs5.5Flash Professional CS5.5 7.8秒 5位
20120511_cs6Flash Professional CS6 6.1秒 3位

意外や意外?、Windows版ではCS6が3位と健闘しました。また、そもそも私の環境ではSSDのおかげか、ほとんど起動時間に差異が見られませんでした。ちなみにFlash 8はインストールしていないので対象外です。

というわけで、起動時間が気になる人は「CS3を使う」&「SSDにする」でファイナルアンサー!

以下、どう計ったかとスペックを書いておきますね。

計測環境

  • 計測はストップウォッチを使って手動で行う。
  • Windowsを再起動してHDDへのアクセスが落ち着いた後にFlashを2回起動して2回目を計測。
  • 上記の方法を3回繰り返し、その平均値(小数点第2位以下は四捨五入)を表記載の「起動時間」とした。
  • 念のためFlashのワークスペースはすべて「初期設定」とした。

マシンスペック

OS
Windows 7 Professional 64bit
CPU
Intel Core i7-2600(3.40GHz)
RAM
DDR3-1600(4GB x 2 = 8GB)
HDD
Intel SSD 230(120GB)

F-siteセミナー「みんなのFlash効率化大作戦」で喋りました

こんにちは、沖です。みなさん、チキンフィレダブル食べました? 私は、おいしいんだか何だかよく分からないまま食べ終わってしまいました。多分、二度目はありません。

さて、先週の土曜日にF-siteセミナーで司会&喋ってきました。今回のテーマは「みんなのFlash効率化大作戦」。近年では少し狭めの会場だったので、すこしマニアックというかニッチな話題にしてみました。

20120207.jpg

私は、Flashのワークスペースとお気に入りのハードウェアの話をしましたので、その内容を少しブログでもご紹介します。

Read more

MacBookのバッテリーが充電されなくなった件について

こんにちは、オッキーです。

今日は、私のMacBookのバッテリーが、電源アダプタをつないでも急に充電されなくなった件について書きたいと思います。結論から書くと、Apple Store 銀座のジーニアスバーに持ち込んで、(その場で)修理してもらうことで直りました。

同じような症状で悩む方が出てくることを考えて、症状の発生から完治までの顛末をご紹介します。

それは突然始まった

私は、2010年の年末に整備済製品として購入したMacBookを使っています。いわゆるMid 2010モデルで、MacBookとしては最後のモデルです。

先月のある日、なにげなくMacBookを開くとバッテリーの残りが1時間弱になっていたので、電源アダプタを接続しました。すると、どうしたことでしょう。MacBookと電源アダプタをつなぐ、MagSafeコネクタのLEDがまったく光りません。

20120202b

LEDは、通常充電中はオレンジ(上の写真)、充電完了時はグリーンに光るのですが、何の反応もないのです。?と思ってメニューバーを見ると、そこには充電していないときに表示されるバッテリーの残り時間が……。

20120202c

MagSafeが正常に接続できていないのかと思い、何度か抜き差ししてみますが状態は変わりません。家のコンセントがおかしくなったのかと思い、いくつか別のコンセントにもつないでみますが、やはりダメ。

原因を調べてみる

まずはGoogleだな、と思い「MacBook 充電できない」で検索してみると、似たような症状の人たちがたくさんいました。ひとつひとつ試してみます。

SMC(システム管理コントローラ)のリセット

↓のURLの手順で試しましたが、何も変わらず。
http://support.apple.com/kb/HT3964?viewlocale=ja_JP&locale=ja_JP

ちなみに、SMCリセットを行うときの起動は、通常の起動と見た目が何も変わらないので注意。私は、やり方が悪いのかと思い何度もやり直しました(ファック!)。

PRAMのクリア

関係ないような気がしつつも、これで直ったという人も見かけたので試してみましたが、やはりダメ。手順は↓のURLを見ました。
http://support.apple.com/kb/HT1379?viewlocale=ja_JP

MagSafeのコネクタ部分が破損

していない。見た感じ、問題なさそう。

電源アダプタを外して1分放置してから再接続

結構これで直ったというケースが多いのですが、これもダメ。

温度が10℃以下だと充電できなくなるので暖かい場所で試す

ガスファンヒーターついてる。

バッテリーの充電回数規定を超えて?

いない。1年前に買ったばかり。

このあたりで夜中の3時ごろをまわっており、心が折れ始めます……。

Appleサポートに電話する

翌日、朝一番でサポートに電話してみたところ、色々と案内してくれるのですが、基本的に上記の試したことしか言われずまったく解決には至りません。これもまた意味なし。

新しい電源アダプタを試す

前日まで充電できていたので考えにくいのですが、もうこれは何かの拍子で電源ケーブルが断線したに違いない、と思い、新しい電源を試してみることにしました。翌日、新宿西口のヨドバシカメラに行って事情を話すと、店員さんが快く売り場の電源アダプタをつながせてくれました。

すると、LEDがオレンジに光るではありませんか! メニューバーの表示も正常です。

「いやー、電源ケーブルって断線しやすいのねぇ……ちょっと高いけどしょうがない、買っちゃうワ」と新しい電源アダプタを購入し、早速近くのマンガ喫茶で充電をしようとすると。

……またLEDが反応しなくなりました……。コンセントを変えてもダメ。

初期不良というわずかな可能性を疑い、すぐさまヨドバシに引き返して売り場のMacで試してもらうと、電源アダプタ自体は問題がありませんでした。それどころか、再度私のMacBookにつなぐと、今度は認識したものの、

20120202

メニューバーがこのような表示になってしまう始末。これはもうハードウェアの故障としか考えられないね、とヨドバシの店員さんとも結論を出し、電源アダプタは申し訳ないと思いつつも返品させていただきました(いつも買ってるから許しておくれ……)。

これはもう、あきらめて新しいMacを買うしかないのか……途方に暮れ始めます……。

最後の望み、ジーニアスバー

サポートに電話してもダメだった時点で諦めていたのですが、最後のあがきとしてジーニアスバーに行ってみることにしました。渋谷のApple Storeは3日後からしか予約がとれなかったので、翌日に予約がとれた銀座のApple Storeに予約しました。

翌日、店員さんに症状とMacBookを見せた直後、「おそらくMagSafeコネクタ(下の写真参照)がちょっとズレているのだと思います。この場でも直せるかもしれませんので、ちょっとお待ちください」と言われました。

20120202d

95%諦めていた私の心に、一縷の望みが芽生えた瞬間です。例えるなら、誰もが倒せないと思っていたエメリヤーエンコ・ヒョードルに、プロレスラー藤田和之のラッキーパンチ豪腕フックが見事に命中してヒョードルの足下がフラついた瞬間の気持ちです(わかりづらい)!

ふたたびLEDはオレンジに光った

しばらく時間をおいてMacBookを運んできた店員は、フラつきながらもなんやかんやでチョークで藤田に勝ったヒョードルのように穏やかな笑顔を浮かべていました。そう、私のMacBookは直ったのです!

どうやら本体側のMagSafeコネクタは、持ち運びや電源ケーブルの脱着を繰り返すうちに、内側に留めてあるネジが緩んできてしまうことがあるそうです。それが原因で、見た目には分からない程度にコネクタがズレてしまい、うまく充電できなくなっていたというわけです。

ジーニアスバーでは、分解してネジを締め直す程度の修理であればその場で直すことができるということでした。もちろん無償でした。

とにかく直ってよかった!

まとめ

  • MacBookは、突然充電できなくなることがある。
  • SMCのリセットなどでも直らない場合、MagSafeコネクタの不良を疑ってみる。
  • ジーニアスバーは要予約なのが面倒だけど、商品知識が非常に高い。

最後の点は当たり前っちゃ当たり前なんですが、お店(特に家電系)で商品について質問してもうまく答えられない店員が多い中、修理のあとに聞いた私の質問にも丁寧かつ的確に答えてくれたところからも、ジーニアスバーの質の高さがうかがえました。

というわけで、MacBookは今日も元気に動いております。おわり。

Google Web Fontsを使ってみた

主にビールのパッケージから秋の訪れを感じているオッキーです。

GoogleがWebフォントを使うためのサービスとして「Google Web Fonts」を提供していますが、これを試しに使ってみたので記事にまとめました。そもそもWebフォントがどんなものか分からない方は、先にググってください。

Google Web Fonts
http://www.google.com/webfonts/

20110927.png

Read more

Google Maps API for Flashが非推奨(deprecated)になった件について

こんにちは、最近セブンイレブンの「のむヨーグルト いちご」がお気に入りのオッキーです。

先週2日のことですが、Googleがいくつかのサービスについて将来の廃止をアナウンスしました。サービスによって理由はさまざまですが、概ね「よりインパクトの高いプロダクト開発に集中するため」というのが最大の理由のようです。中には、GoogleデスクトップやGoogleノートブックなど、まだユーザーが多いように思えるサービスも含まれています。

Official Google Blog: A fall spring-clean
http://googleblog.blogspot.com/2011/09/fall-spring-clean.html

今日は、この中からGoogle Maps API for Flashが非推奨(deprecated)になった件について私が考えたことを書いてみます。

20110906.png

Read more

前の10件 1  2  3  4  5  6  7  8  9