Home > blogparts | works > ブログパーツ「モアイとばし」

ブログパーツ「モアイとばし」

「モアイとばし」なるブログパーツを作りました。遊んでみて下さい。お気に召しましたら貼付けてやってくださいませ。体験プレイや貼付けコードなど、詳細は AB-ROAD のキャンペーンサイトからどうぞ。

AB-ROADMTL の共同プロジェクトということで、「モアイを使って何か面白いものを」ということでスタート。企画からデザイン、コーディングまで、Flash側の制作を担当いたしました。

ルールは簡単。モアイを叩くと(クリック連打すると)、その回数に応じて遠くに飛びます。飛び先の国に行くには幾らかかるのか?という関西人的興味をそそることで、AB-ROADのツアーページにジャンプしていただく仕組みになっております。ちなみに各国との距離は「世界ジオコーダー」を使って算出しております。

履歴を残せる機能が付いておりまして、その記録は Flash の SharedObject 機能を使って、ユーザーのローカルPCに保存される仕組みです。プレイ日と国番号のみが保存される仕様ですので、安心して遊んで下さいませ。他のユーザーと競うランキング形式ではなく、あくまで「自分の履歴」なのがポイント。自分のブログに貼ったモアイをとばしても、他人のブログに貼られたモアイをとばしても、全て自分の履歴として蓄積されていくのが、なんとなく新鮮かと。

自分自身がブログを書いていることもあり、「こんなブログパーツなら貼るかなぁ」と、想像しながら作っていきました。

ユーザーの立場で考えたポイントは以下

  • ブログの主役は、あくまでユーザーのブログ記事。パーツが主張しすぎても困るので、初期状態は控えめに、モアイの哀愁漂う背中をお楽しみください。
  • ブログに慣れたユーザーさんは、貼付けタグの中の setFlash(#ffffff); の「#ffffff」部分で背景色を変更すれば、さらにモアイがあなたのブログに溶け込みます。
  • モアイの物語やプレイ方法等、説明は極力控えました。直感的に、手軽に、繰り返し遊べるように。
  • 企業ロゴを出しまくると「わしゃ広告塔か!」という気持ちになるので、ロゴの露出は控えめに。
  • クリックしまくるとイベントを用意。クリックしまくらないと、これまたイベントを用意。

サービス提供者の立場で考えたポイントは以下

  • 初期画面で一定時間放置されたら、モアイが振り返ってコメント。このコメント部分は外部 XML で簡単に更新できるので、ニュースアグリゲーターとして活用できるんです。
  • ゲームを楽しんだユーザーが、リンク先のツアーにそのまま申し込むという導線は考えにくかった。そうではなくて、履歴機能を付けたことで、後日ユーザーが旅行を計画した際に、「前にモアイで飛ばしたっけなぁ。。」と、「とばし履歴」からツアーページに流れてくれるのが理想。
  • ボランティアでゲームを配っているわけではないので、できれば本サイトに流入してほしい。無事飛ばし終わった後は、リプレイボタンは付けず、ツアー情報に飛ぶように設計。そのフォローとしての「1日1回」という題字なのです。バナー広告のノリに近いですね。まぁ知ってる人は F5(ページ更新)で、リプレイするでしょという楽観的希望。
  • 「モアイとばし」というネーミングは、覚え易く、それゆえ他人にも教え易いのではないでしょうか?
    裏話:始めは Weave Toshi - DayDream 様のサイトのようなUIで、モアイをグルグルまわすという「モアイまわし」でプロトタイプを作っていたのですが、同名のモアイゲームがありましたので、叩く(クリックする)ことにしました。

悩みどころ

  • トップ画面で、しばらく放置していた時に振り返るのですが、その発動時間。振り返りすぎると主張し過ぎ感がでてしまうし、その逆だと気付いてもらえない。
  • 音があるのですが、効果音程度なので、ミュートはなし。
  • 3Dの人ではないので、モデリング表現の限界。かつ、デザインの人でもないので、パーツの作り込みが甘いか。
  • モアイが3Dなこともあり、それを生かした表現はいろいろ提案できるのだけど、サイズ肥大に繋がるので躊躇。
  • 履歴のフォントが等幅でないのがちょっと気持ち悪い。アンチエイリアスオフな等幅フォントを見つけたい。

などなど、あーでもないこーでもないと悶々と妄想して今に至ります。
さて、このお仕事は、企画意図から、モアイのShadeモデリングデータ(いらないか..)や、Flash上のオーサリング Tips(FuseKit と CASA framework 使いまくり)まで、とことん公開できそうですので、近日オープン予定の MTL ブログ内にて、ちまちまと発表していこうと思っています。

履歴表示がいい具合になるので、最低10回ぐらいは遊んでいただけると嬉しいです。

Comment:4

zyass_tak 2007-07-31 (火) 18:26

もあいの動きが愛らしいです、背中も、一定時間で出るコメントもvv
がんばって連打しまくっていたら・・・(笑)
演出で楽しめました~。

tera 2007-07-31 (火) 18:37

遊んでいただいてありがとうございますー。
モアイはShadeアニメーションのpng書き出しなんです。
一定時間の処理は、さくーしゃさん(http://saqoosha.net/2007/05/08/572/)も解説されていました、CASA の Inactivity クラスを使って簡単に実装できました。

hedgehog 2007-07-31 (火) 20:29

生まれて初めてマウスボタンを痙攣撃ちしましたよぉー。すっげーとこまで飛んでっちゃいました。マウスホイール対応のさり気無さもステキ!

tera 2007-07-31 (火) 20:47

>hedgehog様
ありがとうございますー。
なんかものすごい回数を叩き出す人がちらほら報告してくるんですよ。。
国をどんどん追加できるので、負けじと拡張していこうかと思います。
マウスホイールは、過去に作ったスクロールバーの使い回しです。Macには対応していないのは内緒です。

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Remember personal info

Trackback:0

TrackBack URL for this entry
http://www.trick7.com/blog/mt-tb.cgi/591
Listed below are links to weblogs that reference
ブログパーツ「モアイとばし」 from trick7.com blog

Home > blogparts | works > ブログパーツ「モアイとばし」

持っている Flash & ActionScript 関連本の中から、自分的おすすめの読む順番をご紹介。各書籍のレビューは books カテゴリからご覧頂けます。
この順番でどう?(AS3.0)
  • Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD付)
    Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD付)

    デザイン方面からFlashデビューして、そのままAS2.0を使うようになった人が、難しいと評判のAS3デビューする時の最初の1冊として、とにかく目を通しておくと良いかと思います。プログラミング経験の少ない方でも、サンプルをじっくり読めば、ゼロからのAS3デビュー可。
  • ActionScript 3.0 アニメーション
    ActionScript 3.0 アニメーション
    洋書「Making Things Move!」の日本語訳本。ActionScript3.0で数学的アニメーションを作ることがメインテーマなのですが、前半部分でAS3.0の基礎を分かり易く解説されています。後半の重力, IK, 3D表現等のアニメーション解説も楽しい。僕はこれのAS2.0洋書版を読んでFlashの面白さに気付きました。
  • Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)
    Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)
    この次の辞典のような洋書を読む前の事前知識としてこの本の内容を理解しておくといいかも。
  • Essential ActionScript 3.0 (Essential)
    Essential ActionScript 3.0 (Essential)

    900ページ以上ある相当分厚い本。基礎からOOPまでを解説。ほぼ網羅しているので、これを抑えておけばAS3博士になれそう。
  • Actionscript 3.0 Cookbook
    Actionscript 3.0 Cookbook

    ActionScript3.0のリファレンス本。問題とその解決法が1ページぐらいで細分化されているので空いた時間にちょっとずつ読み進められる。WebでAS3のソースを見て勉強する時の字引としても使う。ただ、時期的に初期の本なので、AS3自体が仕様変更してたりするので正誤表は必読。
  • Object-Oriented Actionscript 3.0
    Object-Oriented Actionscript 3.0

    7/23に発売されたFlash&OOP本。AS2.0版は持っているのだけど、オブジェクト指向の初歩的な解説から入って、後半は僕の理解を超える難度になっていきました。今度こそ理解できるか?
この順番でどう?(AS2.0)
  • Foundation Actionscript Animation: Making Things Move (Foundation)
    Foundation Actionscript Animation: Making Things Move (Foundation)

    スクリプトでアニメーションさせる方法を学べる。プログラムの知識というよりも数学や物理の知識が必要。バネの表現や3D表現など、汎用性の高いテクニックを身に付けられ、個人の表現力をレベルアップするのに最適。参考までに、僕が調べた英単語リスト。2007年4月に、AS3対応版も発売されました。
  • ゲーム開発のための数学・物理学入門 Beginning Math and Physics for Game Programmers
    ゲーム開発のための数学・物理学入門  Beginning Math and Physics for Game Programmers

    「Making Things Move!」の世界を突き詰めたい人用のステップアップのための本。行列や物理運動、2D/3D表現。Flashの本ではなく、じっくり読むタイプの本なので、あとまわしにしてもいいかも。
  • Flash 8 Essentials
    Flash 8 Essentials

    Flash8の新機能を紹介。全10章が独立した構成で、興味のある部分から読めます。フィルタやビットマップ、ビデオの使い方とかを、基礎から順を追って理解していけるので、ゼロからスクリプティングできるようになる。僕はビットマップ関連の作業の際のリファレンスとして常用しています。
  • .fla―Idea of Flash Creation
    .fla―Idea of Flash Creation

    上の本でFlash8の基本を身に付けて、それをどう面白い表現に落とし込むかを学べます。深津さんの、試行錯誤・実験しやすいスクリプティング、クラス設計に凄さを感じました。YouTubeやFlickrのAPI、PHPとの連携記事も。
  • FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]
    FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]

    ここまでで表現力が付き、テンションが上がるので、その勢いで難解なオブジェクト指向に挑戦。プログラム経験のない人がいきなり英語のOOP本を読むのは厳しい。この本で継承とかインターフェースとかポリモーフィズムとかの用語を理解しておくといいかも。
  • オブジェクト指向でなぜつくるのか―知っておきたいプログラミング、UML、設計の基礎知識―
    オブジェクト指向でなぜつくるのか―知っておきたいプログラミング、UML、設計の基礎知識―

    Flashの本ではありませんが、OOPの概念を気軽に読めるボリュームで解説してくれます。英語と日本語のOOP用語の対応を図るためにも「Object-oriented Actionscript for Flash 8」と併読するのがおすすめ。なんとなく読んでおくだけでも結構違うのでは。
  • Object-oriented Actionscript for Flash 8
    Object-oriented Actionscript for Flash 8

    前半はOOPの利便性や基本の紹介。デザインパターンやMVCの理解。13章からグッと難しくなって大変。Flash8対応。
  • Essential Actionscript 2.0
    Essential Actionscript 2.0

    上の本よりもさらにOOPプログラマ向け。同じOOP本ということでやや重複しており、こちらはMX2004時代の本なので見送ってもいいかも。分かりやすい英語で良著。この本のAS3版が出たら間違いなく買い。

Page Top