【連載】

今流行のWebテクノロジーを徹底解明

1 ソースコード付き-「表参道アカリウムができるまで」

    _level0.CUPPY　 [2007/06/20]
    印刷

    表参道アカリウムができるまで

    表参道アカリウムとは、表参道の並木道をライトアップするWebサイトと連動したキャンペーンイベントで、2006年に制作・実施された。2007年の広告賞(ADFEST(アジア太平洋広告祭)モバイルカテゴリGOLD、東京インタラクティブ・アド・アワード 金賞、銀賞、入賞など)で優秀な成績を収めることができた。本記事は、このWebサイトで開発したFlashのギミックを解説する。今回の記事でActionScriptのサンプルとコードを公開しているので、Flashコンテンツ作成の際にご自由に利用していただきたい。

    イベントの具体的内容は、「akarium Callダイヤル」という固定の電話番号(普通のフリーダイアル)に電話してメッセージを伝えると、かけた人の声がリアルタイムにそのまま表参道を包む灯り(あかり)に変わってしまうというもの。電話に話しかけると、表参道のイルミネーションライトがリアルタイムにカラフルに変化する。

    Webサイトでは、そのライトが変化する模様をライブ中継する他、コンセプトである「あかり」を表現したコンテンツを作成した。

    以下では本記事でご紹介するActionScriptのコードについて解説する。

    キャンペーンサイトの特徴

    このプロジェクトはリアルのシステム構築などをSEMITRANSPARENT DESIGNとZOOLIB の千房氏が、Web側の構築を777interactiveの益田氏と面白法人カヤック、クーピーで制作した。

    イベント自体が「あかり」をテーマにしたものなので、キャンペーンサイトでは「あかりを持ち運ぶ」をコンセプトに企画した。ウェブサイトを訪れるとそこには5つの「あかり」が灯っていて、その「あかり」をドラッグ&ドロップでページ上を持ち運び、暗闇に隠れたコンテンツを読み進めていくことができる(あかりを移動しないと暗くて何も読めません)。この「あかり」の表現をここでは「アカリウムエフェクト」と呼ぶ。

    この「あかり」の表現がクリエイティブの重要なキーとなるため「あかり」のシズルをこだわって開発した。本記事では、この「あかり」に使用したActionScriptのサンプルとコードを紹介する。 また余談だが、表参道アカリウムは「和」を意識した企画のため、サイトのコンテンツを横書きのスタイルではなく、縦書きで表現し、レイアウト、字詰めなどを綿密に調整した。

    アカリウムエフェクトの仕組み

    このアカリウムエフェクトが肝ということで、空気の流れで変わったりする光の揺らぎや影の濃さ、幅、高さ、位置などの表現をシミュレーションしモニター上で表現することで、リアルな「あかり」を再現した。

    アカリウムエフェクトの内部構造は以下のようなレイヤーの仕組みで成り立っている。写真にグラデーションマスクを適用しその上にさらに「あかり」の表現の肝となるオブジェクトを置いている。

    アカリウムエフェクト本体のレイヤーは、 上から(1)あかりの中心のオブジェクト、 (2)あかりの光のオブジェクト、 (3)影のオブジェクト の3つからなる。その下にマスクと背景となるようにレイヤーを配置する

    「あかり」が重なり合ったときの表現のため、光レイヤーに置くオブジェクトのブレンドモードを調整する。制作段階では"add"か"overlay"のどちらかで、いろいろと議論を重ねた結果、見た目のインパクトとビジュアルの美しさで"add"(加算)を採用した。検証中にわかったことだが、ブレンドモードをいじるだけでもいろいろと遊べる。お試しいただきたい。

    以上が、アカリウムエフェクトの正体。それでは次は、実際にFlashのソースを見ながら説明しよう。

    STEP1まずは初期化

    まず始めに、初期化する関数を見てみよう。

    function init():Void {
    //グラデーションマスク用にマスク用MCとマスク対象MCのcacheAsBitmapをtrueに設定
    akariMask_mc.cacheAsBitmap =
    bg_mc.cacheAsBitmap = true;
    bg_mc.setMask(akariMask_mc);
    for(var i:Number = 0; i < akariNum; i++) {
    createAkari(Stage.width*Math.random(), Stage.height*Math.random());//あかりを生成する
    }
    }

    Flash8からグラデーションマスクを使用することができるようになった。グラデーションマスクを利用するには少しだけポイントがある。まずマスクの作りは透明度を用いたオブジェクトを作成する。そして、マスクのオブジェクトとマスクの対象オブジェクトのcacheAsBitmapプロパティをtrueに設定してからsetMaskする。そうするとくっきり切り抜いたマスクではなく、グラデーションのかかったマスクとして利用することができる。ちなみにグラデーションマスクをかける方法は他にもあるが、ここでは割愛する。

    STEP2:あかりを生成

    次にあかりを生成する。

    function createAkari(x:Number, y:Number):Void {
    var depth:Number = akariCore_mc.getNextHighestDepth();
    //あかりの中心部分を生成
    var core:MovieClip = akariCore_mc.attachMovie("akariCore", "akariCore"+depth+"_mc", depth, {_x: x, _y: y});
    //
    //影のムービークリップを生成 core.shadow_mc = akariShadow_mc.attachMovie("akariShadow", "akariShadow"+depth+"_mc", depth, {_x: core._x, _y: core._y});
    core.shadow_mc.intervalXID;
    core.shadow_mc.intervalYID;
    core.shadow_mc.intervalX;
    core.shadow_mc.intervalY;
    core.shadow_mc.tweenX = new Tween(core.shadow_mc, "_x", yuragiMode, core.shadow_mc._x, core.shadow_mc._x, 1);
    core.shadow_mc.tweenY = new Tween(core.shadow_mc, "_y", yuragiMode, core.shadow_mc._y, core.shadow_mc._y, 1);
    startYuragi(core);
    //あかりの周辺光部分を生成
    core.light_mc = akariLight_mc.attachMovie("akariLight", "akariLight"+depth+"_mc", depth, {_x: core._x, _y: core._y});
    core.light_mc.blendMode = akariBlend;
    //
    //マスクに利用するグラデーションオブジェクトを生成
    core.mask_mc = akariMask_mc.attachMovie("akariMask", "akariMask"+depth+"_mc", depth, {_x: core._x, _y: core._y});
    //
    //中心部分をドラッグするためにボタンを定義する
    core.onPress = function() {
    startMove(this);
    stopYuragi(this);
    }
    core.onRelease = core.onReleaseOutside = function() {
    stopMove(this);
    startYuragi(this);
    }
    }

    以上が、「あかり」を生成する関数だ。「あかり」のオブジェクトはレイヤーごとに生成する。「あかり」の中心部分（core）をクリッカブルにし、ドラッグするとcoreにくっついてくる処理をstartMove関数内に定義している。この状態だと、下記のような表現となる。

    上の画像をクリックするとデモが開く。光の点をドラッグ&ドロップすると動く

    STEP３：影をつける

    次に揺らぎの関数を見てみよう。

    /**
    * 影の揺らぎを開始します。
    */
    function startYuragi(core_mc:MovieClip):Void {
    var shadow_mc:MovieClip = core_mc.shadow_mc;
    var duration:Number = Math.ceil(Math.random()*9)+10;
    var initX:Number = shadow_mc.initX = core_mc._x;
    var initY:Number = shadow_mc.initY = core_mc._y;
    shadow_mc.tweenX.continueTo(initX, 1);
    shadow_mc.tweenY.continueTo(initY, 1);
    shadow_mc.tweenX.fforward();
    shadow_mc.tweenY.fforward();
    shadow_mc.intervalX = Math.random()*1000 + 100;
    shadow_mc.intervalY = Math.random()*1000 + 100;
    //
    shadow_mc.intervalXID = setInterval(function(tween:MovieClip) {tween.continueTo(getYuragi(initX),
    duration)}, shadow_mc.intervalX, shadow_mc.tweenX);
    shadow_mc.intervalYID = setInterval(function(tween:MovieClip) {tween.continueTo(getYuragi(initY),
    duration)}, shadow_mc.intervalY, shadow_mc.tweenY);
    }

    今回は揺らぎの部分を影の部分のみに定義する。揺らぎは基準点から数ピクセルランダムに動くよう定義した。影を実装すると、下記のような表現になり完成する。

    上の画像をクリックするとデモが開く。右クリックで「再生」を実行してみよう

    サンプルのソースコード(flaファイル)をこちらからダウンロードして利用してください。

    これを改造、パワーアップして、スライドショーのエフェクトや、雰囲気のある読み物系コンテンツなどに利用しても面白いかもしれない。または、ウェブでの利用ではなく、VJのエフェクトや、リアルなインスタレーションでの利用というのも面白い。

    今回、公開しているコードはとてもプレーンに作成しているので、ここからさらにおもしろいクリエイティブを生み出していただければ光栄だ。

    提供:マイナビ転職エージェント

    会員登録はこちら

    「上流でWEBサイトの企画・プロデュースに携わりたい!」「待遇を良くしたい!」 「自分の経験・スキルではどうなのだろう…?」「忙しくて転職活動する時間がない!」 そんなあなたに…転職活動を総合的にサポートしてくれるプロを探してみませんか？ 「マイナビ転職エージェント」は、人材紹介型転職情報サイト。 あなたの転職活動を成功に導くプロのコンサルタントがきっと見つかります! 非公開求人情報など、転職情報サイトでは掲載されていない求人情報も満載です!

    毎日コミュニケーションズはプライバシーマークを取得しています。

    提供:マイナビ転職エージェント

    会員登録はこちら

    「上流でWEBサイトの企画・プロデュースに携わりたい!」「待遇を良くしたい!」 「自分の経験・スキルではどうなのだろう…?」「忙しくて転職活動する時間がない!」 そんなあなたに…転職活動を総合的にサポートしてくれるプロを探してみませんか？ 「マイナビ転職エージェント」は、人材紹介型転職情報サイト。 あなたの転職活動を成功に導くプロのコンサルタントがきっと見つかります! 非公開求人情報など、転職情報サイトでは掲載されていない求人情報も満載です!

    毎日コミュニケーションズはプライバシーマークを取得しています。

    関連サイト

    クーピー
    Asia Pacific Advertising Festival
    東京インタラクティブ・アド・アワード

    あのMAXが日本上陸! 世界3都市でAdobe MAX 2007開催決定

    Google 3D Warehouse用のPhotoshop CS3用のプラグインを提供開始

    新着記事

    優れた住宅設計を選ぶ「第32回 INAXデザインコンテスト」の審査結果発表 [17:33 2/9]
    「第14回亀倉雄策賞」は澁谷克彦氏に--JAGDA『Graphic Design in japan』 [13:22 2/9]
    イーフロンティア、アニメーション制作ソフト「Anime Creator 8」発売 [11:51 2/9]
    アマナ、アメリカ先住民族の占いiPhoneアプリ「Stone Telling-精霊占い-」 [10:44 2/9]
    【コラム】ストックフォト長者への道 第67回 念願の審査通過だが微妙なアクセス数なので次なる作戦を考える [00:00 2/9]

    特設サイトの情報

      人気記事

      一覧

        もっと見る

        イチオシ記事

        もっと見る

        新着記事

        特別企画

        マイナビニュースマガジン

          ページトップ