縦長の画像をクリックで上下移動させたい【ティラノスクリプト】

この記事ではクリックで縦長の画像を上下移動させる方法を紹介します。

imageタグのnameパラメータとanimタグを使用した単純なアニメーションです。 縦長の画像というとbgimageフォルダに入れたくなるかと思いますが、bgimageに入れると背景として扱われるため、縦長の画像が横長にフィットしてしまいます。 なので今回はfgimageに縦長の画像を入れてアニメーションします。

サンプルスクリプト

今回使用する縦長サンプル画像

カメラが空を漂ったあと、下のビル群が映し出されます。
（今適当に考えたストーリー）

この例ではtopを-500pxにすると中央表示されるという前提で、topを-500pxにしています。

;動かしたい縦長の画像をfgimageフォルダに入れておきます。
;nameパラメータで名前をつけておきます。どう命名してもOK（この場合はimage01）
[image layer="0" name="image01" storage="tyrano-move-image01.jpg" visible="true" top="-500" left="0"]

;画像の位置は絶対指定しています。
;この例の場合、初期位置は-500pxです。

クリックすると0pxの位置へ7秒かけて移動します。
[l]
[anim name="image01" top=0 left=0 time=700]

クリックすると-500pxの位置へ15秒かけて移動します。
[l]
[anim name="image01" top=-500 left=0 time=1500]

クリックすると-1000pxの位置へ2秒かけて移動します。
[l]
[anim name="image01" top=-1000 left=0 time=200]

bgimageフォルダに入れた画像で動かしたい場合

bgimageフォルダに入れた画像で動かしたい場合は上記のスクリプトのimageタグを以下のように変更すればOKです。

[image layer="0" folder="bgimage" name="image01" storage="image01.jpg" visible="true" top="-500" left="0"]

folderパラメータでbgimageを指定しています。

参考 タグリファレンス – ティラノスクリプト

広告