Drawscript - turn Illustrator shapes into code

I've just launched a little extension for Illustrator I've been working on called Drawscript - http://drawscri.pt
It converts Illustrator shapes into code (Obj-C, C++, JavaScript, Processing, ActionScript 3, JSON, Bezier array).
It's great for skinning UIs, creating vector assets for gaming and learning/teaching vector graphics programming.
If you have any comments, found bugs, etc. Let me know here or on my Twitter, Facebook, Google+.
Thanks!
Tom

Tried it on a few old illustrator files of mine and noticed that 'Javacript Canvas' often seems to have problems.
Selected all objects: no output in Javascript Canvas window
Selected one brush stroke: no output. Selected another brush stroke made with the same brush: output
Selected a region: no output. Selected another region of strokes/objects: output
Shapes seem to work fine so I converted all brush strokes to fills: no output or it makes illustrator freeze with the 'rainbow' cursor
Drew 50 standard shapes like rectangles, circles, stars, selected them all: output
Drew 50 brush strokes all made with the same brush: no output
Converted those 50 brush strokes to fills as it seemed to have less problems with shapes: still no output
Other languages seem to have less problems, though sometimes it takes a while looking at the rainbow cursor. Standard shapes work the best and fastest. More complicated objects like brushes seem to give them more problems. For other languages it takes a while for them to give output. Javascript Canvas often don't give output on brush strokes at all. Also not when converting them to fills.
All things which are still worked on when the final version comes out?

Similar Messages

Problems turning Illustrator pages into PDFs at the SAME SIZE...?

Something weird is happening for me, when I attempt to turn Illustrator layouts in PDFs or maybe it's "normal" for Acrobat to do this, but I don't like it and I want to fix it...
I have a page laid out in Illustrator. It's RGB, 1024x768 pixels in size, and has various JPGs at 72dpi placed on the page, and it has text on it too.
Everything is laid out pixel-perfect, and when I view it at 100% size in Illustrator, that's the size I want to the PDF to be as well, when the PDF is viewed at 100% size. The PDF is going to be viewed on-screen and the images contained in the file have various lines and suchlike in it that absolutely have to be viewed at 100% size, or they appear all blurry.
So I have my Illustrator document, at 100% size, and it looks perfect. I go to File > Save A Copy and save a version of it as a PDF.
I use the Illustrator Default settings (which, when I go through them all one by one, would indicate to me nothing about a file size conversion, no downsampling, etc.) and my PDF is generated.
However... when I then open up the PDF file in Acrobat Professional, the page it has created is way larger than my Illustrator page. So if I view my new PDF at 100% size, not only has the 72dpi image gone all blurry, but the boundaries of the page extend off the edge of my screen.
I would hazard a guess that in order to get my PDF to appear at the size it *should* be, I have to view it in Acrobat at *about* 75% - but the images are still blurry, because of the re-sizing.
So all I'm asking is for a simple way to get what's in Illustrator to convert to PDF at the same size.
Surely there must be a way?
Any help anyone?
I'm using Illustrator CS3 13.0.2 and Acrobat Professional 8.1.2, running on Mac OS X 10.5.2 on Intel.

> You can't. Well, YOU can, by adjusting your resolution setting in Acrobat...
>No, even *I* can't. *MY* views in Acrobat and Illustrator of the SAME document, when BOTH viewed at 100% are DIFFERENT sizes.
Because you haven't adjusted your resolution settings.
>And what do you mean by "adjusting your resolution setting in Acrobat" anyway? I *assume* you mean by adjust your view magnification settings?
No, that is your current magnification. Your resolution is set in the
"page display" section of Acrobat's preferences. Each user can set it
differently.
>But if I lay out a document or image intended for print in InDesign or Quark or Photoshop, the way I see it when I view it 100% size will be exactly the same as anyone else on any other computer will see it when viewed at 100% size.
Not in Acrobat.
> Acrobat is also used to create on-screen presentations, complete with hyperlinks and page transitions options, which obviously have no use in the print world.
Indeed. And people have free choice of how to view them. What you
can't do is do pixel-level design. You can control the open options,
like what magnification, whether the full page is visible, but you
can't control how many pixels that uses, so you cannot match it to
some other application.
Aandi Inston

How to turn 2 shapes into 1?

Hey there everyone ... Level: Newbie'ish OS: Win7-64bit PS: CS6
I would like to take 2 Rounded Rectangle shapes that I have rotated by 45 degrees and make them one shape so that the Paths of each rectangle become one.
I've looked up Paths, Shapes and other things in the manual but I've been unable to narrow down the right keywords to find what I'm looking for.
I have used the Pen Tool but I'm not satisfied with the outcome of the Rounded Corners. I know I can use Combine Shapes but not when I first need to Rotate the shape.
Pretty sure I've done this before but for the life of me I cannot recall how nor can I find it in my notes.
Here's a pic of what I want to change into one shape with one continuous path.
Sure would appreciate your ideas and/or any links to info that could help me to accomplish this
Thank you for your time.

you can also try:
two shapes are made on separate layers
select the two layers, select merge shapes
merged shapes into one layer
-janelle

Photoshop or illustrator compositions into edge code

ok so I could have swore I saw someone in an adobe youtube video take an illustrator or photoshop comp and put it into edge code, which in turn wrote the css for him.. it looked like he made what his site should look like in Ai or Ps and then edge code interpreted it into code.. I am a designer and I can write a little code jus not to the extent of what I want the site I;m working on to look like.. is this possible???? or am I losing my mind??

Hi Kurt,
You might be thinking of this: Comp to Code Tool in Brackets – Brackets Blog
However, "PSD Lens" doesn't automatically convert the whole PSD file into CSS for you in one go -- it just helps you extract targeted styles like gradients and background-image assets while you write the larger-scale CSS structure yourself. If you're not very comfortable writing CSS yet (e.g. creating layouts with CSS), you might have a difficult time using this tool. Another option is to import your Photoshop file into Adobe Edge Reflow, use Reflow to create a resizable/responsive layout structure, and then export your project as HTML & CSS.
Hope that helps!
- Peter

What is the best way to turn line art into a 3D image in Illustrator? Thanks for your help.

What is the best way to turn line art into a 3D image in Illustrator? Thanks for your help.

What version of Illustrator? What do you mean by "Line Art"? What do you mean by "3d image"? Post images showing your starting artwork and an example of what you are trying to achieve.
If you have Illustrator 12 or higher you can extrude or lathe a simple group or path using Effects > 3D > [Pick one]. You must start with vector data, not a placed raster image. You are very limited in what you can do, and you cannot model multiple objects within one 3D world. Each object you extrude/revolve/rotate is its own world, with its own perspective and camera. You can also make any art into a Symbol, then map that symbol onto any 3D surface you create. The results are, at best, acceptable, and often total garbage.

How do I turn a shape layer into a mask in After Effects?

How do I turn a shape layer into a mask in After Effects?

I should also mention that if you create the shape with any of the shape tools (rectangle, Polly star, eclipse) instead of the pen tool you will have to convert the shape to a bezier path before you can copy the path and paste it to a mask. Easy to do if you have the recent version of AE, not so easy if you're using an older version.
when you have trouble figuring things out simply type something like track matte in the Search After Effects help field at the top right corner of the AE application frame. You will get these resources: http://www.adobe.com/cfusion/search/index.cfm?cat=support&term=Track%20matte&loc=en_US&sel f=1&lr=en_US&site=aftereffects…

How do I turn a Smart Shape into a Button?

Using Version 7, on a Content Master Slide how do I turn a Smart Shape into a Button?

Hi there
It's really hard. You have to look at the properties of the Smart Shape.
Cheers... Rick

Comments turning into code when clicking checkmark

When I receive a PDF with comments, clicking on the checkmark to show the comment as completed turns it into code as in the screen shot. Any ideas??

Hi tamayo,
Are you trying to select the option 'Add Checkmark'
or 'Set Status' as 'Accepted'
If you try to edit the 'Text box' or 'Text callout' from the comment pane then it converts it into xml code. This is a known issue and a Bug has been logged for the same.
When you mark the comment status as 'completed' it does not change into xml code.
Regards,
Rave

How to embed an illustrator file into a word doc to make a template

I am trying to make a word template for my company's proposals that we send out to clients. I have created the image in illustrator as an 8.5x11 and saved it for 'web & mobile' use with the highest quality setting. I open the document in microsoft paint, copy everything, and then paste it into the header section of my word doc. I choose the option to bury behind text. My problem is that when I paste from paint into word, the document shrinks and is no longer 8.5x11. This requires me to stretch the image, but it pixelates it beyond what I can allow to be used. Is there an easier way to make a word doc template? I am using Illustrator cs4 and Microsoft 2007 (I know, its really really old).

http://office.microsoft.com/en-us/word-help/insert-change-or-remove-background-colors-imag es-or-text-in-a-word-2007-document-HA010097032.aspx?CTT=1 Turn a picture into a background or watermark You can turn a picture, clip art, or a photo into a watermark that you can use to brand or decorate a document. 1.On the Page Layout tab, in the Page Background group, click Watermark. 1.Click Printed Watermark. 2.Click Picture watermark, and then click Select Picture. 3.Select the picture that you want, and then click Insert. 4.Select a percentage under Scale to insert the picture at a particular size 5.Select the Washout check box to lighten the picture so that it doesn't interfere with text. The picture that you selected is applied as a watermark to the entire document. Tip If you want to use an object, such as a shape, as a watermark, you can manually paste or insert it into the document. You cannot use the Printed Watermark dialog box to control settings for these objects.

After Effects equivalent to Illustrator shape blend effect?

Hi Guys,
I would like to create the Illustrator blend effect inside AE. Is there any way to do this? I would like to setup 2 (pref more) shapes and blend between their boundaries (using colour & shape parameters) so that I could then freely move these shapes around and the blend would continue to adjust with the shape changing/moving etc.
Something such as this;
That I can then animate to by moving the circle shape to this;
Any ideas/suggestions?

As Mynelium stated there's no way to do this directly, but you can use a combination of Illustrator, AE and two expressions to do this. It's a simple process if you understand the Illustrator Release to Layers function.
Here's how to do it.
Create your blend in Illustrator
Specify the number of steps or use smooth color for the blend
Expand the blend appearance
Select the grope that is created
Use the Release to Layers Sequence command in the Layers Palette
Select all of the released layers in the Layers Palette and drag them above the top layer.
Save your Illustrator file
Import your Illustrator file into AE as a Composition with Cropped Layers
Name the top layer "top"
Name the bottom layer "base"
Apply the following expression to one of the other layers rotation property:
t = thisComp.layer("top");
b = thisComp.layer("base");
o = index/b.index;
bp = b.rotation;
tp = t.rotation;
op = tp + (o * (bp - tp));
op
Copy the rotation expression only
Lock the top and bottom layer
Select all layers
Paste the expression
Add almost the same expression to any layer's position property:
t = thisComp.layer("top");
b = thisComp.layer("base");
o = index/b.index;
bp = b.position;
tp = t.position;
op = tp + (o * (bp - tp));
op
Copy the position property expression only
Select all layers and paste
Here's how the expression works. The layers order is turned into a percentage by dividing it's index (layer number) by the index of the bottom layer. The difference between the top layer's position and the bottom layer's position and rotation is calculated by subtraction and multiplied by the offset percentage then added to the top layers position and rotation. It's actually quite simple when you can visualize it.
The end result looks something like this:

Need to turn this PLSQL into a procedure

Hi All,
I have the following PLSQL which declares a cursor, then loops using the cursor variable. I'm new to creating procedures and packages and i'm having trouble turning this PLSQL into one of those. When i put my PLSQL code in a procedure it doesn't like the DECLARE statement or the CURSOR section. I'm not sure how to tweak it to get the syntax correct for a procedure. Can someone point me in the right direction?
Here is the PLSQL:
DECLARE
/* Output variables to hold the result of the query: */
groupid assignment_group.id%TYPE;
/* Cursor declaration: */
CURSOR Asset_Rank_HistoryCursor IS
select distinct id from assignment_group;
BEGIN
OPEN Asset_Rank_HistoryCursor;
LOOP
/* Retrieve each row of the result of the above query into PL/SQL variables: */
FETCH Asset_Rank_HistoryCursor INTO groupid;
/* If there are no more rows to fetch, exit the loop: */
EXIT WHEN Asset_Rank_HistoryCursor%NOTFOUND;
/* Insert the the new rows */
insert into ASSET_RANK_GROUPED (asset_id , dt, rank, score, ASSIGNMENT_GROUP_ID)
select asset_id, max_dt, rownum, score, groupid from (
SELECT <big nasty select statement>
END LOOP;
/* Free cursor used by the query. */
CLOSE Asset_Rank_HistoryCursor;
END;
How do i change my DECLARE and CURSOR statement so the procedure will create. Do i need to break it out into a function?

I figured it out... just had to play w/ the syntax. Had to make sure the BEGIN statement was AFTER the CURSOR declaration and had to make sure any variables are declared up top, didn't need a DECLARE section in procedure. I just put the groupid variable right after IS at the top of procedure creation statement.

How can i insert a heart shape into keynote

Hi I am new to IMAC and want to insert a heart shape into Keynote so I can colour code it and write text inside - can someone help please -I've tried the drawing tool but no success!! thanks

"I've tried the draw tool but no success." - Do you mean the tool in the shapes pull-down? It seems to work for me, but I'm not an artist. You might try importing a heart shape you want then use the draw tool to trace around it to get the correct outline you are looking for. When making a shape with the drawing tool, don't forget to place the last edit point over the first and double-click to complete the shape outline. Once drawn, use the graphic tab of the Inspector to assign a fill color. Clicking inside the shape should allow you to add text.
Good luck.

Placing Illustrator shapes in Photoshop

I have followed the instructions on adobe's pages about placing illustrator files and shapes into photoshop but I am still getting a pixelation of the AI shape or element once it's been placed as a smart object.
Any suggestions on what I am doing wrong? I am running out of time for my class asisgnment due tomorrow.
thanks!

Try this video. The other one shows how to create your problem rather than solve it.
http://www.youtube.com/watch?v=jSgUuzqZpC8&feature=related

How to turn a silhouette into an outline?

I need to create a line drawing of the outline of a chair. I tried following the various Illustrator tutorials to take the image of a chair and create a silhouette. However, I can't figure out how to take this silhouette and get just the outline of it. The Illustrator Image Trace tool doesn't seem to have an option to just save the outline.
Is there an easy way in Illustrator or Photoshop to turn this silhouette into an outline image that I can save as a file? I will print the outline in a very light opacity so that the lines are barely visible for hand rendering. I don't want to use the pen tool to outline the silhouette because my hand is too shaky to do a good job.
THank you for any advice...

Thank you Monika and Steve for suggesting to ungroup and then use the direct selection to edit it, and to change the fill to zero and the stroke to a very thin line.
It turned out that the outline was very wavy/crooked, since image trace outlined the pixels somewhat haphazardly. So the final solution was complicated because I had to learn how to use direct select and edit anchor points to straighten out the lines.
I guess it would have been easier to use a light box and just trace the image by hand. oh well. I learned alot about Illustrator.
Thank you again for your helpfulness!

Turning an icon into a button in a table

Currently, I access a database in my program, and if I find an 'X' in a specific column, I place an icon in that field. What I would like to do is have that icon act as a button, that will pop up a screen with further information about the table line item. I am new at Java, and not sure what to do next.
Here is the code for my table model:
class sciTableModel extends javax.swing.table.DefaultTableModel
     public sciTableModel()
          super();
     public sciTableModel(java.util.Vector data, java.util.Vector columnNames)
          super(data, columnNames);
and here is the code for my renderer
class IconRenderer extends DefaultTableCellRenderer
     public Component getTableCellRendererComponent(JTable table,
     Object value, boolean isSelected, boolean hasFocus, int row, int column)
          ImageIcon iconl = new ImageIcon("info.gif");
          String headerText = (String)value;
          // System.out.println(headerText);
          JLabel headerComponent =
          ((JLabel)super.getTableCellRendererComponent(table, value, isSelected, hasFocus, row, column));
          headerComponent.setHorizontalAlignment(SwingConstants.CENTER);
          if (headerText != null)
               headerComponent.setIcon(iconl);
               headerComponent.setText("");
          else
               headerComponent.setIcon(null);
               headerComponent.setText(null);
          return headerComponent;
In the public class I set the renderer, and in the actionevent that runs the database access I use the tablemodel.
Any help on how I can turn this icon into a button would be appreciated.

In A JTable, the render has the job of drawing one or more cells, but it's a rubber stamp -- it doesn't
respond to events like a true component. What you describe isn't the job of an cell editor either,
since, obviously, nothing is being edited. That leaves JTable itself: I suggest you write a mouse
listener for your JTable and respond appropriately when the right cell is clicked:
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class Test {
    public static void main(String[] args) {
        JTable table = new JTable(20, 5);
        table.addMouseListener(new MouseAdapter(){
            public void mousePressed(MouseEvent evt) {
                JTable t = (JTable) evt.getSource();
                Point point = evt.getPoint();
                int col = t.columnAtPoint(point);
                int row = t.rowAtPoint(point);
                if (col != -1 && row != -1) {
                    int modelCol = t.convertColumnIndexToModel(col);
                    System.out.println("clicked on model cell (" + row + "," + modelCol + ")");
        JFrame f = new JFrame("Test");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(new JScrollPane(table));
        f.pack();
        f.setLocationRelativeTo(null);
        f.setVisible(true);
}As the code demonstrates, don't forget to translate from view columns to model columns.
By the way, why are you subclassing the default table model? You aren't changing any behavior...

Drawscript - turn Illustrator shapes into code

Similar Messages

Maybe you are looking for