Welcome to my Website!

This is a paragraph! Here's how you make a link: Neocities.

Here's how you can make bold and italic text.

Here's how you can add an image:

Here's how to make a list:

• First things test
• Second thing
• Third thing

To learn more HTML/CSS, check out these tutorials!

Here’s an easy way to turn a single image into an interactive image. This tip comes in handy if you use collage images for interactive stories or have a great illustration but no way to break it into separate pieces. That’s what I ran into with this recent demo I built for the blog post on simplifying variables for elearning.

Click here to view demo.

I had a great image of multiple characters, but all I had was a single .png file. I needed a separate image for each character to create my interaction. In my example, I wanted the individual people to have a hover effect. Since I couldn’t separate them into individual images, I used the crop tool to isolate the characters and create a simple interaction.

E-Learning Tutorial Step-By-Step

Learn more by following the steps of the elearning tutorial below and then watch the video for more detail.

• Insert the image and duplicate it. Make sure the duplicate is on top of the original and perfectly aligned. I also recommend naming all of the assets you place in your slide. I like to lock the original image so I don’t accidentally nudge it out of place.

• Create a state for each character. Add a new state for each character on the duplicate image. Then crop each state to isolate the character. You’ll want to make the state visually different so that when you switch to a character state there’s some sort of contrast to the original. Some people like to add glows or resize the new state.

• Insert a hotspot over each character. Since you only have a single image you’ll need multiple hotspots on top of it to simulate the interaction and change the large image to the isolated character states.