Adobe Flex Tutorial - Adobe Flex Tutorial

19oct/100

AIR pour iPhone – Créer des icônes pour la barre d'outil permanente iOS

Pas beaucoup de billets en ce moment sur flex-tutorial car je travaille d'arrache-pied sur une application mobile (plus d'infos dans des billets qui vont arriver sous peu ). Cette application a tout d'abord été destinée aux portables Android avec la sortie d'Air 2.5 en release sur le Marker dernièrement.

L'application est prévue pour s'adapter à la plateforme sur laquelle elle s'exécute, que ce soit Android ou iPhone (ou iPad ou BlackBerry pour bientôt). Pour l'instant, l'application n'a pas (ou très peu) été testée sur plate-forme iOS pour plusieurs raisons:

Attente de la sortie du Packager For iPhone compatible avec Air 2.5.
Manque de temps
Temps de compilation encore trop longs (> 5min) et synchronisation iTunes laborieuse
Beaucoup plus facile de développer / déployer sur un Android

Mais en attendant les développements sur le PFI, je peux toujours tester mon application Air dans un environnement bureautique. En effet, la bascule de style / comportement se fait dans le code. Avec une seule ligne de code, je peux donc passer "en mode iPhone".

Les ressources à disposition

Pour ces 2 plate-formes, on retrouve pas mal de ressources pour aider le graphisme (skinning des composants, configuration des styles, …). Pour Android, par exemple, on peut se réferrer aux guidelines officielles ou alors télécharger des packs d'icônes. Je ne fais pas la liste explicite, Google trouve tout cela très bien.

Pour plate-formes iOS, on trouve aussi pas mal de ressources comme par exemple:

La grande majorité sont au format PNG / PSD. Si vous voulez des sources vectorielles, voici une très bonne ressource au format Illustrator:

http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements

Des icônes vierges?

Dans ces packs d'icônes, je pensais retrouver les versions "grises" et "bleues" (sélectionnées) de chaque icône. Et en fait, pas du tout, chaque icône est un simple PNG (de différentes tailles pour s'accorder avec les différentes résolutions et Retina) avec un tracé blanc sur fond transparent:

En cherchant un peu sur le site d'Apple, j'ai découvert que c'était la manière de définir des icônes dans les applications native iOS. Voici un bout de la documentation officielle:

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html

Partie "Icons for Navigation Bars, Toolbars, and Tab Bars":

After you’ve decided on the appearance of your icon, follow these guidelines as you create it:

Use pure white with appropriate alpha

Do not include a drop shadow.

Use anti-aliasing.

If you decide to add a bevel, be sure that it is 90° (to help you do this, imagine a light source positioned at the top of the icon).

Don’t include a pressed or selected appearance with your icons. iOS automatically provides these appearances for items in navigation bars, toolbars, and tab bars, so you do not need to provide them. Because these visual effects are automatic, you cannot change their appearance.

Comme précisé, c'est iOS qui s'occupe de créer les images pour les états sélectionnés (ou non) de manière automatique en prenant l'image blanc/alpha comme masque. Plutôt malin pour s'assurer d'avoir une cohérence graphique dans toutes les applications. Pour être sûr de passer l'étape de validation Apple de son application, il faut respecter ces instructions à la lettre et comme on ne peut pas intégrer de composants iOS natif dans AIR, il faut faire sans. Alors bien sûr, cela va demander un peu de travail (assez répétitif) pour nous développeurs mais une fois votre set d'icônes prêt, vous aurez tout sous la main.

Créer ses propres variations d'icônes (Tutorial Illustrator)

Si vous avez des compétences dans les autres logiciels Adobe, il est temps d'en faire preuve. Pour ma part, j'ai une assez bonne maîtrise d'Illustrator donc je vais montrer les manipulations sur ce logiciel (sur une CS2 mais cela est valable pour la majorité des versions d'Illustrator). Vous pouvez aussi créer vos icônes dans Photoshop mais Illustrator vous permettra de redimensionner vos icônes tranquillement pour les plate-formes à haute résolution (iPad & Co).

En plus, ca me rappelle les premiers tutoriaux que j'avais écrit sur Illustator. Nostalgie ^^

On commence par télécharger un pack d'icônes pour iOS. Pour ma part, j'ai pris http://www.glyfx.com/products/free_iphone.html.

Ouverture d'Illustrator,création + enregistrement d'un nouveau document et création d'un calque de fond:

Renommez votre calque en "Background" (double clic sur le calque). Dans ce calque, tracez un rectangle de couleur foncée (voire noire) pour que l'on puisse voir notre image blanche/transparente. Une fois calque de votre fond terminé, verrouillez-le pour ne pas le sélectionner par erreur:

Sélectionnez un calque non-verrouillé (Calque 2 par exemple) et faîtes glisser le fichier PNG blanc/transparent dans Illustrator:

Un peu comme le fait iOS, on va utiliser cette image comme masque. Ainsi, on va créer le fond de couleur bleue séparément. On ne vas pas se soucier de la forme de ce fond car c'est le masque qui va lui donner une forme.

On commence par tracer un rectangle avec fond uni de couleur #A3C3EA dans notre Calque 2:

On ajoute ensuite une ellipse avec une légère rotation et un dégradé de bleu:

Sélectionnez les deux formes que vous venez de créer puis groupez-les (Ctrl+G):

Passez ensuite le "Fichier lié" au dessus de Groupe par glissé-déplacé:

Dans Illustrator, les pastilles situées à droite du nom de calque servent à sélectionner. Cliquez donc sur celle de "Fichier lié" puis avec Ctrl appuyé, cliquez sur celle de "Groupe". Rendez-vous ensuite dans la palette "Transparence" et cliquez sur la petite flêche permettant d'ouvrir un menu contextuel. Dans ce menu, cliquez sur créer un masque d'opacité:

Vous allez obtenir une première ébauche de votre icone:

Pour renforcer un peu l'effet, sélectionner votre "Calque 2" puis dans le menu, Effet > Spécial >Lueur Interne. Atténuation 1mm, couleur blanche, mode superposition, Contour:

Si vous voulez aller encore plus loin, vous pouvez ajouter un très légère ombre portée mais je crois qu'il n'y en a pas sur les icônes iOS.

Pour la version grise, répétez la même opération en changeant le masque d'opacité de couleur .

Voilà, il ne vous reste plus qu'à faire un export en PNG de votre image (sans oublier de supprimer le fond noir) et l'affaire est dans le sac. Pour n'exporter qu'une zone donnée, utilisez une "zone de recadrage":

Création, modification et suppression des zones de recadrage

Allez comme cadeau, je vous file le fichier Illustrator d'exemple:

Télécharger les sources Illustrator