Interactive US Map

Jun 05, 2018

I tried researching this on other threads however, all the links I clicked were dead links. Basically, I am trying to build an interactive map of the united states that show the Federal Reserve System. Essentially, certain areas of the map would be different colors based on the district of the federal reserve. I would like each area to have a hover state that changes color and possibly enlarge if possible. When the user clicks each district a layer or lightbox would display showing information about this district. Can anyone please help me with this!?!?! Thanks for any help you might have. 

2 Replies
Michael Zielinskie

Hi Cody! This can be a really fun project if you take your time and get some assets together.

Images you'll need:
-United States Map (Nothing to detailed)
-The Federal reserve Districts broken up into individual pieces. 

How will you get those images? Well you might already have them, in which case AWESOME!
If you don't you can spend a couple bucks and buy some vector stock photos to get the job done.
Or if you are a wiz in Adobe Illustrator, Affinity Designer, or any other graphic design tool you can make then yourself!

Once you have your images the rest is a piece of cake. 
1.  Place your US map on your Storyline slide and lock it down.
2. Place the first Fed Reserve District on the slide and tweak it so it lines up with the map underneath. (You may have to use the Size and Position drop down to unlock the aspect ratios of the images and get them just right.)
3. Add a zoom animation to your Fed Reserve image.
4. Copy the Image.
5. Go to the States tab and edit that image's states.
6. Duplicate the "Normal" state and name the new state "Hover"
7. Paste the image in the "Hover State"
8. Stretch the image to be a little larger than the original (Adds to the zoom effect.)

We do steps 3-8 because Storyline won't let you add animations to shapes within states, but this will circumvent that issue.

9. Using the Freefrom hotspot tool, draw an outline (as best you can) around the edges of the district. It doesn't have to be perfect.
10. Add a trigger to Change state of "Federal District 1 Shape" to State: Hover When: Mouse Hovers over, "Federal District 1 Shape".

Why would we do something so silly? The shape already has a hover state! Well that hover state is governed by the boundaries of the image (which is rectangular) and we only want the animation to occur within the boundaries of the actual district.

Now we need to add some info. Zoomed in Federal Reserve Districts aren't particularly interesting by themselves huh?

1. Create a new slide layer with a name corresponding to the district we just made. Ex: Federal Reserve 1 Layer.
2. Add a nice rectangle (or any shape really) to the right of the screen.
3. Add some content (type in the shape or add a textbox or whatever.)
4. Group everything on the layer together.
5. Add a "Fly in from right" entrance animation and a "Fly out to right" ext animation to the entire group.
6. Duplicate our Hotspot trigger from earlier and instead of change state, adjust the trigger to show layer "Federal Reserve 1 Layer" When mouse hovers over "Federal Reserve 1 Shape"

Now when the user hovers over the district the district will enlarge and the content will fly in from the right. Don't let my instructions limit you either. Experiment with different animations and state changes to really create an intuitive interaction.

Good luck!! 

-Does first post post ever dance.

This discussion is closed. You can start a new discussion or contact Articulate Support.