{"id":743,"date":"2012-12-25T23:16:51","date_gmt":"2012-12-25T23:16:51","guid":{"rendered":"http:\/\/tech.avant.net\/q\/?p=743"},"modified":"2012-12-26T03:23:35","modified_gmt":"2012-12-26T03:23:35","slug":"scripting-photoshop-for-stop-motion","status":"publish","type":"post","link":"https:\/\/tech.avant.net\/q\/scripting-photoshop-for-stop-motion\/","title":{"rendered":"scripting Photoshop for stop motion"},"content":{"rendered":"<p>I would like a simple and quick way to save a copy of an image in Photoshop, with an auto-incrementing filename. Ideally, a single button to capture a frame in a stop motion animation. In other words, I would like to save a copy of the working image as a JPEG without any interactive prompts and the filename will automatically increment a count.<\/p>\n<p>For example, if I&#8217;m working with a file &#8220;test.psd&#8221;, I want a single action that will save a copy &#8220;test_0001.jpg&#8221;, and subsequent calls will save &#8220;test_0002.jpg&#8221;, &#8220;test_0003.jpg&#8221;, and so on.<\/p>\n<p>By default, Photoshop will overwrite existing files, and it would be quite tedious to manually &#8220;Save As&#8221; for hundreds or thousands of images. Fortunately, Photoshop offers a scripting interface to call user defined scripts. Custom scripts can even be loaded into Photoshop and executed as an Action.<\/p>\n<p>The following snippet can be saved as [Photoshop Directory]\/Presets\/Scripts\/saveFrame.jsx, and after restarting Photoshop you should see &#8220;saveFrame&#8221; under File -> Scripts.<\/p>\n<pre class=\"sh_javascript\">\r\nmain();\r\n\r\n\/***\r\n * Scripted \"save as\" with incrementing filename\r\n *   e.g., test_0001.jpg, test_0002.jpg, ...\r\n *\r\n ***\/\r\nfunction main() { \r\n\tif (!documents.length)\r\n\t\treturn;\r\n\tcnt = 1;\r\n    try {\r\n        var Name = decodeURI(activeDocument.name).replace(\/\\.[^\\.]+$\/, '');\r\n        var Path = decodeURI(activeDocument.path);\r\n        var saveFrame = Path + \"\/\" + Name + \"_\" + zeroPad(cnt,4) + \".jpg\";\r\n        \/\/\r\n        \/\/ find the next available filename\r\n        while ( File(saveFrame).exists ) {\r\n            cnt++;\r\n            saveFrame = Path + \"\/\" + Name + \"_\" + zeroPad(cnt,4) + \".jpg\";\r\n        }\r\n        \/\/\r\n        \/\/ save as, change the default JPEG quality here as needed\r\n        SaveJPEG(File(saveFrame), 9);\r\n\t} catch(e) {\r\n        alert(e + \"\\r@ Line \" + e.line);\r\n     }\r\n}\r\n\r\nfunction SaveJPEG(saveFile, jpegQuality) {\r\n\tvar doc = activeDocument;\r\n\tif (doc.bitsPerChannel != BitsPerChannelType.EIGHT) \r\n\t\tdoc.bitsPerChannel = BitsPerChannelType.EIGHT;\r\n\tjpgSaveOptions = new JPEGSaveOptions();\r\n\tjpgSaveOptions.embedColorProfile = true;\r\n\tjpgSaveOptions.formatOptions = FormatOptions.STANDARDBASELINE;\r\n\tjpgSaveOptions.matte = MatteType.NONE;\r\n\tjpgSaveOptions.quality = jpegQuality; \r\n\tactiveDocument.saveAs(saveFile, jpgSaveOptions, true, Extension.LOWERCASE);\r\n}  \r\n\r\nfunction zeroPad(n, s) { \r\n\tn = n.toString(); \r\n\twhile (n.length < s) \r\n\t\tn = '0' + n; \r\n\treturn n; \r\n};\r\n<\/pre>\n<p>Using Photoshop scripts you can automate any task and even create animation effects. In CS6 you can render a series of images as a video, alternatively, you can create the image frames in Photoshop and use ffmpeg to render the video.<\/p>\n<p>If you want to use ffmpeg to render a series of images, you could use the following command,<\/p>\n<pre class=\"sh_sh\">\r\n$ ffmpeg -r 30 -f image2 -i test_%04d.jpg -vb 1M -r 30 test.webm\r\n<\/pre>\n<p>Here is a simple (90 frame loop) example animating a series of scripted lighting effects,<br \/>\n<video id=\"test_test\" poster=\"\/sandbox\/bgmov\/test_0001.jpg\" preload=\"auto\" loop autoplay style=\"margin: 5px 0 0 0; padding: 2px; border: 1px solid black;\"><source src=\"\/sandbox\/bgmov\/test.mp4\" type=\"video\/mp4\" \/><source src=\"\/sandbox\/bgmov\/test.webm\" type=\"video\/webm\" \/><source src=\"\/sandbox\/bgmov\/test.ogv\" type=\"video\/ogg\" \/><object width=\"600\" height=\"360\" type=\"application\/x-shockwave-flash\" data=\"\/sandbox\/bgmov\/test.swf\"><param name=\"movie\" value=\"\/sandbox\/bgmov\/test.swf\" \/><img decoding=\"async\" loading=\"lazy\" src=\"\/sandbox\/bgmov\/test_0001.jpg\" width=\"600\" height=\"360\" alt=\"test\" title=\"No video playback\" \/><\/object><\/video><br \/>\n<!-- chrome bug, video doesn't autostart without \"controls\", add and remove controls --><br \/>\n<script>\n    var el = document.getElementById(\"test_test\");\n    el.setAttribute('controls', 'true');\n    el.removeAttribute('controls');\n<\/script><\/p>\n<p>The above video is embedded in this page using the following html,<\/p>\n<pre class=\"sh_html\">\r\n&lt;video id=\"test_test\" poster=\"test_0001.jpg\" preload=\"auto\" loop autoplay&gt;\r\n    &lt;source src=\"test.mp4\" type=\"video\/mp4\" \/&gt;\r\n    &lt;source src=\"test.webm\" type=\"video\/webm\" \/&gt;\r\n    &lt;source src=\"test.ogv\" type=\"video\/ogg\" \/&gt;\r\n    &lt;object width=\"600\" height=\"360\" type=\"application\/x-shockwave-flash\" data=\"test.swf\"&gt;\r\n        &lt;param name=\"movie\" value=\"test.swf\" \/&gt;\r\n        &lt;img src=\"test_0001.jpg\" width=\"600\" height=\"360\" alt=\"test\" title=\"No video playback\" \/&gt;\r\n    &lt;\/object&gt;\r\n&lt;\/video&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I would like a simple and quick way to save a copy of an image in Photoshop, with an auto-incrementing filename. Ideally, a single button to capture a frame in a stop motion animation. In other words, I would like to save a copy of the working image as a JPEG without any interactive prompts [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11,9,14],"tags":[],"_links":{"self":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/743"}],"collection":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/comments?post=743"}],"version-history":[{"count":10,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/743\/revisions"}],"predecessor-version":[{"id":756,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/743\/revisions\/756"}],"wp:attachment":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/media?parent=743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/categories?post=743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/tags?post=743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}