To celebrate Mother’s Day, we’ve created an adorable virtual card in the style of a photo gallery you can remix. Swap out your own photos and messages for mom or anyone you want to share a caring note with! This step-by-step guide will walk you through how to make an interactive animated e-card that will surely delight the recipient.
Step 1: Open up the remixable project here. In the style of a gallery wall, each of the images reveals a message underneath or triggers an effect when clicked on. Above are the different states of the photos and stickers, side by side. You can swap out stickers, change text and more. The elements you can edit easily include:
- Each picture frame
- The top and bottom images inside the frames
- The text notes
- Animated stickers
- Background image
- “Tap around” text
- How the elements behave; right now they are all triggered on a click
In the upper right corner, you’ll see the editing pencil icon which will open the project in Hatch. When you start to edit, Hatch will automatically create a new version for you to work on directly.
To start making changes, open up the objects button located at the bottom left of your screen (at the red arrow in the image below). With the objects tree open, you can see each element you can edit.
How to change the background image
In the image above, “wallpaper” is selected within the object tree (with blue highlight) and you can see selection handles on the wallpaper. When you select the wallpaper, a toolbar will appear above with the option to replace the image.
If you aren’t sure which layer you’re replacing, the visual thumbnail will help. To change the wallpaper background, simply click on “replace.” A window appears that allows you to upload an image or to pull an image from sites like Unsplash or Pixabay.
How to change the photos
There are three photos in this project. The top left photo is called “field-photo” in the object tree and is selected in the image below. Just like the background image, you can replace the photo using the toolbar that appears when the photo is selected. When you click on “replace” you’ll see the option to upload your own file. Repeat this process for the other two photos in the card. You can see them in the object tree called “kite_photo” and “bw_photo.”
How to change the stickers
The stickers bring charm and delightful animation to the card. All of the frames and mini animations are actually stickers. When you’re editing, you’ll notice some of the stickers appear layered. This is because they have transparent backgrounds so you can see what’s beneath them. You can change the stickers using the same “replace” button as the photos and background.
However, the secret to changing the images when they are clicked is that the top image is the picture frame itself with transparent “glass” in the middle. Select the picture frame, like the gold circular frame in the top left, shown below. When you click over to the Actions menu, you’ll see there are two actions that occur “on click.” When you click the frame, both “cooking_sticker” and “thank_you_mom” sticker will toggle between being visible and not visible. You can replace both the stickers and they will keep their actions. These actions are what make a regular photo page an interactive animated ecard!
To change what is triggered when clicking that frame, expand the options by clicking on the little carrot next to the trash, shown below.
How to change the notes
There are two notes in this project, behind the field photo and the kite photo. If you select one of the notes from the object tree, you’ll see the selection handles but you’ll notice the note isn’t visible. You’ll need to bring the note above the photo and the frame to edit the text. Click on the “stack” button shown below to change the object position and bring the note to the front.
When you bring the note to the front, you’ll see the position of the note object move to the very bottom of the object tree which shows it is now the very top layer. Select “Adjust” and you’ll be able to edit the text as well as the color and font.
Once you’re done editing the note, use the same position selector to send the note back behind the frame and the photo. If you’re not sure about the position, you can also manually drag the note object from the object tree and put it just in front of the background wallpaper.
We’ve scattered some other stickers around under frames and around pictures. Don’t be afraid to click around in the object tree to see where they are and how they are behaving. Open up that action panel to see how things are triggered off of one another. Experiment and play around as you make an interactive animated e-card. We can’t wait to see what you create!