DEV Community

Map Animation Studio
Map Animation Studio

Posted on Edited on Originally published at map-animation.com AI-assisted

Guide attention from a country to a city

Originally published in the Map Animation Studio guides. I work on Map Animation Studio. AI assistance was used to prepare this illustrated cross-post.

  1. Home
  2. Guides
  3. Guide attention from a country to a city

Establish an area, then focus on a place. Explain location with boundaries, fills, and labels.

Before introducing a city, establish the country or region around it. In the Norway–Oslo example, the country provides context before the camera arrives at the city and a label becomes the focus.

Watch the result

Finished map animation

Norway → Oslo · Play the finished example. The steps below teach a similar workflow, not an exact reconstruction of its settings. This map example has no narration.

Watch the finished map animation.

The actual Norway → Oslo Studio project: edit actions on the left, preview the map in the center, and arrange timing below. This is an example copy; blank projects do not show Change places.

The actual Norway → Oslo Studio project: edit actions on the left, preview the map in the center, and arrange timing below. This is an example copy; blank projects do not show Change places.

1. Choose a region boundary

Add a region highlight action, search for Norway, and verify the administrative area. Choose the intended boundary rather than a similarly named place. Wait for the geometry to load before assessing the extent.

1.1 Select Area highlight, search Norway, and verify the Norge result has an available administrative boundary.

Norway → Oslo project: Search Norway in the region target. The Norge result has an available administrative boundary.

Norway → Oslo project: Search Norway in the region target. The Norge result has an available administrative boundary.

**Check: **The highlight covers the intended country or region.

2. Keep map detail visible

Adjust the fill and outline so the region is clear while city names, coastlines, and roads remain visible. Lower fill opacity if it obscures detail, or choose a simpler map style for a busy background.

2.1 Adjust fill opacity and border width. The example uses 0.38 and 3 pixels; keep map labels and outlines readable.

Norway → Oslo project: The example uses fill opacity 0.38 and a 3-pixel border.

Norway → Oslo project: The example uses fill opacity 0.38 and a 3-pixel border.

**Check: **Both the boundary and important basemap places are legible.

3. Hand attention over to the city

Add a camera move and geographic label for Oslo, revealing its name during arrival. Adjust the country highlight and city-label timing separately to keep attention clear.

3.1 Select the Oslo geographic label and edit its text, size, and color, rather than the country boundary action.

Norway → Oslo project: Text, size, and color for the Oslo geographic label, separate from the country boundary.

Norway → Oslo project: Text, size, and color for the Oslo geographic label, separate from the country boundary.

3.2 Check the city-label start time, around 10.62 seconds here, so it aligns with arrival.

Norway → Oslo project: The city label begins around 10.62 seconds; the timing fields control the handoff to the city.

Norway → Oslo project: The city label begins around 10.62 seconds; the timing fields control the handoff to the city.

**Check: **The region and city label do not overwhelm the frame together.

4. Review another format carefully

Finish and export one format, save your project, then change the aspect ratio. Review clipped boundaries, labels near edges, and overly tight city shots in the new format.

4.1 Choose landscape, portrait, or square in the format menu, then review boundaries and labels near the edges.

Norway → Oslo project: The format menu offers portrait, landscape, and square. Review framing after changing it.

Norway → Oslo project: The format menu offers portrait, landscape, and square. Review framing after changing it.

**Check: **Both formats explain the location clearly throughout the sequence.

One detail to remember

Boundaries, markers, and geographic labels serve different purposes. Establish where first, then identify what, instead of revealing every element at once.

Make your own version

Replace the example with a city you know, finish a short sequence, and review it end to end. Make one clear story before adding more effects.

Open Studio and make your own version.

Original illustrated guide.

Visit Map Animation Studio to explore the editor and other video tutorials.

Top comments (0)