Avant de commencer le message lui-même, je vais lire un petit avertissement :
Vous devez réfléchir avant de créer une nouvelle application, qu'est-ce que c'est pour vous, qu'est-ce que c'est pour les autres, cela profitera-t-il aux autres, vous pouvez même gagner beaucoup d'argent avec l'application ! Plus de détails sur - règles de placement des candidatures. Si vous êtes convaincu de tout, nous pouvons commencer !
Introduction
Nous écrirons l'application en ActionScript 3.0, pour le moment il s'agit de la version la plus récente et la plus pratique. N'ayez pas peur, il n'y aura pas de grosses difficultés ici ! Vous pouvez choisir vous-même l'environnement logiciel pour développer une application en Flash, mais je recommande Adobe Flash Professional, je vous explique pourquoi :- Ce n’est pas la première fois que je travaille dessus, donc je peux dire avec certitude qu’il est facile à utiliser
- Ne met pas de seuils entre fonctionnalité et design
- Vous pouvez même créer des applications pour téléphones
Où commencer? Cadres de connexion.
Créez un document ActionScript :Dans la fenêtre « Timeline », créez des « calques », enregistrez leur nom et leur ordre : 
Toutes les 5 images, appuyez sur « F6 », à la fin « F5 ». Cela devrait ressembler à la capture d'écran.
Je pense qu'il n'y a rien à expliquer ici :
Le calque « ActionScript » est l’endroit où se trouvera le code.
Calque « Marques » - afin de ne pas perdre de vue les cadres, ils seront numérotés, mais presque comme un calque supplémentaire.
Calque « Boutons » - contient des boutons qui seront dans la même position tout au long du projet, également avec les calques « Arrière-plan » et « Matériaux ». Numérotons maintenant les images, ce n'est pas pour rien que le calque « Marques » a été créé. Cliquez sur les cadres que vous avez créés sur le calque « Marques », voyez le type « Cadre », entrez un nom pour le cadre. 
Le calque « Marques » n'a pas de fonction particulière, ils sont créés uniquement pour vous aider. Nous avons donc appris à créer des cadres !
Symboles et ressources
Désormais, ce sera aussi simple qu'avant. Cliquez sur le calque « Arrière-plan » sur n'importe quel cadre et insérez une image provenant de l'ordinateur. Au début, ce sera comme une image raster, on peut y changer la largeur, la hauteur. Nous laissons l'arrière-plan tel quel.
Nous effectuons la même procédure avec le calque « Boutons », seulement maintenant nous convertissons l'image raster en symbole en cliquant avec le bouton droit sur « Convertir en symbole » :
Nous appelons l’instance de bouton comme bon nous semble. Appelons-le "Personnage 1". Type : Fragment vidéo. Ensuite, nous attribuons le nom de l'instance au symbole lui-même et à son type comme indiqué dans la capture d'écran :
Activation des pages
Ensuite, il faut activer les pages via le calque « ActionScript », cliquer sur le calque, appuyer sur « F9 ». Une fenêtre vide apparaîtra ; pour l'activer, entrez le code :Importer flash.events.MouseEvent ;
arrêt();
btn1.addEventListener(MouseEvent.CLICK,OnClickDve);
Fonction OnClickDve(e:MouseEvent):void
{
gotoAndStop("Deux");
}
Je pense que vous comprendrez quoi! Remarque : lorsque vous démarrez l'application, la première chose qui démarre est le cadre « Adyn »
Remplir la demande avec du matériel
Cliquez sur le calque "Matériaux", à savoir sur les cadres sous lesquels dans le calque "Marques" sont indiqués par le mot "Adyn", le principe de chargement d'une photo est le même, donc le reste sera facile, et vous pourrez également téléchargez le test !
Pour vérifier si je vous ai trompé, cliquez sur « Gérer, tester la vidéo, tester la vidéo ». Cliquez sur le bouton en haut à gauche et voyez le texte !
Nous recevons le fichier final et chargeons VKontakte
Cliquez sur le menu « Fichier, exporter, exporter la vidéo » et sélectionnez où enregistrer le fichier.Flash est une plateforme utilisée pour développer des applications et du contenu multimédia – bannières, animations et jeux. Pour interagir avec l'environnement, plusieurs programmes ont été créés qui permettent de créer les matériaux mentionnés ci-dessus. Ils seront discutés dans cette revue.
Ce programme, développé par Adobe, est peut-être l'outil le plus connu pour créer des applications Flash, des dessins animés et des objets Web animés. Il comporte un grand nombre de fonctions, dont la possibilité de programmer des commandes en Action Script.
Adobe Flash Builder
Flash Builder est un puissant éditeur de code source d'application doté de fonctionnalités de débogage. Il peut fonctionner comme un outil autonome pour le développement de programmes ou comme un outil auxiliaire pour l'édition de projets créés dans Adobe Flash Professional.
KoolMoves
L'idée originale des développeurs américains Lucky Monkey Designs est conçue pour concurrencer les produits Adobe. Possédant les mêmes fonctions de base - production d'animation et programmation d'action - le programme possède une interface plus conviviale et est moins difficile à prendre en main.
Nous avons examiné plusieurs représentants de logiciels conçus pour aider au développement d'applications multimédias. Les deux premiers produits se complètent et, avec la bonne approche et les bonnes compétences, peuvent faire face à n'importe quelle tâche, mais ils sont très complexes. KoolMoves, en revanche, est un outil plus compact et plus facile à utiliser.
Commençons
Pour créer une application flash, vous devez en avoir une idée précise. C'est que vous devriez réfléchir à au moins un scénario d'application approximatif. Après cela, vous pouvez commencer à travailler directement dans l'éditeur Flash.
Tout d’abord, vous devez déterminer la taille de la future application. Par exemple, s’il s’agit d’une bannière standard, ses dimensions seront de 468 mm sur 60 mm. Spécifiez ces paramètres dans la section Propriétés du film dans les champs Largeur et Hauteur - ils indiquent respectivement la largeur et la hauteur. Sélectionnez ensuite la couleur du fond principal de l'application flash. Pour terminer les réglages, entrez le nombre d'images par seconde dans le champ Frame Rate.
Un programme spécial vous aidera à créer une application flash
Immédiatement après avoir terminé les réglages, faites un clic gauche sur le bouton OK. Maintenant, l'éditeur Flash lui-même entre en jeu, ce qui vous aidera à créer une application Flash.
Nous commençons à créer des applications animées - par exemple, une inscription animée. Pour ce faire, sélectionnez l'outil Texte et ouvrez le panneau de paramètres – Caractères des panneaux de fenêtre. Dans le menu Police qui apparaît, cliquez sur le panneau Caractères et sélectionnez une police, par exemple Times New Roman. Définissez sa couleur et la taille souhaitée, par exemple 26, écrivez-lui un message ou une suggestion. La base de base de votre application flash est prête !
Vous pouvez créer une application flash sous forme animée
Après cela, vous pouvez le faire. Pour ce faire, vous devez convertir ce que vous avez écrit en symbole. Pour ce faire, utilisez la commande Insérer Convertir en symbole. Donnez-lui également un nom afin de pouvoir l'enregistrer ultérieurement sur votre disque dur.
Après cela, sélectionnez l'image n°20 sur la timeline et insérez la toute première image dite clé, avec la commande Insérer une image clé. Dans ce cas, sur le côté gauche du nouveau cadre, vous verrez une bande grise allant dans la direction de l’image clé.
Il ne vous reste plus qu'à activer l'application Flash. Pour ce faire, revenez au premier cadre et déplacez l'inscription que vous avez faite au-delà de sa bordure vers un emplacement arbitraire au-delà du bord droit. Ensuite, sans supprimer la sélection du premier cadre, ouvrez le panneau Cadre des panneaux de fenêtre et passez immédiatement à l'onglet Cadre.
Tout ce que vous avez à faire est de sélectionner le type d'animation dont vous avez besoin dans le menu Tweening. Immédiatement après, la bande grise séparant les images clés deviendra bleue. C'est tout, une simple application flash est prête !
ActionScript 3.0 peut être utilisé dans plusieurs environnements de développement d'applications, notamment les outils Flash Professional et Flash Builder, ainsi que dans n'importe quel éditeur de texte.
Cet exemple présente les étapes de création et de modernisation d'une application ActionScript 3.0 simple à l'aide de Flash Professional ou Flash Builder. L'application que vous créez est un modèle simple permettant d'utiliser des fichiers de classe ActionScript 3.0 externes dans les outils Flash Professional et Flex.
Conception d'une application ActionScript
Cet exemple est une application ActionScript standard appelée « Hello World » qui présente une structure simple.
L'application s'appelle HelloWorld.
Il affiche une seule zone de texte avec les mots « Hello World ! »
L'application utilise une classe Greeter orientée objet. Cette structure permet à la classe d'être utilisée dans un projet Flash Professional ou Flex.
Cet exemple crée d'abord une version de base de l'application. Des fonctions sont ensuite ajoutées pour que l'utilisateur puisse saisir son nom et l'application vérifie si le nom figure dans une liste d'utilisateurs connus.
Après cette brève définition, vous pouvez commencer à créer votre application.
Création du projet HelloWorld et de la classe Greeter
Le cahier des charges de l’application Hello World indique que son code doit être facilement réutilisable. Pour atteindre cet objectif, l'application utilise une seule classe Greeter orientée objet. Cette classe est utilisée dans une application créée dans Flash Builder ou Flash Professional.
Création d'un projet HelloWorld et d'une classe Greeter dans Flex
Dans Flash Builder, choisissez Fichier > Nouveau > Projet Flex.
Entrez HelloWorld dans le champ Nom du projet. Assurez-vous que le type d'application est défini sur « Web (s'exécute dans Adobe Flash Player) », puis cliquez sur Terminer.
Flash Builder crée le projet et l'affiche dans la fenêtre Explorateur de packages. Par défaut, le projet contient un fichier appelé HelloWorld.mxml, qui s'ouvre dans l'éditeur.
Maintenant, pour créer un fichier de classe ActionScript personnalisé dans Flash Builder, choisissez Fichier > Nouveau > Classe ActionScript.
Dans la boîte de dialogue Nouvelle classe ActionScript, dans la zone Nom, saisissez Accueillir comme nom de classe et cliquez sur Terminer.
Pour créer une classe Greeter dans Flash Professional, procédez comme suit :
Dans Flash Professional, choisissez Fichier > Nouveau.
Dans la boîte de dialogue Nouveau document, sélectionnez le fichier ActionScript et cliquez sur OK.
La fenêtre de modification d'un nouveau fichier ActionScript apparaîtra maintenant.
La classe Greeter définit un objet Greeter utilisé dans l'application HelloWorld.
Ajout de code à la classe Greeter
Entrez le code suivant dans un nouveau fichier (une partie du code a peut-être déjà été ajoutée) :
Package ( public class Greeter ( public function sayHello():String ( var Greeting:String; Greeting = "Hello World!"; return Greeting; ) ) )
La classe Greeter comprend une méthode, sayHello(), qui renvoie une chaîne avec la phrase « Hello World ! »
Pour enregistrer ce fichier ActionScript, choisissez Fichier > Enregistrer.
La classe Greeter est maintenant prête à être utilisée dans votre application.
Créer une application à l'aide du code ActionScript
La classe Greeter que nous venons de créer définit un ensemble autonome de fonctions logicielles, mais elle ne représente pas une application complète. Pour utiliser la classe, vous devez créer un document Flash Professional ou un projet Flex.
Lors de la création de code, vous devez utiliser une instance de la classe Greeter. Ce qui suit décrit la procédure d'utilisation de la classe Greeter dans une application.
Pour créer une application ActionScript à l'aide de l'outil Flash Professional, procédez comme suit :
Choisissez Fichier > Nouveau.
Dans la boîte de dialogue Nouveau document, sélectionnez Fichier Flash (ActionScript 3.0) et cliquez sur OK.
La fenêtre de création de document s'ouvre.
Dans la palette d'outils Flash Professional, sélectionnez l'outil Texte. Faites-le glisser sur la scène pour définir une nouvelle zone de texte d'environ 300 pixels de large et 100 pixels de haut.
Dans le panneau Propriétés, avec la zone de texte toujours sélectionnée dans la zone de travail, définissez le type de texte sur Texte dynamique et entrez texte principal comme nom de l'instance de champ de texte.
Cliquez sur la première image de la chronologie. Ouvrez le panneau Actions en choisissant Fenêtre > Actions.
Dans le panneau Actions, saisissez le script suivant :
Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello();
Enregistrez le fichier.
Pour créer une application ActionScript à l'aide de l'outil Flash Builder, procédez comme suit :
Étiqueter
Étiqueter
Étiqueter
Étiqueter
Ouvrez le fichier HelloWorld.mxml et ajoutez le code selon l'impression suivante :
Ce projet Flex comprend quatre balises MXML :
Code dans la balise
Pour enregistrer l'application, choisissez Fichier > Enregistrer.
Publier et tester une application ActionScript
Le développement de logiciels est un processus interactif. Une fois le code écrit, il doit être compilé et édité jusqu'à ce qu'il réponde pleinement aux objectifs. Vous devez exécuter l'application compilée et vérifier qu'elle exécute les tâches décrites dans la mission. Sinon, vous devez modifier le code jusqu'à obtenir le résultat souhaité. Les environnements de développement Flash Professional et Flash Builder offrent plusieurs méthodes pour publier, tester et déboguer des applications.
Vous trouverez ci-dessous les principales étapes pour tester l'application HelloWorld dans chacun des environnements mentionnés.
Pour publier et tester une application ActionScript à l'aide de l'outil Flash Professional, procédez comme suit :
Publiez votre application et vérifiez les erreurs de compilation. Dans Flash Professional, choisissez Gérer > Tester l'animation pour compiler le code ActionScript et exécuter l'application HelloWorld.
Si vous testez votre application et voyez des erreurs et des avertissements dans la fenêtre Sortie, corrigez les erreurs dans le fichier HelloWorld.fla ou HelloWorld.as. Vérifiez ensuite à nouveau l'application.
S'il n'y a pas d'erreurs de compilation, l'application Hello World apparaîtra dans la fenêtre Flash Player.
Après avoir créé avec succès une application ActionScript 3.0 orientée objet simple mais complète, vous pouvez commencer.
Pour publier et tester une application ActionScript à l'aide de l'outil Flash Builder, procédez comme suit :
Si vous testez votre application et voyez des erreurs et des avertissements dans la fenêtre Sortie, corrigez les erreurs dans le fichier HelloWorld.mxml ou Greeter.as. Vérifiez ensuite à nouveau l'application.
S'il n'y a pas d'erreurs de compilation, l'application Hello World apparaîtra dans la fenêtre du navigateur qui s'ouvre. L'écran devrait afficher le texte « Hello World ! »
Sélectionnez Exécuter > Exécuter HelloWorld.
L'application HelloWorld se lancera.
Après avoir créé avec succès une application ActionScript 3.0 orientée objet simple mais complète, vous pouvez commencer à moderniser votre application HelloWorld.
Mise à niveau de l'application HelloWorld
Pour rendre l'application plus intéressante, vous pouvez y saisir la confirmation du nom d'utilisateur après avoir vérifié une liste de noms donnée.
Tout d'abord, nous devons mettre à jour la classe Greeter, en élargissant ses fonctionnalités. Ensuite, vous devez mettre à jour l'application afin qu'elle puisse profiter des nouvelles fonctionnalités.
Mise à jour du fichier Greeter.as
Ouvrez le fichier Greeter.as.
Modifiez le contenu du fichier comme suit (les lignes nouvelles et modifiées sont en gras) :
Forfait ( classe publique Greeter ( /** * Définit les noms qui reçoivent un message d'accueil approprié. */ public static var validNames:Array = ["Sammy", "Frank", "Dean"]; /** * Construit une chaîne de salutation en utilisant le nom donné. */ fonction publique sayBonjour ( Nom d'utilisateur : Chaîne = ""):Chaîne ( var salutation:Chaîne; si (nom d'utilisateur == "") { Greeting = "Bonjour. Veuillez saisir votre nom d'utilisateur, puis appuyez sur " + "la touche Entrée."; } sinon si (nomvalide(nomutilisateur)) { salutation = "Bonjour, " + Nom d'utilisateur + "."; } autre { Greeting = "Désolé " + userName + ", vous n'êtes pas sur la liste."; } saluer en retour ; ) /** * Vérifie si un nom figure dans la liste validNames. */ fonction statique publique validName(inputName:String = ""):Boolean { si (validNames.indexOf(inputName) > -1) { renvoie vrai ; } autre { renvoie faux ; } } } }
La classe Greeter possède désormais de nouvelles propriétés :
Le tableau validNames contient une liste de noms d'utilisateur autorisés. Lorsque la classe Greeter est chargée, le tableau est défini sur une liste de trois noms.
La méthode sayHello() prend le nom d'utilisateur et modifie le message d'accueil en fonction de certaines conditions. Si le nom d'utilisateur userName est spécifié sous la forme d'une chaîne vide (""), la propriété de salutation est définie pour demander le nom d'utilisateur. Si le nom d'utilisateur est accepté, le message d'accueil ressemble à ceci : "Bonjour, nom d'utilisateur." Et enfin, si les deux conditions précédentes ne sont pas remplies, la variable de message d'accueil est définie de cette façon : "Désolé nom d'utilisateur, vous n'êtes pas sur la liste." ("Désolé, [nom d'utilisateur], vous n'êtes pas sur la liste").
La méthode validName() renvoie true si le inputName saisi est trouvé dans le tableau validNames et renvoie false si le nom est introuvable. L'instruction validNames.indexOf(inputName) vérifie chaque ligne du tableau validNames par rapport à la chaîne du nom saisi, inputName . La méthode Array.indexOf() renvoie la position d'index de la première instance d'un objet dans le tableau. Il renvoie -1 si l'objet n'est pas trouvé dans le tableau.
Vous devez ensuite modifier le fichier d'application dans lequel existe la référence à la classe ActionScript.
Pour modifier l'application à l'aide de l'outil Flash Professional, procédez comme suit :
Les deux premières lignes définissent simplement les limites des deux champs de texte.
Un champ de texte de saisie, tel que textIn , possède un ensemble d'événements qu'il peut distribuer. La méthode addEventListener() vous permet de spécifier une fonction qui s'exécute lorsqu'un événement d'un certain type se produit. Dans ce cas, cet événement sera une pression sur une touche du clavier.
La fonction personnalisée keyPressed() vérifie si la touche Entrée sera enfoncée. Si la touche souhaitée est enfoncée, la méthode sayHello() de l'objet myGreeter transmet le texte du champ de texte textIn en tant que paramètre. Cette méthode renvoie une chaîne de salutation basée sur la valeur qui lui est transmise. La chaîne renvoyée est ensuite affectée à la propriété text du champ de texte mainText.
Ouvrez le fichier HelloWorld.fla.
Modifiez le script dans l'image 1 pour que la chaîne vide ("") aille dans la méthode sayHello() de la classe Greeter :
Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello("");
Sélectionnez l'outil Texte dans la palette Outils. Créez deux nouveaux champs de texte dans la zone de travail. Placez-les les uns à côté des autres sous le champ de texte mainText existant.
Dans la première nouvelle zone de texte, qui est l'étiquette, saisissez le texte Nom d'utilisateur:.
Sélectionnez un autre champ de texte et définissez son type dans l'inspecteur des propriétés sur Texte de saisie. Sélectionnez Ligne unique comme type de ligne. Entrer texteDans comme nom d'instance.
Cliquez sur la première image de la chronologie.
Dans le panneau Actions, ajoutez les lignes suivantes à la fin du script existant :
MainText.border = true ; textIn.border = true ; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); function keyPressed(event:KeyboardEvent):void ( if (event.keyCode == Keyboard.ENTER) ( mainText.text = myGreeter.sayHello(textIn.text); ) )
Le nouveau code ajoute les fonctionnalités suivantes :
Le script complet de l'image 1 ressemble à ceci :
Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello(""); mainText.border = true ; textIn.border = true ; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); function keyPressed(event:KeyboardEvent):void ( if (event.keyCode == Keyboard.ENTER) ( mainText.text = myGreeter.sayHello(textIn.text); ) )
Enregistrez le fichier.
Pour lancer l'application, sélectionnez les commandes « Gérer » > « Tester le film ».
Lorsque vous exécutez l'application, vous êtes invité à saisir votre nom d'utilisateur. Si le nom est accepté par le programme, un message de confirmation « bonjour » apparaîtra.
Pour modifier une application à l'aide de l'outil Flash Builder, procédez comme suit :
Ouvrez le fichier HelloWorld.mxml.
Puis changez la balise
Ajoutez maintenant les lignes suivantes directement après la balise de fermeture
L'attribut enter spécifie les actions effectuées lorsque l'utilisateur appuie sur la touche Entrée dans le champ userNameTxt. Dans cet exemple, le code transmet le texte saisi dans le champ à la méthode Greeter.sayHello(). Le message d'accueil dans le champ mainTxt change en conséquence.
Le fichier HelloWorld.mxml ressemble à ceci :
Enregistrez le fichier HelloWorld.mxml modifié. Sélectionnez Exécuter > Exécuter HelloWorld pour exécuter l'application.
Lorsque vous exécutez l'application, vous êtes invité à saisir votre nom d'utilisateur. Si le nom (Sammy, Frank ou Dean) est accepté par le programme, un message de confirmation « Bonjour, nom d'utilisateur».
03.12.2009
L'article est consacré au développement rapide d'applications pour Flash, à l'aide du produit phare Adobe Flex Builder 3. A noter que l'environnement traditionnel pour Flash est Adobe Flash, mais il est principalement destiné au dessin et à la création d'animations. La programmation est beaucoup plus facile avec Flex Builder.
Cet article montrera comment créer une application assez simple et en même temps typique - un catalogue de produits avec la possibilité de calculer le coût d'une commande et prenant en compte des options supplémentaires. Ce programme est destiné aux restaurants : l'utilisateur aura accès à un catalogue de plats répartis en catégories, ainsi qu'une option « livraison » et une indication du nombre de portions commandées.
Il faut admettre que l'installation même d'un simple système d'assistance à la boutique en ligne sur le site résoudrait à la fois ce problème et d'autres (notamment la création d'un panier de commande ou son envoi par e-mail). Cependant, il ne faut pas oublier qu’il ne s’agira que d’une démonstration des capacités suivantes :
Recalculez le coût à la volée, sans recharger la page. Si vous utilisiez du HTML, vous devrez recourir à JavaScript, ce qui n'est pas toujours simple. De plus, il serait nécessaire de sauvegarder définitivement les options sélectionnées par l'utilisateur.
Utilisation d'effets d'animation lors du téléchargement de photos.
Mise en place d'un catalogue produits utilisant 40 lignes de code programme.
Bien sûr, pour poursuivre le travail sur l'application, vous devez avoir une idée de ce qu'est XML (il s'agit d'un langage de représentation structurelle des données, pour plus de détails, voir http://ru.wikipedia.org/ wiki/XML), et avoir au moins une petite expérience dans le développement d'applications de bureau (dans un environnement Delphi ou Visual Studio).
Alors, commençons. Pour travailler, vous aurez besoin d'Adobe Flex Builder 3 installé.
Immédiatement après le lancement, vous verrez une fenêtre de bienvenue proposant des liens vers des leçons sur la création d'applications. Cela peut être fait plus tard - il est utile pour les débutants d'apprendre. Pour commencer à implémenter un projet logiciel, vous devez d'abord appeler la commande de menu Fichier Nouveau projet Flex. Dans la fenêtre qui apparaît pour créer un nouveau projet, saisissez le nom du projet et l'emplacement où il se trouvera. Parmi les options supplémentaires, sélectionnez Application Web et Serveur d'applications : Aucun (puisque vous ne prévoyez pas d'utiliser d'interaction complexe avec le serveur pour l'instant), puis cliquez sur le bouton Terminer.
L'ensemble de l'espace de travail Flex Builder est divisé en quatre parties, qui contiennent :
Fenêtre du navigateur de projet (Flex Navigator), reflétant la structure des fichiers ;
Fenêtre de présentation, reflétant la structure du programme ou les composants disponibles (lors du passage en mode conception) ;
La fenêtre principale du programme avec deux onglets - Source (éditeur de code) et Conception (mode de conception visuelle) ;
La fenêtre Problèmes, où les messages du compilateur, les informations de débogage et d'autres messages de service sont affichés.
Si vous modifiez le design de l'application, vous constaterez que son code a également changé. C'est correct car, essentiellement, vous travaillez avec du code MXML. Le langage MXML est conçu pour décrire l'interface d'une application (un certain nombre de composants, éventuellement imbriqués les uns dans les autres) au format XML. Une technologie similaire appelée XAML est utilisée par Microsoft lors du développement d'applications Silverlight.
Parlons maintenant un peu des spécificités de l'application en cours de création :
Les plats du catalogue créé sont répartis en catégories (entrées, plats principaux, dessert, boissons) ;
Pour chaque plat il y a une photo, un nom, une description et un prix ;
Il est possible de commander plusieurs portions et de se faire livrer.
Vous aurez besoin d'images ainsi que d'informations sur les plats de manière structurée.
Pour les images, vous devez créer un sous-dossier img dans le dossier src du projet (son dossier principal) et y placer les objets nécessaires. Chaque plat a un identifiant (par exemple, 53), et une grande photographie d'un plat est nommée à l'aide du modèle 53big.jpg, et une petite - 53mini.jpg.
Les données doivent être placées dans le fichier config.xml et situées dans le dossier src. Un tel fichier est présenté dans le listing 1.
Le fichier XML contient des groupes de plats. Chacun d'eux peut comprendre plusieurs plats (item), qui indiquent l'identifiant de l'image (img), le titre (nom), le prix en roubles (price) et la description multiligne (desc). À la fin du fichier de configuration, un élément distinct indique le coût de livraison en roubles (dostavka).
Accédez maintenant directement à l’interface de l’application et déterminez d’abord la taille de sa fenêtre : 800x500 pixels. Il serait possible de réaliser une application « d’étirement » qui remplisse tout l’écran, mais pour l’instant il vaut mieux se limiter à celle qui a une largeur et une hauteur fixes.
Placez ensuite sur scène deux textes statiques (composant Label), une liste déroulante de catégories (composant ComboBox), une galerie de sélection de plats (composant HorizontalList), trois éléments de texte changeants - nom, prix et coût final (également composants Label). , un composant permettant de modifier le nombre de portions (NumericStepper), un indicateur de sélection de livraison (CheckBox). De plus, attribuez un identifiant à chaque composant (ID dans le panneau des propriétés du composant).
Et maintenant, la programmation proprement dite du comportement de l'application Flash va commencer. Pour ce faire, vous devrez comprendre deux concepts : la source de données (fournisseur de données) et la liaison de données (liaison de données).
Les sources de données
Prenons par exemple la liste déroulante où vous pouvez sélectionner le type de plat (« Snacks », « Boissons », etc.). La source de données est le fichier XML décrit au tout début.
L'environnement de programmation Flex fournit des outils automatiques pour travailler avec des sources de liaison de données. Premièrement, la plupart des composants qui fonctionnent avec des listes, des tables et des arborescences ont une propriété dataProvider qui peut faire référence aux données nécessaires. Deuxièmement, il existe des constructions spéciales qui vous permettent de faire référence à des listes à l'intérieur d'un document XML, par exemple une liste de groupes de plats décrits par un ensemble de balises à l'intérieur du document.
Pour implémenter ce concept, procédez comme suit (voir Listing 2).
Définissez la source de données. Dans ce cas, chargez les données du fichier config.xml et donnez-lui l'ID configXML.
Spécifiez la source de données pour la liste déroulante - dataProvider=?© (configXML.group)?©.
Spécifiez quelle propriété XML doit être utilisée pour définir les textes dans la liste déroulante. Supposons que vous souhaitiez (étant donné le fichier XML que vous avez créé) que les éléments de la liste soient les attributs de nom de la balise de groupe correspondante (c'est-à-dire les noms - « Snacks », « Desserts », etc.). Pour ce faire, définissez la propriété labelField=?©@name?© (le symbole @ signifie que vous avez affaire à un attribut, pas à une sous-balise), et vos groupes deviendront alors les éléments de la liste correspondante.
Liaison de données
Supposons que vous ayez modifié la catégorie des plats sélectionnés dans la liste déroulante. Évidemment, leur sélection devrait également changer. Il existe une directive spéciale à cet effet, désignée par des accolades (()). Cela implique ce qui suit : « Si la source de données a changé, alors l'affichage des données dans le composant actuel doit également être modifié. »
Comment mettre cela en pratique ? Vous disposez d'un composant HorizontalList qui affiche un ensemble de photos de plats dans la catégorie actuelle (collations ou boissons) et d'un composant ComboBox dans lequel vous pouvez sélectionner une catégorie basée sur des données XML. Et ce qui est génial, c'est que ComboBox (et la plupart des composants de liste dans Flex) ont une propriété selectedItem. Sa valeur change en fonction de l'élément de liste sélectionné par l'utilisateur et s'il contient la partie de la source de données qui correspond à la sélection. Dans ce cas, lorsque la source de données est XML, cette propriété inclura le sous-arbre XML du groupe de paraboles sélectionné.
Regardons comment un tel concept est mis en œuvre dans la pratique et énumérons ci-dessous ce qui doit être installé pour cela :
ID de liste déroulante : id=?©cmbGroup?© ;
Source de données pour la liste des plats dataProvider=?©(cmbGroup.selectedItem.item)?©.
À propos, un comportement similaire doit être mis en œuvre lors du choix d'un plat séparé - changer son image, son nom, son prix et sa description. Pour ce faire, installez ce qui suit :
Identifiant de la liste de sélection des aliments : id=?©lstProduct?© ;
Source de données pour l'adresse de vos images : source=?©img/(lstProduct.selectedItem.img).big.jpg?© (Flex prend également en charge des structures aussi complexes pour lier des données) ; sources de données pour tous les éléments de texte, par exemple pour le prix (text=?©Price: (lstProduct.selectedItem.price) rub.?©).
Après avoir terminé ces étapes, vous recevrez un catalogue de produits entièrement fonctionnel, qui modifie la liste des produits lorsque vous sélectionnez une autre catégorie et la description lorsque vous modifiez le produit. Notez que vous n’avez pas écrit une seule ligne de code ! Ce seul fait montre que la programmation pour Flash à l'aide des outils Flex est extrêmement amusante.
Vous n'avez besoin que du code du programme pour calculer le montant de la commande. Le code est écrit dans des balises spéciales (voir Listing 2). Vous devez définir une procédure onChange(), et elle sera appelée chaque fois que l'utilisateur effectuera l'une des trois actions suivantes :
Choisira un autre produit. Pour chaque composant, lorsqu'une situation particulière se produit, un événement est généré et peut être traité par programme. Dans ce cas, vous devez mettre en place un traitement événementiel pour l'événement de changement (changement du plat sélectionné) pour la liste des plats : change=?©onChange();?©
Modifie l'état de la case à cocher Activer la livraison. Similaire à change=?©onChange();?© pour la case à cocher « Livraison ». 3. Modifiez le nombre de portions commandées. De la même manière change=?©onChange();?© pour le champ de saisie du nombre de portions.
Ceci complète la partie principale de votre candidature. Et maintenant quelque chose sur les possibilités de « peaufiner » son apparence :
Pour éviter que l'image principale ne paraisse solitaire, vous devez lui ajouter un effet de surbrillance grise à l'aide de la ligne de programme filters=?©()?©; de plus, vous pouvez appliquer d'autres effets graphiques ;
Pour que lors du changement de vaisselle, l'image ne change pas instantanément, mais flotte magnifiquement, un effet d'apparence a été ajouté : completeEffect=?©(Fade)?©. À propos, avec un petit effort supplémentaire, il serait possible d'ajuster sa durée, ainsi que d'implémenter les effets Zoom et Move pris en charge dans Flex. L'option la plus simple est donnée ici.
En raison de la portée limitée de l'article, j'ai dû « masquer » une fonctionnalité importante : l'organisation de la liste des images de plats dans le composant HorizontalList. Pour ce faire, vous devrez créer un petit composant ItemImg supplémentaire (trois lignes de code supplémentaires, mais décrire un tel processus prendrait beaucoup de place) et définir la propriété itemRenderer=?©ItemImg?©.
De plus, j'ai délibérément omis les aspects du chargement du fichier de configuration XML (en utilisant le code actuel, il est « cousu » dans le programme), de l'envoi des plats sélectionnés et de la création d'un panier, car tout cela augmenterait la longueur de l'article en raison de pas très détails techniques intéressants.
Dans cet article, j'ai cherché à démontrer l'efficacité de l'utilisation de Flash (et Flex) en utilisant l'exemple de la tâche généralement pas si simple de création d'un catalogue de produits. La solution résultante (interface comprise) tient dans 40 lignes de code et peut être publiée directement sur les pages du magazine. C'est à mon avis la meilleure preuve de l'efficacité de la création d'applications en Flash par rapport aux applications en HTML et JavaScript. Bien entendu, la conclusion tirée ici n’est pas toujours correcte. Cependant, j'espère vous avoir amené à l'idée que certains problèmes peuvent être résolus simplement et magnifiquement en utilisant Flash.
L'application de travail utilisée ici à titre d'exemple est présentée avec des améliorations mineures sur le World PC Disk.
Lors de la création d'une application dans Flex Builder, vous pouvez choisir entre les options d'application Web et d'application de bureau. Dans le second cas, l'application créée s'exécutera dans la machine virtuelle dite AIR (Adobe Integrated Runtime), grâce à laquelle elle aura accès aux fichiers, à l'exécution automatique et à d'autres propriétés de l'ordinateur. La machine virtuelle AIR est désormais disponible pour Windows, Macintosh et certains systèmes Linux, vous permettant de créer efficacement des applications de bureau multiplateformes à l'aide des fonctionnalités Flash standard. Personnellement, j'ai longtemps préféré cette fonctionnalité au développement d'applications dans Delphi.
Parce que le nom Flex prêtait à confusion pour certains clients, les développeurs ont annoncé que la prochaine version s'appellerait Adobe Flash Builder 4. Elle est actuellement en test bêta.
À propos, Adobe Flex Builder est officiellement disponible gratuitement pour les étudiants de tous âges, des lycéens aux étudiants diplômés. Pour en savoir plus, vous devriez vous rendre sur http://habrahabr.ru/blogs/flex/41597/,