ActionScript 3 devenant un langage de plus en plus utilisé et les fonctionnalités de Flash Player devenant plus avancées et plus accessibles, il est important de créer un flux de travail commun au sein de votre entreprise afin que les projets puissent devenir plus agiles et, plus important encore, être livrés à temps. L'un des problèmes majeurs rencontrés avec ActionScript 2 consistait à réduire l'écart entre le concepteur et le développeur. Cela laissait souvent aux développeurs des fichiers FLA contenant des centaines d’éléments de bibliothèque mal nommés et personne n’aimait cela..
Grâce aux avancées d'ActionScript 3 et à la possibilité de coder en dehors de la chronologie, les SWC sont devenus des éléments couramment utilisés dans les grands projets, mais de nombreuses personnes ne savent toujours pas ce qu'elles sont ni comment les créer / les utiliser..
Commençons par voir ce que sont réellement les CES. Un SWC [Composant ShockWave acronyme dire:Sw ~ iCK] :) est simplement un paquet compressé de fichiers généré par l'IDE Flash. Ils contiennent des éléments visuels (tels que MovieClips, Buttons, Graphics et Fonts) ainsi que du code. Les SWC existent depuis Flash MX 2004, mais ont vraiment décollé depuis qu'ActionScript 3 est arrivé car auparavant, comme je l'ai dit, vous pouviez tout conserver dans la FLA..
Dans ce tutoriel, je vais vous montrer comment intégrer et utiliser des ressources visuelles, des polices et du code ActionScript..
Il existe un argument simple et solide pour l’utilisation des SWC: il sépare la conception du développement. Flash a la capacité d'influencer la conception d'éléments visuels programmés par le biais de 'CSS', comme les feuilles de style (un peu comme avec Flex), mais la plupart du temps, les concepteurs (pas tous) sont rebutés par tout ce qui concerne le code, y compris le simple CSS. Un autre point est que les concepteurs conçoivent. On leur donne généralement des cadres d'écriture factice à partir desquels ils créent ensuite des interfaces utilisateur dans des programmes tels que Photoshop et Illustrator. S'ils devaient ensuite coder l'interface, créer des maquettes dans Photoshop aurait peut-être été une perte de temps. En outre, le codage d'interfaces pouvant être facilement créées dans des IDE visuels tels que Photoshop et Illustrator peut prendre beaucoup de temps et d'efforts..
Pour revenir à mon point principal, le SWC permet aux concepteurs de concevoir l’interface, de la découper, puis de transmettre un SWC au développeur qui lie l’ensemble, ce qui crée un flux de travail simple, sans que les utilisateurs ne marchent sur les pieds des autres conception correcte.
Supposons que demain vous soyez informé d'un nouveau projet dans lequel vous travaillerez avec une équipe de conception. Il incombera à l'équipe de conception de créer l'interface, y compris de créer toutes les petites choses telles que les états de survol des boutons, les animations du chargeur, les coins arrondis et les icônes. Il incombe à l'équipe de développement de construire ensuite le projet et de lier tous les éléments de l'interface utilisateur. Au moment de la conception, tous les éléments nécessaires étaient créés, insérés dans un fichier SWC, puis transmis à l’équipe de développement. L’équipe de développement peut ensuite coder dans les éléments de l’interface utilisateur sans avoir à s’inquiéter d’importer des polices, de jouer avec des feuilles de style ou de s’asseoir près du concepteur et de programmer l’interface..
Comme le souligne le très bel article de Mario Santos, Adobe a récemment publié Flash Catalyst, un IDE permettant d'importer des fichiers PSD ou AI et de les convertir en objets vectoriels XML, les FXG. Il s’agit là d’un pas dans la bonne direction, mais il n’est mis en œuvre que dans Flash Player 10, dont le taux de pénétration n’est que de 75% environ. Cela signifie que lorsque vous travaillez sur des projets en direct, vous devez utiliser Flash Player 9. Par conséquent, jusqu'à ce que davantage de personnes adoptent Flash Player 10, les SWC constituent un bon moyen de s'y prendre..
Assez parlé, créons un SWC. Je vais créer quelques graphiques dans Photoshop et Illustrator et les importer dans l'EDI Flash où je vais les configurer pour le codage ActionScript à l'aide de SWC. Je vais aussi parler d'un concept appelé "découpage en tranches à l'échelle 9", lancez donc votre éditeur d'images préféré et créez un nouveau fichier:
Prenons quelques formes personnalisées par défaut fournies par Adobe et collez-les sur le tableau:
Ensuite, pour que nous n'ayons pas que des bitmaps noires unies, ajoutons-leur de la couleur:
OK, nous avons donc de jolies stars, nous voulons maintenant les prendre et les mettre dans notre IDE Flash.
Lancez l'IDE Flash et créez un nouveau fichier ActionScript 3:
Maintenant, si vous êtes un vétéran de l'IDE Flash, vous vous souviendrez que vous avez été en mesure d'importer des fichiers PSD depuis CS3. Ils ont donc introduit une interface vraiment sympa pour importer des fichiers PSD passant par vos couches plutôt que importer un gros bitmap. Allez donc dans Fichier> Importer> Importer dans la bibliothèque, accédez à votre PSD et cliquez sur Importer dans la bibliothèque. Vous obtiendrez une fenêtre semblable à ceci:
Dans mon cas, je vais tout laisser en dehors de l'arrière-plan, car il s'agit simplement d'un fond blanc. Maintenant que nos couches PSD sont des éléments de notre bibliothèque, nous pouvons commencer à les préparer pour les développeurs. Sortez l'une des étoiles de la bibliothèque et déposez-la sur la scène, comme suit:
Nous prenons ensuite l’étoile et la convertissons en MovieClip. Lorsque la fenêtre apparaît, nommez-la "BlueStarAsset", cochez "Exporter pour ActionScript". Vous verrez que les deux zones de saisie ci-dessous deviennent modifiables. Vous n'avez pas besoin de les toucher, mais ils nous permettent de spécifier quelle classe cet actif sera appelé et quel type de classe il étendra, nous nous en tiendrons à "MovieClip":
Nous avons maintenant un élément dans notre bibliothèque que nous pouvons exporter vers ActionScript. Avant de continuer, essayons ceci. Tout d'abord, allez dans Fichier> Paramètres de publication. Cliquez sur l'onglet "Flash", sélectionnez "Player" version 9 et cochez la case "Exporter SWC":
Hit "Ok". Nous sommes maintenant prêts à exporter notre SWC. Déboguez le fichier FLA en appuyant sur CTRL / CMD + Entrée et vous verrez un fichier SWF et un fichier SWC. Petit lait! Vous avez créé un SWC, maintenant utilisons-le rapidement. Lancez votre environnement de développement IDE préféré et créez un nouveau projet ActionScript 3. Configurez les paramètres du compilateur pour inclure le fichier SWC que vous venez de créer dans le chemin de génération. Créez un nouveau fichier ActionScript 3 de base appelé "App.as" et utilisez le code suivant:
package import flash.display.MovieClip; import flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] classe publique App étend Sprite fonction publique App () var star: MovieClip = new BlueStarAsset (); addChild (étoile);
Vous verrez quelque chose comme ça:
Voilà donc notre atout vedette.
Je vais juste parler rapidement d'un concept appelé "scale 9 grid". C’est simplement une méthode qui nous permet de découper un élément visuel afin que, lorsqu’il s’agisse de le redimensionner, des éléments tels que les angles arrondis puissent rester proportionnels. Par exemple, si nous avions un rectangle arrondi comme celui-ci, si nous modifions ensuite sa largeur, vous constaterez que les angles arrondis ne sont pas proportionnellement plus longs:
Pour résoudre ce problème, nous utilisons la méthode de découpage en grille de l'échelle 9 afin de définir un rectangle au-dessus de notre actif qui sera redimensionné. Ainsi, tout ce qui se trouve en dehors du rectangle reste proportionnel, par exemple:
Le rectangle rouge au milieu est l’échelle, mais pas le côté extérieur. Nous créons une grille à 9 voies, la rangée du haut en a 3, le milieu en 3 et le bas en 3. Voici comment procéder: retournez à l'IDE Flash et tracez un simple rectangle arrondi. Créez un nouveau MovieClip et assurez-vous de cocher la case "Exporter pour ActionScript" (j'ai appelé le mien "SimpleRoundedRect") et j'espère que vous obtiendrez quelque chose de similaire à ceci:
Maintenant, nous allons prendre cet actif nouvellement créé, réexporter le SWC (en déboguant le film) et revenir à notre IDE ActionScript 3 où nous mettrons à jour notre classe de la manière suivante:
package import flash.display.MovieClip; import flash.display.Sprite; import flash.geom.Rectangle; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] Classe publique App étend Sprite fonction publique App () var rect: MovieClip = new SimpleRoundedRect (); rect.scale9Grid = new Rectangle (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect);
Nous ajoutons simplement notre rectangle à la scène, mais avant cela, nous dessinions un rectangle de x: 10, y: 10, dont la largeur et la hauteur sont inférieures de 20 pixels à notre rectangle arrondi. Ce sera la définition du rectangle du milieu pour notre découpage en échelle. Vous verrez maintenant le rectangle parcourir toute la largeur de la scène sans que les angles ne deviennent disproportionnés. Juste pour voir la différence, commentez la ligne 15 (elle commence par "rect.scale9Grid") et voyez comment les coins sont maintenant étirés.
Je sais exactement ce que vous pensez "si le concepteur est censé faire tout le travail de l'actif, alors pourquoi le développeur doit-il définir le rectangle pour le découpage?" Le développeur n'a pas à le faire, comme le concepteur le peut! Cliquez avec le bouton droit sur la ressource dans la bibliothèque et sélectionnez les propriétés. Cochez ensuite la case "Activer les guides pour la mise à l'échelle en 9 découpes" et vous verrez ceci:
Le concepteur peut maintenant repositionner ces guides afin que le développeur n'ait pas à s'inquiéter de la création d'un rectangle pour la grille de l'échelle 9. Si vous laissez la ligne 15 commentée et réexportez ce SWC, vous constaterez que les angles sont à nouveau proportionnés. Simple hein?
Les SWC peuvent contenir plus que des ressources visuelles, qu’il s’agisse de graphiques plats ou d’animations de scénario / scriptées. Ils peuvent également contenir des bibliothèques de code complètes. Les SWC sont un très bon moyen de distribuer votre code. C'est une corvée, mais pas impossible de décoder les SWC. Toutefois, cela signifie que vous pouvez publier un fichier SWC plutôt que de vous inquiéter de nombreux fichiers et répertoires. Ils sont également plus faciles pour l'utilisateur. Par exemple, j’ai un dossier dans lequel je vends toutes les bibliothèques de code ActionScript que j’utilise ou que je crée, mais j’ai ensuite un dossier séparé pour les fichiers SWC utiles que j’ai appris à utiliser. Je trouve plus facile de sélectionner un fichier SWC et de le lier au projet plutôt que d'inclure l'ensemble de mon dossier de scripts partagés - et c'est aussi plus rapide.!
Pour créer des fichiers SWC basés sur du code, j'utilise Flash Builder. Vous pouvez télécharger la version bêta d'Adobe. Dans Flash Builder, vous devez créer un nouveau "projet de bibliothèque Flex", comme suit:
Donnez-lui un nom et assurez-vous de sélectionner le compilateur Flex 3.4:
Cliquez sur Suivant, puis cochez la case "src", c'est ici que nous allons placer nos classes:
Nous pouvons maintenant commencer à écrire du code pour notre bibliothèque. Créez donc une nouvelle classe ActionScript, appelez-la "Test", définissez le nom du package sur "com.flashtuts.swc" et insérez le code suivant:
package com.flashtuts.swc import flash.display.Sprite; Classe publique Test étend Sprite fonction publique Test () init (); fonction privée init (): void var sprite: Sprite = new Sprite (); sprite.graphics.beginFill (0xFF0000); sprite.graphics.drawRoundRect (0, 0, 100, 100, 5, 5); sprite.graphics.endFill (); addChild (sprite);
Comme vous pouvez le constater, nous venons de créer une boîte rouge. Intégrons-le dans notre projet ActionScript 3..
Vous devez maintenant modifier le compilateur Flex afin qu'il puisse récupérer les nouveaux actifs SWC que vous venez de créer. Une fois que vous avez fait cela, vous pouvez changer le code de votre application pour ressembler à ceci:
package import com.flashtuts.swc.Test; import flash.display.MovieClip; import flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] Classe publique App étend Sprite fonction publique App () var rect: MovieClip = new SimpleRoundedRect (); //rect.scale9Grid = new Rectangle (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect); var redRect: Sprite = new Test (); addChild (redRect);
Là tu verras ton rectangle rouge! Simple hein?
Désormais, de nombreuses personnes peuvent dire que les SWC ne sont pas nécessaires, mais ils aident les concepteurs et les développeurs à travailler de manière synchronisée sans se marcher sur les pieds. Ils protègent votre code et constituent un bon moyen de partager des éléments visuels tels que des préchargeurs et des graphiques. Bien que les FXG soient bien meilleurs, jusqu'à la reprise de Flash Player 10, les SWC sont la norme lorsqu'il s'agit de créer des sites Web de production qui doivent être évolutifs, à la fois en termes de calendrier de projet et de composants visuels..