今回は、Illustratorのドキュメント上に描かれた画像を、1ラインずつ分解してPNG形式で保存するスクリプトです。何のために作ったかというと、画像をWebブラウザ上でアニメーションさせるためです。どんなアニメーションをやりたいのかというと、ゲームセンターにあるゲームで演出として使われていたラスタースクロールです。
・ラスタースクロール
http://ja.wikipedia.org/wiki/ラスタースクロール
・ラスタースクロール
http://www.youtube.com/watch?v=-4nAKxEUdsk
・ゲームでのラスタースクロール（映像/コナミXEXEX）
http://www.youtube.com/watch?v=e7YBUu4rK5s
ラスタースクロールをWebブラウザで実現するには、画像を1ラインずつ分解します。分解した画像をページ上に表示したら、定期的にX座標をずらして表示します。この時にサインカーブを利用すると上記の映像のように、うねうねとした動きになります。
今回はCS3/CS4とCS5用の2つがあります。というのも、CS5からはY座標の値が上下逆になっているためです（CS5では新規にドキュメントを作成する左上。それ以前は左下）。もし、CS5でうまく処理されない場合は、CS3/CS4用を使ってください。
●Illustrator CS3/CS4用
// 横1ピクセル（横線）に分割してPNG形式で保存
(function(){
var folderName = Folder.selectDialog("保存フォルダを選択してください");
if (!folderName){ return; }
var w = app.activeDocument.width;
var h = app.activeDocument.height;
var opt = new ImageCaptureOptions();
opt.antiAliasing = true;
opt.matte = false;
opt.resolution = 72;
opt.transparency = false;
var count = 0;
for(var y=0; y<h; y++){
var fileObj = new File(folderName+"/"+count+".png");
var rect = [0, h-y+1, w, h-y]; // left, top, right, bottom
app.activeDocument.imageCapture(fileObj, rect, opt);
count++;
}
})();
●Illustrator CS5用
// 横1ピクセル（横線）に分割してPNG形式で保存(CS5)
(function(){
var folderName = Folder.selectDialog("保存フォルダを選択してください");
if (!folderName){ return; }
var w = app.activeDocument.width;
var h = app.activeDocument.height;
var opt = new ImageCaptureOptions();
opt.antiAliasing = true;
opt.matte = false;
opt.resolution = 72;
opt.transparency = false;
var count = 0;
for(var y=0; y<h; y++){
var fileObj = new File(folderName+"/"+count+".png");
var rect = [0, h-h-y+1, w, h-h-y]; // left, top, right, bottom★変更箇所
app.activeDocument.imageCapture(fileObj, rect, opt);
count++;
}
})();
分解した画像をWebブラウザで表示し、さらにうねうねと動く（ラスターアニメーション）ようにするには、以下のスクリプトを使います（画像はimagesフォルダ内）。なお、横幅は500、縦幅も500としてあります。
<!DOCTYPE html>
<html>
<head>
<title>Raster Image</title>
<style>
div { width: 500px; height:1px; margon:0; padding:0; background-color:red; }
</style>
</head>
<body>
<script>
var rasterCount = 500; // 500本の画像線（★縦幅）
for(var i=0; i<rasterCount; i++){
var tag = '<div style="position:absolute;left:0px;top:'+i+'px;background-image:url(images/'+i+'.png)"></div>';
document.write(tag);
}
var count = 0;
var divs = document.getElementsByTagName("div");
window.onload = function(){
setInterval(function(){
count = count + 0.1;
for(var i=0; i<rasterCount; i++){
var offsetX = Math.sin((count+i/rasterCount)*Math.PI*2);
divs[i].style.position = "absolue";
divs[i].style.left = offsetX*50+"px"; // ★50は振幅ですので好きな値にどうぞ
}
}, 50);
}
</script>
</body>
</html>
[
サンプルをダウンロード]