018

Revolution でお絵描き 4 / 革命絵図師養成講座 付録
ボタンから引き出すスタックパネルを作る
アイコンのチャートやスワッチ上で移動するロケーター
選ばれたアイコンを示すフレームを置く

set the brush to number
constant, local


RR Player に 018.rev と入れてスタックをダウンロードしてください。
Revolution の開発環境がある方は、メッセージボックスに
go stack url "http://www.kenjikojima.com/runrev/handbook/download/018.rev"
とタイプしてリターンキーを叩く事でもダウンロードできます。

最近のRunrevバージョンでは、このスクリプトで働かないツールがあります。修正版は今のところ作る予定はありませんから、ご自分で工夫してください。

結果的にお絵描きの続きとなってしまうけれど、沢山のアイコンやカラースワッチなどのロケーターが、ちょうど良い具合にブラシのパターンを選ぶ時に使えるので、サンプルにして部品に加える事にします。私は何となく Locator という言葉を使っていますが、他に適切な名称があるのかも知れませんから、あまり当てにしないでください。

Revolution のブラシのパターンは32種類用意されています。1から32 まで番号が振られていて、デフォルトでは 8 のパターンが設定されています。スクリプトでは、

set the brush to 8

で設定されます。

ユーザーには 8番と言っても何がなんだかわからないので、こんな時は普通パターンが見えるチャートからどんなブラシにするか選ぶのですが、そんな時にマウスに沿って移動したり、選んだアイコンに印を付けておくためのものです。下の図はブラシのパターンのチャートが開かれて、右上にあるグレーのワクのパターンが選ばれている状態です。





まずこのブラシのパターンのチャートを開くことから説明しましょう。新しくサブスタックをひとつ作ります。018.rev では brushPattern というスタック名にしました。



ブラシのパターンは 32 個あって最大のパターンは28 x 28ピクセルです。それぞれ ひとつのパターンを30 x 30 ピクセルの大きさにすることにして、ヨコ 4 個、タテ8 個に並べて 1枚のイメージにすると 120 x 240 になります(ややこしい言い回しですが、タテ列 4 colums 、ヨコ列 8 rows です)。スタック brushPattern はリサイズできないようにして、イメージと同じ大きさに作ってパターンのイメージを rect 0,0,120,240 に置きました。(上図)

TIP: こんな場合は、できるだけ偶数のピクセル数で作っておく方がトラブルが少ないです。

このイメージの上を、マウスが移動した時にマウスに沿って動く矩形は、 30 x 30 ピクセルの濃いグレーで作って、パターンが見えるように 016 の時にやったイメージを半透明にしています(image "locator" = 上図右下にある薄いグレーの矩形)。 もうひとつ選ばれたパターンを示すワクは、ボーダーをグレーにして、中が透明なグラフィックです。(上図右上 grc "selected")

このスタック brushPattern が、パレット内のブラシのアイコンをマウスダウンした時に、現れるようにします。

始めにパレットが編集できるように、Shift+Ctrl+Command(MacOS) または Cntrl + Alt (Windows) でパレット上をマウスダウンして、コンテクスチュアル・メニューからウインドウスタイルをToplevel にします。次に、ツール類がひとつにまとまっているアイコンのグループを、セレクトするのですが、グループのセレクトは



Select Grouped が上図の状態でないと、グループ内の個々のツールのアイコンイメージが選ばれてしまいます。上の図の状態からツールアイコンのグループを選ぶと、その右のEdit Group が濃い普通の色のアイコンに変わって、グループが編集できるようになります。グループ編集のために上図の Edit Group をクリックして、カード上のグループ内にあるコントロール(カード上に置けるボタンやイメージなどのオブジェクト)だけが見るようにします(下図)。



上図では、ブラシアイコン(イメージ)の上に、プルダウンメニューボタン(ボタン名 brush)を同じサイズ、同じポジションに置いています。プルダウンメニューボタンを置いただけでは、白い不透明のボタンですから、オブジェクトインスペクターの Icons & Border の icon に、ブラシアイコン(イメージ)の ID をタイプして、ボタンにアイコンが映し出されるようにします。またはイメージライブラリー(下図) の This Stack から選ぶ事もできます。今回のアイコンは、さらに他の要素が表示されることを暗示する三角を、右下に付けました。




このプルダウンボタンがマウスダウンされた時に、スタックbrushPattern が開かれるようにするには、ボタン brush のオブジェクトインスペクターの一番下にある「 use stack panel 」を選んで、その下を brushPattern にします。これでグループ編集を戻して、ウインドウスタイルをパレットにすると、ブラッシュアイコンのクリックで brushPattern が見えるようになります。


しかしこれだけではウインドウが開かれるだけですから、ロケーターが動いてパターンのひとつが選ばれた時に、ブラシサイズがそのパターンになるスクリプトが必要です。このような Stack Panel にした状態では、イメージのクリックではmouseUp を取得できないので、ボタンが必要になります。下図にあるアプリケーションブラウザーで見える「Button 1」がそれで、イメージ baseImage の全面に同じサイズ、同じポジションで透明(Transparent Button)にして被せています。




このボタン内の全部のスクリプトは以下です。



constant numCol=4,numRow=8
local lColNum,lRowNum,lWLocator,lHLocator

on mouseMove
put the width of image "locator" into lWLocator
put the height of image "locator" into lHLocator

if item 1 of mouseLoc() >=0 and \
item 1 of mouseLoc()<the width of image "baseImage" and \
item 2 of mouseLoc() >=0 and \
item 2 of mouseLoc()<the height of image "baseImage" then
put numCol-1 - (the width of image "baseImage" - item 1 of mouseLoc()) \
div the width of image "locator" into lColNum
put numRow-1 - (the height of image "baseImage" - item 2 of mouseLoc()) \
div the height of image "locator" into lRowNum
set the loc of image "locator" to lWLocator/2 + lColNum*lWLocator, \
lHLocator/2 + lRowNum*lHLocator
end if
end mouseMove

on mouseUp
set the brush to (lColNum + lRowNum*numCol +1)
set the loc of grc "selected" to lWLocator/2 + lColNum*lWLocator, \
lHLocator/2 + lRowNum*lHLocator
end mouseUp



始めに constant で

numCol=4,numRow=8

としているのは、baseImage にあるブラシパターンがタテ列 4 のthe num of colums、横列 8 の the num of rows です。

このスクリプトとを使って別なものに応用するときは、まずこのconstant を変えてください。その他の要素はベースにするイメージ名は "baseImage"、マウスと同時に移動する半透明のロケーターのイメージ名は "locator"、選択されたブラシパターンを 示すワクはグラフィック名 "selected" とすることで使用できます。(注:すべて偶数のピクセル数で作っています、あるいは奇数になった時にトラブルになるかのテストはしていません)

if 文で、マウス移動が baseImage の内側だけで働くようにしています。


上のスクリプトのインスタント応用:
1) チャートのタテヨコの数字だけを変えて、後はそのままボタンにコピーする。
constant numCol=4, numRow=8
2) コンロールは同じ名前にする
image "baseImage", image "locator", grc "selected"
3) image "locator" のサイズは、image "baseImage" をチャートのタテヨコで割った大きさです。



パレット側のツールアイコンが選ばれた時にも、grc "selected" のワクがそのアイコン上に移動するようにしていますが、こちらは単純に選ばれた target の location に移動する指示を与えているだけです。

set the loc of grc "selected" to the loc of the target



017 / 018 / 019

わかりにくい事がありましたら、遠慮なくメールしてください。
index@kenjikojima.com