Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

AIR Mobile – Ajouter un Splash Screen avec splashScreenImage

Dans une application Flex "web", on a une barre de progression pendant le téléchargement du SWF par l'utilisateur. Mais lorsque l'on traite avec des applications natives, cette dernière n'est pas téléchargée car elle est déjà présente dans sa totalité sur le téléphone ou la tablette. Il existe cependant un certain temps pendant lequel l'application est chargée au démarrage. Ce chargement ne peut pas être quantifié comme un téléchargement (bytes chargés / bytes total) car il s'agit de l'initialisation du système + montée en RAM de l'application.

Pour faire patienter l'utilisateur pendant ces quelques secondes, vous avez la possibilité d'afficher une image, le fameux Splash Screen.

Ajout d'un Splash Screen

Pour ajouter un splash screen à votre application, il faut utiliser la propriété "splashScreenImage" de l'application (ViewNavigatorApplication ou Application) comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         firstView="views.HomeView"
                         splashScreenImage="@Embed('splashscreen.png')" />

Modification de la durée d'affichage minimale du splash screen

Selon la puissance de la machine qui charge l'application, le splash screen sera affiché plus ou moins longtemps. Si vous êtes super fier de votre splash screen et que vous souhaitez être sûr qu'il s'affiche pendant un certain temps, modifiez la propriété "splashScreenMinimumDisplayTime" de l'application (en ms).

Le code suivant laissera le SplashScreen affiché au moins 2 secondes:

<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           firstView="views.HomeView"
                           splashScreenImage="@Embed('splashscreen.png')"
                           splashScreenMinimumDisplayTime="2000" />

Mode d'affichage du splash screen (scaling)

Suivant la taille du device sur lequel tourne votre application, votre splash screen devra s'adapter.

Vous pouvez contrôler cette adaptation grâce à la propriété "splashScreenScaleMode" qui prend les valeurs suivantes:

• "none" (default) : le splash screen reste à sa taille
• "letterbox": le splash screen prend un maximum de place mais conserve son ratio initial
• "stretch": le splash screen prend tout l'écran, sans conservation du ratio
• "zoom": le splash screen est mis à l'échelle pour prendre toute la place disponible (peut sortir en dehors du cadre et rogner l'image).

Le problème actuel avec le Splash Screen

Vous l'avez compris, cette propriété est bien pratique mais a ses limitations. En effet, avec une mise à l'échelle de votre splash screen, la qualité de celui-ci va être dégradé. Aussi bien en up-scaling qu'en down-scaling. De même, il n'est pas possible de donner un splashScreen pour l'orientation portrait et un pour le landscape. Ne pouvoir mettre qu'un seul splashScreen sur l'application est donc une limitation dans le système actuel.

Mais tout n'est pas perdu, cette limitation a été relevée et sera perfectionnée dans les prochaines versions, vous permettant de mettre plusieurs versions du SplashScreen qui seront automatiquement choisies selon leur taille. Vous pouvez même le faire, il vous suffit de modifier la classe qui sert à faire le preload de l'application (inspirez-vous de l'existant, allez fouiller dans le code de Flex).

Note pour les environnements iOS et BlackBerry

Petite note pour ce qui concerne iOS et BlackBerry. Ces 2 environnements ont leurs propres conventions pour les splashscreen de leurs applications, en plus du chargement de l'application lui-même. Pour spécifier ces "pre-splashscreen", il vous faudra ajouter des images ayant un nom bien particulier (comme Default.png pour iPhone par exemple) dans vos sources. Le compilateur prendre automatiquement ce fichier pour l'intégrer comme splashscreen de l'application. Notez que pour l'iPad, vous pouvez spécifier des pre-splashscreen pour les 4 orientations de l'appareil.

Ces noms conventionnels sont décris dans les documentations. Il y aura peut-être un article sur ces points sur flex-tutorial.fr qui en fera le résumé.