Share
Le développement de bannières Flash est souvent affecté par plusieurs fichiers, un code fragmenté et des timelines en désordre. Ce didacticiel vous montrera comment créer un modèle de projet qui servira de base solide et vous aidera à développer rapidement de solides bannières Flash, vous permettant ainsi de vous concentrer sur la concrétisation de l'idée créative..
Lors de la création de plusieurs bannières flash, une bonne gestion des fichiers est essentielle pour que votre flux de travail reste efficace. Commencez votre modèle de projet de bannière en créant la structure de dossiers illustrée ci-dessous:
Nous allons maintenant créer un ensemble de modèles Photoshop à utiliser lors de la création d'une campagne de bannière flash. (Si vous n'avez pas Photoshop, ne vous inquiétez pas, vous pouvez passer à l'étape 5). Le Bureau de la publicité interactive maintient des directives sur les blocs d’annonces qui répertorient les dimensions communes des blocs d’annonces (bannières). Pour les besoins de ce tutoriel, nous allons créer les trois plus courants:
Commençons par créer le modèle pour The Wide Skyscraper. Ouvrez Photoshop et sélectionnez Fichier> Nouveau. Configurez les propriétés de votre nouveau document Photoshop comme indiqué ci-dessous:
Pour que les calques de votre fichier Photoshop soient structurés de la même manière que vos dossiers de projet au moment de créer une bannière, nous allons ajouter des groupes de calques dans le fichier de modèle pour contenir les principaux éléments de conception..
A l’aide du nouveau groupe du menu situé dans le coin supérieur droit du panneau Calques, créez la structure du groupe de calques illustrée ci-dessous:
Le groupe de couches "Arrière-plan" contiendra à tout moment des éléments de conception se trouvant à l'arrière-plan de votre bannière, par exemple une couleur ou une texture..
Le groupe de couches "Avant-plan" conservera à tout moment des éléments de conception se trouvant au premier plan de votre bannière, tels que le logo de l'entreprise..
Les groupes de couches "Cadre" contiennent les éléments de conception des moments clés de la séquence ou de l'interaction de votre bannière Flash. Cela peut inclure des messages clés, des points critiques d’une animation ou des interfaces utilisateur.
Votre modèle est maintenant prêt à être enregistré. Allez dans Fichier> Enregistrer sous et naviguez jusqu'au dossier 'design' dans la structure de dossiers de votre projet. Nommez le fichier en fonction de ses dimensions (dans ce cas, «160x600») et assurez-vous qu'il est au format Photoshop, avec l'option Calques cochée..
C'est votre premier fantastique modèle de bannière flash créé! Répétez ces étapes pour le rectangle moyen (300px de large x 250px de hauteur) et le tableau de classement (728px x 90px de hauteur). Avec ces modèles Photoshop terminés, nous sommes prêts à passer à Flash.
Commençons par créer un projet Flash afin que vous puissiez naviguer dans la structure de vos fichiers dans l'EDI Flash. Ouvrez Flash CS4 (le processus est très similaire dans Flash CS3 bien que l'interface Flash diffère) et accédez à Fenêtre> Autres panneaux> Projet. Dans le panneau Projet, cliquez sur la liste déroulante Projets et sélectionnez Nouveau projet. Spécifiez le nom du projet comme 'BannerTemplate'.
Pour le dossier racine, accédez au dossier / banner_template / development / que vous avez créé à l'étape 1 à l'aide de l'icône du dossier. Assurez-vous que la version d'ActionScript est définie sur ActionScript 3.0 et cliquez sur Créer un projet..
Nous allons maintenant définir les propriétés du projet Flash pour aider Flash à éponger nos classes pour nous. Cliquez sur la liste déroulante avec l'icône représentant un engrenage dans le coin supérieur droit du panneau Projet et sélectionnez Propriétés du projet. Pour le champ "Enregistrer les classes dans", accédez au dossier / en tant que / créé à l'étape 1 et cliquez sur OK..
Si vous avez effectué la dernière étape correctement, vous devriez voir que de petits crochets de code sont maintenant sur l’icône de votre / sous / dossier. Nous allons maintenant créer un dossier pour toutes les classes spécifiques à nos modèles de bannières. Sélectionnez le dossier / as / et cliquez sur la nouvelle icône de dossier au bas du panneau. Dans la boîte de dialogue qui apparaît, nommez votre dossier 'bannière' et cliquez sur OK..
Maintenant (enfin!) Vous êtes prêt à créer votre classe de document de base de bannière. Si vous n'êtes pas familier avec l'utilisation des classes de documents (ou des classes en général), c'est une bonne idée de lire d'abord cette astuce.
Avec le dossier / en tant que / bannière / sélectionné, cliquez sur l'icône Créer un cours au bas du panneau. Dans le champ Classe, ajoutez le nom de classe "Bannière" après le nom de package "Bannière". et cliquez sur Créer une classe.
Nous devons maintenant prendre ce stub de classe et le modifier en une classe de document de base fonctionnelle. Ajoutez au code ActionScript pour refléter le code présenté ci-dessous:
Accentsconagua
package banner import flash.display.MovieClip; public class Banner extend MovieClip // Constantes: // Propriétés publiques: // Propriétés privées: private var config: Object; // Initialisation: fonction publique Banner (config: Object = null): void // Méthodes publiques: fonction publique init (): void trace ("Banner class initialized"); // Méthodes protégées: Voyons rapidement les modifications apportées à la classe Banner:
Pour le moment, cela ne fait pas grand chose, mais l'important est de construire une structure de classes nous permettant de centraliser la logique des bannières, réduisant ainsi la répétition du code. À partir de là, nous pouvons maintenant étendre la classe Banner pour créer nos classes de document de bannière individuelles..
Commençons par le fichier de classe de The Wide Skyscraper. Créez une classe "WideSkyscraper" dans votre dossier Flash / as / banner / tout comme vous l'avez fait pour la classe "Banner". Prenez le code de stub de classe généré et ajoutez-le afin qu'il ressemble à ceci:
package bannière classe publique WideSkyscraper extend Banner // Constantes: // Propriétés publiques: // Propriétés privées: private var config: Object; // Initialisation: fonction publique WideSkyscraper () super (); // Méthodes publiques: public override function init (): void trace ("Classe WideSkyscraper initialisée"); super.init (); // Méthodes protégées: Passons en revue les modifications apportées à la classe WideSkyscraper:
Répétez maintenant cette étape pour créer les classes de document de bannière pour le MediumRectangle et le tableau de classement. Ceci fait, notre structure de classe de document est maintenant en place.
Nous pouvons maintenant commencer à créer les fichiers .FLA dont nous avons besoin. Encore une fois, commençons par créer le modèle pour The Wide Skyscraper (160x600).
Ouvrez Flash CS4 et sélectionnez Fichier> Nouveau. Sélectionnez "Fichier Flash (ActionScript 3.0)" comme type, puis cliquez sur OK. Dans le panneau Propriétés, modifiez les paramètres Publier et Propriétés comme indiqué ci-dessous:
Enregistrez maintenant votre fichier sous "160x600.fla" dans le dossier / development / de votre projet..
Nous allons maintenant définir un chemin source relatif et un chemin de publication relatif. Cela devient important lorsque vous souhaitez effectuer une copie de votre projet de modèle de bannière, le renommer et commencer à travailler, ou lorsque vous souhaitez donner le modèle à quelqu'un d'autre. Les chemins absolus peuvent être un réel problème pour la mise à jour (en particulier pour plusieurs fichiers!) Chaque fois que vous souhaitez démarrer un projet.
Pour définir le chemin source, sélectionnez Fichier> Paramètres de publication, puis cliquez sur l'onglet Flash. Cliquez maintenant sur le bouton Paramètres en regard de la liste déroulante Script pour ouvrir la fenêtre Paramètres avancés d’ActionScript 3.0. Assurez-vous que le chemin source est l'onglet actif et cliquez sur le '+' pour ajouter le chemin './as'. Vous pouvez maintenant ajouter le texte "banner.WideSkyscraper" dans le champ Classe de document. Votre fenêtre devrait ressembler à ceci:
Cliquez sur OK et votre document est maintenant lié à la classe WideSkyscraper créée à l'étape 9..
Pour définir le chemin de publication, sélectionnez Fichier> Paramètres de publication, puis cliquez sur l'onglet Formats. Nous n'avons pas besoin du fichier HTML, alors décochez cette case. Dans le chemin de publication du fichier SWF, ciblez le dossier / www / de votre dossier de projet, comme indiqué ci-dessous. Si tout semble correct, cliquez sur OK. Votre fichier swf compilé sera placé dans le dossier / www / lorsque vous l'aperçu ou le publiez..
Il y a un peu plus d'informations à ce sujet dans ce screencast Quick Tip.
Pour une raison quelconque, certains systèmes de diffusion d'annonces exigent que la première image de votre film soit vierge (Eyeblaster en est un exemple) ou importent leurs classes / incluent leur code ActionScript dans la première image. Souvent, les extensions Flash que vous pouvez installer pour ces systèmes de diffusion d'annonces refuseront de regrouper votre fichier si vous ne respectez pas cette condition..
C’est ici que la fonction init () que vous avez créée précédemment dans votre classe de document entre en jeu. Pour que notre modèle puisse être utilisé dans cette situation, nous allons créer un scénario à deux images avec la première image vide, la seconde contenant un arrêt. action et un appel à la fonction init () comme indiqué ci-dessous:
Si vous compilez ce fichier maintenant, vous devez obtenir les éléments suivants dans votre panneau de sortie, ce qui confirme que votre classe de document WideSkyscraper et votre classe de document de base Banner fonctionnent:
Classe WideSkyscraper initialisée Classe Banner initialisée
Nous allons maintenant créer un symbole de bibliothèque pour contenir la création de la bannière, qu’il s’agisse d’une animation ou d’une interface. Accédez à Insertion> Nouveau symbole et nommez-le "création", cochez Exporter pour ActionScript et attribuez-lui la classe "Création". Assurez-vous que le type est Movie Clip et cliquez sur OK.
Ajoutez maintenant un texte d’espace réservé sur la scène, comme indiqué ci-dessous, pour que vous puissiez voir quelque chose lorsque vous l’ajouterez à votre scène dans le code:
Et c'est tout ce dont nous avons besoin du fichier .FLA! Allez-y et créez les autres .FLA pour The Medium Rectangle (300 x 250 haut) et The Leaderboard (728 x 90 haut). Ceci mis en place, nous pouvons revoir notre classe de documents Banner et commencer à ajouter des fonctionnalités de base pour toutes ces bannières..
Presque toutes les directives relatives aux bannières vous conseillent de placer une couleur d'arrière-plan unie dans votre fichier Flash, car la couleur d'arrière-plan de la scène peut être remplacée lorsque l'objet Flash est incorporé dans une page HTML. Plutôt que d'aller dans chaque .FLA et de dessiner une forme sur la scène, nous pouvons centraliser cette tâche dans le code. Ouvrez votre classe Banner et mettez à jour le fichier pour refléter le code ci-dessous:
package banner import flash.display.MovieClip; import flash.display.Sprite; import flash.display.Graphics; public class Banner extend MovieClip // Constantes: private const BG_COLOR: Number = 0x0E0E0E; // Propriétés publiques: // Propriétés privées: private var config: Object; // Initialisation: fonction publique Banner (config: Object = null): void // Méthodes publiques: fonction publique init (): void trace ("Banner class initialized"); // Créer un arrière-plan var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Méthodes protégées: Récapitulons les modifications apportées à la classe Banner:
Il ne vous reste plus qu'à changer la valeur de BG_COLOR pour obtenir le bon fond de couleur dans toutes vos bannières..
Nous devons maintenant ajouter le symbole de création créé à l'étape 14 à la liste d'affichage, car il s'agira du conteneur pour l'exécution de la création. C'est très facile à faire, il suffit de mettre à jour la fonction init () à ceci:
// Méthodes publiques: public function init (): void trace ("Classe de bannière initialisée"); // Créer un arrière-plan var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Ajouter une création var création: Creative = new Creative (); addChild (créatif); Une autre exigence courante est que la zone cliquable de la bannière ouvre une nouvelle fenêtre basée sur une variable "clicktag" transmise à partir de la page HTML lorsque l'objet Flash est incorporé. Créons une classe utilitaire pour gérer cela pour nous. Dans le panneau Projet Flash, accédez au dossier / as / banner / et créez un nouveau sous-dossier appelé / util /. Créez ici une nouvelle classe appelée 'ClickArea' et codez-la comme indiqué ci-dessous:
package banner.util import flash.display.Sprite; import flash.display.Graphics; import flash.display.Stage; import flash.events.MouseEvent; import flash.net.URLRequest; import flash.net.navigateToURL; Classe publique ClickArea étend Sprite // Propriétés privées: private var clickthroughURL: String; // Initialisation: fonction publique ClickArea (loaderInfo: Object, stage: Stage) // Création d'une zone cliquable this.graphics.beginFill (0x00FF00,0); this.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); this.graphics.endFill (); // Déterminer l'URL de destination (en vérifiant les conventions de dénomination connues) if (loaderInfo.parameters.clicktag! = Null) clickthroughURL = loaderInfo.parameters.clicktag; else if (loaderInfo.parameters.clickTag! = null) clickthroughURL = loaderInfo.parameters.clickTag; else if (loaderInfo.parameters.clickTAG! = null) clickthroughURL = loaderInfo.parameters.clickTAG; // comportement du bouton Ajouter this.buttonMode = true; this.addEventListener (MouseEvent.CLICK, mouseClickHandler, false, 0, true); // Méthodes publiques: // Méthodes protégées: fonction privée mouseClickHandler (e: MouseEvent): void if (clickthroughURL! = Null) browseToURL (nouvelle URLRequest (clickthroughURL), "_ vierge"); else trace ("Clickthrough"); Résumons rapidement ce que fait la classe ClickArea:
Maintenant, ouvrez votre classe Banner à nouveau et ajoutez importer banner.util.ClickArea dans la liste des importations de classe Flash et mettez à jour la fonction init () pour instancier ClickArea et l'ajouter à la liste d'affichage, comme indiqué ci-dessous:
// Méthodes publiques: public function init (): void trace ("Classe de bannière initialisée"); // Créer un arrière-plan var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Ajouter une création var création: Creative = new Creative (); addChild (créatif); // Créer une zone cliquable var clickArea: ClickArea = new ClickArea (loaderInfo, stage); addChild (clickArea); Nous ajoutons les principes de base du développement de bannières à cette classe, mais la véritable valeur réside dans le fait que nous les ajoutons à toutes nos bannières dans une classe centralisée. Toutes les tâches courantes que vous rencontrez fréquemment dans les bannières peuvent être ajoutées ici pour vous permettre de consacrer plus de temps à la création de l'animation ou de l'interaction unique créée par la bannière..
Avec tout notre code bien organisé, ouvrir les fichiers .FLA individuels et les publier commence à s’emballer. La bonne nouvelle est que nous pouvons automatiser cela également. Allez dans votre panneau de projet et cochez la case à côté de chaque bannière .FLA format (si vous ne les voyez pas dans cette liste, cliquez sur le menu déroulant avec l’icône Engrenage et sélectionnez Actualiser) comme indiqué ci-dessous:
Vous pouvez maintenant publier toutes vos bannières dans le dossier / www / que vous avez configuré à l'étape 12 en cliquant sur le menu déroulant avec l'icône Engrenage et en sélectionnant Publier le projet..
Le dernier élément que nous devons terminer pour terminer notre modèle de projet de bannière consiste à créer une page HTML sur laquelle les présenter afin de pouvoir les afficher facilement à un client. Téléchargez SWFObject et placez swfobject.js dans le dossier / www /, puis créez un fichier HTML dans l'éditeur de votre choix et écrivez le code ci-dessous:
Modèle de signature de bannière
Vous pouvez en savoir plus sur l'utilisation de SWFObject dans la documentation en ligne, mais parlons rapidement des tâches clés que nous réalisons ici:
Enregistrez maintenant ce fichier sous le nom index.html dans le dossier / www /. Vous pouvez maintenant prévisualiser vos bannières dans un navigateur Web ou télécharger ce dossier quelque part pour que votre client puisse l'afficher:
Terminons par examiner notre structure de dossiers remplie et en veillant à ce que tous les fichiers se trouvent à l'emplacement approprié:
Vous avez maintenant un modèle de projet avec:
Ce tutoriel n'est vraiment qu'un début. Identifiez les tâches récurrentes dans vos projets de bannière et personnalisez votre modèle de projet afin de le rendre aussi rapide que possible. Étendez-le en incluant vos frameworks légers préférés (TweenNano est idéal pour l'animation scriptée) et vos bibliothèques afin que vos outils préférés soient à portée de main lorsque vous démarrez votre prochain projet..
Si vous utilisez Subversion ou un autre type de contrôle de source, ce serait un excellent projet à inclure dans votre référentiel afin que vous puissiez l'améliorer au fil du temps et consulter la dernière révision pour chaque projet de bannière que vous démarrez..
Avez-vous des idées sur la façon d’améliorer cela ou des commentaires sur des problèmes qui entravent le développement de votre bannière? Participez à la discussion ci-dessous!
