Twitterでasamimimiさんがアイコンの頭に鏡餅を乗せてるのをみて、まねしてみかんを乗っけたところ、なぜか流行ってしまった。

流行った上に、SaqooshaさんがWonderflで頭にみかんを乗せるだけの簡単なプチツールを作ってくれたため、その後さらに強引なみかんerが激増。おもしろかったのでアーカイブしてみたよ。

Saqooshaさんありがとう！

(※リンク先は各Twitterアカウントページです)

そんなみかんエントリーはじまりで恐縮ですが、みなさま、あけましておめでとうございます。
本年もよろしくお願い申し上げます。

あ、もちろんみかんは配布しているので、ご自由にどうぞ。

師走でごわす。みなさんいかがお過ごしでしょうか。

今年一年を総括する記事があふれかえるこの時期ですが、当level0ブログでも各自、今年一年を振り返って印象に残ったサイトなどを紹介しています。

世界中のイケてるWEBサイトを紹介しているThe FWAでも、毎年恒例、今年一年のベストサイトを決める「People's Choice Award」が開催されています。毎月ひとつずつ、合計12のサイトがノミネートされていますので、この際ぜんぶ見てみてはいかがでしょうか。

The FWA - People's Choice Award 2008 Sponsored by Adobe - 投票ページ
※投票の締切は1/14までとのこと。

せっかくなので、今年一年だけでなく過去のノミネートサイトも年末年始の空いた時間に眺めてみたら、WEB業界の流行や今後の動向が見えてくるかもしれませんね。

The FWA - People's Choice Award アーカイブページ

ということで、個人的に今年一年印象に残っているものを振り返ってみます。WEBサイトに限らず、今年出会ったWEBサービスなどいろんなものをピックアップしてみました。

今年の総括なのですが、あえて Flash 以外で気になったものを紹介したいと思います。

今年も残すとこ約2週間となりました！

本当時間が経つのは早い！！

そんな中今年もいろんなサイトが生まれ話題になりましたよね～

ということで今回のエントリーは個人的に今年気になったサイトを紹介していこうと思います！

■高橋酒造株式会社 shiritori-ring しりとりで人のわをつなげよう！

• http://shiritori-ring.jp/

何と言ってもやっぱりトップバッターに紹介する作品はこれ！チーム一丸となって作り上げ今年もっとも思い出になった案件です！

バリバリアニメーション制作していいものに仕上げることができました！

金のなる木と年末ジャンボを買ったナックルです！
花言葉は一攫千金！！！

今回は埋め込みフォント容量について。

前職では社内向けのツールみたいなのを作っていたので、容量の事をあまり気にしていませんでした。とあるブログパーツを作っていて、容量みてビックリ！フォントの埋め込みとったらすくなーーぃ。 いったいどれぐらいあるのか気になって調べてみました!

完全にスローライフなペースで更新されている内容ですが (＞＜)。その間に朝日新聞の神奈川版に記事として取り上げていただきました！「マスメディアで取り上げられる」というのが隠れミッションだったのでうれしいです！

さてさて、今回はどのようにして企画が決まったか。

まず、植物を使用したインタフェースを研究している栗林さんに植物の表面電位をどのように扱うことができるか？ということのヒアリングから始まりました。聞いて分かったのは

1) そのときの気温や気候、日照量などの影響を受けて植物の活動の活性具合いによって表面電位が変わる。
2) 人間が触れると人の影響を受けて電位が上がる。
3) 2) を利用してスイッチとして扱える。

ということ。日々の活動を記録するということも考えていたのですが、3) がかなりアクティブな反応を返すので何かに使いたいと感じました。また逆にただのスイッチとして扱うとしたらそれは赤外線センサーでも良く、何かしら植物を通すことで意味のある表現にしないとだめだなという感想も持ちました。

今度は逆にインサイトとしてカフェに欲しいツールということから考えてみました。

・お客さんと店がもっとコミュニケーションをとれるようなツールがあるとうれしい。しかも Twitter のようなゆるい感じの関係が良い。昔ながらの喫茶店にあるような感想ノートみたいなやつ。

・昔の喫茶店といえば占いマシンが置いてあったような。。

・外からもカフェの様子がなんとなく分かるといいなぁ。

・看板犬のようなマスコットが欲しい。

・やはり植物を身近に感じられるようなエコにつながるアクションも欲しい。

トイレの入室管理のようなものから、来客カウンターなどなどブレストでいろんな案が出たのですが、ふと「植物がブログを書いたら面白いんじゃないか？？」という意見が出て「鎌倉で働く植物の日記」というキャッチコピーがひらめきました。

確かにブログにすればコメントを書いたり、外から様子を見ることができる。ブログの自動生成というのは過去に別案件で近いことをやっていたので、なんとなくイメージが湧きました。植物を媒介にしたコミュニケーションツールを作ろうと考えていたので、そもそもコミュニケーションツールであるネット、ブログは非常に親和性が高いなと合点がいきました。

メンバー一同面白いという反応があったので、さらに＋アルファの要素として実店舗でネットにつなげなくてもその場で楽しむ体験として、植物に触れることで相性占いをしたり、写真を撮って携帯にダウンロードできる機能を肉付けしていきました。さらにバイラルで広めるためにブログパーツを作って、そこで何をするようにしようか。。そうだ！水をやろう！あ、多肉植物に水を上げすぎるといけないので光合成はどうだろうか？

と、なかなか盛りだくさんな機能になったのですが、「植物がブログを書く」という分かりやすい仕組みのもと、カフェの場でもネットからも楽しめるコミュニケーションツールとして良い着地点が見つかりました。多機能になって色々な角度から楽しめるようになる反面「意図が散漫になって伝わりづらくなるのでは？？」という危惧も生まれたのですが、「鎌倉で働く植物の日記」というタイトルの明快さと驚き感、そしてそれを上回るほのぼの感があれば中では相当ワイルドなことをやってもいいのでは？？という気がしてきました。

さて、次回はどのような技術を使って開発したかという話しです。

こんにちは。さいきん鼻の鼻孔を拡げて呼吸をラクにする、ブリーズライトにはまっているkijimaです。きょうは休日ということでひとつ軽めの話題でも。

先日このlevel0ブログに、記事につけたタグを一覧で表示させる機能をつけてみました。ページ右側の一番下です。

久しぶりにMovableTypeのテンプレートをいじったり、CSSをごにょごにょしたりしてたんですが、こんなときもFireBugってば便利すぎ。ブラウザのアドオン上で動的にHTMLとCSSを書き換えられたり。。

知ってはいたものの、実際に使ってみるといちいちエディタとブラウザを何度も反復横跳びしていた頃にはなかった感動を覚えました。

で、そのついでに勢いだけで300件の記事エントリすべてに適切（と思える）タグをつけてまわりました。正直半日はかかった作業なんですが、自分がlevel0にコミットする以前の記事もぜんぶ見て回ったので得られたものは多かったかと。

そういえば、こんな記事が多かったです。

先日、Nikonさんから発売された UP-MEDIA PORTのデモを見に行きました。 Flashサイトが非常によくできていたので、サイトの紹介と 合わせてデモの感想を書こうと思います。

ロクナナさんのワークショップで講演してきました。

主に Flash サイト / AIR コンテンツの作り方みたいなところを企画のところから cs4 を使ったライブコーディングまで行いました。

直前に AIR1.5 がリリースされるなどかなりのドタバタ要素満載で
地獄のように緊張しました。。

無言が何よりも怖い人間にとってライブコーディングはまさに針のむしろですね。
(しかも隣には大重さん。。ただの罰ゲームとしか思えません＞＜)
無事ご紹介したいことはすべて紹介できたのですが、あとになって「こう言えばもっと分かりやすかったなぁ」など反省しきり。まだまだ修行が足りないと思いつつもこうやってすごいハッカー達は成長していくんだなと思い至りました。

スタッフの皆様やいっしょに講演してくれたメンバーのおかげもあって幸い好評 (?) だったようなのですが、やはり人前で話すということはちゃんと自分のやっていることや意識していることを言語化しているということで、その努力は必要だなと思い至りました。今回は話す側としてもかなり勉強になりました。

今回の企画の準備をしてくださった方、サポートしてくれた方、一緒に講演してくれた方、そしてなにより来ていただいたお客様に大感謝です。

はじめまして、Knuckleです。けしてナックルパンチが得意なわけではありません。

今年7月末に入社した、KAYAC初の女FDです！まだまだ経験が浅く、初級者な感じです。私なりの女目線で気づいた事、知らなかった事など、投稿して行きたいと思います。

さて、お初の記事は　FlashPlayer10の不具合についてです。

はじめまして、koyuです。

今年の５月に入社してからというもの、ロン毛FDとして日々奮闘しています。（夏は毎日が修羅場） Flashは初心者を抜け出て初級者あたりと言ったところでしょうか。
自分は自分と同じようなfresherに向けて何かつまった事や、地味な発見などの情報を発信していきたいと思います。

それでは一発目と言うことでfireworksを使用した画像の書き出しについてです。

こんにちは、いろんな意味でlevel0なkijimaです。

akihiro kamijoさんの書かれた上記エントリーでも取り上げられていますが、FlashPlayer10のセキュリティ関連の変更によって、FileReferenceクラスを使用した動作に影響が出るようです。

FileReference.browse() は ユーザのマウスかキーボードの操作に対するイベントハンドラ内で呼び出す

これがどういうことかというと、要はユーザーのマウスとキーボード操作と紐付いていないタイミングでのダイアログ表示を禁止する、というようなものですね。

実際にボタン操作など以外の場所でFileReference.browse()やdownload()を試してみると、下記のエラーダイアログが表示されます。

SecurityError: Error #2176: ポップアップウィンドウを表示するなどの特定のアクションは、 例えばマウスをクリックしたりボタンを押したりして、 ユーザによる相互作用が発生した場合にのみ呼び出されます。

※エラーログを表示させるにはデバッガ版FlashPlayer10をインストールしてください。
Adobe Flash Player Support Center

FlashPlayer10検証にはFlashSwitcherが便利

ここであえて話を脱線させますが、FlashPlayer10の動作検証には、FireFoxのアドオン「FlashSwitcher」が欠かせません。自分はFlashPlayer9と10のリリース版とデバッガ版両方を追加して、チェック時に切り替えています。

当然ながら普通のユーザーはデバッガ版FlashPlayerなんてものはインストールしていないので、エラーログさえ表示されず、ただ何も動かなくなる、という状況になってしまうことが容易に予測できます。はい、これはやばいですね。

さて、話を戻してここからは開発中、実際に遭ったケースでお話しします。

FlashDevelopが知らない間にbeta8になってたので入れてみた。

詳しいことは例によって馬鹿全さんのエントリでごらんください。

僕はといえば、エディタ部分とカラーリングとフォントをかなり気にするのでバックアップをとって更新しようと思ったところ、設定ファイルのおき場所が変わってましてた。ただ、beta6からのバージョンアップのため、7からなのか、8からなのかはわかりません。以前の記事の補足として参考にしてください。

まずc:/Program file/FlashDevelop/FirstRun.fdbというファイルに各種設定XMLファイルの場所が書いてあります。

$(AppDir)\Settings\;$(UserAppDir)\Settings\

プログラムファイル直下のSettingsフォルダがデフォルト設定で、ユーザーディレクトリにSettingsフォルダがあればそちらが優先されるという意味のようです。

Vistaだと C:\Users\(ユーザー名)\AppData\Local\FlashDevelop\Settings のようになるはずです。以前のFirstRun/Settingsの設定ファイルはこっちに引き継げばよさそう。(といってもエディタのカラーとフォント部分のみしかやってませんが)

Beta8になってカスタムクラスのハイライトが入ったのがいいですね。

あと、僕だけかもしれませんが、インストールのときにStandaloneモードにチェック入れたらエラーでて起動できなくなって、.localというファイルを消したら直った。

最近のお仕事でSWFAddressを使ったものがあったのですが、社内FBがてらメモ。

SWFAddressで%が使えない？

SWFAddressの最新版を落として、普通に実装し、正常に動作しているのを確認。
ここまでは良かったのですが、#以下のアドレスに"%"が入ると何故かリロードされてしまいます。

/#top → /#contents のようにアドレスを変えても正常に動きますが、/#top→/#to%pとするとリロードといった具合です。

ちょっと社内のPGと検証してみたんですが、どうやらバージョンの問題らしく、最新の2.1(http://www.asual.com/swfaddress/samples/cs3/で#/portfolio/2/ → #/portfolio/2%/)だと起こりますが、2.0(http://labs.un-q.net/flashcs3/swfaddress2/で#/p1/→#/p1%/)だと起こらないようです。

2.0から2.1への変更点に注意

下記が変更履歴。
http://sourceforge.net/project/shownotes.php?group_id=181584&release_id=590904

ざっと見ですが、Safari3のポップアップブロッカー関連など、もろもろ修正されているみたいなので、案件ベースで確認したほうが良さそうです。

以上、ざっくりデバッグですが、SWFAddressメモでした。

mp3プレーヤーのAIRを開発していた時にハマった罠についてメモ。
File.nativePathだとOSXで読み込めず、Winで実行すると大丈夫。
これはいったいどういうことなんだ？と、検証機のMacBookの前で一瞬ハテナマークが飛び交いました。

ひとまず謎を解くためにものすごく単純なコードに落として検証してみました。

ドキュメントディレクトリーにあるhoge.mp3を読み込んで再生。

import flash.filesystem.File; import flash.net.URLRequest; import flash.media.Sound; var _path:File = File.documentsDirectory.resolvePath("hoge.mp3") trace(_path.nativePath);// C:\Users\murai\Documents\hoge.mp3 trace(_path.url);// file:///C:/Users/murai/Documents/hoge.mp3 var _sound:Sound = new Sound(); var _channel:SoundChannel= new SoundChannel(); _sound.load(new URLRequest(_path.url)); _channel = _sound.play(0,0);

Winだと

_sound.load(new URLRequest(_path.url));

でも

_sound.load(new URLRequest(_path.nativePath));

でも鳴るんですが、MacだとFile.urlの方でしか鳴りません。

スラッシュ（/）とバックスラッシュ（\）の違いはAIR側で吸い取ってくれるんですが、Macで使うにはこの書き方だとfile:///ってやつ（"app-storage"のURL Schemeというそうです）が必要らしいです。
nativePathは素直にそれぞれのOSにあったパスを返してくれますが、urlはfile:///○○の形で帰してくれます。

Macで突然ファイルが読めなくなった！となったらまずここを確認してみると、あっさり解決するかもしれません。

リファレンス
File.nativePath
File.url

ボンジョルノ！

自分はとっくにイタリアから帰国しましたが、イタリアンテンションでお送りします。

今回はみなさんを魅惑のマジカルでミステリーなツアーにご招待！

MAX/MSP という音楽作成、音声処理をプログラミングできる非常に便利なソフトがあるのですが、これが socket でデータを通信できるのです。例えばマイクの音量が一定値以上になったら信号を送る。Jitter という画像解析ソフトと組み合わせて人の位置を送るなどいろいろな使い方ができて大変ファンタスティックなのですが、なぜか socket でデータを送ると最後に ";" が入るので要注意です。

private var socket:XMLSocket;

public function connect() {
socket = new XMLSocket();
socket.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
socket.addEventListener(Event.CONNECT, onConnectHandler);
socket.addEventListener(Event.CLOSE, onReleaseHandler);
socket.addEventListener(DataEvent.DATA, onDataHandler);
socket.connect(ip , port);
}

private function onDataHandler(event:DataEvent):void {
var receiveData:String = String(event.data).substring(0, event.data.length - 1);
// 処理
}

こんな感じに対応しました。余談ですが、MAX はコードを書くことなくモジュールとモジュールをつなぎ合わせると簡単にプログラムを作成できるのですが、そんなインタフェースで簡易的なサーバシステムができるんじゃないか？と考える昨今です。

ネタですが、先日所用で半日ほどSparkのコードを読み漁っていたんですが、すごいことに気づきました。

taka:niumさんのProgressionの制作を助ける拡張パネル群のソースも公開されていたので、JSFLを参考にさせてもらおうと思っていたんですが、別のところに驚きました。

もう次のごはんとFlashはライブコーディングとかどうですね。

• Progression Framework

先ほど神谷が書いていたように道家、嶋田、日高、来島、村井の五人はイタリアに来ています。

特に意味はありませんが、WebカメラがあるのでUstで映像のみ配信してみようと思います。現地時間の11:00まで(日本時間で18:00)配信する予定です。配信終了しました。ネットワークが重くなるのでまた夕食時とか適当に流しますー

今日は雨なので少し暗いですが、雰囲気だけでも伝わるでしょうか。

Streaming Video by Ustream.TV

※ちなみに道家個人アカウントで失礼しますがご了承くださいませ

遅くなりましたが「FlashDevelop 使ってますか？」調査の結果出ました！ざっとこんな結果になりました。

使ってます！… 87 人

いずれ使いたい！… 69 人

興味ないです。… 19 人

今はじめて知りました。… 44 人

計 … 219 人

なんと 219 人もの方にご参加いただき本当にありがとうございました！それにしても 2.5 人に 1 人が使っているということになりますね。そしていずれ使いたい人を合わせると 70% 以上の人が FlashDevelop ユーザ＆予備軍ということになります。基本的に mac では使えないのですが、も、も、ものすごい普及率です！！記事を書く上で level0 を見に来てくれる方はどんな方たちが多いのだろうか？と良く疑問に思うのですが、大変参考になりました。またこういった形でアンケートをとらせていただくかと思いますが、そのときはまたどうぞよろしくお願いいたします。

ついでに FlashDevelop 関係の極小 Tips を一つ。FlashDevelop で Flash IDE Project を開発している際に、急遽 AIR でも開発したくなった際「AIR ライブラリのコードヒントも出したいなぁ」というときなのですが (最初から AIR Projector でやれば良いという説もありますが)、Project → Properties → Compiler Options → SWC Include Libraries に "C:\Program Files\Adobe\Adobe Flash CS3\ja\Configuration\ActionScript 3.0 AIR 1.0\Classes\playerglobal.swc" (通常の位置に CS3 をインストールしている場合) とパスを通してやれば OK 牧場です。

Flashから別ドメインにあるファイルにアクセスする際には、読み込みたいファイルが置いてあるサーバにカスタムポリシーファイルを設置する必要があります。 このファイルの設定や読み込み方にはまったので、まとめてみたいと思います。

• 基本的な記述方法
  
  例をあげますと

  <?xml version="1.0"?> <cross-domain-policy> <site-control permitted-cross-domain-policies="all"/>//必須ではない <allow-access-from domain="level0.cuppy.jp" to-ports="80" secure="true"/> </cross-domain-policy>

  のような形になります。
  各属性に設定できる値は、

最近FLASHが原因不明のエラーで突如不安定になったことがあって、FLASH周りの環境構築を1からやり直す事になったのですが、そこからわかった"サクと簡単に環境をバックアップするツボ"（というか、これで十分だろうと思ったポイントですね）をメモしておきます。

※僕の環境はVistaなのでVistaベースで書きます。きっとMacやXP派の他のFDが書いてくれると信じてます。

• まずやっておくこと

  • キーボードショートカット

• パブリッシュ設定

• ワークスペース
  
  などなど、必要な部分をそれぞれのメニューから作成、保存しておきます。

• 一箇所にまとまっている設定ファイルをまとめてコピー

  • C:\Users\[userName]\AppData\Local\Adobe\Flash CS3\ja\Configuration
    
    ここにほぼ全部の環境ファイルがまとまっています。
    僕はCommands、Keyboard Shortcuts、Publish Profiles、Workspaceを適せんでコピーしました。

• 拡張機能（mxp）

  • アンインストールしても消えないみたいなので、そのままでOK。
    
    僕の場合は、Webから落としてきたjsflを取りこぼさない様にExtentionManagerで全てoffにしておきました。

• クラスパス

  • どこから引っ張ってきてるか確認
    
    いつ何のライブラリを入れたかなんて思い出せないぐらいなので、確認オススメです。
    Classesごと移すと何か怖いので、追加したサードパーティライブラリだけ移動。

環境移行や再インストールした後に新しい環境でそれぞれのファイルを元に戻してめでたく完了です。

親子の顔を入れ替えた写真が淡々とアップされていくブログ
http://www.manbabies.com/

最高にくだらないんだけど、他人の家族写真もこう見ると楽しく見えるし、
なんだかほのぼのします。

しかしながらどう考えてもこのサイト、100%ネタに走ってますから、ここで感じる「ほのぼの感」は予め計算されて生み出されたものではなく、偶然生まれている効果だと言えるんじゃないでしょうか。

こんにちは

Globalにわざわざobjectを置くということはあまりないと思うのですが
たまに指定し忘れてsoundObjectとか置いてしまいます。その所為で
一度案件でリンク元swfファイルの音が消えるというバグが起こったことがあります。

つまり
html①に記述されたjs①で表示しているswf①(別の会社の人が作った)からgetURLでhtml②開いて
そのhtml②の中でjs②からswf②(僕が作った)を表示したときに
swf①の音が3種類のうち1つ消える。という現象です。

結局原因はどちらのswfもGlobalにsoundObject置いておりswf②にsoundObject生成した時に上書かれた。
ということなので_rootに空のmc作ってそこにattachSoundして解決しました。

しかしglobalを使わなければすむ問題なので
よほどのことがない限りGlobalに物置かないようにしましょう。

_root.createEmptyMovieClip("globalSE",this.getNextHighestDepth());
_root.globalSE.createEmptyMovieClip("seA",_root.globalSE.getNextHighestDepth());
_root.globalSE.createEmptyMovieClip("seB",_root.globalSE.getNextHighestDepth());

var obj0_sound:Sound = new Sound(this.globalSE.seA);
var obj1_sound:Sound = new Sound(this.globalSE,seB);
obj0_sound.attachSound("type_01Sound");
obj1_sound.attachSound("main_01Sound");

@AS:2.0

前回のアンケートの反応に味を占めて今回もアンケートです (結果は次週発表したいと思います)。

今回はとってもとっても便利な FlashDevelop がどれくらい普及しているかのアンケートです。ぜひぜひご協力くださいませ！

いずれフラッシュヒルズ青春白書として全アンケートをまとめて編簿したいですね。「こんなこと調査して欲しい！」がありましたらぜひお気軽に教えてください。

http環境では動いていたFlashがSSLに移したとたん動かなくなった。
エラーの内容はioErrorのストリームエラー。
発生ブラウザはIEのみ。
「Safari、Firefox等はばっちり動いているのになぜ！！」って感じでいろいろ調べてみたら、どうやら、サーバーサイドプログラムのレスポンスヘッダーの影響によるものらしい。

レスポンスヘッダーに

Pragma: no-cache

参考にさせていただきました。
ありがとうございます！

FLASHとSSLとIEの関係 ? Garage with Blue Sky
red日記: Flash + SSL

以前案件でアニメーションを制作していたときalphaMaskが使用したくてハマッたことを記事にしようと思います。

maskとなるオブジェクトにグラデーションのalphaをかけオブジェクトを作成しマスク効果をかけ、mask対象となるオブジェクトに対してmaskをかけました。

しかしmasｋオブジェクトはalpha効果が効かずmaskがかかった状態になりました。（図１）

※：図１

次にscriptで指定したら変化があるかと考えsetMaskを使用してmaskをかけましたがまたもや（図１）と同じ結果になりました。

この作業を試行錯誤しつついろいろ調べてみると、両オブジェクトに対してプロパティウィンドウの”ランタイムビットマップキャッシュを使用する”にチェックをつけないとalpha効果がかからないということが分かりました。（図２）

※：図２

そしてalphaMaskの結果がコチラです。

この作業はflashに慣れていない人なんかはややこしく迷う部分だと思います。

おそらくもっと簡単にalphaMaskがかけれる方法があると思うので調べて発見し次第追記したいと思います。

最近、携帯のflashゲームを作る機会が増えてきたので、 いまさらですがflash liteについて記事を書きます。

現在のflash開発で最も使われているのがflash lite1.1です。

バージョンは3.0まで出ていますが1.1で開発される理由は、 2.0はdocomoが対応しておらず、逆に3.0はdocomoの 一部の機種しかまだ対応していないためです。

ただ2.0が普及していない訳ではなく、 AU、SoftBankそれぞれの専用のコンテンツは2.0が使われている事が多いようです。

flash lite1.0とflash lite1.1の大きな違いはfscommand2が使えるようになった点で、 電波状況や残りのバッテリー量が取得できるようになりました。

待ち受けflashなどを作るなら1.1からになります。

個人的な感覚ですが、 あと一年ほどは1.1が現役でいそうな雰囲気です。

恋する国から。ニチレイアセロラドリンク

ナビゲーションと横スクロールがいい具合にリレーションしていて、コンテンツ全体の見通しがよいですね。

UT LOOP!

プロフェッショナルで勇吾さんがプレゼンしていたサイト。
見て楽しい、遊んで楽しい。

東京インタラクティブ・アド・アワード

2008年のTIAA。
デザイン的にも広告的にも優れたウェブがたくさん。
過去の受賞作品を見るのもたのしいですよ。

と、最近のお気に入りサイトでした。まだまだ紹介したいサイトはあるんですが、また今度！

もう一つFlash作っててハマった事、というか現在進行形でハマっている事なんですが、PHPなどからJSONストリングをもらってFlash内でencodeするという、いつもやっている事が、なぜかFlashVars経由でJSONストリングを渡してもらうとencode時にエラーがでてしまうという現象が。
ちなみに今回は時間がないので、FlashVarsをあきらめてExternalInterfaceでJSの関数を呼び返り値で返してもらう方法に変更。
なんでFlashVarsだとできないのかな。。。

swfファイルを読み込む際に、ダウンロード状況をパーセンテージやローディングバーで表示することがよくありますが、容量が大きくなってくると、最初から読み込み状況が表示されず、表示されたときにはすでに70%読み込まれていた、という現象に遭遇します。

そんなときの対処法は以下のとおり。

通常なら、Flashライブラリ内にあるステージ上に配置していないムービークリップ（以下、MC）は書き出されたswfファイル内には含まれませんが、attachMovieメソッドなどでステージ上に配置するためにリンケージ設定してある場合はちょっと違うようです。

リンケージプロパティで「ActionScriptに書き出し」にチェックを入れると自動的に、「最初のフレームに書き出し」にもチェックが入ります。「最初のフレームに書き出し」にチェックが入っていると、swfを読み込んで最初のフレームでMCを読み込もうとするため、チェックが入ったMCをすべて読み込むまでそのフレームの内容は表示されません。ということは、読み込み状況を表すローディングバーも含め、何も表示されない訳です。

この状況を回避するために、まず下記の画像のように、「最初のフレームに書き出し」チェックボックスを外します。

チェックを外しただけだと、パブリッシュしても実際にattachMovieされないので、ステージ上にattachMovieするMCをあらかじめ配置しておきます。

配置するフレームは、読み込み状況を監視するフレームと、読み込みが完了した後に移動するフレームとの間のフレームに、ばらばらと配置します。 

上図ではなぜ2つのフレームに分けて配置しているかというと、各フレームでの読み込み容量を拡散させるためです。

この図では、フレームごとのデータ量を見れば、うまく拡散されている様子が分かると思います。（プロファイラ>フレーム毎のデータ量グラフ）

1フレーム目に読み込むデータ量の差は、歴然ですね。

ユーザーがページを開いてくれたとき、すぐに「読み込み中・・」という表示や、待ち時間を感じさせない工夫なんかがあれば、少しの間でも辛抱してくれると思います。

ですが、ほんの数秒でも本当になにも表示されなかったりすると、「なにもないページ」と判断されてすぐに他のページに遷移してしまう恐れがありますよね。

個人的にはローディング状況をパーセンテージやバーの長さで表現するのは無機質すぎてあまり好きではありません。ですが、今回のような現象が起きてしまう場合は、それ以前の問題かと思います。ぜひとも対処しておきたい点ですね。

FlashDevelopのHelp>LanguageReferenceのところのAS2,AS3がいずれも古い(AS2は8だしAS3は英語版)ので新しいものに差し替えました。

変更方法

インストールフォルダのMainMenu.xmlの下のほうにヘルプに関するmenu要素があるので各項目のアドレスだけ変えるとよいです。(再起動が必要みたい。)

いままでいちいちブラウザでLivedocsみてたんだけど、FDのタブはブラウジングできるのでこっち使ったほうが検索とか早いことに気づいた。よく考えたらGoogleとかTwitterも必要に応じて入れておけばいいのかも。

iPhoneSDKが出たのにもかかわらずMac機がなくて開発しあぐねいている僕に朗報です。

AdobeがiPhone向けのFlashPlayerを開発しているらしいです。

they will be delivering a Flash client for the iPhone

iPhoneSDKで開発されていてiTunes App Storeを通して配布予定だそうです

ただデバイス向けのクライアントとしてはFlashliteという事例もありますし、ジョブスもFlash重いんだよと嘆いていることですし、実際どんなもんなのかは出てみないとなんともいえなさそうです。

まだiPhone的な制限などで実現できるかわからないそうですが、ひとまず実現すればFlasher的には一歩前進にはかわりがなく、期待して待ってみようと思います。

このブログをご覧になっているということは、Flashに関心があったり、実際にFlashを操っている人が多いと思いますが、誰だってはじめは初心者だったハズ。ということで、今回は趣向を変えて自身のFLASHerとしての記録を思い出しながら書き綴ってみようと思います。

ちなみに弊社ではFlash案件を担当するスタッフのことを“FLASHer”と呼ばずにFD（FlashDeveloper）と呼んでいるので、以下文章でもFDと呼んでいきます。（広まらないかなこの呼称。。）

kijimaとhidakaがフルスクリーンのエントリを書いていたので、僕も便乗。

従来からMacのマウスホイールのデルタ値を取るためには、JS経由で値を受け取る必要がありましたが、JSがなくてもデルタ値を取得できる方法を見つけました！

その方法とは、

Flashをフルスクリーンにする

です！

stage.displayState = StageDisplayState.FULL_SCREEN;

のフルスクリーンモードの時のみMacでもデルタ値が取れるようです。

普通の状態のときに値が取れないので、結局のところJSを使う方法が一番スマートかと思いますが、メモエントリ。

JSを使う方法はFICCの安藤さんがまとめてくださっていますので、そちらをご覧になってみてください。
AS3 Macでのマウススクロールイベント

■Flash CS3から追加になったかなり使えるPSDインポータ・AIインポータを紹介します。

どう使えるかというとインポート時におおよその設定がレイヤーごとにものすごく簡単に出来るという点です

■ためしにいっちょやってみると

①これインポートします

②直接ドラッグして...
③設定して...

④出来上がり!

さらにライブラリウィンドウにレイヤーフォルダ名レイヤー名で作ってくれる

今までだと全部Photoshop側で切り抜いてweb用に保存(png)*レイヤー分
そこからflash側で読み込んでレイヤー分けして配置してMovieClipにしてという感じだったので
おそらくインポートにかかる時間が1/6～1/20になったのではないでしょうか？

デザイナーにこういう形でお願いってことを伝えておけば最速2分でスクリプト作業に入れます。
しかしまだ旧マクロメディア製品とadobe製品のフィルタ周りのエンジンの違いで
フィルタ・レイヤー効果系はレンダリングされて出力されます。

///////////////////////////////////////
■注意!!
編集可能なテキストデータをインポーターでpngにラスタライズする場合 周りにマットがついちゃう

編集可能なテキストデータをインポーターでテキストとして持ってくるとフィルタ・レイヤースタイルが捨てられる。

でもなんか文字のツメ幅は生きているみたいです。

///////////////////////////////////////

■次回はAIインポーター紹介します。

またカラーリングネタなんですが。

FlashDevelopのフォントや色の設定はパネルなどが用意されていないため、インストールディレクトリの設定XMLを直接編集する必要があります。
フォントを変えられることまではよく見かけるのですがよくみるとカラーリングも変更できるようです。

プログラマ気分 :FlashDevelopの環境設定

C:\Program Files\FlashDevelop\FirstRun\Settings\ScintillaNET.xml

<globals> <value name="default-fore">0xf0f0f0</value><!-- 文字色 --> <value name="default-back">0x000000</value><!-- 背景色 --> <value name="default-font">Tahoma</value> <value name="default-font-size">10</value> <value name="default-selection-fore">0xffffff</value><!-- 選択文字色 --> <value name="default-selection-back">0x0000ff</value><!-- 選択背景色 --> <value name="default-caretline-back">0xff0000c</value><!-- キャレットブロック色 --> <value name="default-caret-fore">0x000000</value><!-- キャレットカーソル色 --> <value name="line-height">1.2</value> </globals> <style-classes> <style-class name="default" fore="default-fore" back="default-back" size="default-font-size" font="default-font" /><!-- 文字色 --> <style-class name="gdefault" fore="default-fore" back="default-back" size="default-font-size" font="default-font" /><!-- ??色 --> <style-class name="bracebad" fore="default-fore" back="default-back" size="default-font-size" font="default-font" bold="true" /><!-- ??色 --> <style-class name="bracelight" fore="0x000066" back="0xcdcdff" size="default-font-size" font="default-font" bold="true" /><!-- ブラケットハイライト色 --> <style-class name="controlchar" fore="0xffffff" back="default-back" size="default-font-size" font="default-font" /><!-- 制御文字色 --> <style-class name="indentguide" fore="0xc0c0c0" back="default-back" size="default-font-size" font="default-font" /><!-- インデントガイド色 --> <style-class name="linenumber" fore="0xff66cc" back="default-back" size="default-font-size" font="default-font" /><!-- 行数字色 --> <style-class name="lastpredefined" fore="default-fore" back="default-back" size="default-font-size" font="default-font" /><!-- ??色 --> </style-classes>

また、よく見るとプログラム言語ごとの設定ファイルをインクルードしてるっぽいのであけてみると 言語用のキーワードハイライトの設定もふくまれて、かなりFlashIDEに比べると細かく設定できるようです。

C:\Program Files\FlashDevelop\FirstRun\Settings\Languages\AS2.xml

<use-styles> <style name="default" inherit-style="default" /> <style name="comment" fore="0x008000" /> <style name="commentline" fore="0x008000" /> <style name="commentdoc" fore="0x008000" /> <style name="number" fore="0x000099" /> <style name="word" fore="0x000099" /> <style name="string" fore="0xa31515" /> <style name="character" fore="0xa31515" /> <style name="uuid" /> <style name="preprocessor" fore="0x000099" /> <style name="operator" /> <style name="identifier" /> <style name="stringeol" /> <style name="verbatim" /> <style name="regex" /> <style name="commentlinedoc" fore="0x008000" /> <style name="word2" fore="0x008080" /> <style name="commentdockeyword" fore="0x800000" /> <style name="commentdockeyworderror" fore="0xff0000" /> <style name="globalclass" fore="0x1518ff" /> <style name="gdefault" inherit-style="gdefault" /> <style name="linenumber" inherit-style="linenumber" /> <style name="bracelight" inherit-style="bracelight" /> <style name="bracebad" inherit-style="bracebad" /> <style name="controlchar" inherit-style="controlchar" /> <style name="indentguide" inherit-style="indentguide" /> <style name="lastpredefined" inherit-style="lastpredefined" /> </use-styles>

ちょっとめんどくさいのですが、初期状態のフォントなどのみすらさがFlashDevelop唯一の障壁だったのでこれで快適に開発できそうです。

ざっと試してみていくつかわからないのもありますがFlashIDEに対応する項目は下記です。

default

FlashCS3でいうテキストに相当します

comment

FlashCS3でいうコメントに相当します

word

FlashCS3でいう認識子のうちthisやnullに相当します

word2

FlashCS3でいう認識子のうちビルトインクラス名などに相当します

globalclass

FlashCS3でいうキーワードに相当します

string

FlashCS3でいうストリングに相当します

number

数字リテラルの色に相当します

前回のエントリーに引き続き、F-siteセミナーのレポートをお送りします。

demo1　講師：大雅(50分)「Flex アプリ設計のワークフロー」レポート
demo2　講師：永井勝則(50分)「初めてのFlash Video」レポート
demo3　講師：サブリン(50分)「大手Flashキャンペーンサイト構築とその仕事術」レポート

「大手Flashキャンペーンサイト構築とその仕事術」

実際にあった、複数のクライアントのコラボレーションによるキャンペーンサイトを例に出して、仕事の進め方や注意した点などお話いただきました。なるほどな、と感じた点は下記のとおり。

クライアント、アートディレクターなどそれぞれの立場が求めているものを理解する。

実例として出された大手企業のコラボレーションによるキャンペーンの場合、複数のクライアントがいて、当然ながらそのクライアントの立場によってそのキャンペーンに求める部分は若干異なってきます。なので、そのクライアントの“属性”を見極めて効果的なプレゼンやPPT資料を作ると良いよね、って話でした。

といってもまったく別もののPPT資料を何種類も作る必要はなく、相手が気になるところを具体的に説明できる資料を作れば、あとは共通の資料でOKだと。動きを気にしているアートディレクターには、実際にアニメーションしているところを先に作って見せてしまう、など。

ゲームに例えると「クライアント＝ボスキャラ」に例えて、ボスキャラがたくさんいる場合はそれぞれに効く武器を用意する必要があるね、ということで、「火が効かない敵キャラには火属性の攻撃ではなく、水属性の攻撃をしかける」こいう例え話が印象的でした。

いずれにしても、案件を進めていくにつれ、あっちを立てればこっちが立たず、という状況になることもあるようなので、各クライアント間の意識の共有を促してあげる必要があるようですね。

広告主の、WEBというキーワードに対するトラウマを払拭してあげる。

CMと連動したキャンペーンサイトの場合、当然ながら「CMのようにキャラクターを動かしたい」という思いがあると思います。でもそこで「WEBではそれはできません」と言われたり、企画段階では魅力的なコンテンツでも、実装されたものとのギャップを感じたり、という経験から、WEB屋に対して疑心暗鬼になられている方もいるようです。

当初の話（PPT資料）ではフェラーリを作ります！と聞いてお金を出したのに、実際にできたのはカローラだった、という話を例に出していました。（※カローラが悪いという意味ではありません！）

そもそも、そうなってしまう責任はどちらにあるのかといわれると、圧倒的にこちら側（制作サイド）の責任に感じます。なので、そんなイメージを払拭できるように想像以上のものを常に提案、実装できるように心がけていこうと思いました。

よいデザイン、よいコンテンツは“クライアントワーク”である。

結局は、クライアントワーク（広告主から発注を受けて制作した作品）人とのやり取りで生まれるものが「よいデザイン、よいコンテンツ」であるということ。そして、「よいクライアントワーク」をするために必要なのは、相手の言っていることの真意を汲み取ること。

自分の過去の経験でもありましたが、戻しの修�