Skip to main content
Known Participant
January 27, 2013
Answered

Advice on filling screen on Universal app

  • January 27, 2013
  • 8 replies
  • 2200 views

My app settings are as follows:

Aspect ratio: Landscape

Full Screen: Checked

My flash movie is 1024 x768

The app now looks and plays well on all devices.

Problem is when I was creating my screenshots for submitting my app to the Apple, I noticed there are black bars on the LHS and RHS of the iPhone 4 and iPhone 5 screenshots.

I was thinking surely I can just add a couple of extra graphics outside the stage area of my Flash movie that extend horizontally in either direction. However when doing a quick test of this, it doesn't appear to display it all.

Before adding the extra graphics, my grab from the iPhone 5 has an area 853 x 640 that displayed my content

After adding the extra graphics to the left and right the area displaying images is 960 x 640 but there is still black bars.I am confused as I added extra imagery outside the stage that was 1024 x 768 in each direction.

Any idea what the solution is to get this extra background graphics displaying to fill the entire black spaces at the sides?

This topic has been closed for replies.
Correct answer Colin Holgate

From your tests I can see that you have the stage scale mode at its default of "show_all". That's fine, and you can just have the extra background images to the left and right of your 1024x768 stage. If that works out for each of your screens, and the extra background doesn't look out of place, then that's the easiest solution.

You will need about 1365 pixels width of background image on your 1024 stage, to make sure it fills the iPhone 5. The inclusion of the Default-568h@2x.png is enough for it to work for iPhone 5 locally, but to make sure it's acceptable to Apple you will want to use AIR 3.5 or 3.6. If your game play involves items moving in and out of the sides of the area, just make sure they come from beyond the edges of the 1365 background, so that on iPhone 5 the don't mysteriously appear out of nowhere.

8 replies

Colin Holgate
Inspiring
January 27, 2013

You said that it played correctly on all devices. Does that mean it filled the full width of the iPhone 5 screen? If it did, then it would be impossible to not get a correct screenshot of that. More likely you saw your 4:3 game playing exactly the same on iPhone 4 and 5 as you saw it on iPad, which means there are black borders down the sides during the game play.

Do you intend the game to fill the borders on the iPhone 4 and 5? If not, then you don't need to provide iPhone 5 screens, because you're not really supporting it, and the iPhone 4 screen having black borders would be correct, because after all it does have black borders.

Something to think about is that you don't have to submit screenshots. You could make up a set of images that convey what the game is all about. Those images could be a mixture of game play and marketing messages. You would make some at 1024x768, for iPad, others at 960x640, for iPhone 4, and others at 1136x640, for iPhone 5.

But, even if you do those iPhone 5 screens your app won't be accepted as supporting iPhone 5, if it isn't filling the whole of the iPhone 5 screen.

P StevenAuthor
Known Participant
January 27, 2013

Thanks Colin

Firstly quite concerned when you say my app will not be accepted as supporting iPhone 5 - does this mean people with iPhone 5 would not be able to purchase game? It has black borders on iPhone 4 too so does that mean it won't be accepted as supporting iPhone 4 either?

I have a splash screen for iPhone 5 i.e Default-568h@2x which displays filling the entire iPhone 5 screen but then it is 1136 X 640

I would prefer not to have black borders on either and was hoping there was simply a way to keep the flash movie at 1024 x 768 and extend the background on either side. Sounds like this is not an easy fix.

What would be the simplest way to fill these borders with extended background graphics? Does it involve changing my flash movie size?

Hopefully there is a not too painful solution as thought I was ready to submit.

iPhone 5 grab

iPad 2 grab

iPhone 4 grab

If I change my flash movie background colour to red here is the result. I have included a grab of the default loading screen here on the iPhone 5

Now as an experiment, I added some code to the play button to move the splash screen background to the left when the button was clicked and the result was as follows. So it certainly looks like it is possible to fill this "red" area. Perhaps the extra graphics need to be added dynamically for it to work?

Since adding the iPhone 5 specific Default-568h@2x.png things seem to have changed as now when I put a duplicate of my splash screen to the left and right of the stage I get the following result on the iPhone 5. Which suggests I should be able to just extend the background graphic in both directions. This seems to still work fine on iPad2 and I have included a grab from iPhone4 too below.

iPhone 5 grab

iPhone 4 grab

Colin Holgate
Colin HolgateCorrect answer
Inspiring
January 27, 2013

From your tests I can see that you have the stage scale mode at its default of "show_all". That's fine, and you can just have the extra background images to the left and right of your 1024x768 stage. If that works out for each of your screens, and the extra background doesn't look out of place, then that's the easiest solution.

You will need about 1365 pixels width of background image on your 1024 stage, to make sure it fills the iPhone 5. The inclusion of the Default-568h@2x.png is enough for it to work for iPhone 5 locally, but to make sure it's acceptable to Apple you will want to use AIR 3.5 or 3.6. If your game play involves items moving in and out of the sides of the area, just make sure they come from beyond the edges of the 1365 background, so that on iPhone 5 the don't mysteriously appear out of nowhere.