Skip to main content
antona44031680
antona44031680
Participant
December 10, 2017
Answered

Exporting iOS App assets for various devices

  • December 10, 2017
  • 1 reply
  • 1463 views

I am going a little crazy over here and hoping someone could answer some of my questions regarding finalized output files. Been searching the internet but can't seem to find any answers.

I am making an app that needs to run on all iPhones and iPads. I will be building the app in Animate.

So now lets say I have the iPhone7+ layout version of the app done inside Animate (at 1242 x 2208) and for our sake its really simple, just a full screen background photo with a custom art (scanned in) next/back arrow buttons that take you to the next photo or back to the previous photo.

Now I publish and do the provisioning so I can preview the app on my iPhone7+, and it looks like it should. But this is where I get stuck.

What do I do to my Animate file thats built for the 7+ in order for it to work on an iPhone5? Do I just resize my 7+ file to be the 640 x 1136 iPhone5 dimensions and publish the file again under a different name? and repeat this process for all the other device sizes leaving me with multiple fla and ipa files for each device? How will Apple know its all "one" app but just different pixel size versions? or is this common? is there a file naming convention?

Also, in the publish settings under General there is a field to "include files", what is this area for? I have included a launch image here for the 7+ version (Default-414w-736h@3x~iphone.png), do I include all the other launch image sizes in here as well? also Apple mentions making 1x 2x 3x size versions of assets, what does this apply to and how to I supply that using Animate? if I had 3,000 images would I need to supply each image in 1x 2x 3x? and where do I put the images files in order for Animate to connect them to Apple somehow? would they go in this "included files" area?

Please help!!!

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

    Thanks Colin, I have more questions...!

    When you say that I could have alternate movieclips, how is this done? as in where do I put them in my Animate file? or where do I put them/save them out to? same goes for the 1x 2x 3x, where do I place these files and how will Apple know to use them since this is not Xcode? Where do all these files live if I only had one app file for all devices? or I guess what steps do I need to take, maybe in the publish settings?

    This is why my thought on putting out a separate app file for each device could be an easier option for me, and I could also optimize the layout as well as image size for each device in the process. Is this against Apple rules?

    Best


    Some people do have an iPad version and an iPhone version of their app, partly because of the ratio of the screen, but also because the iPad is a bigger screen, and so the whole UI could be done with that in mind.

    I don't think you'll find any apps that have an iPhone 5, an iPhone 7, and an iPhone X version. It might even be hard to make an app that forbids all other types of iPhones. It certainly isn't worth the hassle, when you can make one app that does all devices, even if Apple had a way to have multiple versions of the same app.

    When the app runs you can use ActionScript to read what device it is, what the real width and height are, and based on those values you could take the user to a different part of the timeline. Or if you have code that loads the experience from the Library, you could have different movieclips, and you show the user the one that looks the best for that device.

    Here's example code, where in the library you have one movieclip that is shared as HiResMenu, and another that is LoResMenu, and by seeing how many pixels the device has you would show one or the other. In this case I have it that if there are more than 2 million pixels in the device screen, use the high resolution menu:

    import flash.system.Capabilities;

    import flash.display.MovieClip;

    var realheight = Math.min(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

    var realwidth = Math.max(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

    var mc:MovieClip;

    if(realheight*realwidth>2000000){

      mc = new HiResMenu() as MovieClip;

    }else{

      mc = new LoResMenu() as MovieClip;

    }

    addChild(mc);

    The 2 million could be some other number, if you want say iPhone 6 to get the high res menu, and not just the iPhone 6 Plus, you could test for 1 million instead. That way 6 and 6 Plus would get high res, and iPhone 5 would get low res.  It would look the same to the user, but in the LoResMenu you would have used the equivalent of 1x graphics, and in the HiResMenu you would have used the 2x graphics.

    1 reply

    Colin Holgate
    Colin Holgate
    Inspiring
    December 10, 2017

    Fortunately, things are simpler than you think.

    The 1x, 2x, 3x thing relates more to web sites, where you would have Retina and non-Retina versions of graphics, and Safari would give the user the best image for their screen.

    When your 1242x2208 is on iPhone 5, AIR will scale the stage to that size, you don't have to do anything.

    Showing on iPad is a harder case, because the ratio is different. Effectively the iPad will show a 1656x2208 area, and whatever was off the left and right sides of your stage will appear in the extra 414 pixels (so, you'll see 207 pixels of extra stuff on the left and right). All you have to do is have an interesting background image that is centered on the stage, and is 1656x2208.

    You need to include splash screens for all the main types of device. iOS uses the splash screens to know whether your app is iPhone 1 ratio of iPhone 5 ratio. For iPhone 5 you would need Default-568h@2x.png (or it can be named Default-568h@2x~iphone.png). I think you already have the one for iPhone 7. You will need one for iPhone X as well. Somebody in this forum posted a list of the various screens. Can't find that right now!

    As there are so many splash screens it can take a lot of file size just for those alone. These days I just use a solid color, that is the average of the colors in my main menu screen. The splash screen is only there for a brief moment anyway, so having a detailed photograph would perhaps take 40 MB of space, and would only be seen for less than a second.

    antona44031680
    antona44031680Author
    Participant
    December 10, 2017

    Hi Colin, thank you very much for your reply!

    So can I completely forget about supplying the 1x 2x 3x assets when designing my app in Adobe Animate (with the exception of the launch images)?

    Will scaling down the 1242x2208 stage/image on an iPhone5 to 640x1136 slow down the phone? I also heard that autoscaling makes images fuzzy or choppy.

    Could I supply four different standalone files to Apple of the app? One for iPhones (16:9), one for iPhones (4:3), one for iPhone X, and the other for iPad versions (all 4:3). Also if I wanted, could I supply a version to Apple for each specific device, like one specifically for iPhone5, the other for iPhone X, another app file for iPhone 7+ etc...? if yes how do I set these files up, are there any rules? naming conventions? How will I supply these multiple files to Apple store using Animate?

    Best

    Colin Holgate
    Colin Holgate
    Inspiring
    December 10, 2017

    Don't do multiple apps, your one and only app can look after all devices.

    In the Library, for bitmaps, there is an Allow Smoothing option. Using that should help to improve the scaling. In the early iPad days I did in some cases have alternate frames, so that non-Retina iPads would get non-Retina versions of the images. Doing that did help to stop iPad 1 from crashing. But that was years ago, any device that is in use now is likely to cope ok.

    You could have alternate movieclips, then use a less demanding version for slow devices. But I would stop off more optimistically, and do testing on slower devices to see if there are any performance problems.

    By the way, some people do still use a 1x, 2x approach, mainly to help reduce the amount of GPU memory that will be used. So, on lower memory GPU devices a 1x image would be used, and might look a little softer, and on a more memory GPU device a 2x version could be used, and will look sharper. So, you can still do tricks like that to help the less capable devices.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices