← BACK

To ensure your app experience is designed as intended, preview your final project or the work currently in progress with the AppOnboard Studio app.

You can preview projects on either Android or iOS devices over your Wi-Fi network, while running Studio on your computer.

For iOS devices only, you may also use a USB connection for previews and update preview settings.

Wi-Fi Network—Android or iOS

Make sure you have done the following:

  • Installed the AppOnboard Studio app on your iOS or Android device.
  • Disconnected any mobile devices from the computer on which Studio is installed.
  • Ensured that your phone and your computer are on the same Wi-Fi network.

Important: Your phone and your computer must be on the same Wi-Fi network. If you run into any issues, ask your network administrator to add a firewall rule to allow internal TCP traffic on port 15514 in your network.

To preview your project using a Wi-Fi network:

  1. In the top-right corner of Studio workspace, click Preview.
    A QR code appears on the screen.
  2. On your phone, open the AppOnboard Studio app.
  3. Tap Scan new project and hold the camera to the QR code on the computer screen. 
    After your phone has successfully connected and loaded your project, its preview begins playing on your phone.

    Note: On iOS devices, you can identify a wireless connection by looking at the IP address under the scan window. It starts with 192.168.x.y.

  4. Preview your project and make sure that everything is working as intended. If, necessary, see Previewing Tips below.
  5. To close the preview, shake your iOS device or press Back on your Android device. See also App Settings for iOS below.
  6. Make any changes to your project in Studio, save them, and then tap Load your latest changes to update the demo version on your device.

You can also load the previous versions of the project by tapping the Recent icon at the bottom of the screen.

USB Connection—iOS Only

Make sure you have Installed the AppOnboard Studio app on your iOS device.

Note: After you connect your phone to the computer, you will be able to preview projects only only on that phone. To use multiple devices, you need to switch to the Wi-Fi connection and follow the steps above.

To preview your project using a USB connection:

  1. In Studio, make sure you have the Preview pop-up closed.
  2. On your iOS phone, open the AppOnboard Studio app.
  3. Connect your phone to the computer via USB.
    Depending on how fast your computer and phone are, we recommend that you wait for about a minute to ensure the connection is established. 
    If a message appears on the screen asking if you trust the computer, tap Trust and enter your passcode if needed.
  4. In the top-right corner of Studio workspace, click Preview.
    A QR code appears on the screen.
  5. On your phone, tap Scan new project and hold the camera to the QR code on the computer screen. 
    After your phone has successfully connected and loaded your project, its preview begins playing on your phone.

    Note: You can identify a wired USB connection by looking at the IP address under the scan window. It starts with 169.254.x.y.

  6. Preview your project and make sure that everything is working as intended. If, necessary, see Previewing Tips below.
  7. To close the preview, depending on your settings, shake your iOS device or simply tap the Close button on the screen. 
  8. Make any changes to your project in Studio, save them, and then tap Load your latest changes to update the demo version on your device.

You can also load the previous versions of the project by tapping the Recent icon at the bottom of the screen.

App Settings for iOS

On iOS devices, you can modify your AppOnboard Studio app settings to choose how you want to close project preview after you are done.

To change your app settings:

  1. On your iOS phone, open the AppOnboard Studio app.
  2. At the bottom of the screen, tap the Settings icon .
  3. Toggle any of the following to select the desired settings, which are all turned on by default:
    Shake Tip Displays the following tip on the splash screen “Shake your device to exit Preview” for example, as shown below. 

    Shake to Close Allows you to close your project preview by shaking the device.
    Display Close Button Displays a Close button in the top-right corner of the screen.
  4. Tap the Scan icon  to return to the main screen.
Previewing Tips

Here are a few general guidelines you should keep in mind when previewing your projects:

  • You can preview completed projects as well as those that are still work in progress.
  • After you make a change, you need to save your project in Studio and instead of scanning it again, just tap Load your latest changes in the app.
  • To see a previous version, you can tap the Recent icon  and tap the version you need. The app saves up to 50 previously scanned versions of your projects.
  • On iOS devices, make to update your settings to avoid unnecessary tips and to choose how you want to exit the project preview.

During a preview, you may want to check the following:

  • Your demo starts with a splash screen and ends with an end card.
  • The background music is playing throughout the demo.
  • All loop scenes play continuously till you tap, swipe, or perform any other interaction.
  • All gestures are added to the correct scenes and areas on the screen and match the instructions on the screen.
  • All gesture areas allow you to perform the expected interaction.
  • All gestures are followed by the correct actions.
  • All sound effects accompany the correct actions.
  • All transitions occur in the correct sequence and are timed as desired.
  • Any alternate paths transition as designed.
  • All counter values are updated and displayed correctly.
  • The call-to-action button is present through the demo but not on the splash screen or end card.
  • The Skip button, if available, appears in the correct places, such as the marketing video.
  • The Go to Scene and Replay buttons take you to the correct scenes in the demo.
  • The URL and App Store buttons take you to the correct destinations.
Troubleshooting Tips

Here are a few practical tips that may help you troubleshoot your project if you experience any issues during the preview:

  • Start by checking Path View to identify common issues like missing assets, transitions, and gestures.
  • If your project preview is “stuck” and you are not sure which scene is causing the problem, drag a container from the Elements panel to each scene and fill the containers with different colors. During the preview, you’ll be able to identify the scene and further troubleshoot its transitions, gestures, and actions.
    Make sure to remove the colored blocks for the final output.
  • If you need to skip the beginning of your project while troubleshooting issues closer to the end of the project, set any scene in the project closer to the end as First Scene in the scene Properties. The preview will begin from that scene.
    Don’t use this technique, however, if you have any counters set at the beginning of the project. Make sure to reset the splash screen as the First Scene after you are done.
  • If any gestures don’t work, check the layer order in that scene. For details, see Elements and Layers.
Updated June 12, 2019