- Last post
- 19 Responses
Does anyone have the experience of animating Illustrator files?
I'm working in this Web Layout with Illustrator and now I would like to animate the files to reproduce/simulate the website's navigation and effects like from screen to screen, hover over menu, etc...
Would you animate in Illustrator (SWF!?), in After Effects or in Animate?
Does this make sense?
What would Jesus do?
after effects for me.
ah sketch...thought so.
my first thought was to use Photoshop and make some gifs...but then I thought that would be too much work and certainly not the best way.
then I remember that After Effects has this motion tool and thought about Ram's gifs of set here in QBN.
so I did a brief Google check and several options popped up.
so I had to ask but I would go for After Effects first actually.
i agree with lvl_13
as for jesus, he would shit himself silly trying to comprehend the awesome power of the microchip. he knows nothing of such things
ae and illustrator... how come sometimes vector images don't render correctly and still show rasterizing on vid playback
asking for my sanity
- I've never had that experience. Where there raster effects on some of your shapes? Anything else unusual going on?CyBrainX
- my old ae, perfect, cc has me hating the platform :(imbecile
- AI files are rendered when imported into AE, check your original file's resolution and make sure it'd look good in HD.zarkonite
- I personally copy everything into an AI file based on the Video/HD template when I prep files for AE.zarkonite
- it's been an ongoing issue in cc, shouldn't vector look perfect no matter what the size?imbecile
yea, after effects here too, I do a bunch of these all year
usually ppl send me sketch exported pdfs, I then open it on illustrator, cleanup some garbage it generates and then export to psd so I can have editable texts in after effects
Is Flash still around?
If not AE.
I just installed AE and gonna spend the night watching some tutorials.
I will start with something simple, menu hover effect.
oey, if you are animating a mouse, look into using Motion Sketch tool in after effects, it records the movement you do while dragging a layer
okay, after watching 3 tutorials and having started and quit a couple more I managed to make a menu pop up in just 10 minutes.
homepage, click hamburger menu, menu background slides in from under, menu list comes very shortly after, close menu pops up last but almost immediately.
now i'm gonna try that motion sketch tool.
one day animating what I already did will show how much work has been done already both design and concept wise.
can't wait for the arrows...this will be fun.
a new door has been opened! muahahahahaha!
Well, you're probably beyond this point by now, but it's mostly a matter of separating layers.
Also, you will have to reset your type in AE if you want it editable. For some reason you can't convert those text layers in AE like you can with Photoshop layers. You can also right-click on any of your Illustrator layers in AE and convert them to shape layers if you want. That way you can edit paths.
- Also, what are you going to do with this animation? If you're fine with straight video, I wouldn't consider any other option than After Effects.CyBrainX
- hey! i saw a great tutorial vid about converting things to shapes but i don't think that for a weblayout it would make so much sense, maybe i'm wrong.oey
- separating layers was the first thing I learned ;)oey
- I'm gonna use these animations to show the client how the web page nav should look like, from one menu to the other, from one page to the next, etc...oey
- what happens when the mouse hovers, when i click something, the dynamic of the page, scrolling, etc...oey
- these animations can be used by the developer to use as guidelines to program the website according to my design and clients wishes.oey
- as i never did this before i have to confess that my use of words to explain things might not be the most correct one.oey
- No, I completely get it. It's an animated demo for developers. They'll probably piss their pants you went all out for them. Imagine what they usually get.CyBrainX
While we're on the subject of animating for web, I'm going to leave this here: https://google.github.io/inspect…
"Specs are a necessary part of communicating UX to engineering. It's often difficult and time consuming to deliver the data required to replicate motion on device. With Inspector Spacetime you can generate this data alongside the reference quicktime, with just one click."
This is a huge time saver when trying to explain to a dev how to fucking ease motion ;)
cool, some tips on creating an animated demo for developers:
1 - don't use filters, most AE filters are not translatable to html, so no blur, motion blur, turbulence stuff, glow, etc
2 - you have to use only transformations, that are : position, rotation, scale and opacity
3 - I usually do a "master_scroll" null object at x:0 y:0, so I can parent stuff to it and just scroll it, or even parent other nulls to scroll differently
4 - you can use masks, but keep in mind that they need to be without any feathering (either layer masks or path masks, layer masks are more like the masks they have in code)
5 - motion sketch tool for animating a mouse, if you're doing touch, usually people animate a "finger shadow", that is that little grey disc that mimics the finger gesture on your interface
5.1 - leave the mouse or finger animation to the end, the last thing you'll do, because you can spend time animating your layout, make it play nicely, then throw this composition into a new one and animate your mouse there, so you keep things separated
6 - (this is more of an all around AE tip) on your key frames, you either F9 it (easy ease) or ctrl+click them (to be linear or continuous), you can achieve almost every animation with these types of keyframes. But if you want that fancy code-like motion, you can alt+double click on a keyframe and enter values.
the one that looks more code-like, is having 0 speed and 100% influence at your end keyframe, and the start keyframe just with F9
hope this helps a bit!
- ah! i can use opacity!!!! fuck that makes it so much easier. how could i not think about it!?i worked with video editing ages ago as well...thanks!oey
- these are great tips! everybody posting really helpful stuff I just don't have the time to check everything in the moment.oey
- but I will learn it ;)oey
answering my own question after 5 days I'm using:
After Effects for effects on transitions, button, etc...
XD for navigation prototype
totally loving XD...
thanks for all your great tips!