スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

GooBlogでゲームシリーズ 最終回

 Gooブログでインタラクティブな投稿を作る方法を、いままでいくつか書いてきたが、最後に、絶対配置と相対配置、そして絶対配置することで可能になる写真画像を入れ替えるときの各種のフィルターの使い方のまとめを書いておく。

 普段特別指定がなくてタグ入力しているモードは、相対配置モードだ。書いた順番で表示されるモードだ。それに対して、スタイルで position:absoluet; として指定することによって実現されるもーどが絶対配置のモードで、WEB作成アプリケーションなどで「どこでも配置モード」などといわれるモードだ。
 しかしGooブログの投稿でこの絶対配置モードで突然画像を使うと、たとえばスタイルの中で style="position:absolute;top:0;left:0;" 指定すると、ブログの一番トップの左端に画像が表示されて、投稿画面ではなく、とんでもないところに表示される。
 ブログの投稿画面の中に絶対配置をしたい場合は、相対配置で<div>領域を作成し、その入れ子で絶対配置のコンテンツをおくと実現できるが、気をつけなければならないのは、Gooブログのテンプレートの中には、正常に動作しないものがあるの気をつけなければならない。
 以下は実際のソース記述例だ。
 <div style="position:relative;"width:550; height:600;"><img id="画像1ID" style="position:absolute;top:10;left:10;z-index:1;" src="画像1URL"/><img id="画像1ID" style="position:absolute;top:10;left:10;z-index:2" src="画像2URL"/></div>

上の例では、二つの画像を同じ場所に重なって表示しているが、z-indexの値が大きいほうが上にある。これを入れ替えるにはイベントの記述で、数値の小さいほうを画像のID.zIndex=3; などと数値を入れ替えることによって、上下が切り替えられる。
 この上下の入れ替えによっても面白い効果が得られる。

 絶対配置した画像には、フィルターのトランジションを設定できる。
 トランジションの付け方は、スタイルのなかに、次のような記述を挿入する。

 filter:revealTrans(duration=1,transition=17);

durationが変化する時間、tarannsitionがトランジションの種類の番号で0から23まで種類がある。

あとでトランジション番号を12に変えたいときは、イベントの中で、
  画像ID.style.filter.revealTrans.transition=12;
とすればいい。

実際にトランジションを実行するためには次の決まり文句を書く

画像ID.filters.revealTrans.Apply();
  ここに画像のソースの切り替えや、トランジション番号の変更を記述。
画像ID.filters.revealTrans.play();

で、画像の切り替えにトランジションが働く。


 これくらいが、昨年末から勉強してみたGooぶろぐでゲーム的な投稿を実現するための基礎的な知識であるが、ただ気をつけたいのは、あくまでマーキー効果をはじめ、さまざまな機能が、マイクロソフト社のインターネットエクスプローラだけで実現する機能であることと、選択したブログのテンプレートによっては、動かないことがあることを知っておきたい。
 つまり、マックなどでは表示が崩れたり、動かなかったりするということだ。

 実際にはほとんどのユーザーがIEを使っているため、他のブラウザーを使用している人やマックやユニックス、リナックスを使っているユーザーには我慢してもらうほかはない。
 その辺のことを理解したうえで、いままでこのシリーズで書いたことを実際に使用してもらいたい。

 最後に、これはGooのブログの管理者が推奨しているブログの使い方ではないことを承知いただいて、自己責任で利用してもらいたい。


 これで7回にわたるブログでゲームのシリーズを終わります。読み返してみますと実に荒っぽい記述が散見され、お恥ずかしい限りですが、これからスクリプティングに挑戦しようと思われている方の少しでもお役に立てば幸いと、いままで試行錯誤してきた内容を自分自身の頭の整理もかねて乱暴に書き綴ってきました。

 わかりにくい点があればコメント入れていただければ、可能な限りわかりやすく書き直したいと思いますので、よろしくお願いいたします。


コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。