解説/基礎編のバックアップ(No.11)

※再度編集中です。(項目「画像と文章の表示」の追記中)

解説/基礎編

解説/基礎編 †

申し訳ありませんが、以降の解説はJavaScriptやHTMLの知識がある程度必要になります。
また、すこし説明が粗くなりますがご容赦ください。(作者の都合で更新があまりできず、このままだといつまでたっても終わらないので。。。)

↑

Webページへの組み込み †

↑

script読み込み †

ヘッダー内で、「staff」フォルダ内の「theaterconstructor.js」を読み込んでください。「staff」フォルダ内のファイルは移動・変更しないでください。

<script src="staff/theaterconstructor.js"
 type="text/javascript" charset="shift_jis"></script>

↑

シナリオ進行要素 †

デフォルトではID「play」に設定されています。クリックすることでシナリオが進行する要素です。サンプルHTMLではこの子要素に画像ボックス要素と文章ボックス要素を含めることで、どちらをクリックしてもシナリオが進行するようになっています。 button要素にこのIDを指定することで、buttonを押さなければ進行しない、といった制御も可能です。

<div id="forward">
 :
 :
</div>

↑

シナリオ初期化要素 †

デフォルトではID「reset」に設定されています。クリックすることでシナリオを初期化する要素です。この要素の作成は任意です。

<button id="reset">はじめから</button>

↑

画像ボックス要素 †

デフォルトではID「frame」に設定されています。画像が表示される要素です。 <div>等の子要素を持てる要素に指定し、子要素は作成しないでください。
自動的にstyle「overflow:hidden;」「padding:0;」が指定されます。

<div id="frame"></div>

プログラムで画像ボックス要素内に以下のIDを持つ要素を追加しています。重複したIDを持つ他の要素が存在した場合、正常に動作しませんので注意してください。

画像ボックス要素ID + "_img"
画像ボックス要素ID + "_progress"

↑

文章ボックス要素 †

デフォルトではID「msg」に設定されています。文章が表示される要素です。 <div>等の子要素を持てる要素に指定し、子要素は作成しないでください。
自動的にstyle「overflow:auto;」が指定されます。

<div id="msg"></div>

プログラムで文章ボックス要素内に以下のIDを持つ要素を追加しています。重複したIDを持つ他の要素が存在した場合、正常に動作しませんので注意してください。

文章ボックス要素ID + "_line"
文章ボックス要素ID + "_lineLast"

↑

画像と文章の表示 †

※この項目は書きかけです。

画像と文章を表示するためのメソッドを用意しています。

actメソッド
- 機能：画像ボックス要素に画像を、文章ボックス要素に文章を表示する。
- 第一引数：オプションオブジェクト*1
  - imgプロパティ：表示する画像アドレス。(省略可)
  - msgプロパティ：表示する文章文字列。(省略可)
- 補足：imgプロパティを省略した場合は画像を変更しない。msgプロパティを省略した場合は文章を変更しない。

appearメソッド
- 機能：画像ボックス要素に画像を表示する(文章は変更しない)。this.act({img:画像アドレス});と同等。
- 第一引数：表示する画像アドレス。

speakメソッド
- 機能：文章ボックス要素に文章を表示する(画像は変更しない)。this.act({msg:文章文字列});と同等。
- 第一引数：表示する文章文字列。

new Theater({
  img: [
    "img/sample1.gif",
    "img/sample9.gif",
    "img/sample6.gif"
  ],
  scenario:[
    function(){
      this.act({
        img: "img/sample1.gif",
        msg: "actメソッド。次は画像のみの変更。"
      });
    },
    function(){
      this.act({
        img: "img/sample9.gif"
      });
    },
    function(){
      this.act({
        msg: "文章のみの変更。次はappearメソッドによる画像のみの変更。"
      });
    },
    function(){
      this.appear("img/sample6.gif");
    },
    function(){
      this.speak("speakメソッドによる文章のみの変更。");
    }
  ]
});

画像は画像ボックス要素の中央に表示されます。
画像が画像ボックス要素より大きい場合、画像ボックス要素に合わせて縮小されます。*2
文章は文章ボックス要素内に、タイプライトしたように表示されます。
タイプライト中にクリックすると、文章をすべて表示します。再度クリックするとシナリオが進行します。
文章にはインライン属性のHTMLタグが使用できます。(ただし、Operaでタイプライト動作に支障がでます。)

↑

画像切り替え効果 †

画像切り替え時に効果をつけることができます。
効果は大きく分けて以下の２種類があります。
- IEのfilterを利用したもの。
- script.aculo.usのEffectを利用したもの。

↑

設定方法/IEのfilterを使用 †

シナリオ関数内のactメソッドか、Theaterクラスのインスタンス生成時の引数にfilterプロパティで指定します。

インスタンス生成時に設定した場合は、シナリオ全体のデフォルトになります。actメソッドで設定した場合は、そのシナリオ関数のみの設定となります。

設定値は-1～23、100～134の数値か、またはfilterへの設定文字列となります。各数値についての説明は効果一覧を参照してください。

new Theater({
  filter: 1, //インスタンス生成時に設定(デフォルトになる),
  img: [
    "img/sample1.gif",
    "img/sample2.gif",
    "img/sample3.gif"
  ],
  scenario:[
    function(){
      this.act({
        img: "img/sample1.gif",
        msg: "ようこそ"
      });
    },
    function(){
      this.act({
        img: "img/sample2.gif",
        msg: "インスタンス生成時の画像切り替え効果指定です。"
      });
    },
    function(){
      this.act({
        img: "img/sample3.gif",
        msg: "actメソッドでの画像切り替え効果指定です",
        filter: 100 //actメソッドでの設定(ここのみの設定)
      });
    }
  ]
});

↑

設定方法/script.aculo.usのEffectを使用 †

シナリオ関数内のactメソッドか、Theaterクラスのインスタンス生成時の引数へoutEffectプロパティ、inEffectプロパティで指定します。

インスタンス生成時の設定がシナリオ全体のデフォルト、actメソッドでの設定がそのシナリオ関数のみの設定となるのはfilterプロパティと同じです。

outEffectプロパティは遷移前画像の消去効果、inEffectプロパティは遷移後画像の出現効果です。

設定できる値は、script.aculo.usのelement.visualEffectメソッドの引数と基本的に同じですが、使用できない効果もあります。(効果一覧参照)

outEffect、inEffectプロパティよりも、filterプロパティが優先されます。(効果一覧#zbbf2453参照)

new Theater({
  outEffect: "Fade", //インスタンス生成時に設定(デフォルトになる),
  inEffect: "Appear", //インスタンス生成時に設定(デフォルトになる),
  img: [
    "img/sample1.gif",
    "img/sample2.gif",
    "img/sample3.gif"
  ],
  scenario:[
    function(){
      this.act({
        img: "img/sample1.gif",
        msg: "ようこそ"
      });
    },
    function(){
      this.act({
        img: "img/sample2.gif",
        msg: "インスタンス生成時の画像切り替え効果指定です。"
      });
    },
    function(){
      this.act({
        img: "img/sample3.gif",
        msg: "actメソッドでの画像切り替え効果指定です",
        outEffect: "Squish",  //actメソッドでの設定(ここのみの設定)
        inEffect:  "Grow" //actメソッドでの設定(ここのみの設定)
      });
    }
  ]
});

解説/基礎編 のバックアップ(No.11)

解説/基礎編 †

Webページへの組み込み †

script読み込み †

シナリオ進行要素 †

シナリオ初期化要素 †

画像ボックス要素 †

文章ボックス要素 †

画像と文章の表示 †

画像切り替え効果 †

設定方法/IEのfilterを使用 †

設定方法/script.aculo.usのEffectを使用 †

解説/基礎編のバックアップ(No.11)