コマ送りアニメーション用の一枚画像に簡単に変換するPhotoshop用JSXスクリプトを作りました

コマ送りアニメーション用の一枚画像に簡単に変換するPhotoshop用JSXスクリプトを作りました

コマ送りアニメーション用の一枚画像に簡単に変換するPhotoshop用JSXスクリプトを作りました


Webサイトを作っていて、動画ではファイルが重たすぎるけど、
Gifアニメーションではきれいに見せることができない…といったときに、
最近良く見かける手法として、一枚の画像をコマ送りすることで
動画のように見せる、「スプライトアニメーション」という方法があります。

[参考]
スプライトアニメーションを使った最近のウェブデザイントレンド | つみきブログ

画像自体を一枚の縦長/横長の画像にして、
JSとcssにより背景の位置をずらしていくことで、
読み込み速度を心配することもなく、滑らかに、
動画よりもはるかに軽い容量で見せることが可能となる
非常に便利な方法なのですが、一番大変なのが一枚の画像にする、という手順かと思います。

そこで、Photoshopスクリプトを作成して、
エンターキーを叩くだけで一枚にずらっと並んだらステキだなと思い、
作成してみました。

下準備

動画ファイルをコマ送りで書きだした連番png/jpg画像が必要です。
Flashを使ってもいいのですが、多くのファイルを一括で指定できる、
Media Encoderがおすすめです。
スクリーンショット 2015-05-04 20.33.16

Photoshop用JSXをスクリプトフォルダへ

ここで、複数の連番png/jpgコマ送り画像を一枚の縦長な画像にするためのJSXの登場です。

Download

  

Photoshopでファイルを新規作成

「ファイル>新規…」から、新規ファイルを作成します。
この時背景レイヤーができてしまわないよう、背景は透明にしておくことをおすすめします。
スクリーンショット 2015-05-06 19.50.39

  

書きだした動画のコマ送り画像を配置

Finder上から動画のコマ送り画像をすべて選択して、
ドラッグ&ドロップでPhotoshop上に配置します。
この時、一枚ずつしか配置できないというPhotohopの仕様上、
returnキーを長押しor配置ボタンをひたすらクリック、ということをしないとなりません。。
(記事下部にて配置オートver.も紹介します)
スクリーンショット-2015-05-06-19.55.20

  

スクリプトの実行

先ほどスクリプトフォルダに入れたスクリプトを実行します。
うまく実行できれば、下記のようにアラートが表示されて、
あとは待っていると、縦長に下から順に並べられた画像が生成されます。
スクリーンショット 2015-05-06 20.01.22

スクリーンショット 2015-05-06 20.01.33

  

配置の自動化について

このスクリプト、一枚ずつ画像をずらしていくことを考えると
ものすごく便利だとは思うのですが、配置の際に
ずっとreturnキーを押していないといけないのは非常に辛いです。

そこで、会社のスーパーエンジニア @cocopon さんにお聞きしたところ、
配置をオート化したJSXを作っていただきました!
本当にありがとうございます。

Download

  

オート化できて嬉しいのですが、難点は一枚ずつ画像を開いたものを
コピペしてスマートオブジェクトに変換しているため、
少し時間がかかってしまうようです。

好みに合わせて、お好きな方をお使いいただければと思います。
配置を一括でもっと素早くできる方法をご存知の方がいらっしゃいましたら、
ぜひ教えていただきたいです。

  

あとは一枚画像になったものを、JsやらCSS3やらで
background-positionをずらしながら見せれば、
動画のように見せることができます。

  

ちなみに、上記スクリプトを使用して、
Webサイトやアプリのインタラクションデザインのギャラリーサイトを開設しました。
よろしければ、見てみてください。
Interaction Design Gallery