« このデータベースへのリンク・コンテンツ利用に関して | メイン | Ogg Vorbisは利用できますか? »

画像をスクロールさせる

コミックメーカー2では画像のスクロールはテキストエディタでの編集や専用のエディタを使うなど
多少面倒な点がありましたが、コミックメーカー3では比較的簡単に画像のスクロール処理を行うことができます。
この記事中に出てくるサムネイル画像はクリックすると原寸大に表示されます。


”画像のスクロール”という機能はコミックメーカー3には搭載されていません。
したがって、レイヤーの制御コマンドにより、”スクロールしているように見せかける”方法をお教えします。


専用のレイヤーを用いてレイヤーごとスクロールさせる方法
今回は、右から10ピクセルごとスクロールを行い、
画像が完全に表示される位置で停止するように設定しました
(スクロールの開始・終了位置についての注意事項は最下部に記載されています。必ずお読み下さい)

まず、スクロール用にレイヤーと数値変数を作成します。

「スクロール」レイヤーを作成

数値変数「スクロール」を作成
補注:
今回は横方向のみスクロールさせるため、一つしか用意しませんが、
縦横同時に移動させたい場合は同様の方法で二つ変数を使用します。

次に”どこから”スクロールさせるかを指定します。
指定方法は、スクロールを始める前のページで作成した数値変数「スクロール」に
スクロールをさせるX軸上の初期位置を指定します。
今回は右から画像をスクロールさせるので、右端で完全に画像が表示されない位置であるX=640を指定します。
(デフォルトのウィンドウサイズを使用しているので)

数値変数「スクロール」の設定が終わったら、
レイヤーの制御コマンドで「スクロール」レイヤーを非表示、スクロールさせる画像を読み込ませます。
(「すぐに画面へ反映させる」にチェックを入れます)

補注:なぜ非表示の状態で画像を読み込むのかというと、スクロールのために
何度も画像を読み込んで表示したのでは、ファイルアクセスを何度も行う分だけ時間を必要とします。
これを防ぐために、一度レイヤーに画像を読み込んで、レイヤーを動かすことにより、1度画像を読み込んだだけでスクロールを行うことができるのです。

最後にスクロール処理を行うためにサブルーチンを組みます。
(ページの移動で移動してもかまいません。その場合は、
併せてサブルーチンからの復帰も別のページに移動するように設定してください。)



「スクロール」ページでは、画像のようにコマンドを以下のように組みます
・数値変数の操作 「スクロール」←「スクロール」-「10」
・レイヤーの制御コマンド
 「レイヤーの表示状態を切り替える」→レイヤーを表示する
 (画像は読み込み済みなので読み込まなくて大丈夫です)
 レイヤー位置設定では
 X座標のプルダウンメニューを選択し、
 shot000045.JPG
 「変数の入力」をクリック→数値変数「スクロール」を選択します
 
 (レイヤーサイズの横が720pixelですが、気にしないでください・・・<汗)
・条件分岐 IF 「スクロール」=(スクロール終了X軸位置)
 今回は、画像が完全に表示された位置なので、X=0です。
・サブルーチンからの復帰(先ほど、ページの移動に置き換えた方はここもページの移動に置き換えてください)
・条件分岐終了
・ページの移動「スクロール」
 (何度もこの処理を行うため、このページを何回も実行させます)

以上で簡単なスクロールプログラムは完成です。
このスクロールプログラムのサンプル:http://faq.comicmaker.info/bin/samp-scroll.lzh
(スクロール用の画像は付属していませんので、画像は各自で用意してください。)



スクロールの初期位置・最終位置の設定方法についての注意事項

スクロールの初期位置や最終位置がどこだか分からない。という場合は、レイヤーの制御コマンドの
「表示位置設定画面で設定する」で設定した後に表示される各種数値を使用してください。

注意
表示位置についてはマイナスの範囲は設定不可能です。

このため、レイヤーの位置のマイナス方向へスクロールさせるためには、レイヤーの制御コマンドの設定で
「レイヤーの位置を変更する」ではなく、「表示範囲内の表示位置を変更する」の設定を変動させる必要があります。
「表示範囲内の表示位置を変更する」はプラスにしていくと、レイヤー内での画像の位置が左にずれていきます。

よって、ウィンドウ内外の範囲にかかるスクロールを作成する場合は
X,Y座標位置が+の時の表示位置設定:「レイヤーの位置を変更する」
X,Y座標位置が-の時の表示位置設定:「表示範囲内の表示位置を変更する」
を利用するということを覚えておきましょう


この記事を修正するに当たりまして、濃崎真矢さんよりご指導いただきました。
濃崎さん、ありがとうございました。

なお、スクロールをする度に「しばらく待つ」コマンドでウェイトを設定することも可能です。

ただし、長いウェイトを設定するよりは、短いウェイトにして細かくスクロールした方が視覚的には良い結果が得られます。

関連記事

Copyright ©2005-2013 近藤 All Rights Reserved.| 2006年7月17日

トラックバック

このエントリーのトラックバックURL:
http://faq.comicmaker.info/mt-tb.cgi/73

質問と回答

こちらでは初めまして、濃崎です。

〔レイヤーを制御する〕コマンドで、ユーザーレイヤーの非表示と画像読み込みは、一つのコマンドで出来たりします。
http://hp.vector.co.jp/authors/VA041553/3repo.htm#ユーザーレイヤー

それと、あの……申し訳ありません。
つい、軽量化してしまいました……。(汗)
(画像化ファイル)を1.pngにして、2.18 KB (2,233 バイト)から1.74 KB (1,785 バイト)に。ほんの少し。(テキストエディタで軽量化をしていないサイズです)

「スタートページ」
 [スクロール]←640
 〔レイヤー制御〕〝すぐに画面に反映する〟〝レイヤーを表示する〟〝レイヤーに画像を読み込む〟〝レイヤー位置(640,0)〟
 〔サブルーチンコール〕「スクロール」
 〔しばらく待つ〕

「スクロール」
 [スクロール]←[スクロール]-10
 〔レイヤー制御〕〝すぐに画面に反映する〟〝レイヤー位置(%スクロール%,0)〟(〝レイヤーの表示状態を切り替える〟〝レイヤーに画像を読み込む〟はチェック無し)
 IF[スクロール]=0
  〔サブルーチンから復帰する〕
 IFEND
 「スクロール」に移動


……い、いかがでしょうか……?

Commented by 濃崎 | 2006年7月18日 17:46

ハイ、すみません。おっしゃるとおりでして。
時間のあるときに修正させていただきますm(_ _)m

試しに右から左に抜けていくスクロールを作ってみたのですが、
思いの外、面倒でした<苦笑
というのも、どうやらレイヤーのサイズの
調整が位置調整画面で少々ネックになるようです
画像サイズがウィンドウの横幅ないし立て幅よりも大きい場合、
レイヤーの制御コマンド設定画面で読み込んでからすぐに調整画面を開いて閉じるだけだとレイヤーサイズも画像と同じサイズになりますが、
このレイヤーを位置調整画面で移動させてしまうとウィンドウサイズの大きさまで変更されてしまいます。・・・メモ帳片手に・・・というノリですが・・・。

・・・不具合・・・とも言えるような気もしますが、微妙なところです・・・

Commented by 近藤 | 2006年7月19日 02:44

この記事についての質問・意見はこちらからどうぞ


質問した直後にはこのページには質問は掲載されません。
近藤(管理人)による回答が完了した時点(1日~3日ほど)で質問と回答が同時掲載されます。
尚、メールアドレスを記入していただいた質問につきましては、
メールアドレス宛に回答させていただき、このページには質問も回答も掲載致しません

(ただし、データ本文を修正するべきと判断した場合は質問の回答に基づき修正いたします)
ので、個人の開発環境に深く関係するような質問はなるべくメールアドレスをご記入下さい。

<<SPAM対策のため、以下の英字は使用しないでください>>
good,great,nice,homepage,find




保存しますか?