Flash - arrière plan dynamique d´une page web
Déformer et faire en sorte que les autres éléments de cette page se trouvent toujours aux même endroits. On pourra changer la résolution d'écran, ou bien redimmensionner la taille de la fenêtre du navigateur, rien n'y fera, notre image s'adaptera toujours aux réglages du client.
·
Téléchargez le dossier Zip ci-dessous et décompresser le sur votre disque dur, il contientles images ci-dessus utilisées pourra réalisation de ce tutoriel.
Téléchargez le dossier zip ICI
Photo utilisée avec l'aimable autorisation de l'auteur, lephotographe Thierry Jouanin
·
Lancez Flash (à partir de la version CS3 et plus) et sur la panneau d'accueil choisissez, la création d'un fichier Flash AS3, qui va donc accepter la création sous langage de programmation Action script 3.
Une fois le nouveau document ouvert dans la panneau propriétés du document cliquez sur le bouton Taille.
Dans la fenêtre de dialogue qui s'ouvre, saisissez 1024 (pixels) dans la zone de saisie Dimensions (largeur) et 768 dans la zone de saisie Dimensions (hauteur).
La scène sur laquelle nous allons travailler possédera désormais ces dimensions.
Enregistrez le document sur votre disque dur sous le nom de votre choix.
Vous allez maintenant importer l'image de fond dans la bibliothèque de votre fichier Flash.
Pour cela faite Fichier > Importer >Importer dans la bibliothèque.
Désignez l'emplacement de la photo de fond sur votre disque dur puis cliquez sur le mal nommé dans cette situation Ouvrir.
La photo de fond est désormais dans la bibliothèque de votre fichier .fla (fichier Flash) sous forme de fichier image Bitmap.
Glissez l'image bitmap de fond sur la scène sur un calque que vous allez nommer photo_de_fond.
Sélectionner l'image sur la scène puis faite Modification > Convertir en symbole, ou bien utiliser le raccourci clavier F8.
Dans la fenêtre s'ouvre nommez le symbole photo_de_fond.
Choisissez son type comme Clip, nous pourrons ainsi interagir sur ce clip grâce à de l'Action Script, chose qui est impossible sur un symbole graphique.
Choisissez le point d'alignement au centre.
A savoir que ce point d'alignement central sera uniquement valable lors des manipulation réalisées à partir de l'interface graphique grâce au panneau alignement notamment.
En effet lorsque vous interagissez sur des clip à partir du code, Action Script prend comme point d'alignement de référence le coin supérieur gauche.
Nous constatons que la croix de centrage et le cercle de rotation sont confondus au centre de l'image.
Nous verrons plus loin qu'ils peuvent se situer à deux emplacements distincts.
Dans la bibliothèque, le clip "photo_de_fond" apparait bien.
Dans la Timeline un point noir symbolisant la présence d'une image clé (en l'occurrence la photo du windsurfer apparait désormais à l'image 1 du calque photo_de_fond.
Sélectionnez en simple cliquant sur l'occurence* de clip représentant le windsurfer
* occurrence: image sur la scène (clone) d'un symbole (graphique, bouton ou clip) de la bibliothèque, à partir d'action script3 on parle plutôt d'instance.
Une fois le clip sélectionné sur la scène, nommez-le bg_mc (sorte d'abréviation pour background movie clip) dans le panneau propriétés.
Ce que vous venez de faire est une sorte de règle d'or, prenez la peine de systématiquement nommer les Clip que vous déposez sur la scène.
Vous pourrez ainsi les manipuler par l'intermédiaire du code AS.
Désormais l'occurrence du clipphoto_de_fond déposé sur la scène a une identité propre (ID) "bg_mc".
En utilisant le panneau Aligner, vous allez centrer le Clip (j'utiliserai désormais l'abréviation mc pour Movieclip) sur la scène.
Sélectionnez l'option Sur la scène situé à droite du panneau Aligner.
Puis cliquez sur les deux symboles représentés en surlignés rose ci-dessus.
L'image est désormais parfaitement centrée
Si le panneau Aligner n'est pas visible faites Fenêtre > Aligner.
Vérouillez le calque photo_de_fond en cliquant sous le symbole du cadenas dans la ligne du calque, ceci afin de pas modifier par inadvertance ce calque contenant la photo de fond.
Une Astérix * apparait en haut á droite de l'animation, près du titre, cela signifie que notre document a été modifié mais pas sauvegardé.
Sauvegardez régulièrement votre travail au fur et à mesure que vous progressez et franchissez des étapes dontvous êtes satisfait.
Pour ce faire utilisez le raccourci clavier Ctrl + S , l'Astérix disparaît, votre travail est sauvegardé.
Dans la partie inférieur du panneau calque, cliquez sur le petit symbole nouveau calque afin d'en créer un.
Renommez le calque en 'appareil_photo'.
·
Importez la photo 'appareil_photo.png' dans la bibkiothèque de votre animation, à l'identique de la manipulation déjà vu pour l'importation dans la bibliothèque de la photo de fond du windsurfer.
·
Un symbole graphique Symbole 3 a été créé automatiquement lors de l'importation dans la bibliothèque
de la photo appareil_photo.png.
Renommez ce symbole en app_photo par exemple en double cliquant sur son nom.
Cliquez droit sur le symbole 'app_photo' puis choisissez Type>Clip.
Le symbole est maintenant de type clip.
Positionnez-vous sur la première image du calque appareil_photo.
Faites glissez vers la scène une occurrence du mc 'app_photo'.
Vous constatez que par défaut le point de rotation du clip(1) se trouve au centre du mc et que la croix d'alignemant (2) se trouve en haut à gauche du mc.
Ce qui signifie que si je positionne la clip en y=0 et x=0 la croix de centrage se trouvera dans le coin supérieur gauche de la scène.
Sélectionnez l"outil transformation libre afin de redimentionner le mc de l'appareil photo.
Grâce à une des poignées d'angle (petit carré) réduisez la taille du clip tout en maintenant enfoncé les touches Alt+Shift afin de redimentionner proportionnellement le mc.
Sélectionnez la flèche noire de sélection.
Sélectionnez le mc app_photo sur la scène.
Vous allez par l'intermédiaire du panneau propriétés nommez l'occurrence du clip.
Nommez l'occurence du mc appPhoto_mc.
Vérouillez le calque appareil_photo et créez un nouveau claque logo_haut_gauche.
Sélectionnez l'outil rectangle.
Si il n'est pas disponible et qu'un autre outil comme par exemple l'outil ovale est visible sur cette touche, cliquez longuement sur le symbole de la flèche noire située dans l'angle en bas à droite afin de faire apparaître la palette de choix et sélectionnez le rectangle.
Dans les options de l'outil rectangle et afin de reproduire l'exemple donné, choisissez les options ci-dessous, sinon à vous de créer votre propre rectangle.
1: contour blanc, épaisseur du trait de contour 2.
2: option de l'arrondi des angles du triangle.
3: cliquez afin de faire apparaître le nuancier ci-dessous.
Dans le nuancier, saisissez le code hexadécimal 1B392F avec un alpha (2) (transparence) de 60%.
·
Dessinez maintenant un rectangle sur la scène.
Sélectionnez le flèche noire de sélection.
Sélectionnez la totalité du rectangle (contour + intérieur.
Cliquez sur Modification > Convertir en symbole ou bien cliquez sur le raccourci clavier F8.
Nommez le logo_tek_prod, cochez Type Clip et choisissez alignement haut-gauche.
En (1) repère de centrage, en (2) repère de rotation.
Vous allez maintenant inclure le logo TeknikProd où bien une image de votre choix dans le rectangle coloré.
Double cliquez sur le symbole du mc logo_tek_prod, vérifiez que vous êtes bien dans le symbole (voir flèche rouge de l'illustration).
Renommez le Calque 1 déjà présent en fond_colore_logo.
Importez dans la bibliothèque l'image logo_teknik_prod_300_ppp.png.
Le Symbole 5 a été créé automatiquement.
Renommez le symbole5 en tek_prod_logo, inutile de le convertir en clip, conservez le en symbole graphique.
Toujours à l'intérieur du mc logo_tek_prod créez un nouveau calque que vous batptiserez 'logo' et sélectionnez l'image1 de ce nouveau calque.
Glissez-déposez le symbole graphique tek_prod_logo sur la scène.
Sélectionnez l'outil transformation libre afin de redimentionner l'occurence du symbole graphique.
Grâce à une des poignées d'angle (petit carré) réduisez la taille de l'occurrence du symbole graphique tout en maintenant enfoncer les touches Alt + Shift afin de redimensionner proportionnellement.
Revenez sur la scène principale en cliquant sur Séquence1.
Sélectionnez le mc_tek_prod.
Dans le panneau propriétés, nommez le mc logo_mc.
Vérouillez le calque logo_haut_gauche.
Créez un nouveau calque.
Nommez ce nouveau calque message_central.
Cliquez droit et dupliquez le mc logo_tek_prod.
Nommez cette copie message_central et vérifiez qu'il est bien de type Clip.
Vue de la bibliothèque après l'étape précédente effectuée.
Sélectionnez l'image1 du calque message_central et glissez le clip message_central sur la scène.
Nommez l'occurence du clip dans le panneau propriétés en tant que message_mc.
Double cliquez sur le clip afin de pouvoir le modifier, vérifiez dans la partie supérieure de la scène que vous êtes bien à l'intérieur du clip message_central.
dévérouillez le calque logo, sélectionnez le logo teknik prod et supprimez le.
Sélectionnez l'outil texte.
Vérifiez que vous êtes bien en texte statique, choisissez les options de texte à votre convenance.
Rédigez le texte, image1 du calque logo sélectionné.
Renommez le calque logo en calque texte.
Vérouillez le calque message_central et créez un nouveau calque que vous baptiserez barre_inferieure.
Sélectionnez l'outil rectangle.
Sélectionnez un cadre blanc.
Sélectionnez la couleur 1B392F (1) avec un alpha (transparence) de 60% (2).
Dessinez un rectangle sur la scène, l'image1 du calque barre_inférieur étant sélectionnée.
Avec l'outil de sélection flèche noire, sélectionnez le rectangle.
Dans le panneau propriétés, saisissez 1023 dans la case de saisie L (longueur) et 146.2 dans la case de saisie H (hauteur).
le rectangle étant toujours sélectionné, convertissez le rectangle en symbôle de type clip.
Nommez-le 'barre_inferieur'.
Puis vous en avez à présent pris l'habitude, identifiez par un ID propre l'occurence du mc barre_inferieure posé sur la scène.
On le nomme dans cet exemple en tant que base_mc.
Créez un nouveau calque que vous placerez en haut de la liste des calques et nommez ce dernier AS (pour Action script), ce calque servira à recevoir les instructions de code que vous allez créer.
Il existe plusieurs manières d'accéder au panneau actions:
1- Placez vous sur l'image1 du calque AS et cliquez droit, dans le menu contextuel cliquez sur Actions.
2- Placez vous sur l'image1 du calque AS et utilisez la touche F9.
3- Placez vous sur l'image1 du calque AS puis faites Fenêtre > Actions.
N'oubliez pas d'utiliser l'aide de Flash, qui est très bien faite en surlignant l'élément dont vous souhaitez avoir des éclaircissements puis en cliquant sur le point d'interrogation en haut à droite du panneau Actions.
Vous obtiendrez ce type d'explications.
Dans le panneau Actions saisissez le code suivant, j'ai inséré des commentaires entre /*----*/ (en gris).
Vous trouverez à la fin de ces captures d'écran une version utilisable par copier/coller.
CI DESSOUS COPIER PUIS COLLER LE CODE DANS VOTRE PANNEAU ACTIONS
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
/*on importe ci dessus les classes dont on
va avoir besoin dans notre script*/
stage.scaleMode = StageScaleMode.NO_SCALE;
/*Cette instruction NO_SCALE pour signifier qu'on
ne veut pas que la scène soit redimentionnée
de façon NON proportionnelle, par exemple
si on agrandi la fenêtre du navigateur dans sa largeur
par exemple et bien on ne veux pas que la photo
soit étirée dans le sens de la largeur
mais on veux maîtriser le processus de redimentionnement
par les instructions qui suivent*/
stage.align = StageAlign.TOP_LEFT;
/*Spécifie que la scène est alignée sur le coin
supérieur gauche.*/
stage.addEventListener(Event.RESIZE, resizeHandler);
/*On place un écouteur qui surveille la scène
l'événement qui est écouté c'est un redimentionnement
de la scène, et lorsqu'il intervient on déclanche
la fonction rezizeHandler. Cette fonction est écrite
ligne 57 et reprend deux autres fonction qui sont
setBackground et setPos*/
//fonction pour redimentionner l'arriere plan.
function setBackground() {
var reg2 = stage.stageWidth / 2;
var reg1 = stage.stageHeight / 2;
bg_mc.x = reg2;
bg_mc.y = reg1;
bg_mc.width = stage.stageWidth;
bg_mc.height = stage.stageHeight;
bg_mc.scaleX <= bg_mc.scaleY ? (bg_mc.scaleX = bg_mc.scaleY) : (bg_mc.scaleY = bg_mc.scaleX);
base_mc.width = stage.stageWidth;
}
setBackground();
//fonction pour déterminer les positions initiales
function setPos() {
message_mc.x = stage.stageWidth / 2;
message_mc.y = stage.stageHeight / 2;
message_mc.width = stage.stageWidth / 5;
message_mc.height = stage.stageHeight /4;
base_mc.x=0;
base_mc.y=stage.stageHeight-80;
logo_mc.x=90;
logo_mc.y=-40;
logo_mc.width = stage.stageWidth / 5;
logo_mc.height = stage.stageHeight /4;
appPhoto_mc.x=stage.stageWidth /1.55;
appPhoto_mc.y=stage.stageHeight /1.21;
appPhoto_mc.width = stage.stageWidth / 10;
appPhoto_mc.height = stage.stageHeight /7;
}
setPos();
//determiner les positions apres déplacement
function resizeHandler(event:Event):void {
setBackground();
setPos();
}
FIN DU CODE
Avant de publier l'animation, vous allez vérifier et modifier les paramètres de publication:
Fichier > Paramètres de publication…
Dans l'onglet Flash*, vérifiez que vous êtes au minimum en version 9 du Flash Player (Action Script 3 n'est exploitable qu'à partir du Flash Player 9) et que la version d'Action Script est bien la version 3.0.
*Si l'onglet Flash n'apparaît pas dans cette boîte de dialogue, cliquez sur l'onglet Formats et cochez la case Flash (.swf). Profitez en, si ce n'est déjà fait pour cocher la case HTML (.html) dont nous allons avoir besoin afin de mettre en ligne notre page.
Dans l'onglet HTML, choisissez Flash seulement – Autorisation du Plein écran dans la liste déroulante Modèle
Si vous souhaitez faire de cette animation la page d'accueil d'un site web, dans la case de saisie du nom du fichier HTML de l'onglet Formats saisissez index.html puisque les navigateur pointent vers la page index lorsqu'on leur indique un nom de domaine.
Cliquez maintenant sur Publier puis OK
Vous venez de générer plusieurs fichiers :
Acceuil_brutal_beach.swf ==> votre animation Flash que vous mettrez en ligne et vers laquelle pointera votre page HTML lorsqu'elle sera visitée par un navigateur
Acceuil_brutal_beach.html ==> C'est vers elle que pointe le navigateur.
AC_RunActiveContent.js ==> fichier JavaScript, permettant d'éviter le phénomène introduit avec IE6, obligeant le visiteur d'une page web contenant du Flash à cliquer une première fois sur la page afin de la rendre active.
Vous allez maintenant modifiez quelques paramètres de votre fichier html grâce à Dreamweaver.
Dans Dreamweaver, sélectionnez l'onglet Création (en haut à gauche de la fenêtre principale) afin de sélectionner le mode Designer.
Dans la panneau Propriétés, cliquez sur le bouton Propriétés de la page…
L'onglet Aspect étant sélectionné, saisissez la valeur 0 dans la quatre zones de saisie des Marges
Cliquez sur Appliquer puis OK.
Simple cliquez sur le symbole F au centre de la page afin de sélectionner le contenu Flash de la page html.
Entrez les valeurs ci-dessous (100%) en remplacement de L 1024 et H 768 .
Fermez le fichier html et enregistrez les modifications, vous pouvez mettre désormais les 3 fichiers en ligne.
On constate sur les captures d'écran ci-dessus et ci-dessous que l'image de fond n'accepte pas la déformation anarchique et se réduit proportionnellement à la taille de la fenêtre du navigateur.
Bon code et à bientôt
Patrick