My wife likes to be overseas on her birthday — the years don’t count that way.
On our recent Balkan holiday, I forgot to pack a birthday card and didn’t notice any in shops we passed (my excuse and I’m sticking to it). So I had to come up with an alternative.
Sending someone a digital card when you are sharing an apartment with them is maybe a little feeble, but here’s the tale of how I took a stock Canva birthday card and added a bit of personal magic with Touchgram.
Oh, and she’s gotten heavily into dots, as you can see from the holiday snaps. That was a theme I decided to pursue.
Touchgram v1 was launched in early October 2019, to give you the ability to create truly interactive messages. You create messages in iMessage that can respond to how they are touched. Right now, those reactions are a bit limited: playing sounds or changing pages to show a different background. The birthday card crisis was a good chance to see how creative I could be within the current limits.
I started with a Canva search to see what they have in the range of birthday cards. Programmer = punster so romance got bumped a bit as I started scrolling until I found a birthday card with a pun, and a dotted background.
Canva for iPhone saves your pictures directly into the camera roll. So, once I’d finished editing the two pages of my card, I was ready to pull them into Touchgram and create a message.
I’m going to walk you through the process of making that two page message in a lot of detail. There are not yet a lot of rich iMessage apps and many people aren’t aware how much they can enhance your messaging experience. The full video is linked at the end of this article.
Touchgram is launched directly from within iMessage. For a normal text message, you would tap in the message entry box, to start typing. For iMessage apps like Touchgram, you tap on the icons scrolling across the bottom.
Once you tap the Touchgram icon, it expands up to fill the bottom third of the screen with the Menu. This is about the same amount of space that’s normally taken up by the keyboard.
In v1, the menu offers a choice:
- Composer to create a new message or continue editing the last one.
- Favorites to review standard samples or messages you saved earlier.
- A small main Touchgram fingerprint-plus-envelope icon to launch the main app to see settings, policies and other less immediate options.
If you tap the little bar above the Composer, or drag it upwards, the compact menu expands up to nearly full-screen. If you’re part-way through doing something, this takes you back to the message you were editing or playing. Otherwise, you just see a taller menu.
All iMessage apps have these two Compact or Expanded screen sizes. You can always flip between them — it’s standard iMessage behaviour that apps like Touchgram have to cope with.
The current Touchgram composer shows you a nested tree for your entire document. A Touchgram can be a single page or as many as you like. When you create a new message, it looks like this, with an initial page.
To see more details, at any time, tap the little info button on the right-hand-side of a row.
A very simple message could have just a background color, or single picture. It would be very boring without any interaction.
Normally, after picking a background, you will either add an Action or change how touch is sensed. New pages start with Sense any tap and you’ll see below how to change this.
The first thing I wanted to do was start with the Ha-pea Birthday page. Tapping on the Background Picture info button shows the following page — obviously I’ve not yet selected a picture!
Tapping on Choose from Camera Roll brought up my recent holiday shots and of course the two pictures I saved from Canva. I picked the first Canva picture, which can be seen now in full dotty-background glory.
After saving this background, I wanted to make it react to just touching a portion of the picture. Tapping the info button on Sense any Tap brings up the sensor choice window.
For now you can choose to sense three kinds of touches:
Touch Anywhere is any tap within the playing area of the Touchgram. There are still the expander bar and close box at the top of the message window which are part of iMessage.
Touch an Area lets you define a single area that can be lightly tapped to trigger an action. As you will see below, you can have a shading effect to indicate that area is touchable.
Tracing your touches means you draw a continuous stroke and to match, the person receiving the message has to follow the same stroke. Similar to area touches, you can have a shading effect on these strokes.
More touch sensing options are coming soon and are already shown in some of the Favorites (via Add Samples).
A single Touchgram page can have more than one kind of touch sensor but we will dive deeper into that in another article. This birthday card also doesn’t use the actions on failure to match which is often used to do things like play sounds or encourage trying again.
When you choose Touch an Area, the sensor details show a preview of your background for you to draw the outline of the area. Just drag your finger to mark where you want touches sensed. I wanted to roughly outline the pea.
Note that currently you can’t stop photos being scaled, so the landscape birthday card is looking a bit more egg-shaped here. More control is coming soon, to let you crop and control image fitting.
After the first time you draw, a couple of controls appear so you can adjust the hint opacity, to show the picture or color beneath. The initial color of the overlay is automatically calculated from the background color or average of your background picture.
You can also use the switch to turn the overlay off, so it won’t appear at all when playing.
Now we have an area that can be touched, press Back and then Save the sensor. We will come back to the composer window with it looking a little changed. It now says Sense touches.
It’s time to add some Action — if you just try playing or sending the message now, it’s still going to look like a boring picture.
Press the Add action for sensor row anywhere and it comes up with a selection screen. There are a few actions available now and many more options coming.
Tapping Goto Next page brings up the Goto Page action editor with a choice of Next Page already selected. You can change your mind here as to which page you should goto.
The Goto Page action is one you will use a lot — any time you want to have a Touchgram react by changing the entire page.
You can set a transition effect to show as you change pages. These will be very familiar to anyone who’s used Keynote or Powerpoint to edit a slideshow. CrossFade is a nice effect when you have nearly-identical images like my two here, where the changed portion fades in to replace the original.
You can also just go to the same page. Some effects like Flip add a lot of fun with about a 0.2 second flip of the same page.
A good Fade as you see here needs a couple of seconds to appreciate.
Now you’ve got the first page looking good and reacting to your touch, it’s time to add another one.
There are a few more controls on the toolbar at the bottom. Tapping the Page menu bounces up a menu that lets you add a new page.
Setting up Page 2 is just like we did for Page 1, above. I picked the second picture I’d prepared in Canva but this time left the sensor at Sense any because I just want a tap anywhere to go back to the beginning.
The action added was Go to previous page. For most multi-page Touchgrams it makes sense to do this so people don’t feel they are left stranded when they get to the end. Often they want to replay the experience (which they can also do by hitting the Play button).
Speaking of the Play button, here’s what happens when you hit the triangle on the toolbar to Play.
The experience for someone receiving a Touchgram is almost identical to the Play experience above. When you tap a Touchgram received in iMessage, it goes straight into the Play screen.
If you don’t already have Touchgram installed and someone sends you one, your incoming message will take you straight to the App store to install Touchgram for iMessage.
The Ugly/Annoying side of life in iMessage
There are a few compromises that come with shipping an app inside iMessage. I’ll go into them in more detail with another, more technical article.
Here are the two big gotchas that surprise users. These controls have been part of the iMessage experience from iOS 11 through to 13.
As discussed above, an iMessage app has a Compact and Expanded state and a bar you either tap or drag to flip between the two. At any time, regardless of what you’re doing, if you tap that bar it flips to the other state.
In Touchgram, the Compact view is always a menu. The Expanded view varies depending on what you were doing.
The really annoying control is the little close button (circled cross). It closes the current message, returning you to the main iMessages list.
Touchgram copes by keeping a local copy of your message as you are writing.
If you accidentally close a message, just go back into Touchgram as if you were writing a new message and the composer will show your work to-date.
This is remembered with a local copy, on your phone, which is per-conversation. You can stop working on a Touchgram to Sally and start a new one to both Sally and Jace and that counts as a new conversation.
Touchgram doesn’t interfere with your other messages — if you start a Touchgram and have to send a quick text message to the same person, you can just close Touchgram and send the text then go back to crafting your masterpiece.
It’s been a labor of love getting Touchgram to the store and an incredible range of actions and extra creation tools are on their way. If you’re interested in discussing this more, especially if you’re from an arts community, please comment below or on our forum.
