Interactive US Map

Check out these map examples for ideas.

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.