An Easy Way to Show UITouch in App Preview Video

One of the most important pieces of any app launch is the app preview video that’ll show next to your screenshots in the App Store. With Loose Leaf, nearly every feature and all of the navigation is through multi-touch gestures, so it was incredibly important to be able to show those touches on screen when I recorded the video.

The Preview

Watch the Loose Leaf preview to see the touch dots in action – it’s a small animation when the touch begins, and the blue dot follows each finger for the rest of the touch.

The best part is how easy this is to add to any iOS project, just some simple code that will show dots at each UITouch location, no matter what UIView or UIGestureRecognizer is receiving them.

The Code

The code to add these dots is available at https://github.com/adamwulf/ios-uitouch-bluedots. To add it to your project, just add these few lines into your App Delegate when launching the app.

[code language=”objc”]
– (BOOL) application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// create the blue dot view
MMTouchDotView* dotView = [[MMTouchDotView alloc] initWithFrame:self.window.bounds];
// optionally set the dot color, defaults to blue
dotView.dotColor = [UIColor blueColor];
// optionally set the dot width, defaults to 20
dotView.dotWidth = 40;
// add the view to the window to make sure it’s always visible
[self.window addSubview:dotView];

// Override point for customization after application launch.
return YES;
}
[/code]

That’s it!

The App

More Loose Leaf dev blogs to come! Find out more about Loose Leaf, and watch all the app demo videos.

app-store-badge

Leave a Reply

Your email address will not be published. Required fields are marked *