クリエイター手抜きプロジェクト[321]Illustrator CS3〜6編 画像を1ラインずつ分解して保存/古籏一浩

投稿:  著者:  読了時間:7分(本文:約3,300文字)


今回は、Illustratorのドキュメント上に描かれた画像を、1ラインずつ分解してPNG形式で保存するスクリプトです。何のために作ったかというと、画像をWebブラウザ上でアニメーションさせるためです。どんなアニメーションをやりたいのかというと、ゲームセンターにあるゲームで演出として使われていたラスタースクロールです。

・ラスタースクロール
< http://ja.wikipedia.org/wiki/ラスタースクロール >

・ラスタースクロール
< >

・ゲームでのラスタースクロール(映像/コナミXEXEX)
< >

ラスタースクロールを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 >


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/ >

オウム真理教の逃亡犯が逮捕される前日から、Ustreamで中継されているところが現代っぽいところ。HTML5のWebRTC(リアルタイム映像処理)とCanvasを使って顔認識するプログラムを作れば、懸賞金がかかっている犯人捜しに使えるかも。

・毎度おなじみアスキーの連載
 「File system APIでブラウザーで動くファイラーを作る」
< http://ascii.jp/elem/000/000/696/696368/ >

・PDF構造解説
< http://www.amazon.co.jp/dp/4873115493 >

・10日で覚えるHTML5入門教室
< http://www.amazon.co.jp/dp/4798124184 >

・AndroidのためのHTML5本格アプリ開発
< http://www.amazon.co.jp/dp/4897978971/ >

・新標準HTML5 & CSS3辞典
< http://www.amazon.co.jp/dp/4844331752/ >

・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199 >

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/ >

・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/ >

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/ >
吉田印刷所の「印刷の泉」でも購入できるようになりました。