Scripting Adobe Illustrator. How to apply an effect? - javascript

My script should select some items and apply Effect->3D->Extrude&bevel to them.
Which objects and methods should be used?
I use JavaScript in AI CS6.
Thanks.
--
Update: I need to set the values for effect parameters (angles, depth etc.) in script.
--
Update 2: Probably it's possible to patch an AI file with needed values for the GraphicStyle, and then open it and apply the style where needed. But I'd like to know if there is less dirty solution.

Using documents[0].selection[0].reflect.properties in ExtendScript toolkit to find out what properties basic paths have, I don’t see any way to set this effect directly.
When I search the JavaScript Reference for Illustrator, the only mention I see of appearance is when it talks about graphic styles.
So what I tried was drawing two rectangles, applying the 3D effect to one of them, and saving it as a new graphic style:
Then in the script, you can select the other rectangle and then apply the graphic style with
documents[0].graphicStyles[6].applyTo(documents[0].selection[0])
Unfortunately, the documentation does say
Scripts cannot create new graphic styles.
One thing that might be work would be to distribute a document with the script that has all the graphic styles you might want to apply, and then apply them to objects in the target document…

Related

Spacefield with Jquery

i want to program a 2D-sqare Gamefield. The gamefield shall consits of 9 subfields. The Gamefield shall be an Image, like an Spacefield or so. Here you can see the concept, and how it shall later look like (just a mockup :P)
Within this field i want to move a Object from one field to the other (vertical /horizontal) . But i don't know how i can realize that. I had think of an multidimensional array, but i don't know if this is the right way to do this. I need to know, at which pixel in the image the new field begins. But i think its no good idea to code that hard. I want to do this with Jquery, CSS and HTML. It shall become a very simple online game.
Qapla'
In game development these fields are usually called tiles.
It's perfectly fine to create a multidimensional array of Tiles.
Whether they hold their own position or if it's up to a separate renderer is up to your design.
Some links you might be interested in:
Tiles and tilemaps overview (though this uses a Canvas-element)
Using CSS transitions for smoothly moving from one Tile to the next (not as useful when using a Canvas)
jQuery animate if you don't like CSS transitions, you can make use of jQuery as well.
I'd recommend reading up on Tiles in game development first, there are tons of example implementations.

Determine if gaussian blur is set with a script in adobe illustrator

I have a variety of documents in adobe illustrator. I have a script that performs certain tasks on them, however I don't need all the tasks performed on all of the documents. I need some tasks to be performed only on documents with a gaussian blur set. I have no problem scripting the tasks in JavaScript but I can't figure out for the life of me how to determine using JavaScript if a blur is set on an object in a layer. I know how to loop through the objects and layers, I just don't know what property to look for to determine if the blur is set and by how many pixels the blur is set. Any help would be appreciated.
If there's a graphic style on the object, you can at least determine that it is associated with it by a crude way of pasting the object into a new temp document and taking a read of any new graphic styles which appear in the graphic styles panel.
Other means of determining non-script accessible styles on art may involve expanding the art (probably duplicate it first) and checking if any rasters appeared where there only are supposed to be vectors.
This is really a weak point for scripting and solutions such as these are only for particular subsets of cases.
It may however be possible to make a plugin which gets called by the script, but that would involve the Illustrator SDK and C++

Clicking area of image to change that area's color

How does one implement functionality similar to the one shown in this gif in a website?
Specifically, the part where the user clicks on a (non-rectangular) area of the image and that area then changes colour.
A long, long time ago when the internet was still young, there was something called image maps. Is that still the preferred approach? I heard about svg, does that provide this type of functionality? What about canvas?
I don't know about image maps to get them in this shape of hit areas.
But I recommend using canvas for these type of applications.
You have multiple options for doing that, being image maps one of them. However, I wouldn't do it with it, nowadays, there are better solutions.
You can either use canvas, as suggested before, for example using a canvas library like http://fabricjs.com/ or, maybe a bit easier, using SVG elements.
The benefit of SVG is that they render as normal DOM elements in a website, so you can debug then in the inspector, attach normal click events to them, style them using CSS, etc.
multiple options for this.
SVGs + CSS
CANVAS animations
FLASH( wouldn't recommend this option.,Pretty outdated)
Plain html css (But this wont be customisable in future for different shapes, a lot of time consuming when compared to other ways and confusing unless written with good documentation.)
html+css way: you can always make most of the geometrical shapes with css and html. But, curves we have svgs to go for and use css/svg transitions for visuals

Change object colors inside an image

I would like to know the best web technology/js library to achieve this functionality. I need to change the colors of specific objects inside an image. I need to develop a tool where they can choose a color and the objects inside the image will turn into that color.
This is a very close example of what I need. I've been reading about canvas but I haven't been able to find anything close.
www.msistone.com/virtual-kitchen-designer
Thanks in advance!
There are no magic or elaborated algorithm on it. They simply are using some PNG images and then they put the style tiles images before, so it looks like a texture changed or like if they uses a filter. You can realize of how it works watching the source code
The simplest way to target specific objects ( wall tiles, tables, floors, etc. ) within an image is in post production with an image editing application such as Photoshop, Artweaver, Paint.net, Inkscape, etc. and switch out images upon user selection using CSS or JavaScript. You replace the entire image this way and the minor changes show through when the image is switched.
If you don't want to do this manually there is no easy programmatic approach. For more information on coding applications to recognize objects look into machine learning and shape recognition algorithms but I suspect that is beyond the scope of a simple web app.

Plotting interactive (dom elements/objects) points using Java script (JQuery)

I am trying to make a webpage, where I want to plot points with which I can associate Mouse events (Jquery).
So, I guess I want them to be dom objects and not want to just paint them. (Please suggest if we can paint using html5 and still treat them as dom elements)
So essentially I have a text files with x,y co-ordinates and I want to plot those but want to associate Jquery events with them. for example: on left clicking them a graph appears or right clicking them a menu appears depending on which node I clicked.
Imho, it would be a very silly approach, to write DOM elements with lines and dots.. For instance, how would you make a round line - you could create diagonal lines with border CSS styling but.. Well - there are many options available! Another approach could be Highslide.
jqueryui-visualize
jQuery top5 graphing tools
http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
Demo
Dojo Toolkit
Since you for some reason have tagged this with dojo, check out this blog entry;
http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
2dChart Demo
Read about Scrolling / Zooming here
Zoom Demo
Here's a nice little introduction slideshow from an apache user
Well, several approaches.
You can take your coords and create absolute positioned elements on the DOM using those points. Using jQuery you can set 'top' and 'left' points to position them. This method may be easiest for you because jQuery can easily apply click events.
You can use the HTML5 canvas and draw shapes onto it using the coords from your file. With this method you would either need to write your own event library or use libraries already written such as kinetic.js. Also styling these is going to be a bit less dynamic and extensive than using DOM objects and CSS as with the first method.

Categories

Resources