This is awesome. It's the best thing I've seen for prototyping using AI. My issues with it though:
To me, it's a bit overkill for what you're doing in the example. - create a logical hierarchy in AI - name each element meaningfully - create js functions in html doc for basic ix like hovering
Illustrator is a great tool for illustrating artwork and precise visual design, but it doesn't work very well yet for prototyping. There are faster and more efficient (i.e. code reuse, more control over animations and ix) ways for prototyping. Using HTML + CSS, you can easily make this same prototype in ~15 minutes and use the code for production. Quartz Composer has a bit of a learning curve, but once you get the hang of it, it gives you more control over animations. I'm currently using a visual tool called Antetype, which does not have transition ability, but the basic interactions like hovering or clicking are easy to build. It's like an advanced Omnigraffle.
Also, I miss Fireworks.
I'm looking forward to the day when we get the perfect tool for prototyping...
While I agree with most of your reply. I think the article was meant for people who are not that advanced in coding. For instance myself. I most certainly could not prototype that in 15 minutes unfortunately, and it would not be production quality at the slightest. I think it's a great way for designers with very basic knowledge of coding to get some better interactivity in prototyping done with their files.
I agree with Ryan H.
I think it has a lot to do with which tools you're most comfortable with. I always start wireframing in Illustrator. There might be simpler tools for it, but I like that I can take my wireframes when they're done and actually apply visual styles. Illustrator is powerful enough for that. Now with this process, I can take it one step further and create an impressive demo for clients or colleagues, without having to leave my Illustrator workflow. My point is that it saves me a lot of time because I'm able to iterate on ideas in the same document from wireframe to interactive prototype.
Thanks for the write up. I'm going to try this out.
Hey Tom can you clarify this section for me...
A group's click area will be exactly the area its child shapes cover. To avoid potential gaps in its hit target you can add a big invisible rectangle (zero opacity) to the group. That rectangle should cover what you want the group's hit target to be.
...so from what I understand. The first layer in the group you want a hit target on should be an invisible square that covers the area you want interaction on?
If you have a group of say 3 boxes, you'll need an invisible rectangle in the group to make the hit target area encompass the 3 boxes and the negative space between them. Without the invisible element, the negative space would be a gap in the hit target.
Thanks Brendan. That is correct.
I can even add that it's easiest to then listen for click events on the encompassing group, and not the big rectangle.