Slideshow/Video with hundreds of World Maps

[matthiasg44052794]

Hello!

We design hundreds of world maps with Adobe Illustrator
which we want to include in a slideshow and video. Each world map is a
(multi-layered) Adobe Illustrator artwork (.ai). The layers are needed in order
to create animations (such as pulse effects for different dots
on each map). We save each world map as Flash

(*.swf) file which is the standard way for
creating animated maps.

*.sfw files cannot be imported into "Lighroom" and "Premiere".

So we are thinking of creating animations with "Adobe After Effects".

Question 1:

Is there any automated way of creating animations for hundreds of dots on hundreds of maps?

Question 2:

Does Adobe After Effect incorporate programming languages (such as CSS3, Java...)

With these tools animations can be programmed I think.

Thanks,

Mat

[Mylenium]

None of this will work with your SWF workflow, so simply forget about it and ditch it. Even AE can't access the internal structure of an SWF, it merely treats it like any other vector artwork. You are wasting your time even thinking along those lines and from where I'm standing, having a knack for info- and datagraphics, the whole workflow is kinda wrong. You simply wouldn't do it this way. If you were to produce your SWFs natively in Flash/ animate CC, you'd simply use symbols and their instances to animate repetitive elements. In the AE world this translates to using pre-comps and placing them on your static maps. As it is, you are jumping way too far ahead in AI with your preparation work and that throws a wrench into the workflow down the production chain. It simply makes no sense at all. That being the case, I would suggest you rather focus on improving your skills in AE or Flash and learning to use the tools there in tha fashion I described. Yes, of course you can also use expressions and scripts, but a lot of times it won't be necessary if only you learn the fine art of sensibly structuring your pre-comps, work with AE's native text tools and shape layers and of course some clever effects magic to keep things editable in AE without constantly having to use Illustrator.

Mylenium

[matthiasg44052794]

Thanks,

Could you kindly explain me how pre-comps work efficiently if you have many dozens of dots to animate on hundreds of maps. Instead, what do think of this workflow:

(1) Create layers in AI in which the dots are designed according to animation states (e.g. dots of different size);

(2) The AI-layers are imported as AE-frames;

(3) The AE frames can be arranged in temporal order (thereby creating an pulse animation effect);

(4) Save the *.aep file as video. 

Thanks for a feedback, Mat

[Mylenium]

Nah, sorry, but this still doesn't make any sense. Nothing stops you from creating different pre-comps for dots of different sizes. Likewise, you would simply animate any pulsating inside the comp or by linking it to some global expression formula with a slider. Even if hand-keyframed this then can be simply re-timed by placing the pre-comps at the right times, time-stretching them and trimming them as needed. The only trick is to place the animation at the middle of the comp and create a long enough standard duration so you can do all this snip-snap. You are really overcomplicating this, even more so since there are at least three different ways to create sharp circles natively in AE:

1. The Circle effect
2. Shape layers
3. a solid with a mask set to continuously rasterize

Again, there is no requirement to do any of this in AI where in fact it would be ten times more complicated to boot. You really need to get out of this one-way-road thinking or you'll spend the next year doing your maps and tying up your company's resources when otherwise it might take a reasonably experienced artist two or three days to do at most. A lot of this stuff really can be done in AE and in fact it can be even more efficient because you may not need to place every point because you can recycle points that have moved out of view and reuse them on another spot on your scrolling map. And no, this doesn't only apply to dots, but also complex symbols. Even fancy stuff can be created natively in AE, you just need to get over your own insecurity and insistence on using AI just because you know it and want to play it safe.

Mylenium

[Rick Gerard]

If you have an element like a dot on a map that is repeated dozens of times on a single map then you have two choices. The first is to create a comp that is about the same size as the animated dot at it's largest point. Now you have to consider time and how you what to time the animation. If the dot needs to be on the map for the entire duration of the main comp and at some point get bigger and stay bigger then you create a comp that is twice as long as the main comp and animate the dot growing in the middle of the comp. Then put a marker on the comp so you know where the animation starts.

Now you just nest that comp (pre-comp) in the main comp, adjust the position and then slip the nested animated dot in the timeline so that the marker is where the dot needs to grow. You can nest this animated dot as many times as you like in the composition and adjust the position and timing as needed.

A more efficient way to do this would be to create an expression that animates the dot based on the position of a marker on the layer and save it as an animation preset. The dots on the map would not be pre-comps, they would be already positioned layers. Now you just position the CTI (current time indicator) where you want the dot to start animating, add a marker to the layer using a keyboard shortcut (Control + 8 on a Mac) and then add the animation preset. If you have 10 of these to do you don't even have to browse to the animation preset you just use the keyboard shortcut for the most recent animation preset. This would be more efficient.

If you don't want to mess with expressions you can save an animation preset that uses keyframes and just place the CTI where the animation should start and apply it. Messing with nested comps does not sound like an efficient way to go to me if you are animating the same or similar elements multiple times on a map because if you were trying to use the same nested comps multiple times in a single comp each one of them would have to be individually positioned.

For example, when I'm doing dynamic text animations (explainer videos or lyric videos using animated text) I create a layered AI file with the text and other elements arranged in the hero position for each phrase in the video. When that AI file is imported as a comp all I do is move the CTI to the point in the story where all of the layers are in their resting position and set a comp marker and start applying animation presets. I back up and set out points or markers that correspond to the starting points of each movement, then I move past the hero position and do the same to move the layers out of the shot. I can do 10 words flying in from different directions, bouncing to a stop and then flying out in about a minute, check the timing and adjust it by moving a marker or an in or out point and then move on to the next phrase. What would take a day to do by hand or by duplicating nested comps and adjusting their position and timing can be done in a couple of hours. The comps are rendered and the final edit is done in Premiere Pro.

By the way you don't save the .aep file as a video, you render it and it's going to take a long longer than you think it will.

If you have complicated movies that involve more than a few shots you created in After Effects you will almost always be better off creating a 5 or 10 second comp for each point you are going over, rendering those comps, and then editing the final product in Premiere Pro. Using your maps to create a 15 minute video explaining the movement of troops in the second world war as a single comp would be a really great way to get frustrated waste more than half of your production time just fiddling with timing and all those layers.

[matthiasg44052794]

Thanks very much to all for your feedback. I am doing some tests and might get back with further questions.

Mat

The maps have to be designed in AI with different layers, because it is only for this software that we can use GIS technology.

[angie_taylor]

The good thing about the method I described above is that you can do the entire thing in Illustrator. You can then open the animation in Adobe Animate and output it to whichever format you choose.

[Rick Gerard]

Here is an expression for you to try. The first is for Trim Paths to make a stroked path on a shape layer start drawing at the in point of a layer and end at the first marker on the layer.

ep = marker.key(1).time;

ip = thisLayer.inPoint;

easeOut(time, ip, ep, 0, 100)

Explanation of the expression:

the ep variable is just the time of the first marker on the layer as defined by the marker.key(t) method

the ip variable is the layer's in point defined by the inPoint method

the ease method takes the in point time of the layer and the time of the marker and eases the output between 0 and 100

(edit - this is a better expression that the original I posted)

Add a marker and this expression to trim paths added to any shape layer with a stroked path, then select Trim Paths in the timeline and save an animation preset and you can use it to animate any path on any shape layer and control the timing by simply adjusting the position of the marker.

You could use similar techniques to control the scale of a layer and give the animation a little anticipation and add a little squash and stretch based on markers. marker.key(1) would be the first marker that would start the scale up, marker.key(2) wold be the second marker that scaled the layer back down. Some java script math can give you the anticipation and bounce that turns a simple animation into something that really looks professional. I would check out Dan Ebberts website to learn about some of the advanced expression stuff.

See these short videos to understand what I'm talking about when i talk about anticipation:

The illusion of life​ from Frank Thomas and Ollie Johnston - probably the two most influential animators in history

and

The 12 Principles of Animation (Pixar-ated)​ showing basically the same thing.

[matthiasg44052794]

Hello,

After Effects works well for the animation of vector graphic layers created in Adobe Illustrator, but I have problems with the resolution.

The sharpeness of the tiny dots in AI is lost in AE.

Even when I click the "Continuously Rasterize" button for each layer (which "Adobe After Effects CC Help.pdf", p.168, promises to restore sharpness), the resolution does not improve. Any advice? Thank you.

[Rick Gerard]

If you are having resolution problems with continuously rasterized vector artwork then it is highly likely that it is user error and/or an inadequate understanding of the user interface and the principals that govern video .

First - video is pixels not vectors. This means that lines and dots must be at least 2 pixels wide or 2 points in Illustrator and perfectly aligned with the pixel grid if they are going to look good in a video. If you are creating highly detailed illustrations for use in video in Illustrator it is very important to draw them with Snap to Pixel turned on. The lines should perfectly aligned with the grid. Trying to design artwork with 1pt or 1 pixel thick lines is asking for serious trouble.

Second, if Continuously Rasterize is turned on, the layer and the composition are not set to draft quality, and if you have a line or a circle that is larger than 2 pixels or points and there are no raster effects that have been applied in Illustrator and the scale is not less than 100% and your layer still appears pixelated you are either looking at the composition panel with a magnification factor of more than 100% (200% for HR displays like Mac Retina) or your artwork is not lined up on the pixel grid. The Composition Panel is not like the artboard in Illustrator. You will not get nice sharp lines if the Magnification Factor is greater than 100% because After Effects is Pixels and Illustrator is vectors.

You can check alignment with the Pixel Grid by setting the Magnification Factor to 800% or higher and carefully examining the horizontal and vertical edges of vector lines and verifying layer size, anchor point and position. All curves and diagonal lines will be antialiased and there is no way to achieve a perfectly sharp curved line in a pixel based application.

The last point I will make is that you cannot judge video quality by zooming on the image and looking at a single frame. You can only judge video quality accurately when the video is playing full size and at full frame rate. Anything smaller than 2 pixels is going to get lost in video, very fine lines are going to shimmer and judder when they move unless you hide the antialiasing with motion blur or make sure that the movement is exactly an even number of pixels per frame. If you must design with very thin lines and lots of patterns you must carefully check your final rendered output to make sure that the details do not disappear when the media player is scaled down like it will be unless the user chooses Full Screen for your HD YouTube presentations.

[Henrique -- TMMW]

I believe you can convert an swf to an mp4 for example.

Never tried but by googling it looks possible.

Then you would work with mp4 files in premiere.

Maybe give it try. This way your workflow wouldn't have to change much.

Cheers

Henrique

[Rick Gerard]

If the maps are animated using Animate or flash and they work just fine in a web browser by far the easiest way to turn them into video would be to sun the web browser full screen on a 4K or even 5K monitor and use a screen capture program to turn them into video, then edit the videos in Premiere Pro.

Taking all of you Illustrator files into After Effects and animating the layers individually will work but it's very labor intensive. If your main product is vector based animation delivered by a web browser then it doesn't make any sense to me to redo all of that animation when you can capture it in real time with very little effort.

On the other hand, if you question is about automating the animation of dots on maps in a video you are producing from a layered Illustrator file then the answer is animation presets. I have hundreds of them that I have created that create some pretty complicated animations with a single click. One of them brings a layer in from the left side of the screen, then it bounces to a stop with a little bounce and stretch, then it anticipates the fall and drops off the screen all based on in and out points. It doesn't matter where the layer in on the screen, all you do is set an in and out point, adjust the hero position on the screen and then apply the preset and you get an animation that would take five or ten minutes to create by hand. I have another that animates a dotted line along a path based entirely on an in point and a marker. Start a shape layer or convert a vector layer to a shape where you want it in the timeline, draw the shape any way you like and add a marker where you want the line to be complete, apply the animation preset and you get a moving dotted line using shape layer animators that is perfectly timed, can be adjusted by simply dragging the marker, and the color, stroke width, size of the dots or dashes and every thing else I've ever needed to change can be done in the Effects Control Panel using effects controls.

So yes, you can automate repetitive tasks, speed up your workflow, and get some very complex things done in very little time through expressions, animation presets and scripting, but these things take a bunch of time to set up the first time.

I hope this helps. If you videos are being used to demo and sell your animated maps then I'd just use a screen capture program and edit the footage in Premiere Pro. If you are trying to use your maps in a movie and need to time things to an audio track you may be better off in After Effects and Premiere Pro.

[angie_taylor]

You could use the Release to Layers feature in Illustrator and then export this and possibly open it in Adobe Animate?

• Create the artwork you want to animate. Use symbols to reduce the file size of the animation and simplify your work.
• Create a separate layer for each frame in the animation.

  You can do this by pasting the base artwork into a new layer and then editing the artwork. Or, you can use the Release To Layers command to automatically generate layers consisting of objects that build up cumulatively.

  Make sure the layers are in the order in which you want to display them as animation frames.

        Do one of the following:

• Choose File > Export, choose Flash (SWF) for the format, and click Export. In the SWF Options dialog box, select AI Layers To SWF Frames for Export As. Set additional animation options, and click OK.
• Choose File > Save For Web & Devices. Choose SWF from the Optimized File Format menu. From the Type Of Export menu, choose AI Layers To SWF Frames. Set additional options, and click Save.