Ce que nous allons réaliser
Creation de la structure dans Flash Pro
Afin de faciliter la création de ce formulaire je conseille au moins expérimentés d'utiliser les memes dénominations d'éléments et valeur de dimensions que celles de ce tuto. En effet une simple erreur de majuscule, par exemple, peut rendre cette application non fonctionnelle (jusqu'à ce que vous la trouviez). Pour les utilisateurs plus avertis, à vous de voir ;).
J'utilise dans ce tuto 4 images de dimensions 890px sur 400px au format .jpg qui serons appelées à l'aide du fichier XML que nous élaborerons par la suite.
Etape 1
Créer un nouveau document "ActionScript 3" dans "FLASH Pro" et sauvegardez le dans le dossier de votre choix sous le nom "banniere_flash.fla".
Dans la fenetre des propriétés, redimensionnez le en lui donnant une largeur de 890px, une hauteur de 400px, un fond blanc (ou autre couleur) et une cadence de 30 fps.
Etape 2
Nous allons maintenant créer le bouton de navigation.
Sélectionnez l'outil rectangle primitif et, dans sa fenetre des propriétés, donnez lui un rayon d'arrondi de 8px.
Dessinez sur la scène un petit rectangle ayant une couleur de fond blanche mais aucune couleur de contour et, dans sa fenetre de propriétés (à droite), ajustez sa largeur à 112px et sa hauteur à 30px.
Renommez le calque 1 "nav", sélectionnez le rectangle que nous venons de créer et choisissez (dans le menu supérieur) Modification>convertir en symbole (ou touche [F8]).
Convertissez le en "movie clip" avec un alignement en haut à gauche et nommez le "nav", validez.
Dans la fenetre des propriétés, donnez à ce clip le nom d'intance "nav" également et ajustez sa position sur X à 389px et sur Y à 375px.
Vous venez de créer le conteneur des boutons de navigation.
Etape 3
Double-cliquez sur le clip que nous venons de créer pour entrer dedans, nous allons maintenant lui definir sa forme finale.
Selectionner le rectangle et, dans sa fenetre de propriétés, donnez une valeur de 0 aux angles inférieurs gauche et droit (désélectionner le sigle de verrouillage des angles si besoin) et ajustez sa hauteur à une valeur de 25px.
choisissez (dans le menu supérieur) Modification>convertir en symbole (ou touche [F8]), convertissez le en "movie clip" avec un alignement en haut à gauche et un nom de clip "fondNav", validez.
Dans la fenetre des propriétés de ce symbole, donnez lui un nom d'instance "bg" puis renommez le calque 1 "fond". Verrouillez le calque et passons maintenant à la création des boutons.
Etape 4
Toujours dans la scène "nav", créez un nouveau calque que vous nommerez "bouton".
Choisissez l'outil ovale primitif et dessinez un petit cercle (utilisez la fontion zoom pour plus de confort) avec une couleur de fond blanche et une couleur de contour #666666.
Sélectionnez ce cercle et, via sa fenetre de propriétés, donnez lui les valeurs X=7px, Y=6px et une largeur/hauteur de 13px.
Toujours avec ce cercle sélectionné, choisissez
Modification>Convertir en symbole ou [F8], convertissez le en "movie clip" en lui donnant le nom "playPauseBtn" et un point d'alignement en haut à gauche, validez.
Via les propriétés, assignez lui le nom d'instance "playPauseBtn" aussi.
Double-cliquez sur le clip pour entrer dedans et renommez le calque 1 "fond".
Choisissez, dans le menu supérieur, fenetre>couleur puis sélectionnez "dégradé linéaire".
Ajustez ce dégradé en assignant à ses 2 extrémités la couleur blanche #ffffff et un troisième point central de couleur #cccccc.
Fermez la fenetre de couleur puis sélectionnez Modifier>Transformation>Rotation 90°CW.
Verrouillez le calque "fond" et passons à la suite.
Etape 5
Créez un nouveau calque nommé "pause". Sélectionnez l'outil rectangle primitif et assignez lui un rayon d'arrondi de 0px, une couleur de fond de #123A74 et pas de contour.
Dessinez un rectangle sur la scène et, via ses propriétés, donnez lui une valeur X=4px, Y=3px, une largeur de 2px et une hauteur de 7px.
Avec [Shift]+[Alt] enfoncés, faites un glisser-copier de ce rectangle et ajuster sa valeur X à 7px (les autres restent inchangées).
Toujours avec [Shift]+[Alt] enfoncés, sélectionnez les 2 rectangles et ouvrez la fenetre de conversion en symbole ([F8]), donnez à ce movie clip le nom de 'iconePause" et cliquez sur OK. Via les propriétés, donnez lui comme nom d'instance "pauseIcon" et verrouillez le calque "pause".
Etape 6
Créez un nouveau calque que vous nommerez "play".
Sélectionner l'outil PolyEtoile et, dans ses propriétés, cliquez sur option et assignez lui un nombre de cotés égal à 3.
Dessinez un triangle pointant vers la droite sur la scène et donnez lui les valeurs X=4px, Y=3px, une largeur de 6px et une hauteur de 7px.
Toujours ce triangle sélectionné, convertissez le en symbole ([F8]) et donnez lui le nom de "iconePlay". Via sa fenetre de propriétés, donnez lui le nom d'instance "playIcon" et verrouillez le calque "play".
Etape 7
Déverrouillez le calque "fond", selectionner le cercle et tapez [Ctrl]+[C] sur le clavier pour mémoriser une copie de ce cercle (ou clic droit>copier).
Sortez du clip "navBtnItem" en cliquant sur "nav" (en haut à gauche).
Créez un nouveau calque et collez y le cercle mémorisé en tapant [Ctrl]+[C] (ou clic droit>coller).
Convertissez le en symbole (Modification>convertir en symbole), nommez ce clip "navBtnItem et cochez la case "exporter pour ActionScript" avec un nom de class de "navBtnItem" (normalement déjà inscrit).
Double-cliquez dessus pour entrer dedans et renommez le calque 1 "fond".
Sélectionnez le cercle, supprimez les ligne de contours via sa fenetre des propriétés et faites [Ctrl]+[C] pour mémoriser sa copie.
Créez un nouveau calque que vous nommerez
"dessus" et collez y le centre du cercle que nous avons mémorisez juste avant à l'aide des touches [Ctrl]+[V].
Verrouillez le calque "dessus".
Etape 8
Sélectionnez le calque "fond".
Cliquez sur le centre du cercle puis faites [Ctrl]+[C] pour le mémoriser en copie.
Créez un nouveau claque nommé "contour" que vous placerez au dessus du calque "dessus".
sélectionnez le et faites [Ctrl]+[V] pour coller la copie sur ce calque, puis supprimez le remplissage du cercle via sa fenetre de propriétés.
Verrouillez le calque "contour"
puis sélectionner le calque "fond".
Avec le cercle sélectionné, choisissez Modification>convertir en symbole et donnez à ce clip le nom "navBtnBg", validez, et attribuez lui le nom d'instance "bg" via sa fenetre de propriétés.
Etape 9
Maintenant, déverrouillez le calque "dessus" et sélectionnez le cercle.
Choississez Fenetre>Couleur et changer la couleur des points extérieurs gauche et droite pour #3E69A7 ainsi que celle du point centrale pour #123A74.
Tapez [F8] et nommez ce clip "navBtnOver", validez puis donnez lui le nom d'instance "over".
Verrouillez le calque "dessus" puis cliquez sur "nav" (en haut à droite). Faite un clic droit sur le calque contenant "navBtnItem" (celui qui n'a normalement pas été renommé) et supprimez le.
Cliquez sur séquence 1, en haut à gauche, et verrouillez le calque "nav".
Etape 10
Créez un nouveau calque nommé "boutonWeb" et avec l'outil rectangle primitif, dessinez un rectangle ayant un rayon d'arrondi de 14px, une couleur blanche et pas de contour.
Donnez lui une largeur de 105px et une hauteur de 24px, tapez [F8] et donnez à ce clip le nom de "boutonWeb", validez puis assignez lui via la fenetre de propriétés le nom d'instance "readMoreBtn".
Double-cliquez sur ce clip pour entrer dedans et renommez le calque 1 "fond".
Etape 11
Sélectionnez le rectangle, tapez [F8], donnez au clip le nom "fondBtnWeb", validez et donnez lui le nom d'instance "bg" dans les propriétés puis verrouillez le calque "fond".
Créez un nouveau calque que vous appelerez "texte", sélectionnez l'outil texte et via les propriétés, choississez texte dynamique, une police Verdana, une taille de 12pt et incorporer ("embed") les majuscules, minuscules, la ponctuation et les chiffres.
Dessinez
un champ texte auquel vous attribuerez les valeurs X = 10px, Y = 3px et une largeur de 84px.
Verrouillez votre calque "texte".
Etape 12
Déverrouillez le calque fond et double-cliquez sur le clip "fondBtnWeb", sélectionner Fenetre>Couleur et choisissez dégradé linéaire. Le dégradé précédemment établie devrait etre enregistré, sinon répété le dégradé de l'étape 9. Avec l'outil Transformation de dégradé (colonne de droite, 3eme en partant du haut), tournez ce dégradé à 90° et ajustez sa hauteur.
Etape 13
Cliquez sur séquence 1 pour revenir à la scène principale et verrouillez le calque "boutonWeb".
Créez un nouveau calque nommé "legendes" puis, à l'aide de l'outil texte,
dessinez un champ de texte dynamique sur une seule ligne ayant (via les propriétés) une police Verdana de 36px de couleur blanche.
Donnez lui le nom d'instance "txt".
Avec la touche [Alt] enfoncée, glissez-copier ce champ de texte et ajustez la taille de police de ce deuxième champ à 24px.
Ce deuxième champ toujours sélectionné, convertissez le en clip [F8] en le nommant "copy" et donnez lui le nom d'instance "copy" également.
Répétez l'opération pour le champ du haut en lui donnant un nom de clip "heading" et comme nom d'instance "heading" également.
Répétez l'opération si vous souhaitez ajoutez d'autres espaces de texte en choisissant vous meme les noms de clips et d'instance que vous leur attribuerez et n'oubliez pas de les ajouter dans le code ActionScript que nous verrons par la suite.
Sachez que la couleur de texte que vous déterminez pour ces deux clips sera celle affichée lors de l'animation, vous pouvez en choisir une différente pour "heading" et pour "copy", n'hésitez pas à personnaliser votre bannière.
Verrouillez le calque "legendes".
Etape 14
Créez un nouveau calque que nous nommerons "fond". Avec l'outil rectangle primitif, dessinez un rectangle de la taille de la scène ayant pour valeur d'arrondi 8px et un fond de coulleur blanche puis, via sa fenetre de propriété, ajustez ses valeurs X et Y à 0px et donnez lui une largeur de 890px et une hauteur de 400px.
Verrouillez ce calque, placer le en bas de la liste (au dessous du calque "nav") et pensez à sauvegarder (au cas où ...).
Etape 15
Créez un nouveau calque (au dessus du calque "fond") que vous appelerez "contImages".
Dans le menu supérieur, choisissez Insertion>Nouveau symbole et donnez à ce nouveau clip le nom de "contImage". Validez puis sortez de ce clip en cliquant sur Sequence 1.
Refaites Insertion>Nouveau symbole et nommez cette fois ce clip "contImages" (au pluriel cette fois) et validez. Dans ce clip, renommez le calque 1 en "image1", ouvrez la fenetre de bibliotheque (à droite) et glissez-deposez le clip "contImage" sur la scène. Via sa fenetre de propriétés, donnez lui des valeur X et Y égales à 0 et un nom d'instance "holder1".
verrouillez le calque "image1" et créez un nouveau calque nommé "image2".
De nouveau glissez-deposez le clip "contImage", donnez lui le nom d'instance "holder2" et ajustez ses valeurs X et Y à 0.
Verrouillez ce calque et revenez à la scène principale en cliquant sur Sequence1.
Etape 16
Avec le meme principe que precedemment, selectionnez le calque "contImages" et glissez-deposez y le clip "contImages". Ajuster les valeurs X et Y à 0 et donnez lui un nom d'instance "imagesHolder".
Verrouillez ce calque.
Etape 17
Créez un nouveau calque nommé "masque" et placez le juste au dessus du calque "contImages".
Deverrouillez le calque "fond", sélectionnez le rectangle (il occupe toute la scène) et mémorisez en une copie en faisant [Ctrl]+[C].
Reverrouillez le calque "fond" et sélectionnez le calque "masque".
Faites
[Ctrl]+[V] pour y coller la copie et ajustez les propriétés de celle-ci à X et Y = 3px et donnez lui une largeur de 884px pour une hauteur de 394px.
Faites un clic droit sur le calque "masque" et sélectionnez Masque.
La création de la structure dans Flash Pro est maintenant terminée, pensez à sauvegarder votre document et je vous invite à passer à la page suivante afin de voir ensemble le codage ActionScript et XML de cette application.