ADOBE FLASH LITE 1 User Manual

Développement d'applications

FLASH® LITE™ 1.x

Développement d'applications Flash® Lite™ 1.x d'Adobe

S’il est distribué avec un logiciel comprenant un contrat de licence, ce manuel, ainsi que le logiciel qui y est décrit, sont cédés sous licence et ne peuvent être utilisés ou copiés que conformément à la présente licence. Sauf lorsque cela est prévu par la licence, aucune partie de ce manuel ne peut être reproduite, conservée sur un support de stockage ou transmise par un moyen ou sous une forme quelconque (électronique, mécanique, enregistrée ou autre), sans l’autorisation écrite préalable d’Adobe Systems Incorporated. Veuillez noter que le contenu de ce manuel est protégé par des droits d’auteur, même s’il n’est pas distribué avec un logiciel comprenant un contrat de licence.

Les informations contenues dans ce manuel sont fournies à titre purement indicatif et ne doivent pas être considérées comme un engagement de la part d’Adobe Systems Incorporated, qui se réserve le droit de les modifier sans préavis. Adobe Systems Incorporated décline toute responsabilité en cas d’éventuelles erreurs ou inexactitudes relevées dans le contenu informationnel de ce manuel.

Nous attirons votre attention sur le fait que les illustrations ou images que vous pouvez être amené à inclure dans vos projets sont peut-être protégées par des droits d’auteur. L’exploitation de matériel protégé sans l’autorisation de l’auteur constitue une violation de droit. Assurez-vous d’obtenir les autorisations requises avant de procéder.

Toutes les références à des noms de sociétés utilisés dans les modèles sont purement fictives et ne renvoient à aucune entreprise existante.

Adobe, the Adobe logo, Creative Suite, Dreamweaver, Flash, and Flash Lite are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Windows is either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries. Macintosh is a trademark of Apple Inc., registered in the United States and other countries. Symbian and all Symbian based marks and logos are trademarks of Symbian Limited. All other trademarks are the property of their respective owners.

Sorenson Spark™ video compression and decompression technology licensed from Sorenson Media, Inc.

MPEG Layer-3 audio compression technology licensed by Fraunhofer IIS and Thomson Multimedia (

Portions licensed from Nellymoser, Inc. (

www.nellymoser.com).

http://www.iis.fhg.de/amm/).

http://www.on2.com.

Updated Information/Additional Third Party Code Information available at http://www.adobe.com/go/thirdparty/.

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.

Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

Sommaire

Chapitre 1 : Présentation

Nouveautés de la programmation Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Guide des supports de formation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Ressources supplémentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Conventions typographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Chapitre 2 : Présentation de Flash Lite

A propos de la technologie Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Disponibilité de Flash Lite 1.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

A propos des types de contenus Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Flux de travail lors de la création d'applications Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Fonctionnalités de création Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Application Flash Lite Hello World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Présentation du lecteur Flash Lite autonome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

iii

Chapitre 3 : Création d’une application Flash Lite

Présentation de l'application Café . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Affichage de l'application terminée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Création de l'application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Chapitre 4 : Création d'interactivité et d'éléments de navigation

Touches prises en charge par Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Utilisation de la navigation par tabulation dans Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Gestion des événements de touche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Gestion des événements de bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Utilisation des touches programmables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Chapitre 5 : Utilisation du texte et des polices

A propos du texte dans Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Utilisation des champs texte de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Méthodes de rendu des polices dans Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Qualité de rendu et texte anti-aliasé de Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Intégration des polices vectorielles dans les fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Exemple d'application de champ texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Création de texte défilant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Chapitre 6 : Utilisation du son

A propos du son dans Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Utilisation des sons de périphérique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Utilisation de sons Flash natifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Chapitre 7 : Optimisation du contenu pour de meilleures performances et une taille de fichier réduite

Optimisation des performances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Sommaire

Chapitre 8 : Test du contenu Flash Lite

Présentation des fonctionnalités de test Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Fonctionnalités de test non prises en charge par l'émulateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Utilisation de l'émulateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Types de contenus Flash Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Détermination des fonctionnalités de la plate-forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Chapitre 9 : Formation à ActionScript Flash Lite 1.x

A propos d'ActionScript Flash Lite 1.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Guide d'introduction au code ActionScript Flash 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Tâches de script courantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Index ................................................................................................................ 88

Chapitre 1 : Présentation

Ce manuel décrit le développement d'applications pour périphériques portables à l'aide de Macromedia® Flash® Lite™

1.0 et Macromedia® Flash® Lite™1.1 d'Adobe, dont l'ensemble porte le nom de Flash Lite 1.x. Le manuel explique comment utiliser divers modes de navigation pour les différents périphériques et comment vous servir du texte et des polices. Ce manuel explique également comment gérer la mémoire d'exécution disponible dans les applications Flash Lite fonctionnant sur différents modèles de téléphones portables. Grâce à Adobe® Device Central CS4, l'émulateur mobile intégré à Adobe® Flash® CS4 Professional, vous pouvez tester et déboguer votre application dans l'outil de programmation avant de la tester sur un périphérique réel.

Nouveautés de la programmation Flash Lite

Flash inclut les nouvelles fonctionnalités suivantes qui permettent aux développeurs de créer des applications Flash Lite :

Adobe Device Central Adobe Device Central comporte un émulateur qui permet de prévisualiser la manière dont le

contenu sera exécuté sur un périphérique. L'émulateur peut être configuré de manière à reproduire les fonctionnalités disponibles sur tout périphérique pris en charge. Il propose également des informations de débogage qui vous renseignent sur d'éventuels problèmes ou incompatibilités sur le périphérique cible.

Modèles de document de périphérique Flash comprend des modèles de document permettant de vous lancer

rapidement dans la création de contenu pour des périphériques et des types de contenus spécifiques.

Guide des supports de formation

La documentation de Flash Lite inclut les supports suivants qui vous permettront de vous familiariser avec la création d'applications Flash Lite :

• Développement d'applications Flash Lite 1.x est un guide complet sur la création de contenu Flash Lite 1.x. Il

contient un didacticiel détaillé de création d'une application Flash Lite 1.x et des instructions pour tester vos applications dans l'émulateur Adobe Device Central.

• Guide de référence du langage ActionScript Flash Lite 1.x décrit toutes les fonctionnalités du langage ActionScript

disponibles pour les développeurs de Flash Lite et fournit des exemples de code.

• Les exemples d'applications Flash Lite, disponibles à l'adresse www.adobe.com/go/learn_flt_samples_and_tutorials

, illustrent les meilleures pratiques et les concepts indispensables qui sont traités ou évoqués dans la présente documentation.

Ressources supplémentaires

Pour obtenir les toutes dernières informations sur le développement d'applications Flash Lite, avec des avis d'utilisateurs experts, des rubriques avancées, des exemples, des conseils et d'autres mises à jour, consultez la page du pôle de développement des périphériques et terminaux mobiles à l'adresse www.adobe.com/go/developer_flashlite_fr.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Présentation

Pour bénéficier des TechNotes, des mises à jour de la documentation et des liens utiles vers des ressources supplémentaires dans la communauté des développeurs de Flash Lite, visitez le Support Flash Lite à l'adresse

www.adobe.com/go/support_flashlite_fr.

Conventions typographiques

Ce manuel utilise les conventions typographiques suivantes :

• La police en italique indique une valeur à remplacer (par exemple, dans le chemin d'un dossier).

• La police de code indique le code ActionScript.

• La police en gras désigne une entrée littérale.

• Les guillemets droits (""), dans les exemples de code, séparent les chaînes de caractères. Cependant, les

programmeurs peuvent également employer des guillemets simples.

Chapitre 2 : Présentation de Flash Lite

Macromedia Flash Lite d'Adobe est une version d'Adobe Flash Player conçue pour les périphériques portables.

A propos de la technologie Flash Lite

Macromedia Flash Lite d'Adobe est une version d'Adobe Flash Player conçue pour les périphériques portables. Elle associe les fonctionnalités Flash à la puissance de traitement et aux configurations des périphériques portables les plus vendus actuellement sur le marché. Cette documentation s'applique aux deux versions de Flash Lite 1 : Flash Lite 1.0 et Flash Lite 1.1, dénommées collectivement Flash Lite 1.x. Flash Lite 1.x est composé des éléments suivants :

Moteur de rendu principal Le moteur de rendu gère l'ensemble du rendu vectoriel et bitmap.

Interprète d'ActionScript Flash Lite prend en charge la version du langage ActionScript utilisé dans Macromedia®

Flash® Player 4 d'Adobe, y compris de nombreuses commandes spécifiques des téléphones portables, comme la récupération des informations relatives à l'heure et à la date à partir du périphérique. Ce code ActionScript hybride de Flash Player 4, ainsi que les commandes et propriétés spécifiques de Flash Lite, forment ce que l'on appelle le code ActionScript Flash Lite 1.x.

Pour de plus amples informations sur ActionScript Flash Lite 1.x, reportez-vous au Guide de référence du langage ActionScript Flash Lite 1.x.

Texte et polices Flash Lite prend en charge les champs texte statique, dynamique et de saisie. Vous pouvez utiliser

les polices disponibles sur le périphérique ou intégrer des données de police dans votre fichier SWF publié. Pour plus d'informations sur l'utilisation du texte et des polices dans Flash Lite, consultez la section « Utilisation du texte et des

polices » à la page 40.

Son Flash Lite 1.0 et Flash Lite 1.1 prennent tous les deux en charge les formats audio de périphérique (par exemple,

MIDI ou MFi). Flash Lite 1.1 prend également en charge les paramètres audio Flash standard. Pour plus d'informations sur l'utilisation du son dans Flash Lite, consultez la section « Utilisation du son » à la page 53.

Connectivité réseau Flash Lite 1.1 prend en charge le chargement de données externes et de fichiers SWF, ainsi que

les commandes et propriétés permettant d'obtenir des informations relatives à l'état des requêtes HTTP et de la connectivité.

Intégration de plates-formes et de périphériques Flash Lite permet d'accéder à différentes commandes et

fonctionnalités système, comme le lancement d'appels téléphoniques et l'envoi de SMS, ainsi que l'obtention d'informations sur les capacités de la plate-forme ou sur les actions de l'utilisateur grâce aux boîtes de dialogue de saisie standard du périphérique.

Disponibilité de Flash Lite 1.x

Flash Lite 1.0 et Flash Lite 1.1 sont pris en charge sur de nombreux périphériques portables vendus dans diverses régions et marchés dans le monde. Certains de ces périphériques sont disponibles dans le monde entier. D'autres ne sont vendus que dans certaines zones géographiques ou par des opérateurs de télécommunications mobiles spécifiques. Sur certains périphériques, Flash Lite est pré-installé par le fabricant ou l'opérateur de télécommunications mobiles ; sur les autres en revanche, il faut l'installer après avoir acheté le périphérique.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Présentation de Flash Lite

Pour obtenir la liste la plus récente des périphériques prenant en charge Flash Lite, consultez la page

www.adobe.com/go/mobile_supported_devices_fr.

Les périphériques disponibles dans le monde entier prenant en charge Flash Lite sont les suivants : les modèles

Symbian Series 60 des marques Nokia, Sendo et Siemens, ainsi que les modèles Symbian UIQ de Sony-Ericsson. A l'heure actuelle, la plupart des périphériques disponibles dans le monde entier ne prennent en charge que le lecteur Flash Lite autonome. Le lecteur autonome est installé comme une application de « niveau supérieur » que l'utilisateur peut lancer depuis le menu d'applications de son périphérique (de la même manière qu'une application de messagerie texte ou un navigateur Web mobile, par exemple). Pour plus d'informations sur le lecteur Flash Lite autonome, consultez la section « Présentation du lecteur Flash Lite autonome » à la page 8.

A l'heure actuelle, le lecteur Flash Lite autonome n'est pré-installé sur aucun périphérique disponible dans le monde entier. Vous pouvez acheter ce lecteur autonome à des fins de développement dans le magasin en ligne d'Adobe à l'adresse www.adobe.com/go/store_fr.

Les périphériques disponibles au niveau régional prenant en charge Flash Lite sont plus nombreux que ceux

disponibles dans le monde entier. A l'heure actuelle, ces périphériques sont vendus principalement au Japon et fournis avec Flash Lite pré-installé. Sur ces périphériques, Flash Lite permet d'afficher plusieurs types de contenus, tels que des économiseurs d'écran Flash et des sonneries animées. Pour plus d'informations sur les types de contenus Flash Lite, consultez la section « A propos des types de contenus Flash Lite » à la page 4.

A propos des types de contenus Flash Lite

Avant de commencer à développer une application Flash Lite, vous devez connaître les points suivants :

• Le ou les périphériques sur lesquels le contenu sera exécuté, ou périphériques cibles. Le lecteur Flash Lite est installé

sur de nombreux périphériques. Pour obtenir une liste complète des périphériques équipés de Flash Lite, consultez la page regroupant les périphériques pris en charge sur le site Web d'Adobe à l'adresse

www.adobe.com/go/mobile_supported_devices_fr.

• Les types de contenus Flash Lite pris en charge par les périphériques cibles. Toutes les installations Flash Lite

prennent en charge un ou plusieurs modes d'application ou types de contenus. Par exemple, certains périphériques ont recours à Flash Lite pour activer les fonctionnalités d'économiseurs d'écran et de sonneries animées Flash. D'autres utilisent Flash Lite pour afficher du contenu Flash intégré dans des pages Web mobiles. Certains types de contenus ne prennent pas en charge toutes les fonctionnalités Flash Lite.

Tous les types de contenus Flash Lite, associés à un périphérique particulier, définissent un ensemble de fonctionnalités Flash Lite spécifiques disponibles pour votre application. Par exemple, une application Flash fonctionnant comme un économiseur d'écran n'est généralement pas autorisée à établir des connexions réseau ou à télécharger des données.

Les fonctionnalités de test de Flash Lite sous Flash permettent de tester différents périphériques et types de contenus Flash Lite. Vous pouvez ainsi déterminer si votre application fait appel à des fonctionnalités non disponibles pour le type de contenu que vous développez. Pour plus d'informations sur le choix des périphériques cibles et des types de contenus, consultez la section « Test du contenu Flash Lite » à la page 63.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Présentation de Flash Lite

Flux de travail lors de la création d'applications Flash Lite

La procédure de création de contenu Flash Lite est une méthode itérative qui implique les étapes suivantes :

Identification des périphériques cibles et du type de contenu Flash Lite De nombreux périphériques présentent des

caractéristiques différentes, par exemple en termes de taille d'écran, de prise en charge des formats audio et de profondeur de couleur d'écran. Ces facteurs peuvent influer sur la conception ou l'implémentation de votre application.

En outre, de nombreux périphériques prennent en charge différents types de contenus Flash Lite, tels que les économiseurs d'écran, les applications autonomes ou les sonneries animées. Le type de contenu pour lequel vous programmez détermine également les fonctionnalités disponibles pour votre application. Pour plus d'informations sur les types de contenus Flash Lite, consultez la section « A propos des types de contenus Flash Lite » à la page 4.

Création et test de l'application dans Flash Adobe Flash CS4 Professional comprend un émulateur dans Adobe Device

Central CS4 qui permet de tester votre application sans la transférer à un périphérique. L'émulateur permet de parfaire la conception de votre application et de résoudre d'éventuels problèmes avant de la tester sur un périphérique portable réel.

Test de l'application sur les périphériques cibles Cette opération est importante car l'émulateur ne simule pas tous les

aspects du périphérique cible. Par exemple, un dégradé de couleur qui semble continu sur l'émulateur peut apparaître avec des bandes lors de son affichage sur le périphérique. Après avoir testé votre application sur un périphérique, si nécessaire vous avez toujours la possibilité d'en affiner la conception dans l'outil de programmation Flash.

La figure suivante illustre le développement itératif et la procédure de test décrits ci-dessus.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Présentation de Flash Lite

A. Modification du fichier FLA dans Adobe Flash B. Test dans l'émulateur Adobe Device Central C. Test sur un périphérique

Fonctionnalités de création Flash Lite

Cette section présente les fonctionnalités de Flash spécifiquement conçues pour les développeurs Flash Lite. A l'exception de la fonctionnalité de modèles de périphériques, les fonctionnalités suivantes ne sont disponibles que si le paramètre Version de votre document est défini sur Flash Lite 1.0 ou Flash Lite 1.1 dans l'onglet Flash de la boîte de dialogue Paramètres de publication. Pour plus d'informations sur la spécification de la version du fichier SWF de vos documents, consultez la section « Définition d'options de publication pour le format de fichier Flash SWF » dans l'aide de Flash.

Adobe Device Central permet de tester la manière dont le contenu sera exécuté et affiché sur un périphérique. Il

permet aussi de sélectionner un autre périphérique de test, d'afficher des informations sur votre application et de définir les options de débogage de l'émulateur. Certains périphériques prennent en charge des types de média spécifiques (par exemple, différents types de formats audio de périphérique), ainsi que divers types de contenus Flash Lite, tels qu'un lecteur autonome, un économiseur d'écran ou un navigateur. Lorsque vous prévisualisez votre application, l'émulateur simule comme type de contenu spécifié les fonctionnalités disponibles pour le périphérique de test sélectionné.

Pour plus d'informations sur les types de contenus Flash Lite, consultez la section « A propos des types de contenus

Flash Lite » à la page 4.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Présentation de Flash Lite

L'inspecteur Propriétés contient une section fournissant des informations sur les paramètres de votre périphérique

actuel, ainsi qu'un bouton qui permet d'ouvrir la boîte de dialogue Paramètres du périphérique. Ce bouton n'est actif que si le paramètre Version de votre document est défini sur Flash Lite 1.0 ou Flash Lite 1.1 dans l'onglet Flash de la boîte de dialogue Paramètres de publication.

A. Bouton Paramètres du périphérique B. Type de contenu et périphérique de test actifs

Application Flash Lite Hello World

Dans cette section, vous allez créer une application Flash Lite simple pour la tester dans l'émulateur Adobe Device Central. L'objectif de ce didacticiel est de vous familiariser avec les fonctionnalités de test et de programmation pour périphériques portables d'Adobe Flash CS4 Professional, ainsi qu'avec le processus de création général du contenu Flash Lite. Pour obtenir un exemple d'application plus détaillé, consultez la section « Création d’une application Flash

Lite » à la page 10.

Vous devez d'abord choisir les périphériques et le type de contenu Flash Lite que vous ciblez. Dans le cadre de ce didacticiel, nous allons supposer que vous développez du contenu pour le lecteur autonome Flash Lite 1.1 sur les périphériques de la gamme Series 60 de Nokia. Tous les périphériques de la gamme Series 60 de Nokia pris en charge ont la même taille de scène disponible (176 x 208 pixels). Par conséquent, la même application (fichier SWF) doit en principe s'exécuter sur tous ces périphériques.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Présentation de Flash Lite

Pour commencer le développement, vous devez d'abord configurer les paramètres de publication de votre document Flash, les paramètres du document, ainsi que les paramètres du périphérique en fonction du périphérique et du type de contenu ciblés. Vous pouvez effectuer ce paramétrage manuellement à l'aide d'un nouveau document vierge ou vous pouvez utiliser un modèle Flash Lite pour créer un nouveau document préconfiguré dont les paramètres sont adaptés au périphérique et au type de contenu ciblés. La procédure suivante explique comment créer une application simple de type « Hello World ».

Pour configurer et créer une application Flash Lite simple :

1 Démarrez Flash.

2 Dans l'écran Flash principal, sélectionnez Créer > Document mobile Flash. Flash ouvre Adobe Device Central et

affiche l'onglet Nouveau document.

3 Dans Device Central, repérez la zone Version du lecteur et sélectionnez-y Flash Lite 1.1; faites de même pour la

zone Version d'ActionScript avec ActionScript 2.0 et la zone Type de contenu avec Lecteur autonome.

4 Cliquez sur Taille personnalisée pour tous les périphériques sélectionnés, en bas de l'écran. Ceci vous permet de

créer du contenu pour le lecteur Flash Lite autonome.

5 Cliquez sur Créer. Vous revenez à Flash qui lance la création d'un document en utilisant les paramètres de

publication prédéfinis et (lorsque vous spécifiez un périphérique) la taille adéquate pour le périphérique sélectionné.

6 Dans le panneau Outils, sélectionnez l'outil Texte et faites-le glisser sur la scène pour créer une zone de texte.

Tapez Hello, world ! (ou tout autre texte) dans la zone de texte.

7 Sélectionnez Contrôle > Tester l'animation pour exporter votre application vers Adobe Device Central et l'afficher

dans son émulateur.

Remarque : Au cours de la phase de test effectué dans Device Central, il est possible de modifier le périphérique et le type de contenu pour voir l'application sur une autre plate-forme. Pour cela, double-cliquez sur un périphérique dans le panneau de bibliothèque et sélectionnez un nouveau type de contenu dans la zone Type de contenu. Lorsque vous revenez à Flash, les paramètres que vous avez utilisés la dernière fois dans l'émulateur sont conservés.

8 Pour revenir à Flash, sélectionnez Fichier > Retourner à Flash.

Sélectionnez Contrôle > Tester l'animation pour afficher l'application dans l'émulateur Adobe Device Central.

Présentation du lecteur Flash Lite autonome

Le lecteur Flash Lite 1.1 autonome est une application qui permet d'ouvrir et d'afficher les fichiers SWF se trouvant sur la carte mémoire de votre périphérique, accessibles depuis son navigateur Web mobile ou arrivés dans sa boîte de réception grâce à la technologie sans fil Bluetooth® ou à une connexion infrarouge.

A l'heure actuelle, le lecteur autonome est disponible dans le monde entier pour les plates-formes et périphériques suivants :

Plate-forme Series 60 :

• Nokia 3600, 3620, 3650, 3660, 6260, 6600, 6620, 6630, 6670, 6680, 6681, 7610, N-Gage, N-Gage QD

• Sendo X

• Siemens SX1

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Présentation de Flash Lite

Plate-forme UIQ :

• Sony Ericsson P900, P910

En tant que développeur, vous pouvez acheter le lecteur Flash Lite 1.1 autonome pour les périphériques pris en charge dans le magasin en ligne d'Adobe à l'adresse www.adobe.com/go/store_fr. Pour obtenir une liste des questions les plus fréquemment posées concernant l'achat du lecteur autonome, consultez la section FAQ de Flash Lite 1.1 à l'adresse

www.adobe.com/go/flt_faqs_fr. Pour obtenir de l'aide sur l'installation du lecteur, consultez la TechNote 4632f5aa à

l'adresse www.adobe.com/go/4632f5aa_fr.

Chapitre 3 : Création d’une application Flash Lite

La présente section porte sur le développement d'une application Adobe Flash Lite de promotion pour un restaurant fictif, le Café Townsend. Les utilisateurs peuvent afficher une liste des spécialités servies et appeler le restaurant pour réserver une table.

Présentation de l'application Café

L'écran initial de l'application Café contient un texte d'introduction sur le restaurant et un menu à deux éléments : Specials et Reservations. Pour sélectionner une option de menu, l'utilisateur doit appuyer sur les flèches Haut ou Bas de son périphérique pour définir le focus, puis appuyer sur la touche de sélection pour confirmer son choix.

Ecran principal de l'application Café

Si l'utilisateur sélectionne l'option de menu Specials, un écran qui permet de naviguer dans la liste des plats du jour apparaît. Pour parcourir les images et descriptions des plats, l'utilisateur appuie sur la touche programmable Droite du périphérique (intitulée Next). Pour revenir à l'application principale, il appuie sur la touche programmable Gauche (intitulée Home).

Ecran Specials de l'application Café

Si l'utilisateur sélectionne l'option Reservations dans l'écran principal, l'application lance directement un appel téléphonique vers le restaurant. Avant de composer le numéro, Flash Lite demande toujours à l'utilisateur de confirmer qu'il souhaite lancer l'appel.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d’une application Flash Lite

Affichage de l'application terminée

Une version complète de l'application Café est installée avec Flash. Vous pouvez afficher l'application finalisée dans Device Central, ou si une version autonome de Flash Lite 1.1 est installée sur votre périphérique portable, vous pouvez transférer le fichier SWF sur ce périphérique pour l'y afficher.

Pour afficher l'application finalisée dans Adobe Device Central :

1 Dans Flash, ouvrez le fichier cafe_tutorial_complete.fla qui se trouve à l'adresse

www.adobe.com/go/learn_flt_samples_and_tutorials_fr. Cette page Web regroupe des didacticiels et des

exemples : repérez, téléchargez et décompressez le fichier .zip correspondant à votre version de Flash Lite, puis affichez le dossier Tutorial Assets qu'il contient et sélectionnez le fichier qui vous intéresse.

2 Sélectionnez Contrôle > Tester l'animation pour lancer l'application dans l'émulateur.

3 Pour interagir avec l'application, procédez comme suit :

• Dans l'écran principal, cliquez sur la flèche Bas du clavier de l'émulateur pour sélectionner l'élément de menu

Specials. Cliquez ensuite sur la touche de sélection de l'émulateur pour afficher l'écran.

• Dans l'écran Specials, cliquez sur la touche programmable Droite (intitulée Next) de l'émulateur pour afficher

l'image et la description de chaque plat. Cliquez sur la touche programmable Gauche (intitulée Home) pour retourner dans l'écran principal.

• De retour dans l'écran principal, sélectionnez l'élément de menu Reservations pour passer un appel

téléphonique au restaurant.

Création de l'application

Cette section contient des procédures détaillées qui permettent de recréer l'application Café. Le didacticiel est organisé en trois parties :

• Sélection des périphériques de test et des types de contenus. Dans cette section, vous allez configurer les paramètres

de publication, de document et de périphérique de votre document Flash.

• Création du menu pour l'écran principal de l'application. Dans cet écran, l'utilisateur peut afficher les images et les

descriptions des plats du jour ou appeler le restaurant pour réserver une table à partir d'un même menu.

• Création de l'écran Specials. Dans cet écran, l'utilisateur peut appuyer sur la touche programmable Gauche du

périphérique pour parcourir les images et les descriptions des plats servis chaque jour au déjeuner dans le café, ou bien il peut appuyer sur la touche programmable Droite pour retourner à l'écran principal.

Sélection des périphériques de test et des types de contenus

Vous utilisez Device Central pour sélectionner les périphériques et le type de contenu que vous ciblez. Lorsque vous testez votre application dans l'émulateur Adobe Device Central, ce dernier est configuré pour adapter la configuration du lecteur au périphérique et au type de contenu cibles.

Vous indiquez ces paramètres dès le départ lorsque vous créez votre document mobile Flash. Pour plus d'informations sur la création d'un document du début à la fin, consultez la section « Application Flash Lite Hello World » à la page 7.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d’une application Flash Lite

Création du menu pour l'écran principal

Dans cette section, vous allez créer le menu de l'écran principal de l'application. Ce menu se compose de deux options : Specials et Reservations. L'option Specials dirige l'utilisateur vers un écran affichant les images et descriptions des plats du jour du café. L'option Reservations lance un appel téléphonique vers le café pour permettre à l'utilisateur de faire une réservation.

Le menu comporte deux boutons Flash standard qui définissent les états Haut, Dessus et Abaissé. L'utilisateur donne le focus à l'un de ces boutons en appuyant sur la flèche Haut ou Bas du périphérique. Lorsqu'un bouton a le focus, il s'affiche à l'état Dessus. Il génère un événement de bouton du périphérique. Cette navigation par tabulation par défaut permet de créer facilement une interface utilisateur simple pour une application Flash Lite. Pour plus d'informations sur l'utilisation de la navigation par tabulation, consultez la section « Utilisation de la navigation par tabulation dans Flash Lite » à la page 21.

Pour créer le menu de l'écran principal :

1 Dans Flash, ouvrez le fichier que vous avez enregistré dans la section précédente (consultez la section « Sélection

des périphériques de test et des types de contenus » à la page 11).

2 Dans la fenêtre Scénario (Fenêtre > Scénario), sélectionnez l'image 1 dans le calque du menu.

3 Pour créer le menu, ouvrez le panneau Bibliothèque (Fenêtre > Bibliothèque), puis faites glisser une occurrence du

symbole de bouton Specials sur la scène.

press lorsque l'utilisateur appuie sur la touche de sélection

Positionnez le bouton sous le champ texte (déjà en place) présentant le restaurant.

4 Faites glisser l'occurrence du symbole de bouton Reservations sur la scène et placez-la sous le bouton Specials,

comme indiqué dans l'illustration suivante :

5 Sélectionnez le bouton Specials et ouvrez le panneau Actions (Fenêtre > Actions).

6 Ajoutez le code suivant dans le panneau Actions :

on(press) { gotoAndStop("specials"); }

Ce code de gestionnaire d'événements place la tête de lecture sur l'image Specials lorsque l'utilisateur sélectionne ce bouton. Vous allez créer le contenu de cette image dans la section suivante (consultez la section « Création de

l'écran Specials » à la page 13).

7 Dans la scène, sélectionnez le bouton Reservations et ouvrez de nouveau le panneau Actions.

8 Dans le panneau Actions, tapez le code suivant :

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d’une application Flash Lite

on(press) { getURL("tel:1-415-555-1212"); }

Lorsque l'utilisateur sélectionne l'élément de menu Reservations, Flash Lite lance directement un appel téléphonique vers le numéro spécifié. Flash Lite demande toujours à l'utilisateur d'autoriser ou de refuser la composition d'un numéro à partir d'un fichier SWF. Pour plus d'informations, consultez la section « Lancement

d'un appel téléphonique » à la page 84.

9 Dans le scénario, sélectionnez l'image 1 dans le calque Actions.

10 Ouvrez le panneau Actions et entrez le code suivant :

stop(); _focusRect = false; fscommand2("resetsoftkeys"); fscommand2("setquality", "high"); fscommand2("fullscreen", "true");

Ce code produit les résultats suivants :

• Arrête la tête de lecture sur cette image.

• Désactive l'affichage du rectangle de focus jaune dessiné par défaut par Flash Lite autour du bouton ou du champ

texte de saisie ayant le focus (consultez la section « A propos du rectangle de focus » à la page 22).

• Rétablit l'état par défaut des touches programmables. (Dans la suite de ce didacticiel, vous allez ajouter du code

permettant d'enregistrer les touches programmables utilisées par votre application.)

• Définit la qualité du rendu du lecteur sur « high » (élevée). Par défaut, Flash Lite affiche une qualité moyenne

pour le contenu graphique.

• Oblige le lecteur à afficher l'application en plein écran.

11 Pour tester votre travail, sélectionnez Contrôle > Tester l’animation.

12 Dans l'émulateur, cliquez sur la flèche Haut ou Bas du pavé numérique (ou appuyez sur la flèche Haut ou Bas sur

le clavier de l'ordinateur) pour donner le focus au bouton Specials.

Lorsque le bouton Specials a le focus, il s'affiche à l'état Dessus.

13 Cliquez sur la touche de sélection du pavé numérique de l'émulateur (ou appuyez sur la touche Entrée de votre

clavier) pour sélectionner l'élément de menu.

A ce stade, l'écran Specials ne contient aucune fonctionnalité. Dans la section suivante, vous allez ajouter des éléments d'interactivité et de l'animation pour créer l'écran Specials (consultez la section « Création de l'écran

Specials » à la page 13).

Création de l'écran Specials

Dans cette section, vous allez créer les éléments de l'interface utilisateur permettant de parcourir les images et les descriptions de chaque plat. L'écran Specials comprend les éléments suivants :

• Une animation qui assure la transition entre les images de chaque plat.

• Des champs texte dynamique qui affichent le nom et la description de chaque plat.

• Les éléments de l'interface utilisateur permettant de naviguer entre les différents plats et de retourner à l'écran

principal de l'application.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d’une application Flash Lite

Cette section du didacticiel est divisée en deux parties. Dans la première partie, vous allez créer l'animation qui assure la transition entre les images de chaque plat. Dans la seconde partie, vous allez ajouter des éléments d'interface utilisateur et du code ActionScript pour permettre à l'utilisateur de naviguer entre les images et d'afficher le nom et la description de chaque plat.

Création de l'animation d'images

Dans cette section, vous allez créer l'animation interpolée qui assure la transition entre les images de chaque plat. Lorsque vous aurez terminé, l'animation sera lue sans discontinuer. Dans la suite de ce didacticiel, vous allez ajouter des éléments de navigation et du code ActionScript pour permettre à l'utilisateur de contrôler l'animation à l'aide de la touche programmable Droite du périphérique.

Pour créer l'animation, vous allez utiliser un clip prédéfini contenant les images de tous les plats, regroupées en une colonne verticale. Vous allez utiliser un calque de masque pour n'afficher qu'une seule des images. Vous allez ensuite créer une série d'interpolations permettant de déplacer le clip vers le haut et d'afficher une image différente. La dernière image du clip est une duplication de la première, ce qui permet à la séquence d'animation de reprendre son état initial une fois que l'utilisateur a consulté la dernière image. L'illustration suivante illustre ces concepts :

A. Objet calque de masque B. Clip d'images masqué C. Sens de l'interpolation D. Image dupliquée

Dans la dernière section de ce didacticiel, vous allez ajouter du code ActionScript et des éléments d'interface utilisateur pour faciliter le contrôle de la séquence d'animation.

Pour créer l'animation d'images :

1 Ouvrez le fichier que vous avez enregistré dans la section précédente (consultez la section « Création du menu pour

l'écran principal » à la page 12).

2 Dans le scénario, sélectionnez l'image-clé de l'image 10 dans le calque Images.

3 Ouvrez le panneau Bibliothèque et faites glisser le symbole Specials Images movie clip sur la scène.

La suite de ce didacticiel fait référence à ce clip simplement sous le nom clip d'images.

4 Une fois la nouvelle occurrence de clip sélectionnée, définissez les coordonnées x et y du clip sur 0 dans l'inspecteur

Propriétés.

Cette action aligne le coin supérieur gauche du clip d'images sur le coin supérieur gauche de la scène.

5 Dans le calque Images, insérez des images-clés dans les images 20, 30, 40 et 50, comme indiqué dans l'illustration

ci-dessous :

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d’une application Flash Lite

6 Dans le scénario, sélectionnez l'image-clé sur l'image 20.

7 Dans la scène, sélectionnez le clip d'images et définissez sa coordonnée y sur -100 dans l'inspecteur Propriétés.

Cette action déplace le clip de 100 pixels vers le haut sur la scène.

8 Sélectionnez l'image-clé de l'image 30 dans le scénario, puis le clip d'images, et définissez sa coordonnée y sur -200

dans l'inspecteur Propriétés.

9 Sélectionnez l'image-clé de l'image 40, puis le clip d'images, et définissez sa coordonnée y sur -300 dans l'inspecteur

Propriétés.

10 Sélectionnez l'image-clé de l'image 50, puis le clip d'images, et définissez sa coordonnée y sur -400 dans l'inspecteur

Propriétés.

11 Sélectionnez l'image-clé de l'image 10, puis l'option Mouvement dans le menu Interpolation de l'inspecteur

Propriétés.

Cette action interpole la position du clip d'images entre les images-clés des images 10 et 20.

12 Pour créer des transitions entre les autres images, répétez l'étape 11 pour les images-clés des images 20, 30 et 40.

13 Pour créer le calque de masque, sélectionnez le calque Images dans le scénario, puis l'option Insérer > Scénario >

Nouveau calque (ou cliquez sur le bouton Insérer un calque dans le scénario).

14 Insérez une image-clé dans l'image 10 du nouveau calque de masque.

15 Avec l'outil Rectangle du panneau Outils, créez un rectangle au-dessus de la première image (la plus au-dessus)

dans le clip d'images.

Peu importe la couleur de remplissage que vous utilisez pour le rectangle, mais il doit être totalement opaque.

Rectangle de masquage

16 Pour vous assurer que le rectangle recouvre toute la zone de l'image, double-cliquez dessus pour le sélectionner,

puis utilisez l'inspecteur des propriétés pour définir ses coordonnées x et y sur 0, sa largeur sur 176 et sa hauteur sur 100.

17 Cliquez avec le bouton droit de la souris (Windows®) ou en appuyant sur la touche Contrôle (Macintosh®) sur le

calque Specials dans le scénario, puis sélectionnez Masque dans le menu contextuel.

Le calque est converti en calque de masque, signalé par l'icône correspondante. Le calque situé immédiatement audessous est lié au calque de masque et son contenu affiché à travers la zone remplie sur le masque. Pour plus d'informations sur l'utilisation des calques de masque dans Flash, consultez la section « Utilisation des calques de masque » du guide d'utilisation de Flash.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d’une application Flash Lite

A. Calque de masque B. Calque masqué C. Zone masquée sur la scène

18 Enregistrez vos modifications (Fichier > Enregistrer).

A ce stade, le test de l'application dans l'émulateur lit l'animation jusqu'au bout et s'arrête. Dans la section suivante (consultez la section « Ajout d'éléments de navigation et de texte dans l'écran Specials » à la page 16), vous allez ajouter du code ActionScript permettant d'arrêter l'animation à chaque image-clé, ainsi que des éléments d'interface utilisateur permettant de naviguer entre les images.

Ajout d'éléments de navigation et de texte dans l'écran Specials

Dans cette section, vous allez ajouter des éléments d'interactivité à l'écran Specials pour permettre à l'utilisateur de contrôler la transition entre chaque animation. Vous allez également ajouter des champs texte dynamique affichant le nom et la description de chaque image.

Pour ajouter du texte devant afficher les noms et les descriptions des plats :

1 Dans Flash, ouvrez le fichier que vous avez enregistré dans la section précédente (consultez la section « Création du

menu pour l'écran principal » à la page 12).

2 Dans le scénario, sélectionnez l'image 10 dans le calque Text (Texte).

3 Dans le panneau Outils, sélectionnez l'outil Texte et tracez un champ texte sous la première image de plat masquée.

Ce champ texte affiche le nom du plat dont l'image est affichée.

Champ texte devant afficher le nom du plat

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d’une application Flash Lite

4 En maintenant le champ texte sélectionné sur la scène, effectuez les modifications suivantes dans l'inspecteur

Propriétés :

• Sélectionnez Texte dynamique dans le menu déroulant Type de texte.

• Sélectionnez Verdana dans le menu contextuel Police.

• Sélectionnez l'option de style de texte Italique.

• Définissez la taille de la police sur 10.

• Sélectionnez Bitmap (sans anti-alias) dans le menu contextuel Méthode de rendu des polices.

• Tapez title dans la zone de texte Var. Il s'agit du nom de variable attribué au champ texte dynamique.

5 Créez un autre champ texte sous le premier pour afficher une brève description du plat consulté par l'utilisateur.

6 A l'aide de l'outil Sélection, redimensionnez le champ texte afin que sa taille soit environ trois fois plus grande que

celle de l'autre champ texte.

Champ texte devant afficher la description du plat

7 En maintenant le champ texte sélectionné sur la scène, effectuez les modifications suivantes dans l'inspecteur

Propriétés :

• Sélectionnez Texte dynamique dans le menu déroulant Type de texte.

• Sélectionnez Multiligne dans le menu contextuel Type de ligne.

• Sélectionnez Verdana dans le menu contextuel Police.

• Définissez la taille de la police sur 10.

• Sélectionnez Bitmap (sans anti-alias) dans le menu contextuel Méthode de rendu des polices.

• Tapez description dans la zone de texte Var.

8 Dans le scénario, sélectionnez l'image-clé de l'image 10 dans le calque Actions.

9 Ouvrez le panneau Actions et ajoutez le code suivant :

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d’une application Flash Lite

title = "Summer salad"; description = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette."; fscommand2("SetSoftKeys", "Home", "Next"); stop();

Ce code affiche le nom et la description du plat consulté par l'utilisateur et arrête la tête de lecture. La commande

SetSoftKeys enregistre les touches programmables du périphérique qui permettront à l'utilisateur de revenir à

l'écran d'accueil ou de naviguer entre les plats.

10 Dans le calque Actions, sélectionnez l'image-clé de l'image 20 et saisissez le code suivant dans le panneau Actions :

title = "Chinese Noodle Salad"; description = "Rice noodles with garlic sauce, shitake mushrooms, scallions, and bok choy."; stop();

11 Dans le calque Actions, sélectionnez l'image-clé de l'image 30 et saisissez le code suivant dans le panneau Actions :

title = "Seared Salmon"; description = "Filet of wild salmon with caramelized onions, new potatoes, and caper and tomato salsa."; stop();

12 Dans le calque Actions, sélectionnez l'image-clé de l'image 40 et saisissez le code suivant dans le panneau Actions :

title = "New York Cheesecake"; description = "Creamy traditional cheesecake served with chocolate sauce and strawberries."; stop();

13 Dans le calque Actions, sélectionnez l'image-clé de l'image 50 et saisissez le code suivant dans le panneau Actions :

gotoAndStop("specials");

Ce code renvoie la tête de lecture au début de la séquence d’animation. Les première et dernière images de la séquence d'animation sont identiques, ce qui crée l'illusion d'une animation continue.

14 Enregistrez vos modifications.

Vous allez ensuite ajouter des éléments de navigation à l'écran Specials pour permettre à l'utilisateur de parcourir les images et les descriptions de chaque plat.

Pour ajouter des éléments de navigation dans l'écran Specials :

1 Ouvrez le fichier que vous avez enregistré dans la section précédente.

2 Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), recherchez le symbole Home et faites-le glisser vers le coin

inférieur gauche de la scène.

3 Dans l'inspecteur Propriétés, définissez la coordonnée x du graphique Home sur 0 et sa coordonnée y sur 188.

4 Faites glisser le symbole Next de la Bibliothèque jusqu'au coin inférieur droit de la scène.

5 Dans l'inspecteur Propriétés, définissez la coordonnée x du graphique sur 120 et sa coordonnée y sur 188.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d’une application Flash Lite

La scène de votre application doit ressembler à l'illustration ci-dessous :

6 Dans le scénario, sélectionnez l'image-clé de l'image 10 dans le calque Key Catcher (Détecteur de touches).

7 Depuis la Bibliothèque, faites glisser le symbole du bouton de détecteur de touches et placez-le dans la zone de

travail en dehors de la scène.

Remarque : Pour afficher l'espace de travail, sélectionnez Affichage > Zone de travail dans Flash.

A. Bouton de détecteur de touches B. Zone de travail

Ce bouton a pour but de « détecter » les événements de pression de touche ActionScript initiés par l'utilisateur, puis de répondre par l'action appropriée. Pour plus d'informations sur l'utilisation des boutons de détecteur de touches, consultez la section « Création d'un bouton de détecteur de touches » à la page 25.

8 Sélectionnez le bouton de détecteur de touches puis, dans le panneau Actions, entrez le code suivant :

// Handle right soft key event ("Next" button): on(keyPress "<PageDown>") { play(); } // Handle left soft key event ("Home" button): on(keyPress "<PageUp>") { gotoAndStop("main"); }

Le premier gestionnaire on(keyPress) avance l'animation d'images jusqu'à l'image suivante dans la séquence ; le deuxième gestionnaire renvoie la tête de lecture sur l'écran principal de l'application.

9 Sélectionnez Contrôle > Tester l'animation pour tester l'application finalisée dans l'émulateur.

Chapitre 4 : Création d'interactivité et d'éléments de navigation

Macromedia Flash Lite 1.0 et Flash Lite 1.1 d'Adobe prennent en charge l'interaction de l'utilisateur par le biais du clavier du périphérique, ou bien d'une interface de type stylet ou tactile sur les périphériques qui en sont dotés.

Deux méthodes permettent d'ajouter de l'interactivité basée sur des touches à une application Flash Lite. Vous pouvez utiliser la navigation par tabulation Flash Lite par défaut ou créer un système de navigation personnalisé basé sur des touches.

Le fonctionnement de la navigation par tabulation est le même dans Flash Lite que dans les applications Flash pour ordinateurs de bureau, où les touches Tab et Maj+Tab permettent à l'utilisateur de passer d'un objet à l'autre à l'écran. Dans Flash Lite, les quatre touches de direction du périphérique ont la même fonction que les touches Tab et Maj+Tab. La navigation par tabulation dans Flash Lite utilise uniquement des boutons et des champs texte de saisie ; elle convient généralement aux interactions utilisateur simples, telles que les menus. Pour plus d'informations, consultez la section « Utilisation de la navigation par tabulation dans Flash Lite » à la page 21.

Plutôt que d'utiliser la navigation par tabulation, vous pouvez utiliser une navigation par touche personnalisée. Dans ce cas, votre application gère les événements de touche générés par Flash Lite en réponse à la pression d'une touche sur le périphérique de l'utilisateur, puis répond par l'action appropriée. Vous pouvez utiliser ce type de navigation par exemple pour créer un jeu Flash Lite ou toute autre application dont le modèle d'interaction est plus complexe que celui d'un simple menu.

Touches prises en charge par Flash Lite

Outre les touches alphanumériques disponibles sur les téléphones standard, la plupart des périphériques mobiles possèdent un clavier à cinq directions qui permet à l'utilisateur de parcourir et de sélectionner des éléments sur l'écran du périphérique, ainsi qu'au moins deux touches programmables Gauche et Droite. Les touches programmables d'un périphérique sont des touches multifonctionnelles qui utilisent l'écran pour identifier leur cible à tout moment.

Le clavier à cinq directions se compose de quatre flèches (Haut, Bas, Gauche et Droite) et d'une touche de sélection, généralement située au centre du clavier. Ces touches peuvent être exploitées différemment selon l'application active. Par exemple, dans un jeu Flash Lite, l'utilisateur peut utiliser les flèches pour déplacer un personnage sur l'écran, puis utiliser la touche de sélection pour exécuter une autre action, telle que faire sauter le personnage.

Flash Lite prend en charge les touches suivantes sur les périphériques mobiles :

• Touches du clavier à cinq directions (Haut, Bas, Gauche, Droite et Sélection)

• Touches programmables Gauche et Droite

• Touches 0 à 9, * et #

Les illustrations suivantes montrent la disposition de ces touches sur un clavier générique et sur un véritable téléphone :

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d'interactivité et d'éléments de navigation

A. Touches programmables B. Clavier à cinq directions C. Touches numériques, * et #

Certains périphériques et types de contenus Flash Lite ne prennent pas en charge toutes ces touches. Par exemple, sur certains périphériques, une application Flash Lite peut utiliser les flèches Haut et Bas, mais pas les flèches Gauche et Droite. De même, certains périphériques et types de contenus ne permettent pas aux applications Flash d'utiliser les touches programmables Gauche et Droite. Lorsque vous testez votre application dans Adobe Device Central, ce dernier génère des messages d'avertissement si vous appuyez sur des touches non disponibles pour le périphérique et le type de contenu cibles.

Utilisation de la navigation par tabulation dans Flash Lite

Dans les applications de bureau Flash, les touches Tab et Maj+Tab permettent aux utilisateurs de sélectionner les objets affichés à l'écran. L'objet qui a le focus répond aux pressions de touche suivantes. Dans Flash Lite, les touches de navigation du pavé à cinq directions du périphérique ont la même fonction que les touches Tab et Maj+Tab.

Flash Lite prend en charge trois modes de navigation par tabulation différents : navigation bidirectionnelle, navigation quadridirectionnelle et navigation quadridirectionnelle en boucle. Différents périphériques et types de contenus Flash Lite prennent en charge différents modes de navigation. Pour plus d'informations, consultez la section « Modes de

navigation par tabulation » à la page 21.

La navigation par tabulation de Flash Lite utilise des boutons et des champs texte. Lorsqu'un champ texte de saisie a le focus et que l'utilisateur appuie sur la touche de sélection, Flash Lite ouvre la boîte de dialogue de saisie de texte du périphérique dans laquelle l'utilisateur peut saisir du texte. Pour obtenir un exemple d'utilisation des champs texte de saisie devant recevoir les entrées de l'utilisateur, consultez la section « Exemple d'application de champ texte » à la page 48.

Modes de navigation par tabulation

Flash Lite prend en charge trois modes de navigation par tabulation : navigation bidirectionnelle, navigation quadridirectionnelle et navigation quadridirectionnelle en boucle. Différents périphériques et types de contenus Flash Lite prennent en charge différents modes de navigation. Pour plus d'informations sur le choix du mode de navigation pour un type de périphérique ou de contenu spécifique, consultez la section « Détermination des fonctionnalités de la

plate-forme » à la page 71.

Chaque mode de navigation présenté dans les sections suivantes fait référence à un exemple de fichier que vous pouvez visualiser au moyen d'Adobe Device Central. Chaque fichier d'exemple se compose de la même grille à neuf boutons, comme indiqué ci-après. La seule différence entre les fichiers d'exemple est que chacun est configuré pour cibler à la fois un périphérique et un type de contenu Flash Lite prenant en charge le mode de navigation concerné.

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d'interactivité et d'éléments de navigation

Tableau de boutons d'un fichier d'exemple

Pour utiliser un fichier d'exemple, ouvrez-le dans Adobe Flash CS4 Professionnal et testez-le dans Adobe Device Central (sélectionnez Contrôle > Tester l'animation). Les touches de direction du clavier du périphérique émulé (ou bien celles de votre clavier) permettent de voir dans quelle mesure chaque mode de navigation affecte la navigation de l'utilisateur.

Navigation bidirectionnelle En mode de navigation bidirectionnelle, les flèches Haut et Bas du périphérique

déplacent le focus d'un objet à un autre (bouton ou champ texte de saisie) ; les flèches Gauche et Droite n'ont aucun effet. La touche Bas déplace le focus vers l'objet suivant situé à droite. Si aucun objet ne se trouve à droite de l'objet ayant le focus courant, ce dernier se déplace vers l'objet le plus à gauche situé sous l'objet sélectionné. Si aucun objet ne se trouve sous l'objet le plus à droite ayant le focus, ce dernier se déplace jusqu'à l'objet le plus à gauche situé audessus. La touche Haut déplace le focus vers l'objet suivant situé à gauche. Si aucun objet ne se trouve à gauche de l'objet ayant le focus courant, ce dernier se déplace vers l'objet le plus à droite situé au-dessus de l'objet sélectionné.

Pour obtenir un exemple de navigation bidirectionnelle, consultez le fichier d'exemple 2-way.fla qui se trouve à l'adresse www.adobe.com/go/learn_flt_samples_and_tutorials_fr. Cette page Web regroupe des didacticiels et des exemples : repérez, téléchargez et décompressez le fichier .zip correspondant à votre version de Flash Lite, puis affichez le dossier Samples qu'il contient et sélectionnez l'exemple qui vous intéresse.

Navigation quadridirectionnelle En mode de navigation quadridirectionnelle, l'utilisateur peut déplacer le focus d'un

objet à un autre à l'aide des touches Gauche, Droite, Haut et Bas. Appuyer sur la touche Gauche déplace le focus de l'objet actuellement sélectionné vers l'objet situé à gauche du bouton ayant le focus. La touche Droite déplace le focus vers le bouton suivant situé à droite du bouton ayant le focus. De la même manière, les touches Haut et Bas déplacent le focus vers le bouton situé au-dessus et en-dessous du bouton ayant le focus.

Pour obtenir un exemple de navigation quadridirectionnelle, consultez le fichier d'exemple 4-way.fla qui se trouve à l'adresse www.adobe.com/go/learn_flt_samples_and_tutorials_fr. Cette page Web regroupe des didacticiels et des exemples : repérez, téléchargez et décompressez le fichier .zip correspondant à votre version de Flash Lite, puis affichez le dossier Samples qu'il contient et sélectionnez l'exemple qui vous intéresse.

Navigation quadridirectionnelle en boucle Ce mode est identique au mode de navigation quadridirectionnelle, mis

à part qu'en l'absence de bouton sous le bouton le plus à droite ayant le focus, ce dernier se déplace vers le bouton le plus à gauche situé au-dessus.

A propos du rectangle de focus

Par défaut, Flash Lite dessine un rectangle jaune autour du bouton ou du champ texte de saisie ayant le focus. Ce rectangle de focus permet à l'utilisateur de connaître l'objet à l'écran qui répondra s'il appuie sur la touche de sélection du périphérique. Par exemple, dans l'illustration suivante, le rectangle de focus encadre le bouton ayant le focus de clavier :

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d'interactivité et d'éléments de navigation

Bouton ayant le focus courant et rectangle de focus par défaut

Dans le cas des boutons, le cadre de délimitation du rectangle de focus est déterminé par la zone active du bouton, la zone invisible qui (dans les applications Flash pour ordinateurs de bureau) définit la partie du bouton réagissant aux clics de la souris. Dans le cas des champs texte de saisie, le cadre de délimitation du rectangle de focus est déterminé par les dimensions du champ texte.

Vous pouvez désactiver le comportement par défaut du rectangle de focus en définissant la propriété

false. Si vous utilisez des boutons qui définissent les étatsDessus, Flash Lite les affiche lorsque le bouton reçoit le focus.

_focusRect sur

Pour cette raison, le rectangle de focus s'avère souvent inutile lorsque vous utilisez des boutons. Par exemple, l'illustration suivante montre la même application que celle de l'illustration précédente, excepté que le rectangle de focus est désactivé ; le bouton ayant le focus indique son état « Dessus » :

Bouton ayant le focus courant (rectangle de focus désactivé)

Si votre application contient des champs texte de saisie, Adobe recommande de ne pas désactiver le rectangle de focus qui est le seul élément à pouvoir indiquer visuellement si un champ texte a le focus ou non. Par exemple, l'illustration suivante montre un champ texte de saisie ayant le focus courant :

Champ texte de saisie ayant le focus courant

DÉVELOPPEMENT D'APPLICATIONS FLASH LITE 1.X

Création d'interactivité et d'éléments de navigation

Si votre application contient des boutons (dont les états « Dessus » sont définis) et des champs texte de saisie dans le même écran, vous pouvez définir pour chaque bouton la propriété d'événements

on(rollOver) et sur true dans le gestionnaire d'événements on(rollOut), comme indiqué dans

_focusRect sur false dans le gestionnaire

l'exemple de code suivant. Cette action oblige le rectangle de focus à apparaître lorsqu'un champ texte de saisie a le focus, mais pas quand il s'agit d'un bouton.

// Attach this code to each button on the Stage. on(rollOver) { _focusRect = false; } on(rollOut) { _focusRect = true; }

Pour plus d'informations sur l'utilisation des champs texte de saisie, consultez la section « Utilisation des champs texte

de saisie » à la page 41.

Conseils pour l'utilisation de la navigation par tabulation

Lorsque vous utilisez la navigation par tabulation pour créer de l'interactivité, vous devez positionner au moins deux objets (champs texte de saisie, boutons ou une combinaison des deux) simultanément dans l'écran. Si l'écran ne contient qu'un seul bouton ou champ texte de saisie, l'utilisateur ne peut pas modifier le focus ; il risque alors de se sentir « coincé » dans l'interface utilisateur.

Si un écran de votre application ne contient qu'un seul bouton d'interaction utilisateur, préférez la détection d'un événement de pression de touche à l'utilisation d'événements de bouton. Pour plus d'informations, consultez la section « Gestion des événements de touche » à la page 24.

Gestion des événements de touche

Outre l'utilisation de la navigation par tabulation entre les boutons et les champs texte de saisie, une application Flash Lite peut également réagir à des événements de pression de touche arbitraires.

Certains périphériques et types de contenus ne prennent pas en charge toutes les touches de périphérique. Par exemple, sur un périphérique prenant en charge la navigation bidirectionnelle (voir « Modes de navigation par

tabulation » à la page 21) Flash Lite ne génère pas d'événements de pression de touche pour les flèches Gauche et

Droite.

Sur tous les périphériques, Flash Lite prend en charge les touches suivantes :

• Touches 0 à 9, * et #

• Touche de sélection

Sur les périphériques prenant en charge la navigation bidirectionnelle, Flash Lite prend également en charge les flèches Haut et Bas du clavier à cinq directions. Sur les périphériques prenant en charge la navigation quadridirectionnelle, Flash Lite prend en charge les flèches Haut, Bas, Gauche et Droite.

Sur les périphériques prenant en charge la commande programmables Gauche et Droite.

SetSoftKeys, Flash Lite prend également en charge les touches

+ 65 hidden pages