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.

 

VOIR L' EXEMPLE FINAL

·

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.

arriere_plan_dynamique_46

Sélectionnez le flèche noire de sélection.

arriere_plan_dynamique_47

Sélectionnez la totalité du rectangle (contour + intérieur.

arriere_plan_dynamique_48

Cliquez sur Modification > Convertir en symbole ou bien cliquez sur le raccourci clavier F8.

arriere_plan_dynamique_49

Nommez le logo_tek_prod, cochez Type Clip et choisissez alignement haut-gauche.

arriere_plan_dynamique_50

En (1) repère de centrage, en (2) repère de rotation.

arriere_plan_dynamique_51

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).

arriere_plan_dynamique_52

Renommez le Calque 1 déjà présent en fond_colore_logo.

arriere_plan_dynamique_53

arriere_plan_dynamique_54

Importez dans la bibliothèque l'image logo_teknik_prod_300_ppp.png.

arriere_plan_dynamique_55

Le Symbole 5 a été créé automatiquement.

arriere_plan_dynamique_56

Renommez le symbole5 en tek_prod_logo, inutile de le convertir en clip, conservez le en symbole graphique.

arriere_plan_dynamique_57

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.

arriere_plan_dynamique_58

Glissez-déposez le symbole graphique tek_prod_logo sur la scène.

arriere_plan_dynamique_59

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.

arriere_plan_dynamique_60

arriere_plan_dynamique_61

Revenez sur la scène principale en cliquant sur Séquence1.

arriere_plan_dynamique_62

Sélectionnez le mc_tek_prod.

arriere_plan_dynamique_63

Dans le panneau propriétés, nommez le mc logo_mc.

arriere_plan_dynamique_65

arriere_plan_dynamique_66

Vérouillez le calque logo_haut_gauche.

arriere_plan_dynamique_67

Créez un nouveau calque.

arriere_plan_dynamique_68

Nommez ce nouveau calque message_central.

arriere_plan_dynamique_69

Cliquez droit et dupliquez le mc logo_tek_prod.

arriere_plan_dynamique_70

Nommez cette copie message_central et vérifiez qu'il est bien de type Clip.

arriere_plan_dynamique_71

Vue de la bibliothèque après l'étape précédente effectuée.

arriere_plan_dynamique_72

Sélectionnez l'image1 du calque message_central et glissez le clip message_central sur la scène.

arriere_plan_dynamique_73

arriere_plan_dynamique_74

Nommez l'occurence du clip dans le panneau propriétés en tant que message_mc.

arriere_plan_dynamique_75

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.

arriere_plan_dynamique_76

arriere_plan_dynamique_77

dévérouillez le calque logo, sélectionnez le logo teknik prod et supprimez le.

arriere_plan_dynamique_78

arriere_plan_dynamique_79

Sélectionnez l'outil texte.

arriere_plan_dynamique_80

Vérifiez que vous êtes bien en texte statique, choisissez les options de texte à votre convenance.

arriere_plan_dynamique_81

Rédigez le texte, image1 du calque logo sélectionné.

arriere_plan_dynamique_82

Renommez le calque logo en calque texte.

arriere_plan_dynamique_83

arriere_plan_dynamique_84

Vérouillez le calque message_central et créez un nouveau calque que vous baptiserez barre_inferieure.

arriere_plan_dynamique_85

Sélectionnez l'outil rectangle.

arriere_plan_dynamique_86

Sélectionnez un cadre blanc.

arriere_plan_dynamique_87

Sélectionnez la couleur 1B392F (1) avec un alpha (transparence) de 60% (2).

arriere_plan_dynamique_88

Dessinez un rectangle sur la scène, l'image1 du calque barre_inférieur étant sélectionnée.

arriere_plan_dynamique_89

Avec l'outil de sélection flèche noire, sélectionnez le rectangle.

arriere_plan_dynamique_90

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).

arriere_plan_dynamique_91

le rectangle étant toujours sélectionné, convertissez le rectangle en symbôle de type clip.

arriere_plan_dynamique_92

Nommez-le 'barre_inferieur'.

arriere_plan_dynamique_93

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.

arriere_plan_dynamique_94

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.

arriere_plan_dynamique_108

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.

arriere_plan_dynamique_109

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.

arriere_plan_dynamique_107

arriere_plan_dynamique_110

arriere_plan_dynamique_111

arriere_plan_dynamique_112

arriere_plan_dynamique_113

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

arriere_plan_dynamique_95

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.

arriere_plan_dynamique_96

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.

arriere_plan_dynamique_97

Vous allez maintenant modifiez quelques paramètres de votre fichier html grâce à Dreamweaver.

arriere_plan_dynamique_98

Dans Dreamweaver, sélectionnez l'onglet Création (en haut à gauche de la fenêtre principale) afin de sélectionner le mode Designer.

arriere_plan_dynamique_99

Dans la panneau Propriétés, cliquez sur le bouton Propriétés de la page…

arriere_plan_dynamique_100

L'onglet Aspect étant sélectionné, saisissez la valeur 0 dans la quatre zones de saisie des Marges

arriere_plan_dynamique_101

Cliquez sur Appliquer puis OK.

arriere_plan_dynamique_102

Simple cliquez sur le symbole F au centre de la page afin de sélectionner le contenu Flash de la page html.

arriere_plan_dynamique_103

Entrez les valeurs ci-dessous (100%) en remplacement de L 1024 et H 768 .

arriere_plan_dynamique_104

Fermez le fichier html et enregistrez les modifications, vous pouvez mettre désormais les 3 fichiers en ligne.

arriere_plan_dynamique_105

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.

arriere_plan_dynamique_106

Bon code et à bientôt

Patrick

 

Imprimer