Home> Archives > 2008年10月アーカイブ

2008年10月アーカイブ

四コマ漫画Viewerをつくる4 - 前へ・次へボタンで画面遷移

Posted by: masa
2008年10月25日 16:40
Progression3 | コンポーネントスタイルでの制作

四コマ漫画Viewerをつくる3 - 現在のシーンに合わせてボタンの表示を替えるの続き。

前と次のシーンに移動するボタンを追加する。

前のシーンに移動するためのボタンをつくる

新規シンボル作成 [ctrl+F8] でボタンをつくる。シンボル名「ButtonPrev_mc」クラス名「ButtonPrev」とする。

コンポーネントのProgression Buttonsから「PreviousButton」を配置する。パラメータには何も設定しなくて良い。

次のシーンに移動するためのボタンをつくる

同様に、シンボル名「ButtonNext_mc」クラス名「ButtonNext」でボタンを新規作成し、こちらは「NextButton」を配置する。

シンボル「Side」に配置する

「ButtonPrev_mc」「ButtonNext_mc」をシンボル「Side_mc」に配置する。

以上で、前と次のシーンに移動するボタンができた。

正確にいうと、「同一階層にあるシーンの前後に遷移するボタンができた。」ということになる。

Comments: 0
TrackBack (Close): 0

四コマ漫画Viewerをつくる3 - 現在のシーンに合わせてボタンの表示を替える

Posted by: masa
2008年10月18日 16:21
Progression3 | コンポーネントスタイルでの制作

四コマ漫画Viewerをつくる2 - ボタンをクリックで画面遷移の続き。

現在のシーンに合わせ、ボタンの色が反転する設定をする。シーン「/index/1」が表示されるとき、「1」のボタンが反転する。

ボタンのレイヤーを整理する

「1」ボタンの「Button1_mc」を編集する。編集しやすいように、「ボタンのベース部分」「数字部分」「ROボタン」を3つのレイヤーに分ける。

5フレームまでフレームを挿入 [F5] しておくと、後々タイムラインが見やすくなる。

現在のシーンにいることを示すボタンをつくる

色が反転したボタンをつくる

レイヤー「number」「base」について、6フレーム目で「キーフレームの挿入 [F6] 」をする。6フレーム目に出来た「ボタンのベース部分」「数字部分」の色を反転する。

「current」という名前でラベルを付ける

「label」という名前で新規レイヤーをつくり、6フレーム目に空白キーフレームを挿入 [F7] する。タイムラインに白い○が挿入されるので、そこが選択された状態で「プロパティ」パネルでフレームに「current」という名前を付ける（ラベルを付ける）。

設定すると、タイムラインのlabelレイヤーの6フレーム目に赤い旗が立つ。

ラベル名を「current」とするのはcurrentStateFrameの初期値が「current」に設定されているため。

コンポーネントインスペクタで確認してみるとわかる。

タイムラインを見やすく

全てのレイヤーについて10フレーム目までフレームを挿入 [F5] しておく。こうしておくことで、タイムラインが見やすくなる（6フレーム目にラベル「current」が設定していることがわかる）。

「2」〜「4」のボタンも同様に

「2」〜「4」のボタンについても上記と同じ設定をする。

Comments: 0
TrackBack (Close): 0

四コマ漫画Viewerをつくる2 - ボタンをクリックで画面遷移

Posted by: masa
2008年10月14日 00:22
Progression3 | コンポーネントスタイルでの制作

四コマ漫画Viewerをつくる1 - コマをクリックで画面遷移の続き。

「1」〜「4」のボタンをクリックすると、それぞれのコマ（シーン）に遷移する仕組みを追加する。

1〜4のボタンをつくる

1のボタンをつくる

新規シンボル作成 [ctrl+F8] でボタンをつくる。シンボル名「Button1_mc」クラス名「Button1」とする。

ROボタンを配置し、navigatePathを「/index/1」とする。

2〜4のボタンをつくる

Button1_mcを複製し、シンボル名「Button2_mc」クラス名「Button2」とし、navigatePathを「/index/2」とする。

同様に「3」「4」のボタンをつくる。

ボタンをまとめる

シンボル名「Side_mc」クラス名「Side」で新規シンボルをつくり、「Button1_mc」「Button2_mc」「Button3_mc」「Button4_mc」を配置する。

※こうすることで、easycasting.xmlにずらずらとボタン4つ分のcast要素を毎度書く手間がはぶける。

シーンエディターでeasycasting.xmlを編集

※今回の作品では、上のようにindex属性値を設定しなくても表示には問題ない。

<?xml version="1.0" encoding="utf-8"?>
<prml version="2.0.0" type="text/easycasting">
  <scene name="index" cls="jp.progression.scenes.EasyCastingScene" title="四コマ漫画ビューアー">
    <cast cls="Index" x="20" y="20"/>
    <scene name="1" cls="jp.progression.scenes.EasyCastingScene" title="四コマ漫画ビューアー | 起">
      <cast cls="Ki" x="20" y="20"/>
      <cast cls="Side" x="610"/>
    </scene>
    <scene name="2" cls="jp.progression.scenes.EasyCastingScene" title="四コマ漫画ビューアー | 承">
      <cast cls="Sho" x="20" y="20"/>
      <cast cls="Side" x="610"/>
    </scene>
    <scene name="3" cls="jp.progression.scenes.EasyCastingScene" title="四コマ漫画ビューアー | 転">
      <cast cls="Ten" x="20" y="20"/>
      <cast cls="Side" x="610"/>
    </scene>
    <scene name="4" cls="jp.progression.scenes.EasyCastingScene" title="四コマ漫画ビューアー | 結">
      <cast cls="Ketsu" x="20" y="20"/>
      <cast cls="Side" x="610"/>
    </scene>
  </scene>
</prml>

Comments: 0
TrackBack (Close): 0

四コマ漫画Viewerをつくる1 - コマをクリックで画面遷移

Posted by: masa
2008年10月12日 19:34
Progression3 | コンポーネントスタイルでの制作

Progression Buttons コンポーネントの「RollOverButton」「PreviousButton」「NextButton」を使って四コマ漫画Viewerをつくってみる。

出来上がったサンプルはこちら→四コマ漫画Viewer

まずは、コマをクリックすることで次のコマへ遷移する仕組みを作る。

入り口をつくる

新規シンボルで最初のシーンに表示させる入り口画像をつくる

新規シンボル作成 [F8] で入り口の画面を作る。

シンボル名は「Index_mc」でクラス名は「Index」とした。

矩形の左上の座標が (0,0) になるように配置する。

RollOverボタンを配置する

入り口の画面をクリックすることで、1コマ目が表示されるようにする。

コンポーネントパネルからRollOverボタン（以下ROボタン）を配置する。ステージにドラッグするか、ダブルクリックで配置できる。

naviagatePathを設定する

ROボタンを選択した状態で、パラメータパネルを開く。でnaviagatePathを設定し、クリックすることで1コマ目に遷移するようにする。

ここでは「/index/1」と設定する。

naviagatePathはフォルダ階層のようなものと考えると良い。「入り口のシーン: index」の中に「1コマ目のシーン: 1」がある、というイメージで。

1コマ目をつくる

シンボル「Index」を複製し、シンボル名「Ki_mc」クラス名「Ki」とする。

「enter」の文字を「起」に書き換える。

※ベースの部分（グレーの矩形）はあらかじめシンボル化しておくと良い。

シーンエディターでeasycasting.xmlを編集

入り口、1コマ目のシーンを定義する

シーン「index」にキャスト「Index」を挿入
シーン「index」にネストされたシーン「1」を挿入
シーン「1」にキャスト「Ki」を挿入

ここで一度保存しムービープレビューをしてみる。「Index（enter）」をクリックして「Ki（起）」が表示されたら成功。

2〜4コマ目のシーンも定義しておく

最終的にシーンエディターから保存されたeasycasting.xmlは以下の通り。

<?xml version="1.0" encoding="utf-8"?>
<prml version="2.0.0" type="text/easycasting">
  <scene name="index" cls="jp.progression.scenes.EasyCastingScene" title="四コマ漫画Viewer">
    <cast cls="Index" x="20" y="20"/>
    <scene name="1" cls="jp.progression.scenes.EasyCastingScene" title="四コマ漫画Viewer | 起">
      <cast cls="Ki" x="20" y="20"/>
    </scene>
    <scene name="2" cls="jp.progression.scenes.EasyCastingScene" title="四コマ漫画Viewer | 承">
      <cast cls="Sho" x="20" y="20"/>
    </scene>
    <scene name="3" cls="jp.progression.scenes.EasyCastingScene" title="四コマ漫画Viewer | 転">
      <cast cls="Ten" x="20" y="20"/>
    </scene>
    <scene name="4" cls="jp.progression.scenes.EasyCastingScene" title="四コマ漫画Viewer | 結">
      <cast cls="Ketsu" x="20" y="20"/>
    </scene>
  </scene>
</prml>