SpicyDog Builder ２で作るiアプリ
 |
|
【後編】グリーティングiアプリを作ろう！
|
|
|
 |
細川真由美
1976年、東京生まれ。株式会社トリワークス、プロモーション企画部にて製作を中心とした仕事を担当。現在、SpicyDog Builder ２の素材作りとグリーティングiアプリの製作に奮闘中。 |
|
クリスマスにお正月。そろそろグリーティングカードを送る季節ですね。ハガキやインターネットで送るのもいいけど、やっぱり携帯に届けたい。しかも自分で作ったサウンド入りのアニメーションなら、見た人もビックリです。友達をびっくりさせたいあなた、そんな希望をかなえましょう。
クリスマスのグリーティングiアプリ
それでは早速、サンプルを見ながらグリーティングiアプリを作ってみましょう。まずはサンプルファイルを読み込んで、再生ボタンを押してみてください。私の作ったグリーティングカードが表示されます。これを元にオリジナルグリーティングiアプリを作ってみましょう。テキスト部分については、前編にならって好きな言葉に差し替えてみてください。
それよりも、今回はみなさんに簡単なお絵描きに挑戦していただきたいと思います。SpicyDog Builder ２で描いた絵は「シェープ」と呼びますが、まずはキャラクタ辞書の「黄色い星」をダブルクリックして、どんなものか眺めてみてください。シェープ編集モードの画面になり、黄色い星が現われますので、これを参考に絵を描いてみましょう。
では、「青い星」をダブルクリックしてみてください。何もないステージが出てきますので、ツールバーの「線を描くツール」をクリックし、点を置いて星の輪郭を描いていってください。それぞれの頂点の微調整は右クリックして「ペインの頂点の編集」を選択することで行なえます。慣れないとちょっと使いづらいインターフェイスかもしれませんが、星の形ができましたでしょうか？ 画面左の塗りパレットからお好きな青色を選んでできあがりです。
|
|
|
ツールバー
|
星の描き方
|
伸縮と回転
さて、ここでみなさんに挑戦していただきたいのが、いま描いた青い星を使っての伸縮と回転のアニメーションの実現です。
まずは伸縮から始めましょう。シェープの伸縮は「ムービーステージ」で行ないます。動くアニメーションをつくるときと同じように、始点のキーフレームの上で右クリックしてアニメーションを作成します。２つ目のキーフレームでステージのキャラクタを選択し、右クリックして「伸縮」を選んで、大きさを変えると星の大きさを変更できるようになります。
それでは「青い星」のレイヤーのタイムラインのフレーム75～95のあたりを見てください。アニメーションがつくられているという矢印の表示がでています。この星を小さい星から大きい星になるようにつくってみましょう。まず、青い星のレイヤーの２番目のキーフレームをクリックし、ステージの青い星をクリックしてください。青い星が選択された状態で、次に右クリックをして伸縮のメニューを選択し、星を大きくして下さい。右クリックで完了です。４番目のキーフレームでも同じことをしてみましょう。星が伸縮しながら上に上がっていくアニメーションができたと思います。
|
|
伸縮
|
お次は回転のアニメーションです。「流れ星」のタイムラインのレイヤーのフレーム50～70のあたりを見てください。流れ星が降りてくるアニメーションなのですが、この星をくるくる回るようにしてみましょう。
まず、流れ星のレイヤーのフレーム50の上で右クリックし、「アニメーションのプロパティ」を選んでください。「回転アニメーション」から「時計回り」を選んで、回転数を「２」に設定します。再生してみると、流れ星が回転しながら右上から左下に移動していくはずです。星が白くなっていくのは終点で白くなるように設定したためです。
なお、回転のアニメーションつくる時は、使うシェープが編集モードのステージの中央に配置しておいてください。回転の軸が中央にあるからです。
メロディとボタン
これで一応はムービーが完成したのですが、もっとに素敵なiアプリにするためにメロディを追加してみました。iモードの着信メロディと同じ形式のMLDファイルを用意します。「着メロコンバータ for DoCoMo503i」（ http://coolweb.kakiko.com/kana2/ ）などのツールをダウンロードして、MIDIファイルをMLDファイルに変換して使います。
サウンドについては、シェイプやテキストのようにサウンド用のキーフレームを置くのではなく、他のキャラクタのキーフレームの上で右クリックして、アクションのプロパティを開き、［新規挿入］-［サウンド再生開始］を選択することでアニメーションに追加します。
なお、今回のサンプルでは、キャラクタ辞書の「ジングルベル」のファイルを用意してあります。
さて、今回のサンプルの素材には「ボタン」も含まれています。「ムービー再生開始」と「再生停止」の２つのボタンを用意しました。このｉアプリは最後のフレームで停止のアクションが入り、携帯電話上で再生したときアニメーションの最後で止まるようになっています。停止したときに、ボタンの選択肢が表示され、「→」キーを押すとリプレイされ、「←」キーを押すとiアプリを終了する設定になっています。
では、そのリプレイ用の再生開始のボタンを見てみましょう。キャラクタ辞書の「リプレイ」をクリックしてください。ボタン編集モードの画面になります。ボタンの設定は簡単です。「通常状態」はボタンのそのままの状態、「押下状態」はボタンが押されたときの状態で、それぞれ表示する素材をキャラクタ辞書から選ぶことができます。今回は通常、押下両方の状態用にテキストの「replay」を選択しました。素材はシェープもピクチャも使うことができます。たとえば、色の違う２つのボタンの絵を用意し、通常と押下で設定しておくと、押したときだけボタンの色が変わるわけです。
その下のトリガーキーを見てください。「トリガーキー」は、携帯電話のボタンのことです。「←」キーを「リプレイ」用に設定してあります。そして、その下の「キートリガーイベント」で「新規挿入」からアクションを選ぶという仕組みになっています。みなさんのアクション実行リストに「Play Movie:ムービー再生」とあれば、設定はOKです。iアプリ終了のボタンの設定も見ると参考になるでしょう。
フレームジャンプ
ちなみに、先日公開されたばかりの新バージョン（ビルド176）では、「フレームジャンプ」という機能が追加されています。この機能を使うと、ゲームやクイズ、占い、ショートストーリーなど、さまざまな種類の楽しいiアプリが作れます。
フレームジャンプとはその名の通り、フレームをジャンプする機能のことです。まずはサンプルを開いてみてください。このサンプルではフレームジャンプを使って、３つの箱を選ぶボタンを押したときに、それぞれの画面に移動できるようになっています。
作り方は簡単です。あらかじめジャンプ先のフレームに、しるしとなる「ラベル」を貼っておきます。ジャンプ先のキーフレームの上で右クリックし、［ラベル挿入］を選択して名前をつけます。
次にボタンをつくります。アクションの実行リストから［新規挿入］-［フレームジャンプ］の「ムービー再生開始」を選択します。右の「ジャンプ先」（ラベル名）を選択すると、指定したフレームにジャンプできるようになります。
|
|
フレームジャンプとは
|
サーバーにアップロード
少し話が横道にそれてしまいましたが、先ほど作ったグリーティングiアプリを前回と同様に「IAPP.TV」にアップロードしてみてください。アニメーションの速さや音は機種によって異なりますので、微調整が必要になるかもしれません。
SpicyDog Builder ２のダウンロードサイトでは、iアプリを使った無料のグリーティングメールサービスも提供しています。ここで送信できるグリーティングiアプリは、どれもSpicyDog Builder ２を使って作成されたものです。SpicyDog Builder ２で実現可能な表現の勉強にもなりますので、ぜひご覧ください。
さて、２日間にわたり連載にお付き合いいただき、ありがとうございました。細かい部分の説明は省いてきましたが、SpicyDog Builder ２の基本機能はだいたい説明できたかと思います。この連載を参考に、いろいろなiアプリを作って友達をびっくりさせましょう。
それでは、メリークリスマス＆よいお正月を！
・ 「SpicyDog Builder ２」の概要とダウンロード
http://www.spicydog.com/
・ IAPP.TV
http://iapp.tv/
・ スパイシーソフト（開発）
http://www.spicysoft.com/
・ トリワークス（販売）
http://www.triworks.com/
・ iアプリをMacromedia Flash感覚で制作できるソフト
・ iアプリ開発ツール「SpicyDog Builder 2」の新バージョン
（細川真由美）
2001/12/20 16:45
|
|
|
