Galerie photo Problématique realiser l'application flash de type Web Galerie ( support

Transcription

1 1 SRC2 Flash Galerie photo Problématique realiser l'application flash de type Web Galerie ( support - voir la documentation ci-joint pour la gestion des fichier xml. Nouveaux points abordés -les fichiers xml et l'as3 -les preloadeur avec getbytesloaded et getbytestotal travail préparatoire (TD3) organisation des fichiers images recuperez l'ensemble des fichiers photos des sites etudiants a l'adresse suivante: Creez dans votre dossier public_html un nouveau dossier toutsrc dans ce dossier creez un sous dossier vignette et un dossier pleinecran et deposez y les fichiers photos recuperes précédemment dans le dossier pleinecran. Pour le dossier vignette, creez des vignettes de 50px de large (automatisez votre travail sous photoshop!) realiser le fichier php permettant de renvoyer la liste des noms de fichier des differents sites: sites.php devra renvoyer un fichier au format xml... pour cela basez vous sur le script php suivant: ( lister un repertoire ) <?php $dir = opendir("./mondossier/"); while($file = readdir($dir)) echo "$file<br>"; closedir($dir);?> le fichier resultat devra avoir cette forme: <sites> <site> <photo>src9a01.jpg</photo> <login>src9a01</login> <site> <photo>src9a02.jpg</photo> <login>src9a02</login>... </sites> Verifiez le bon fonctionnement du fichier sites.php (via un navigateur) avant de passer à la suite lecture du fichier xml sous flash creez une application flash de 1024x768 25fps en vous basant sur la documentation ci-joint, réaliser dans un premier temps une appli flash qui lit les noms des images fournis dans le fichier xml (faire juste un «trace» dans la console de sortie de flash) réalisation des vignettes simple sous flash realisation de l'application flash (uniquement la creation des vignettes sur la scene) creez un clip en bibliotheque un clip supervignette incluant une forme rectangulaire de 50x38px. Dans les proprietes de supervignette, pensez à Exporter pour action script

2 2 SRC2 Flash Sur l'image 1, calque actions, creez le code AS permettant de charger la liste des noms de fichier (voir doc plus loin et exercice précédent) et de créer autant d'occurence que d'image. Chargement des images dans chaque vignette pour chaque élément posé sur la scène il est nécessaire d'y inclure l'image concerné. Pour cela utiliser les objet loader et URLRequest: var loaderphoto:loader = new Loader(); var nomphoto:urlrequest = new URLRequest(«image_acharger.jpg»); loaderphoto.load(nomphoto); element.addchild(loaderphoto); Verifiez que l'ensemble fonctionne avant de passer a la suite. réalisation des effets d'arrivée de chaque image en utilisant des tweens, réaliser une arrivée aléatoire pour chaque image il peut etre nécessaire de déclarer un tableau pour les tweens

3 3 SRC2 Flash ( var effets:array = new Array(); puis effets[i] = new tween(... ) ) réalisation d'un placement «3D» avec rotation en fonction de la souris en reprenant le TP3D du premier semestre, positionner toutes les vignettes dans un objet («tout») qui tourne en fonction de la position de la souris astuce: 1)créer un clip vide sur la scène («tout») 2)placer toutes les vignettes dans cet objet «tout» : à la place de addchild(element); écrire tout.addchild(element); modifier la position en z des éléments au moment de la création 3)ajouter la gestion de la rotation en fontion de la souris : addeventlistener(event.enter_frame,gestion); function gestion(ev:event)

4 4 SRC2 Flash tout.rotationy+=((512-mousex)/512*25-tout.rotationy)*0.3; tout.rotationx+=((512-mousey)/512*25-tout.rotationx)*0.3; réalisation des rollover en utilisant une classe associée à l'élément de bibliothèque, réaliser le rollover permettant de rendre transparent la vignette survolé (ou inversement, la rendre opaque tandis qu'elle sera en alpha=0.2 en non-survolé). package import flash.display.movieclip; import flash.events.*; public class supervignette extends MovieClip public function supervignette() private function unemethode(...) réalisation la zone d'affichage pour les images grand format 1) réaliser sur un calque de la scene principale, un clip «grand» avec un fond noir transparent de 1024x768px 2) rendre ce clip invisible : grand.visible=0; 3) créer dans ce clip un objet loader permettant de charger une image var loaderphoto:loader = new Loader(); grand.addchild(loaderphoto); 4) ajouter une propriété à la classe supervignette permettant de mémoriser le nom de la photo public class supervignette extends MovieClip public var laphoto:string; 5) lors de la création des éléments sur la scène, mémoriser le nom du fichier image : element.laphoto =unsite.photo; 6) rajouter un évenement CLICK dans supervignette permettant de charger l'image en grand dans la zone d'affichage «grand»... var nomphoto:urlrequest = new URLRequest("grands/"+laphoto); MovieClip(parent.parent).loaderphoto.load(nomphoto); MovieClip(parent.parent).grand.visible=1; 7) ajouter le code permettant de rendre gnad invisible lorsque l'on clique dessus réalisation des barres de préload 1) insérer le composant ProgressBar dans le clip «grand» (nommer cette occurrence «barre») 2) associer la propriété source de ce composant à la progression de chargement de l'objet «loaderphoto» : grand.barre.source = loaderphoto.contentloaderinfo;

5 5 SRC2 Flash 3) il est aussi possible de relier une zone de texte dynamique à la progression de cette barre pour afficher le pourcentage de progression. ( barre.percentcomplete...). travail personnel à rendre en reprenant les 3 TD, proposer une bannière flash animée affichant les photos des manifestions du cas «St Pavut» 1) refaire un fichiers recupxml.php permettant de récupérer la liste des images des manifestations non pas en se basant sur la commande opendir mais en allant chercher les nom des images dans la base de données 2) réaliser une animation des images des manifestations pour en faire une bannière flash (déplacement aléatoire, défilement, )

6 6 SRC2 Flash Les bases de la gestion des fichiers XML en AS3 La gestion XML Plusieurs techniques existent pour gérer les fichiers XML en AS3, nous verrons ici l'utilisation de la classe XML. Le minimum var chargeur:urlloader = new URLLoader (); var adresse:urlrequest = new URLRequest ("info.xml"); var format = URLLoaderDataFormat.TEXT; chargeur.dataformat = format; chargeur.load(adresse); chargeur.addeventlistener(event.complete, finduchargement); function finduchargement ( event:event ) var contenu = event.target.data; var monxml:xml = new XML (contenu); var liste:xmllist = monxml.elements(); for each(var unsite:xml in liste) trace(unsite.url); fichier info.xml: <sites> <site id="0"> <url> <desc> <brief>site a voir</brief> <long>top le site et top a voir et a revoir mouais...</long> </desc> <site id="1"> <url> <desc> <brief>incontournable...</brief> <long>classique à voir...</long> </desc> <site id="2"> <url> <desc> <brief>le coeur...</brief> <long>a voir...</long> </desc> </sites>

7 7 SRC2 Flash Aller plus loin