Créer une bannière Flash WebPlus

Transcription

1 Dans ce didacticiel de niveau débutant, nous allons utiliser les outils et techniques de base d animation par image-clé pour créer une bannière Web simple, que vous pourrez importer dans WebPlus. Dans ce didacticiel, vous apprendrez à : Créer et éditer des formes Créer et mettre en forme un texte artistique Importer et redimensionner des images Sélectionner et aligner des objets Créer un texte défilant et des effets d image Appliquer des effets de transparence avec ouverture en fondu Définir la vitesse de changement d un effet d animation Exporter une animation dans un fichier Flash SWF Importer une bannière dans WebPlus Personnaliser une bannière pour l utiliser dans d autres projets

2 2 Didacticiels Dans ce didacticiel, nous allons créer une bannière Flash WebPlus à partir d une taille de page prédéfinie. Vous pouvez bien entendu créer une bannière de la taille de votre choix. Dans le menu Fichier, cliquez sur Nouveau puis sélectionnez la commande Nouvelle animation par image-clé. Dans la barre d outils contextuelle de la page, définissez les paramètres suivants : Dans la liste déroulante de la taille de page, sélectionnez l entrée Bannière Flash WebPlus (ou sélectionnez l entrée de votre choix). Cliquez sur le bouton Paysage. Dans la barre d'état, cliquez sur le bouton Taille écran. Dans la barre d outils Dessin, sélectionnez le rectangle dans la palette Formes rapides et tracez un grand rectangle recouvrant la quasi-totalité de la page. Une fois le rectangle sélectionné, effectuez les opérations suivantes : Faites glisser le nœud de gauche vers le haut pour arrondir les angles. Dans l onglet Aligner, cliquez sur les boutons Centre horizontal et Centre vertical. Dans l onglet Échantillon, sélectionnez l entrée Linéaire dans la liste déroulante Dégradé, puis cliquez sur l échantillon Linéaire 180. Dans l onglet Contour, sélectionnez l entrée Aucun dans la liste déroulante des Styles de contour pour supprimer le contour. Dans la barre d outils Dessin, cliquez sur le bouton Effets de filtre. Dans la boîte de dialogue Effets de filtre, activez l option Biseautage et estampage et cliquez sur OK. Cliquez dans la zone principale, en dehors de la page, pour désélectionner la forme. Dans la barre d outils Dessin, activez l outil Texte artistique. Cliquez sur la page et faites glisser la souris pour définir la taille du texte et tapez un texte. Triple-cliquez sur l objet texte pour sélectionner l ensemble du texte, puis appliquez la taille et la police de caractères de votre choix.

3 Projets Animation 3 Activez l outil Pointeur et sélectionnez l objet texte. Faites-le glisser à gauche de la forme, en le centrant verticalement. Dans la barre d outils Dessin, cliquez sur le bouton Insérer une image. Dans la boîte de dialogue Insérer une image, recherchez l image que vous voulez insérer sur la bannière (vous aurez besoin de deux images au total). Sélectionnez le fichier et cliquez sur Ouvrir. Sur la page : Cliquez pour insérer l image dans sa taille standard. - ou - Cliquez et faites glisser la souris pour définir la taille de l image (voir illustration). Répétez l étape précédente pour insérer une deuxième image. Redimensionnez les images et placez-les à droite de l objet texte. Dans le menu Édition, sélectionnez la commande Sélectionner tout (ou appuyez sur les touches Ctrl+A). Dans l onglet Aligner, cliquez sur le bouton Centre vertical. Dans l onglet Storyboard, cliquez sur le bouton Insérer. Dans la boîte de dialogue Insérer des images-clés : Tapez 1 dans la zone Nombre d'images-clés. Tapez 2,0 sec dans la zone Durée. Cliquez sur OK. Le programme ajoute une deuxième image-clé dans l onglet Storyboard. Par défaut, cette image-clé contient tout les objets créés sur la première image-clé. Sur la première image-clé, activez l outil Pointeur, sélectionnez l objet texte et faites-le glisser vers la gauche de manière à le placer à gauche du bord de la page.

4 4 Didacticiels Après avoir sélectionné la première image : Dans l onglet Transparence, cliquez sur Opacité 0% pour que l image soit complètement transparente. Une fois la deuxième image sélectionnée : Répétez l étape 14 pour que l image soit complètement transparente. Faites glisser l image vers le haut de manière à la placer juste au-dessus du bord de la page. Dans l onglet Storyboard, cliquez sur le marqueur situé à droite de la deuxième image-clé. Dans la boîte de dialogue Marqueur, activez l option Arrêter la lecture et cliquez sur OK. Dans la boîte de dialogue Marqueur, vous pouvez aussi attribuer un nom au marqueur. Cela vous sera utile dans les projets plus complexes contenant plusieurs marqueurs. Dans le menu Fichier, sélectionnez la commande Aperçu dans Flash Player. La bannière Web est lue une fois puis s arrête, au lieu d être lue en boucle. Notre bannière Web est très réussie, mais apportons-lui une dernière touche pour en renforcer l impact. En l état actuel, l animation est lue à une vitesse constante du début à la fin, ce qui est le paramètre par défaut. Mais DrawPlus vous permet de définir la vitesse de changement des différents paramètres des animations - position, transparence, couleur, etc. - au moyen des enveloppes. Pour illustrer cette fonctionnalité, nous allons régler toutes les enveloppes de l animation afin de créer une impression d accélération.

5 Projets Animation 5 Ouvrez l image-clé 1 dans la zone principale et appuyez sur Ctrl+A pour sélectionner tous les objets de la page. Dans l onglet Accélération, sélectionnez l entrée Toutes les enveloppes dans la liste déroulante. Dans le panneau Profil, cliquez sur la ligne bleue et faites-la glisser de manière à créer une courbe douce (il vous sera peut-être nécessaire de développer l onglet Accélération pour voir le panneau Profil). Affichez de nouveau l aperçu de l animation pour vérifier le résultat. Le cas échéant, ajustez le profil de l enveloppe jusqu à obtenir le résultat recherché. Vous pouvez maintenant exporter votre bannière Web. Dans le menu Fichier, sélectionnez la commande Exporter puis cliquez sur Exporter au format Flash SWF. Attribuez un nom au fichier et sélectionnez le dossier d enregistrement, puis cliquez sur Enregistrer. La boîte de dialogue Exportation de l'animation par image-clé vous permet de suivre l avancée de l exportation et se ferme automatiquement à la fin de la procédure. Recherchez le fichier et double-cliquez dessus pour l ouvrir. Importer une bannière Web dans WebPlus Ouvrez WebPlus. Ouvrez un site existant ou créez un site. Ouvrez la page Maître A dans la zone principale. Faites glisser un objet Flash depuis la barre de création. Maquettes Nous vous conseillons d insérer votre bannière sur une maquette. Vous pouvez ensuite utiliser le Gestionnaire de maquettes pour définir les pages sur lesquelles vous voulez faire apparaître la bannière (par défaut, elle apparaît sur toutes les pages).

6 6 Didacticiels Dans la boîte de dialogue Flash : Cliquez sur le bouton Parcourir et recherchez votre fichier.swf. Activez les autres options souhaitées - nous avons par exemple activé l option Arrièreplan transparent en plus des paramètres par défaut. Cliquez sur OK. Cliquez sur la page pour insérer la bannière Flash. Redimensionnez et positionnez la bannière si nécessaire. Félicitations! Vous avez créé votre première bannière Web. Mais avant de passer au didacticiel suivant, voyons comment utiliser une bannière comme modèle et l éditer afin de l utiliser dans d autres projets Web. Personnaliser une bannière Web Ouvrez le projet de bannière Web dans DrawPlus et activez l onglet Média. L onglet Média vous permet de visualiser, d éditer et de remplacer facilement et rapidement l ensemble des images bitmap, clips vidéo, clips audio et fragments de texte présents dans votre projet. Sélectionnez l entrée Images Bitmap dans la liste déroulante. L onglet affiche les deux images que vous avez insérées dans votre projet. Cliquez sur une image avec le bouton droit de la souris et sélectionnez la commande Remplacer le média. Recherchez une autre image et cliquez sur Ouvrir. Le programme remplace toutes les instances de l image originale par la nouvelle image. Sélectionnez à présent l entrée Fragments de texte dans la liste déroulante. L onglet affiche le fragment de texte que vous avez inséré dans votre projet. Double-cliquez dessus. Dans la boîte de dialogue Remplacer un fragment de texte, la zone Remplacer affiche le texte en cours. Entrez le nouveau texte dans la zone Par et cliquez sur OK.