7 Replies Latest reply on Mar 6, 2013 5:14 AM by Mal_Reed

    Export selected artboards, PNG24 javaScript?

    Mal_Reed

      Hi All,

      I'm trying to do some workflow enhancements. For our games we need to export to PNG at different resolutions for different mobile devices. I use a artboard per asset and currently manually export 3 times (using file/export/png with use artboards option), at 72 dpi, 144 dpi and 33.75 dpi.

       

      I've been modifying a simple Javascript I downlaoded and have got it save to different fixed locations at different scales. All good. However exporting every artboard each time will cause issues with our version control system and take too long. It's not really a solution.

       

      So I need a way to either only export the current selected artboards (which I believe can't be done) or somewho show the artboard range dialog that the system uses. Either of those would be a good solution.

       

      Can it be done?

      I'm using CS5.

      Here is where I'm at so far - please be kind, I'm a dabbler and not very experienced!

       

      var docRef = app.activeDocument;
      var num_artboards = docRef.artboards.length;
      var getName = app.activeDocument.name;
      var fileName = getName.slice(0, -3);
      
      
      for (var i = 0; i < num_artboards; i++ )
      {
          var destFile = new File("/Users/malcolmreed/Desktop/tests/double/" + fileName + "_" + docRef.artboards[i].name + ".png");    
          var options = new ExportOptionsPNG24();
          options.artBoardClipping = true;
          options.matte = false;
          options.horizontalScale = 200.0;
          options.verticalScale = 200.0;
          options.transparency = true;
              
          docRef.artboards.setActiveArtboardIndex(i);
          
          docRef.exportFile (destFile, ExportType.PNG24, options);    
      }
      
      
      for (var i = 0; i < num_artboards; i++ )
      {
      
      
          var destFile = new File("/Users/malcolmreed/Desktop/tests/standard/" + fileName + "_" + docRef.artboards[i].name + ".png");    
          var options = new ExportOptionsPNG24();
          options.artBoardClipping = true;
          options.matte = false;
          options.horizontalScale = 100.0;
          options.verticalScale = 100.0;
          options.transparency = true;
              
          docRef.artboards.setActiveArtboardIndex(i);
          
          docRef.exportFile (destFile, ExportType.PNG24, options);
      }
      
      
        • 1. Re: Export selected artboards, PNG24 javaScript?
          Muppet Mark Level 5

          Yeah you are using a little more code than you actully need here… AI will export the active artboard… You are looping all artboards at the moment but you could just create a simple dialog to get your range start & end… or use csv. Heres how I would do this ( untested ) you will need to change the last path and scale… You will see I use the loop only once and only change the properties I need for the options object…

           

          #target illustrator
          
          exportPNGs();
          
          function exportPNGs() {
          
                    if ( parseFloat( app.version ) < 15 ) { return; }
          
                    if ( app.documents.length == 0 ) { return; }
          
                    app.userInteractionLevel = UserInteractionLevel.DONTDISPLAYALERTS;
          
                    var i, doc, fileName, opts, expFile;
          
                    doc = app.activeDocument;
          
                    fileName = doc.name.match( /(.*)\.[^\.]+$/ )[1];
          
                    opts = new ExportOptionsPNG24();
                    opts.artBoardClipping = true;
                    opts.matte = false;
                    opts.horizontalScale = opts.verticalScale = 100;
                    opts.transparency = true;
          
                    for ( i = 0; i < doc.artboards.length; i++ ) {
          
                              doc.artboards.setActiveArtboardIndex( i );
          
                              expFile = File( Folder.desktop + '/tests/standard/' + fileName + '_' + doc.artboards[i].name + '.png' );    
          
                              doc.exportFile ( expFile, ExportType.PNG24, opts );
          
                              opts.horizontalScale = opts.verticalScale = 200;
          
                              expFile = File( Folder.desktop + '/tests/double/' + fileName + '_' + doc.artboards[i].name + '.png' );    
          
                              doc.exportFile ( expFile, ExportType.PNG24, opts );
          
                              opts.horizontalScale = opts.verticalScale = 300;
          
                              expFile = File( Folder.desktop + '/tests/someother/' + fileName + '_' + doc.artboards[i].name + '.png' );    
          
                              doc.exportFile ( expFile, ExportType.PNG24, opts );
          
                    };
          
                    app.userInteractionLevel = UserInteractionLevel.DISPLAYALERTS;
          
          };
          
          • 2. Re: Export selected artboards, PNG24 javaScript?
            Mal_Reed Level 1

            Hi Mark thanks for the quick response and for tidying up my newbie code!

            I can understand most of what you have done by reading it, but must admit the way you get the fileName looks like Voodoo to me!

             

            So from what I have now, it seems to enable exporting a region of the artboards, say artboards 2 and 3 I'd need:

            • a dialog box to type the numbers in.
            • new variables to return the numbers from the dialog box, put into the for loop.  startRange = 1; endRange = 3;  for ( i = startRange; i < endRange; i++ ) {

             

            I'll go off and have a look at creating dialog boxes. Again, I'm new to this. If there are some good tutorials you know of, that would be very handy.

             

            Thanks again, you guys here are amazing.

            • 3. Re: Export selected artboards, PNG24 javaScript?
              [Jongware] Most Valuable Participant

              Nothing like a smart, fancy dialog but for a quick solution, you could (ab)use the standard Prompt:

               

              listEntry = prompt ("Artboard numbers", "1");
              list = listEntry.match (/\d+/g);
              alert (list.length);
              

               

              The 'listEntry' text gets split up in numbers with the GREP match command. This returns the value as an array of all consecutive numbers. You can enter separate artboard numbers with anything you like: "1 2 3" or "1,2,3" or even "1a2b3c" -- anything else than a digit will work.

              • 4. Re: Export selected artboards, PNG24 javaScript?
                Mal_Reed Level 1

                Thanks [Jongware], I haven't tried this yet (will have to wait till later) but I'm wondering if you'd need to list all boards - What if the required range was 10 to 75. Would you need to type in all the numbers between 10 and 75?

                • 5. Re: Export selected artboards, PNG24 javaScript?
                  [Jongware] Most Valuable Participant

                  Mal_Reed wrote:

                   

                  ..  I'm wondering if you'd need to list all boards - What if the required range was 10 to 75. Would you need to type in all the numbers between 10 and 75?

                   

                  Um. Yeah, with my simple solution you would!

                   

                  You can use the Prompt to enter ranges, but then you're on your own in "parsing" the proper ranges from the input. With my simple number-grabbing, an entry such as this

                   

                  1, 2-5, 7

                   

                  would return precisely those numbers -- remember, the separators between the numbers don't "mean" anything! To attach 'meaning', you need to verify the entire input string (and so you also must be prepared to return an alert "Bad input"). With this syntax, for example, you could use some code like this:

                   

                  listEntry = prompt ("Artboard numbers", "1");
                  // remove (optional) spaces
                  listEntry = listEntry.replace(/, /g,',');
                  // split on comma's
                  list = listEntry.split(',');
                  // check each entry
                  for (i=0; i<list.length; i++)
                  {
                    // only numbers?
                    if (list[i].match(/^\d+$/))
                     continue;
                    // numbers separated by hyphen?
                    if (list[i].match(/^\d+-\d+$/))
                    {
                      // Peter Kahrel's Expand Number Range!
                     list[i] = list[i].replace(/(\d+)-(\d+)/g, function(full,arg1,arg2)
                       {
                         var j, result='';
                         for (j=Number(arg1); j<Number(arg2); j++)
                           result += String(j)+',';
                          return result+Number(arg2);
                       }
                     );
                     continue;
                    }
                    // no, issue an alert
                    alert ('Bad entry: "'+list[i]+'"');
                  }
                  // rebuild entire list
                  list = list.join(',');
                  // .. and split again in separate numbers
                  list = list.split(',');
                  alert (list.join('\r'));
                  

                   

                  .. as you can see, it's a bit longer than one (= me!) initially expected it to be ... hopefully, you can follow the logic here.

                   

                  Using a fancy ScriptUI dialog, by the way, would not make this any easier, as there is no standard "range" edit control. So you would still need this same logic.

                  • 6. Re: Export selected artboards, PNG24 javaScript?
                    [Jongware] Most Valuable Participant

                    Same as above, but re-ordered for a more efficient operation. It also kicks bad entries out of the list, so you can use what's left right away.

                     

                    listEntry = prompt ("Artboard numbers", "1");
                    // remove (optional) spaces
                    listEntry = listEntry.replace(/, /g,',');
                    // expand number ranges, per Peter Kahrel's suggestion:
                    listEntry = listEntry.replace(/(\d+)-(\d+)/g, function(full,arg1,arg2)
                     {
                       var j, result=arg1;
                       for (j=Number(arg1)+1; j<=Number(arg2); j++)
                               result += ','+String(j);
                              return result;
                     }
                    );
                    // split on comma's
                    list = listEntry.split(',');
                    // check each entry
                    for (i=0; i<list.length; i++)
                    {
                      // only numbers?
                      if (!list[i].match(/^\d+$/))
                      {
                                // no, issue an alert
                                alert ('Bad entry: "'+list[i]+'"');
                                list.splice(i,1);
                                i--;
                      }
                    }
                    alert (list.join('\r'));
                    
                    1 person found this helpful
                    • 7. Re: Export selected artboards, PNG24 javaScript?
                      Mal_Reed Level 1

                      Thanks again for the help.

                      As I'm only interested in the start range number and the end range number, I'm extracting the first two numbers from the list to pass into the export function. I've also done a little work around to enable listing a single number to export just one artboard. It's all working well and will save time, remove some user error and most importantly keep me sane!

                       

                      I've clearly got a lot to learn as I don't understand everything here, but I'm keen to keep learning scripting and improve the workflow of the apps I use daily.

                       

                      #target illustrator
                      
                      exportPNGs();
                      
                      // CREATE the export function and for loop.
                      function exportPNGs() {
                      
                                if ( parseFloat( app.version ) < 15 ) { return; }
                      
                                if ( app.documents.length == 0 ) { return; }
                      
                                app.userInteractionLevel = UserInteractionLevel.DONTDISPLAYALERTS;
                      
                                var i, doc, fileName, opts, expFile, startRange, endRange;
                      
                                doc = app.activeDocument;
                      
                                fileName = doc.name.match( /(.*)\.[^\.]+$/ )[1];
                      
                                opts = new ExportOptionsPNG24();
                                opts.artBoardClipping = true;
                                opts.matte = false;
                                opts.horizontalScale = opts.verticalScale = 100;
                                opts.transparency = true;
                                
                                //=== CREATE THE PROMPT WINDOW====
                                listEntry = prompt ("Artboard range @1:1 scale of 7.2ppi", "0")
                                // remove (optional) spaces
                                listEntry = listEntry.replace(/, /g,',');
                                // expand number ranges, per Peter Kahrel's suggestion:
                                listEntry = listEntry.replace(/(\d+)-(\d+)/g, function(full,arg1,arg2)
                                {
                                    var j, result=arg1;
                                    for (j=Number(arg1)+1; j<=Number(arg2); j++)
                                    result += ','+String(j);
                                    return result;
                                }
                                );
                                // split on comma's
                                list = listEntry.split(',');
                                // check each entry
                                for (i=0; i<list.length; i++)
                                {
                                    // only numbers?
                                    if (!list[i].match(/^\d+$/))
                                    {
                                        // no, issue an alert
                                        alert ('Bad entry: "'+list[i]+'"');
                                        list.splice(i,1);
                                        i--;
                                     }
                                }
                                //===END OF PROMPT WINDOW====
                                
                                if (list[1] >= 2)
                                {
                                    // alert ("this end range is good: " + list[1]);
                                }
                                else
                                {
                                    //alert ("changing end range to: " + list[0]);
                                    list[1] = list[0];
                                 }
                                
                                startRange = (list[0]);
                                endRange = (list[1]);
                                
                                startRange = (startRange -1); //need as it won't export a single artboard, using 5,5 it needs 4,5 start and end range to export artboard 5.
                                
                              //alert (startRange);
                              //alert (endRange);
                      
                                for ( i = startRange; i < endRange; i++ ) {
                      
                                          doc.artboards.setActiveArtboardIndex( i );
                                          
                                          //EXPORT iPhone retina and iPad.
                                          opts.horizontalScale = opts.verticalScale = 100;
                      
                                          expFile = File(Folder.desktop + '/tests/standard/' + fileName + '_' + doc.artboards[i].name + '.png' );    
                      
                                          doc.exportFile ( expFile, ExportType.PNG24, opts );
                                          
                                          // EXPORT non retina iPhone.
                                          opts.horizontalScale = opts.verticalScale = 46.875;
                      
                                          expFile = File(Folder.desktop + '/tests/half/' + fileName + '_' + doc.artboards[i].name + '.png' );    
                      
                                          doc.exportFile ( expFile, ExportType.PNG24, opts );
                                };
                                   app.userInteractionLevel = UserInteractionLevel.DISPLAYALERTS;
                      
                      };