lundi 18 février 2019    Inscription

 

 

4. DÉVELOPPEMENT DE LA GALERIE

C’est parti. Nous avons besoin de deux symboles pour cette galerie. L’un contiendra les images et leurs titres respectifs, et l’autre sera le bouton nous permettant de naviguer. Nous allons commencer par créer le bouton.

Sur la scène qui à l’heure actuelle est vierge, dessinez un petit carré (outil rectangle avec la touche MAJ enfoncée lors du traçage) d’une couleur noir, sans contour. Sélectionnez ce carré puis convertissez-le en symbole de type clip et nommez-le «bouton».Cliquez sur le bouton «Option avancée» et cochez la case «Exporter pour ActionScript». La case juste en-dessous va automatiquement se cocher et les champs texte «Classe» et «Classe de base» également. Cliquez sur «OK» pour valider, un avertissement apparaît, cliquez une fois de plus sur «OK». Vous pouvez à présent supprimer l’occurrence du symbole que vous venez de créer de la scène. En effet, pas besoin de le conserver, nous allons écrire quelques lignes de code qui mettront sur la scène à un endroit bien précis autant de boutons que vous aurez d’images dans votre XML. La vie est bien faite quand même hein !

Nous devons à présent créer un nouveau symbole (Insertion > Nouveau symbole), toujours de type «Clip» que l’on nommera «photo» et que l’on exportera également pour ActionScript. Validez et cliquez une fois de plus sur «OK» pour ignorer l’avertissement. Rendez vous sur l’image 1 de votre séquence 1 puis allez dans les panneaux d’actions. Nous devons dans un premier temps créer un loader qui va nous permettre de charger les données de notre fichier XML :


 

J’indique l’emplacement de mon fichier XML au loader et lui dis de le charger :

 

Nous devons ensuite créer une « écoute » afin de savoir quand le loader est prêt :

 

Une fois prêt, nous lançons la function XMLLoaded grâce à l’écouteur ci-dessus :

 

 

Cette fonction est peut-être un peu agressive à première vue mais il n’y a rien de bien compliqué. On commence par créer une variable contenant les données du target de l’event, à savoir du loader et donc du fichier XML :

var xml:XML = new XML(e.target.data);

On a ensuite une petit boucle qui en gros attribue à chaque élément «creation» du XML un numéro. Ainsi, si on regarde dans le XML, comme on a 5 éléments «creation», on les numérote de 1 à 5.for(var i=0; i<xml.creation.length();i++){

Toute la partie qui suit consiste à aller chercher l’image et le titre de l’item création à afficher dans le tableau de données XML en fonction du numéro (i) de l’image à afficher. Par défaut, c’est l’item0 (le premier) qui s’affichera :

 

Dans la boucle suivante on met en place les différents boutons. Il ya un bouton qui se crée automatiquement pour chacune des images à afficher :

 

Pour définir la position du bouton, comme vous pouvez le voir ci-dessus, on commence par prendre sa largeur à laquelle on ajoute 10. On multiplie cette valeur par son id (i). Donc si on a affaire au premier bouton, comme l’ID est 0, alors on aurait 10 *0 soit 0. C’est pourquoi je rajoute 10. Comme cela même le premier bouton a une marge à gauche de 10 et se trouve donc à 10 pixels du bord gauche.
Comme je veux que mes boutons soient alignés, je veux donc qu’ils aient la même
valeur en Y. j’ai essayé plusieurs valeurs jusqu’à ce que je sois satisfait de
leur placement vertical. Nous devons à présent ajouter du code à l’intérieur
même du movie clip bouton. En effet, grâce à un petit jeu de variables, nous
allons vérifier si l’image affichée correspond au bouton qui vient d’être  cliqué. Si ce n’est pas le cas, on fait le
nécessaire pour afficher la bonne image à l’aide des variables «elementEnCour»
et «imageActuel» principalement :

 

Pour finir, rendez vous a l’intérieur du clip «photo» et écrivez ceci :

Là encore rien de bien complexe, la fonction init se charge de créer sur la scène
un loader. Ce loader chargera l’image demandée grâce à la variable img, cette
même variable img qui obtient sur le root sa valeur à travers cette ligne :
photo[i].img=xml.creation[i].image;

Comme vous pouvez le constater ci-dessus, nous devons créer un champ de texte dynamique à l’intérieur du symbole photo toujours, et lui donner comme nom d’occurrence «champTitre». C’est ce champ de texte qui se chargera d’afficher le titre correspondant à l’image. Le fait de le replacer après l’arrivée du addChild du loader et donc de l’image nous permet de le placer au-dessus de l’image afin qu’il soit visible. Une fois ce champ de texte placé, la galerie fonctionne, vous pouvez tester grâce à un petit CTRL + ENTRER.

Notations 

Autres tutoriels Flash

Ecoles & formations - derniers articles
3IS : Une pédagogie sur projets
Par la rédaction le 20/08/2012
3IS, l’école des métiers du Cinéma et de l’Audiovisuel, a ouvert une filière Arts Numériques en 2011, avec l’idée de former des élèves afin qu’ils soient « multi-compétences », capables de répondre à tous les enjeux du monde professionnel.

[Lire le dossier...]

Aries : Une école en pleine mutation
Par la rédaction le 20/08/2012
Présent dans six villes en France, le groupe d’écoles Ariès présente plusieurs avantages : multiples filières (2D, 3D), qualité d’enseignement et une réelle volonté de proposer des formations qualifiantes pour les années à venir.

[Lire le dossier...]

Bellecour - ESIA 3D : Une fourmilière de talents pour l’industrie créative
Par Emilien Ercolani le 04/01/2012
Connue et reconnue, l’école Bellecour, située, comme son nom l’indique, à Lyon, ne se repose pas sur ses lauriers, et continue de proposer des formations au goût du jour à ses élèves, notamment dans la section ESIA 3D. Revue et actualité de l’école du Rhône. 

[Lire le dossier...]

COM'ART : Tentez une nouvelle expérience !
Par Emilien Ercolani le 19/10/2011
Voici une nouvelle école située à Paris. Baptisée Com'Art, elle propose une mise à niveau après le Bac (MANAA) puis des BTS et des formations, de la communication visuelle au design produit en passant par la décoration d'intérieur et l'animation 3D.

[Lire le dossier...]

 Livres et DVD CréaNum

Get Aggregated RSS

Maîtrisez Adobe Lightroom 4

Emmanuel Molia  Elephorm  50 euros

Apprendre Adobe Photoshop CS6

L’éditeur bien connu de DVD de formations Elephorm est en avance sur le calendrier officiel de l’éditeur de la suite et propose d’ores et déjà une sélection très complète sur les versions CS6 des logiciels d’Adobe:

Blender 2.6 : 3D pour l’architecture

Matthieu Dupont de Dinechin  Édition Eyrolles  324 pages  34 euros

L’art de l’éclairage

Le guide complet de la vidéo et l’audio HTML5 Jean Turco  Édition Pearson  496 pages  29 euros

Big Brand Theory

Wang Shaoqiang  Édition Page One Publishing  255 pages  45 euros

Concept Art sur Photoshop

/// Atelier pratique Photoshop /// Auteur : Antoine Defarges. /// Elephorm - Durée : 4h22 /// Prix : 40 euros

Le manuel du Mangaka – Débutant

/// Auteur : Kaori Yoshikawa. /// Edition Eyrolles – 158 pages /// Prix : 19 euros

Débutez dans la 3D avec Blender

Le logiciel libre pour réaliser toutes vos images et animations 3D /// Auteur : Antoine Veyrat. /// Editions Le livre du Zéro – 382 pages /// Prix : 29 euros

HTML5 (Video)

Le guide complet de la vidéo et l’audio HTML5 /// Auteur : Silvia Pfeiffer /// Edition Pearson – 368 pages /// Prix : 36 euros

L’animation numérique

Principes, pratiques et techniques : le guide essentiel pour les futurs animateurs /// Auteur : Andy Wyatt /// Edition : Pearson - 144 pages /// Prix : 24 euros

Créer votre application iPhone/ iPad

Apprendre à programer en Objective-C avec Xcode /// Stéphane Le Boiselier /// Elephorm, durée : 3h40 /// 49,90 euros

Apprendre Cinema 4D R13

Les Fondamentaux Vol 1/2 /// Stéphane Anquetil /// Elephorm, durée : 8h15 /// 49,90 euros

Guide pratique de la création graphique

/// Jason Simmons /// Editions Dunod - 2011 - 256 pages /// 22 euros

Responsive webdesign

/// Ethan Marcotte /// Editions Eyrolles - 2011 - 160 pages /// 11,40 euros

Peinture numérique avec Photoshop

Le portrait hyper-réaliste /// Eric Tranchefeux /// Elephorm /// Durée : 5h /// Prix : 39,90 euros 

Apprendre Motion 5

Les fondamentaux  /// Erwan Le Cloirec /// Elephorm /// Durée : 10h25 /// Prix :70 euros

Guide pratique du droit d’auteur 2ème édition

/// Anne-Laure Stérin /// Editions Maxima – 2011 - 544 pages /// Prix : 44,50 euros

Logos et identité visuelle

Principes fondamentaux et études de cas : 300 logos du monde entier, analysés et commentés  /// Auteur : Matthew Healey  /// Edition : Dunod – 2011 – 240 pages –  /// Prix : 29 euros 

L’animation de personnages 3D

Avec 3DS Max 2012 et Character Studio  /// Alain Maindron /// Elephorm /// Durée : 5h30 /// Prix : 50 euros

Apprendre Blender 2.5x 2.6x

Les fondamentaux /// Avec Mickael Guedon /// Elephorm /// Durée : 8h30 /// Prix : 50 euros

Joomla! Les meilleures extensions

/// Par Didier Mazier /// Editions ENI – 394 pages /// 26 euros en version papier /// 21 euros en version numérique

Travaux pratiques avec After Effects

/// Olivier Cotte /// Editions Dunod – 128 pages /// Prix : 22 euros

Le Matte Painting

Ateliers Créatifs  /// Ludovic Iochem  /// Elephorm  /// Durée : 4h45 /// Prix : 50 euros 

Apprendre HTML 5 et CSS3

/// Tutoriel vidéo avec un expert du Web Avec Thierry Audoux  /// Elephorm  /// Durée : 8h20 /// Prix : 50 euros 

Sketchup 8

/// Jean-Luc Clauss  /// Éditions ENI  /// Prix : nc