I recently had a project for which I wanted to embed an interactive map of the US on a Joomla website. My goal was to have a map that would highlight a state and provide some dynamic information when the viewer moves their mouse cursor over it, similar to the map below: For starters, I needed to find a map of the US with states so I didn’t have to try and create that myself. I found a great vector map at Graphic Flash Sources.com that was already in an Adobe Illustrator format. There are lots of other options on the web if you search. Once I downloaded the map file, I edited it in Adobe Illustrator. There are a ton of layers in this Illustrator file, so to keep things simple for this tutorial I selected just a handful of southeastern states to work with. When we import an Illustrator graphic into Flash Catalyst, you can make any of the visible layers interactive. In this example, I have the city and state name layers turned off for my selected states as you can see in the layers tab. Next step is to save the file and import it into Flash Catalyst. Select the option to import an Adobe Illustrator file: In this example, Flash Catalyst imports all of the visible states as their own layers in the FXP project. I’ve renamed them to the corresponding state names. The next step involves turning the state/layers into buttons and adding some interactivity. The process works like this: First select the layer and then either by right clicking or by selecting Modify>,Convert Artwork to Component>,Button turn the layer into a button. At this point, you will have options to make changes to the different “states” of the button – up, down, over and disabled. Double clicking on the (geographic) state will isolate the button and give you a view of the different states in the Pages/States area above: In this example, I want to animate the state so that it shows a drop shadow effect when the viewer scrolls over it with their mouse pointer. To do that, select the button state that you want – in this case the “over” state – and also the corresponding geographical state on the canvas and then select Edit in Adobe Illustrator either from the Modify menu or by right clicking. In order to add the drop shadow, choose Effect>,Stylize (from the Illustrator effects)>,Drop Shadow: After applying the effect to the geographic state, close the Illustrator project. You’ll be prompted to save your file. Save, but do not change the file name or “save as” in another place. At any time you can select File>,Run>,Project to generate a view of how the flash object will look and respond. Go through the same process for each state. Hi, I have a problem regarding Adobe Flash Catalyst. In Flash, I inserted some music. So when I roll over my mouse on a state, the anthem song of that state will be played. However, when I published into Joomla there are no such sound. Can you help me please. Tq Make sure that your music file is copied onto your web server and the flash file is referencing it appropriately. How do I embed it to a website? Like the one you did on this Post (For me joomla). Please suggest me for helping my senior project. Thank you sir. I was able to do an interactive map using Flash Catalyst and already exported it. How do I embed it to a website? Like the one you did on this Post (WordPress) Sorry I’m late getting back with you on this, Jay. For wordpress, you need a plugin that will let you embed a flash object. The one that I used in the post is SwfObj by Matt Carpenter and you can find it in the WordPress plugins page. You just upload the .swf file and then use the appropriate code, in this case [swfobj src=’http://www.yourdomain.com/wp-content/uploads/…/filename.swf’] Source.