Retour à la table des matières
Créez votre première bannière

Tutoriel: Créez votre première bannière

Dans ce tutoriel, nous allons créer une bannière très proche de la bannière fournie en exemple avec Banner-Effect. Suivre ce tutoriel vous permettra d'avoir une bonne vision d'ensemble des fonctionnalités de Banner-Effect.

Première étape, choisir la taille de la bannière

Création de la bannière
Pour ce tutoriel nous allons créer une assez grande bannière de 500x350 pixels. Pour ce faire, lancez Banner Effect, puis cliquez sur la première icône de la barre d'outil (Nouvelle Bannière).

Comme notre bannière n'est pas de taille "standard", cliquez sur l'onglet "Format personnalisé" et entrez les valeurs suivantes:

Largeur: 500
Hauteur: 350

Cliquez ensuite sur "Créer nouvelle bannière".

Nous allons créer une bannière constituée de 5 slides. L'idée c'est d'avoir un premier slide d'accueil, puis 3 slides qui vantent les mérites de notre logiciel favori, et finalement un slide qui permet de se rendre sur le site Internet de Banner Effect ou de recommencer l'animation si on veux encore en profiter.

Création du fond et de la bordure

Choix de la couleur de fond

Nous allons d'abord choisir l'image de fond pour notre bannière. Cliquez-donc sur l'onglet Fond: Puis choisissez un fond qui vous plait (évitez les fonds trop sombres, nous allons utiliser du texte noir). Dans cet exemple nous utilisons le fond "tâches oranges" qui est un peu à la fin de la liste.

Ensuite passez à l'onglet Bordure et choisissez la bordure que vous voulez. Dans notre cas nous utilisons une des bordures "grunge".




Premier slide

Premier slide

Nous allons maintenant ajouter 2 textes et une image sur ce premier slide. Cliquez sur l'onglet Principal puis ensuite cliquez sur l'icône en haut avec 2 "T" (numéro 1 sur l'image): c'est l'icone pour rajouter du texte au slide.

Placez le texte un peu en haut de l'écran et donnez lui une petite inclinaison en utilisant la poignée de rotation (numéro 2 sur l'image).

Ensuite, ça se passe dans la partie Propriétés de l'objet sur la droite de l'écran: Changer d'abord le texte pour votre slogan, dans notre cas "Créez des bannières en un instant", choisissez une police et un style adapté (dans notre cas la police Century Gothic en gras de taille 28).

Changez la couleur du texte en noir.

Finalement, nous allons ajouter un effet d'apparition. Dans la partie Effets / Effet de début choisissez Zoom (2).

Nous allons maintenant rajouter un nouveau texte: appuyez à nouveau sur l'icone avec les 2T en haut de l'écran pour créer un nouvel objet de type texte.

Premier slide avec plus d'objets

Comme vous pouvez le constater, ce texte est directement crée avec le style défini précédemment, ainsi il est plus rapide de créer plusieurs texte avec le même style.

Pour ce nouveau texte, il suffit de changer le texte: "avec", de le placer un peu à droite de l'écran et de le tourner afin qu'il soit horizontal (pour ce faire vous pouvez soit cliquer droit dessus et choisir "Rotation/Horizontal" ou utiliser la poignée de rotation en maintenant la touche CTRL appuyée afin de tourner l'objet par saut de 45 degrés)

Ensuite, l'idée est de la faire apparaitre un peu après le texte principal et de le faire venir d'en bas à droite. Pour ce faire, dans la section Effets nous choisissons Effet de début: Trajectoire puis cliquez le bouton "Editer: l'onglet principal va passer en mode d'édition de la trajectoire.

Cliquez avec le bouton gauche de la souris pour ajouter des points de contrôle et cliquez avec le bouton droit pour les supprimer.

Créez la trajectoire que vous désirez, puis faites un clic droit n'importe ou sur la zone principale pour afficher le menu contextuel. Réglez la Durée de l'effet à 3 secondes pour le rendre plus rapide, puis changez aussi la Trajectoire: dans notre exemple nous choisissons Rebond pour donner un effet de rebond au texte.

Puis appuyez à nouveau sur le bouton Editer pour repasser en mode normal. Dans les propriétés, changez la valeur "Délai:" à 1 seconde afin que l'effet se déclenche 1 seconde après l'affichage du slide.

Finalement, nous allons ajouter le logo (une image) du logiciel. Cliquez donc sur l'icône du haut avec une photo pour ajouter une image au slide, puis double-cliquez sur l'image pour choisir une image sur votre ordinateur (vous pouvez aussi copier/coller des fichiers depuis l'explorateur Windows sur le slide pour ajouter des images).

Placez ensuite l'image en bas de l'écran. Nous allons lui ajouter l'effet de début: Flou (3) et un délai d'affichage de 3 secondes afin qu'il apparaisse en dernier.

Voilà, vous pouvez cliquer sur Prévisualisation dans la barre d'outil afin de voir la bannière en action.

Dernière chose pour ce slide, nous allons modifier son temps d'affichage à 7 secondes (Réglage d'avancement) et choisir la transition (onglet transition) Fondu. C'est la transition qui va être appliquée lorsque la bannière passera au slide numéro 2.

L'onglet Transition Initiale est utilisé pour afficher une transition de début lorsque la bannière a terminé de se charger, mais nous n'utilisons pas cette option dans cette bannière.

Deuxième slide

Dupliquer un slide

Nous allons maintenant créer le deuxième slide. Cliquez donc sur la miniature du premier slide avec le bouton droit et choisissez Dupliquer ce slide afin d'en créer un nouveau. Effacer ensuite le texte "avec" ainsi que l'image (sélectionnez les sur l'écran et appuyez sur DEL ou sur le bouton Effacer l'objet sélectionné).

Il est aussi possible de créer un nouveau slide avec l'option Ajouter Slide de la barre d'outil, mais dans notre cas il est plus simple de dupliquer afin de garder le fond ainsi que les effets de transition.

Changez le texte restant pour "Vous voulez créer..." et placez le en haut du slide horizontalement.

Nous allons ensuite ajouter un texte "à puce" afin d'expliquer pourquoi ce logiciel est fantastique. Créez donc un nouvel objet texte.

2ème slide

Changez ensuite les paramètres de ce texte suivants:

Finalement, allez dans l'onglet Fond et, au bas de l'écran - dans la section Image de fond choisissez un autre positionnement pour l'image: c'est un moyen rapide de varier le fond avec la même image.

Troisième slide

3ème slide



Le troisième slide est quasiment identique au deuxième. Dupliquez donc le slide numéro 2 et changez le texte afin de vanter (encore mieux) les mérites du logiciel. Dans notre cas nous allons varier l'effet d'affichage du texte à puce et choisir Particules Horizontales (2) et choisir une durée d'affichage un peu plus longue pour le slide de 12 secondes (Réglage d'avancement)

A nouveau, allez dans l'onglet Fond et, au bas de l'écran - dans la section Image de fond choisissez un autre positionnement pour l'image.

Dupliquez ensuite ce slide afin d'attaquer le 4ème slide.











Quatrième slide

4ème slide

Pour ce slide, nous allons changer le fond et la bordure. Ouvrez l'onglet Fond rt choisissez un autre fond, puis faites de même avec la bordure.

Ensuite, effacez le texte à puce et changez le titre pour "Des bannières visibles partout". Changez la couleur pour un brun clair et mettez un contour brun foncé de 4 d'épaisseur.

Maintenant nous allons afficher une à une des images afin de montrer que l'excellent logiciel en question est capable de produire des bannière sur tous les supports.

Ajoutez 5 images et double-cliquez sur chaque image pour choisir une image sur votre ordinateur correspondant à chaque support. Disposez ensuite les 5 images de gauche à droite comme sur l'illustration.

Ensuite nous allons faire apparaitre successivement de la droite chaque élément. Pour ce faire nous allons utiliser l'effet de début "De la droite (2)" pour toutes les images et nous allons les temporiser de la façon suivante:

Première image (tout à gauche) - Affichage: 1 seconde
Deuxième image - Affichage: 2 secondes
Troisième image - Affichage: 3 secondes
Quatrième image - Affichage: 4 secondes
Cinquième image - Affichage: 5 secondes

Finalement, nous ajoutons un texte explicatif en bas de l'écran.

Cinquième et dernier slide

5ème slide

Dupliquez le slide numéro 4.

Nous allons encore changer la bordure et le fond: choisissez quelque chose qui vous plait.

Ensuite, enlevez les images et gardez les 2 textes..

Dans ce slide nous allons créer 2 objets interactifs: un lien et un bouton. Tout d'abord nous allons ajouter un lien vers le site web du produit.

Sélectionnez la ligne de texte "www.banner-effect.com" et, dans les propriétés, descendez jusqu'à la section Cible du clic: c'est ici que nous associons un comportement à un objet.

Vous pouvez associer plusieurs types de comportement à un objet:

Ouvrir une page (nouvelle fenêtre): Un clic sur cet objet va ouvrir une page Internet dans une nouvelle fenêtre (popup)
Ouvrir une page (même fenêtre): Un clic sur cet objet va ouvrir une page Internet dans la fenêtre actuelle
Appel d'une fonction Javascript: Un clic va appeler une fonction Javascript de la page Internet (plus d'information ici)
Ouvrir un slide: un clic va afficher un autre slide de la bannière.

ouverture d'une page

Sélectionnez donc Ouvrir une page (nouvelle fenêtre) puis cliquez sur le bouton "..." juste à droite. Une fenêtre va s'ouvrir. Dans cette fenêtre, tapez l'adresse de la page Internet souhaitée.

Ensuite, créez un bouton: choisissez le bouton que vous préferez, puis changez le texte par "cliquez ici pour recommencer...", ensuite cliquez OK pour fermer l'éditeur de bouton.

Sélectionnez le bouton et sélectionnez Ouvrir un slide, cliquez sur le bouton "..." et choisissez le slide numéro 1.

Voilà notre bannière est terminée. Vous pouvez cliquer sur Prévisualiser pour voir le résultat. Vous pouvez aussi utiliser l'onglet Transitions pour varier les transitions entre les slides à votre convenance.

Maintenant que notre bannière est faite, nous allons voir les différentes options qui s'offrent à nous afin de publier cette bannière sur un site Internet.

Publication de la bannière

export de la bannière

Pour utiliser votre bannière dans "le vrai monde", il vous faut utiliser le menu Fichier/Créer une bannière Flash/HTML5....

Ce menu va ouvrir un assistant qui va vous suivre pas à pas dans "l'exportation" de la bannière.

Choix du format d'export

La première chose à choisir est le format d'export. Vous pouvez générer votre bannière en Flash et/ou en HTML5/Javascript. Dans notre cas, comme nous voulons que notre bannière soit visible partout nous allons générer les deux (Le format le mieux adapté à la plateforme sera affiché).

Qualité de l'export

Ensuite, vous allez choisir la qualité visuelle de la bannière. Cette qualité s'ajuste à l'aide de deux tirettes pour changer indépendamment la qualité des textes et des images. Plus la qualité est bonne, plus la taille de la bannière finale est grande.

Dans notre cas nous allons générer la bannière en qualité maximale.

Emplacement de la sauvegarde

export de la bannière terminé

Ici vous allez choisir si vous voulez générer votre bannière localement (sur votre ordinateur), la copier directement sur votre serveur Web (par FTP) ou sur les serveurs Banner Effect.

Pour faire simple nous allons envoyer la bannière sur les serveurs Banner Effect (choisissez donc l'option "Sur le serveur de Banner-Effect").

Nom de la bannière

Tapez un nom pour votre bannière, par exemple "tutoriel".

Envoi des fichiers

Cette partie va envoyez les fichiers sur le serveur. Patientez quelques secondes, puis appuyez sur Suivant.

Succès!

Voilà, cette fois la bannière est générée, vous pouvez voir le résultat en cliquant sur Prévisualisation dans le navigateur et/ou en copiant le code HTML généré sur la page Internet de votre choix.

Conclusion

Voilà, votre première bannière est crée. Vous avez pu voir un large éventail des possibilités de Banner-Effect. Faites maintenant vos expériences et visitez les autres sections de ce manuel pour devenir un véritable expert dans la création de bannières!