Taking Screenshots on Fire TV Devices Taking Screenshots on Fire TV Devices

Taking Screenshots on Fire TV Devices

Aaron Colon Aaron Colon

In order to submit your Amazon Fire TV app to the Amazon Appstore, Amazon requires 3-10 screenshots of your app — 1920 x 1080px (landscape) in PNG or JPG format. Note: Below, Option 1 is strongly recommended. A developer's assistance is highly recommended for both options.

Option 1: Follow Amazon's instructions (recommended)

Amazon's Detailed instructions:

https://developer.amazon.com/public/support/submitting-your-app/tech-docs/taking-screenshots

Overview instructions:

  • Install Android Studio or Android Debug Bridge on your computer
  • Install and launch your beta app to your Fire TV using the Amazon Web App Tester (https://zype.zendesk.com/hc/en-us/articles/115002194907)
  • Connect to your Fire TV via Android Debug Bridge
  • Take 3-10 screenshots and save them to your computer

 

[DEPRECATED] Option 2: Preview your Fire TV beta app on your computer *HTML based only*

Note: These instructions are for macOS specifically, but the same principles can be applied to any operating system (Windows, Linux, etc.). Both a developer and a designer are recommended for this workaround option.

Prerequisites:

1. Unzip your beta Fire TV app package archive downloaded from Zype. This is your Fire TV app.

2. In the app folder, open /js/init.js in a plain text editor. Some examples of plain text editors are Sublime Text, Text Wrangler, and Atom

Screen_Shot_2017-03-13_at_6.43.00_PM.png

3. In init.js, find line 214 — it reads "// initApp(settings);". It should be directly underneath the line that reads "// uncomment to test on the browser"

Screen_Shot_2017-03-13_at_6.43.54_PM.png

4. Delete the two forward slashes at the beginning of this line. The line should now read "initApp(settings)". Save the file (Command + S or File > Save).

Screen_Shot_2017-03-13_at_6.43.59_PM.png

5. Open index.html in a web browser (Google Chrome or Safari is recommended). Maximize the web browser window so it fills the entire screen.

Screen_Shot_2017-03-13_at_6.44.23_PM.png

6. When index.html opens in the web browser, the app's circular loading indicator will most likely be off-center. This is due to differences in your computer screen's resolution compared to the Fire TV's native resolution, 1920 x 1080px.

Screen_Shot_2017-03-13_at_6.48.03_PM.png

7. If your computer screen's resolution is less than 1920x1080, you'll need to Zoom Out in your web browser until the loading indicator is centered within the screen. Go to View > Zoom Out.

Screen_Shot_2017-03-13_at_6.48.44_PM.png

8. Reload the page (Command + R or View > Reload This Page) and check if the loading indicator is centered. Repeat Steps 7 & 8 until the loading indicator is centered in the screen.

Screen_Shot_2017-03-13_at_6.49.05_PM.png

9. Navigate through your app using your keyboard (Arrows: left, right, up, down, delete/backspace, and return/enter). Take at least 3 unique screenshots (Command + Shift + 3).

Screen_Shot_2017-03-13_at_6.49.11_PM.png

10. Open an image editing app (Photoshop, Sketch, or GIMP) and create a new 1920 x 1080px file. Example shows Photoshop.

Screen_Shot_2017-03-13_at_6.53.40_PM.png

11. Open the screenshot in the image editor. Select the layer.

Screen_Shot_2017-03-13_at_6.58.02_PM.png

12. Crop the top and bottom of the screenshot, removing the non-app portions of the screenshot using the Crop tool.

Screen_Shot_2017-03-13_at_7.01.27_PM.png

13. Duplicate the selected layer to the new 1920x1080 file you created (Layer > Duplicate Layer...)

Screen_Shot_2017-03-14_at_1.44.59_PM.png

14. Switch to the 1920x1080 file's tab and select the newly duplicated layer.

Screen_Shot_2017-03-13_at_7.01.47_PM.png

15. Transform the layer (Edit > Free Transform)

Screen_Shot_2017-03-13_at_7.01.55_PM.png

16. Choose the top-left Reference Point Location. Click the "Maintain Aspect Ratio" button. In the Width field, type 1920px. Click the Commit Transform button (check mark icon) to apply the transform.

Screen_Shot_2017-03-13_at_7.02.42_PM.png

17. Fill the Background Layer with the app's background color.
• Select the Background Layer which was created when the 1920x1080 file was initially created.
• Go to Edit > Fill — the "Fill" dialog opens.
• In the "Contents" drop-down menu, select "Color..." — the "Color Picker" dialog opens.
• Move your mouse over a portion of the screenshot which shows the app's background color (the mouse cursor becomes an eye-dropper icon). Click to select the background color.
• Click the OK button on the "Color Picker" dialog.
• Click the OK button on the "Fill" dialog.

Screen_Shot_2017-03-13_at_7.05.02_PM.png

18. Export the file as a PNG. File > Export > Quick Export as PNG.

Screen_Shot_2017-03-13_at_7.08.29_PM.png

19. Repeat Steps 11 - 16, 18 as needed.