Lesson 5: Camera Interaction

One of ProtoPie's standout features is its ability to work with various native capabilities of modern smartphones and tablets — the camera, vibration, tilt, compass, and 3D touch just to name a few. Follow along to see how easy it is to create believable camera interactions using ProtoPie.

What you'll need

Download the Pie below to create this prototype by yourself.

You'll also need your phone handy, as we'll be previewing our interactions on the device itself. If you haven't already, make sure you've got the ProtoPie Player app installed:

• iOS
• Android

What you'll learn

At the end of this tutorial, you'll know how to:

• Create a camera layer
• Start the camera
• Create interactions with features such as taking a picture and switching between the front and rear cameras using the Camera Response
• Previewing the interaction on your phone
• Animate out experience to improve feedback and feel

Time to complete: ≤15 minutes

Step 1: Create the Camera Layer

Open the starting Pie file you downloaded above in Studio:

The beginnings of a camera app interface is already created for you.

Let's create a new Camera layer.

• Under the Media menu, choose Camera.
• Your mouse cursor will change to a crosshair icon. Draw your Camera layer in your scene.
• If you haven't done so already, resize the Camera layer to fill the entire screen.

You can drag the control points to do this, or you can enter values in the property panel.

• We want our UI components — the Shutter Button and the Switch Cam Button — on top of the camera layer.

Drag the Camera layer to the bottom of the stack.

Step 2: Start the Camera

We'd like our camera to start when the scene starts. ProtoPie makes this easy:

• In the property inspector, tick the box beside Auto Start.
• You can choose which camera to use. Select Rear.

Step 3: Preview!

This doesn't much look like what your camera sees, does it? In order to see the camera's picture, we need to preview our Pie directly on our device.

If you click the Preview button in Studio, you'll see this.

This is where the ProtoPie Player app comes in! It is a powerful and free app that will allow you — or anyone you share your Pie with — to run your prototype on a phone or tablet as if it were a native mobile experience. Plus, it's the only way to make use of the built-in device sensors such as your phone's camera. If you haven't done so already, use the links above in the What you'll need section to install the app on your device.

• In Studio, click Device in the top-right set of icons. This will reveal a QR code. Leave this visible, as we're going to need it in a moment.

• Start the ProtoPie Player app on your device. You'll be greeted with this screen:

Tap Scan QR Code.

• Scan the QR code you revealed above. Your Pie should now be running on your phone, and your scene should be filled with the rear camera's image.

💡 NOTE: For this to work your phone needs to either be on the same WiFi as the computer running Studio, or your device needs to be connected to the computer running Studio with a USB cable. If your Pie won't start on your device, double check that your phone is connected in one of these two ways.

Step 4: Add Interaction

Now that you know how to preview you Pie on your device, let's hook up the Switch Cam and Shutter Buttons.

• Add a Tap Trigger.
• Select the Switch Cam Button Layer.

• Add a Camera Response.
• Select the Camera 1 Layer

• In the properties panel, choose Switch from the Camera selection drop down.

• Add another Tap Trigger.
• Select the Shutter Button Layer.

• Add a Camera Response.
• Select the Camera 1 Layer.

• We'd like our Pie to take a picture when we tap the Shutter button. You do this in ProtoPie by stopping the camera.

In the properties panel, choose Stop beside Action.

• In order to update the preview on the Player on your phone, click the Run icon in Studio. This will reload the Pie on your device with your changes reflected.

You should now be able to switch between the front and rear cameras, and you should be able to take a picture.

That's it! Easy as Pie!

You now know how to build a prototype that uses your device's built-in camera using the Camera Layer object and the Camera Response, and you've learned how to run your brilliant work on your phone or tablet using the ProtoPie Player app.

If you're interested in improving the experience — right now our Pie only allows us to take a single picture, there's very little feedback, and switching between the front and rear cameras could behave a little nicer — you can watch this follow-up video which will build on what we just created and turn it into a very believable camera app demonstration.

Now that you've learned how to use the Camera Layer and Response, it's a good time to explore some of the other device-specific features included with ProtoPie. In addition to the Camera features we covered today, there are Triggers for Tilt, Compass and 3D Touch, as well as a Response for Vibration. If you've been following along with this entire series, you'll remember that in the previous article talked about Voice and Speech. Both of these work beautifully on your mobile device.

Resources

• Camera Layer
• Camera Response
• ProtoPie Intermediate Workshops: Micro-interactions and Native Sensors: Learn how to make micro-interactions and use native sensors with ProtoPie.
• Prototype with Sensors in ProtoPie Learn how to build prototypes with sensors without a line of code.