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:
- 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
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.
- Plain-Text Editor app (Sublime Text, Text Wrangler, Atom)
- Image Editing app (Photoshop, Sketch, GIMP)
1. Unzip your beta Fire TV app package archive downloaded from Zype. This is your Fire TV app.
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"
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).
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.
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.
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.
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.
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).
11. Open the screenshot in the image editor. Select the layer.
12. Crop the top and bottom of the screenshot, removing the non-app portions of the screenshot using the Crop tool.
13. Duplicate the selected layer to the new 1920x1080 file you created (Layer > Duplicate Layer...)
14. Switch to the 1920x1080 file's tab and select the newly duplicated layer.
15. Transform the layer (Edit > Free Transform)
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.
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.
18. Export the file as a PNG. File > Export > Quick Export as PNG.
19. Repeat Steps 11 - 16, 18 as needed.