I'm looking for a map of the US that I can manipulate the "states" of each state. Does anyone have a map of the US that is a bunch of state graphics all grouped together appropriately?
I have one in PPT but its cumbersome when bringing into Storyline. Figuring someone has invented this wheel already.
Great question and I don't know of many within Storyline right now, but there is a template within Articulate 360 that has just that! You didn't mention which version of Storyline you're using, but if you're a Storyline 360 subscribed it's a part of the Velocity template:
As you can see in this second image, each state is it's own icon/object:
If you're using another earlier version of Storyline, let us know and perhaps some folks in the community have some additional examples to share!
Ashley makes a good point about the new map template in SL3.
If you're using SL1 or SL2, I created a map using a vector map and then saving out each state as its own PNG file. For each state's "object state" color (hover, selected, etc.) I saved out an additional set of PNG files. For instance, for Normal, Hover, and Selected for each US state you'd have 150 image files.
The user experience however is not quite precise with PNG files because the active area is within the four corners of the overall shape. So you may hover over one US state yet a neighboring US state will change.
To overcome, place all the individual image files together to form the map. Then using the freeform hotspot, trace over each US state. The downside is needing trigger to physically change the object to hover or other object state when clicking on or hovering over the hotspot. The upside is a precise mouse control.
Here's one I did in SL1 a few years back. It was built using image files and not the hotspot technique I mentioned above. If you mouse over some edges of states, neighboring states will change.
I've rebuilt this in SL2 with hotspots but haven't quite finished. I'll probably finish at some point and then upgrade to SL3.
Back to the actual artwork. There are many sites like Creative Market that have various US Map graphics among other graphic resources if you want to build one from scratch. The challenge is finding the right map with the right colors. If you have Adobe Illustrator, the attached zip file has the vector map of the image below. Hope this all helps!
I'm hoping/thinking that someone might have one they could let me use. The one I've imported from PPT doesn't convert perfectly - and the borders kind of overlap themselves.
That map is exactly what I need/want. The color is even right. I just want to be able to put a "state" on each of the states - so I can have some of them a different color (darker green) and then put a hotspot on them (so I can open a layer when the user clicks).
However, I don't have illustrator. If that map could be put in SL2 (as a bunch of different images), I could do the rest in SL.
Here you go. That green map broken down into 50 individual State images both in green and dark green. Attachment has the whole map image and two folders with all 50 states of both colors.
Hi Kevin! I'm currently making a storyline 2 file on US states and maps, just like Linda. I can't seem to download the zip file you attached, it comes out as .ai on my end. Do you have the raw file of your US state map file? Many thanks!
Thanks for sharing that you'd like to use Kevin's file as well. I took a look and can see that the first file was for Adobe Illustrator, which is a .ai file. Take a look at the second link/attachment he shared. I spy a png here.
13 Replies
Hi Linda,
Great question and I don't know of many within Storyline right now, but there is a template within Articulate 360 that has just that! You didn't mention which version of Storyline you're using, but if you're a Storyline 360 subscribed it's a part of the Velocity template:
As you can see in this second image, each state is it's own icon/object:
If you're using another earlier version of Storyline, let us know and perhaps some folks in the community have some additional examples to share!
Hi Linda,
Ashley makes a good point about the new map template in SL3.
If you're using SL1 or SL2, I created a map using a vector map and then saving out each state as its own PNG file. For each state's "object state" color (hover, selected, etc.) I saved out an additional set of PNG files. For instance, for Normal, Hover, and Selected for each US state you'd have 150 image files.
The user experience however is not quite precise with PNG files because the active area is within the four corners of the overall shape. So you may hover over one US state yet a neighboring US state will change.
To overcome, place all the individual image files together to form the map. Then using the freeform hotspot, trace over each US state. The downside is needing trigger to physically change the object to hover or other object state when clicking on or hovering over the hotspot. The upside is a precise mouse control.
Here's one I did in SL1 a few years back. It was built using image files and not the hotspot technique I mentioned above. If you mouse over some edges of states, neighboring states will change.
US Capitol's Quiz: http://articulate.demos.s3.amazonaws.com/us_capitols/story.html
I've rebuilt this in SL2 with hotspots but haven't quite finished. I'll probably finish at some point and then upgrade to SL3.
Back to the actual artwork. There are many sites like Creative Market that have various US Map graphics among other graphic resources if you want to build one from scratch. The challenge is finding the right map with the right colors. If you have Adobe Illustrator, the attached zip file has the vector map of the image below. Hope this all helps!
Thank you - I'm using SL2.
I'm hoping/thinking that someone might have one they could let me use. The one I've imported from PPT doesn't convert perfectly - and the borders kind of overlap themselves.
Thanks for anything you can provide.
Linda
Hi Linda,
The map image above should work and then just add freeform hotspots on top of the graphic. That's a quick solution if you need to build it now.
Be happy to package on up for you, but it may be a few days as I'm up against a tight deadline this week.
Few questions:
Hi there, Kevin,
That map is exactly what I need/want. The color is even right. I just want to be able to put a "state" on each of the states - so I can have some of them a different color (darker green) and then put a hotspot on them (so I can open a layer when the user clicks).
However, I don't have illustrator. If that map could be put in SL2 (as a bunch of different images), I could do the rest in SL.
Linda
Hi Linda,
Here you go. That green map broken down into 50 individual State images both in green and dark green. Attachment has the whole map image and two folders with all 50 states of both colors.
Good luck in your project!
You're a rock star Kevin - thanks for the help to Linda!
WOWOWOWOWO!
Thank you! I've already put it in my SL file and put the lighter colored green over the state of Washington exactly as I need it. It took 2 minutes.
THANK YOU!!!
Linda
Yay! Glad to help, Linda.
Ashley, I'll go share this in Build Better Courses forum for others, too.
Like you read my mind Kevin... :-)
Hi Kevin! I'm currently making a storyline 2 file on US states and maps, just like Linda. I can't seem to download the zip file you attached, it comes out as .ai on my end. Do you have the raw file of your US state map file? Many thanks!
Hi Karla and welcome to E-Learning Heroes :)
Thanks for sharing that you'd like to use Kevin's file as well. I took a look and can see that the first file was for Adobe Illustrator, which is a .ai file. Take a look at the second link/attachment he shared. I spy a png here.
Thanks Leslie. Yes, the US-map_50-state-images zip download is what you may be looking for
This discussion is closed. You can start a new discussion or contact Articulate Support.