Site complet en flash : part 3
Le 12 novembre 2008
Introduction |
Il est temps pour nous de rentrer dans le vif du sujet. Après avoir réalisé l’interface générale dans le précédent chapitre, nous allons dans ce chapitre aborder gentiment l’ActionScript au travers du menu que nous commencerons à animer.
Le menu V1 (minimum d’AS) |
Pour cette version, nous allons réaliser un simple effet au survol de la souris. Mais étant donné que nous souhaitons ici nous passer au maximum de l’AS, je préfère vous montrer quelque chose de très simple, histoire de vous présenter le principe, plutôt que de partir dans des animations interminables qui risquent de vous embrouiller plus qu’autre chose.
Nous allons donc créer un bouton que nous utiliserons pour toutes les sections.
Vidéo 6 : Les boutons sans AS [10'06] :
Sachez cependant que bien que j’ai volontairement simplifier l’animation ici , vous pouvez très bien réaliser des animations très complexes pour vos boutons, et même réaliser une animation différente par bouton. Seule votre imagination vous limite.
Le menu V2 & V3 (AS2 et AS3) |
Pour les versions en AS2 et AS3, la structure des éléments est la même donc il n’y aura qu’une vidéo. Ensuite une approche sera présentée, pour chaque version d’ActionScript.
Vidéo 7 : Les boutons pour l’AS [7'37] :
ATTENTION : Dans la vidéo j’ai omis de vous indiquer que vous devez donner un nom d’occurrence au menu pour pouvoir travailler avec lui et avec les éléments qu’il contient, via l’ActionScript. Aussi pour ma part je lui ai affecté le nom d’occurrence menuBas, que vous retrouverez dans les codes suivants (AS2/AS3). N’oubliez donc pas de définir un nom d’occurrence pour votre menu.
Animation du menu en AS2 |
Voici donc le code en ActionScript 2 qui va nous permettre d’animer le menu.
Pour rappel, ce code doit être placé sur la première image clé du calque « CODE », dans le clip INTERFACE. C’est très important car comme nous allons le voir, l’adressage joue un rôle important dans flash et si le code n’est pas placé au bon endroit, ou si l’adressage est incorrect, le code ne pourra fonctionner.
Mais c’est quoi l’adressage ?
L’adressage c’est le fait de pointer vers une occurrence dans l’ActionScript.
Par exemple :
this.clipParent.clipEnfant.stop();
N’est pas équivalent à :
this.clipEnfant.stop();
Car dans le premier cas nous nous situons au même niveau que le clip clipParent, alors que dans le second cas, nous sommes à l’intérieur de clipParent.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | // //---------------------------------------------------- Initialisations ---// // var positionCurseur:Number = menuBas.bPortfolio._x; // //--- Importation de la class Tween --- // import mx.transitions.Tween; import mx.transitions.easing.*; // //----------------------------------------------- Actions des boutons ---// // // //--- Fonction goCurseur --- // function goCurseur(idBouton) { var translationCurseur:Tween = new Tween(menuBas.curseur, "_x", Strong.easeOut, menuBas.curseur._x, idBouton._x, 0.5, true); } // //--- Fonction backCurseur --- // function backCurseur() { var translationCurseur:Tween = new Tween(menuBas.curseur, "_x", Strong.easeOut, menuBas.curseur._x, positionCurseur, 0.5, true); } // //--- Bouton Portfolio --- // //--- Rollover --- this.menuBas.bPortfolio.onRollOver = function() { goCurseur(this); }; //--- Rollout --- this.menuBas.bPortfolio.onRollOut = function() { backCurseur(); }; // //--- Bouton Profil --- // //--- Rollover --- this.menuBas.bProfil.onRollOver = function() { goCurseur(this); }; //--- Rollout --- this.menuBas.bProfil.onRollOut = function() { backCurseur(); }; // //--- Bouton Goodies --- // //--- Rollover --- this.menuBas.bGoodies.onRollOver = function() { goCurseur(this); }; //--- Rollout --- this.menuBas.bGoodies.onRollOut = function() { backCurseur(); }; // //--- Bouton Liens --- // //--- Rollover --- this.menuBas.bLiens.onRollOver = function() { goCurseur(this); }; //--- Rollout --- this.menuBas.bLiens.onRollOut = function() { backCurseur(); }; // //--- Bouton Contact --- // //--- Rollover --- this.menuBas.bContact.onRollOver = function() { goCurseur(this); }; //--- Rollout --- this.menuBas.bContact.onRollOut = function() { backCurseur(); }; |
Les actions des boutons :
Commençons par le plus simple, les actions des boutons. Pour le moment nous ne nous occupons que de l’animation des boutons, donc nous n’utilisons que les états onRollOver (au survol du bouton) et onRollOut (lorsque la souris sort de la zone du bouton).
Le code étant le même pour tous les boutons, étudions celui du premier bPortfolio :
//
//— Bouton Portfolio —
//
//— Rollover —
this.menuBas.bPortfolio.onRollOver = function() {
goCurseur(this);
};
//— Rollout —
this.menuBas.bPortfolio.onRollOut = function() {
backCurseur();
};
Nous voyons donc ici que les 2 actions ont la même synthaxe :
élément concerné . état concerné = fonction
L’élément concerné est ici représenté par l’adressage : this.menuBas.bPortfolio
La syntaxe de l’état est déjà définit en AS : ici onRollOver ou onRollOut
Enfin la forme d’une fonction est toujours la même en AS :
function nomDeLaFonction(paramètres séparés par des virgules) {
//— actions —
}
Vous noterez ici qu’il n’y a pas de nom pour les fonctions.
C’est tout à fait normale car elles sont utilisées ici comme actions directes en réponse aux états du bouton, avec l’affectation =.
En somme, lorsque le bouton bPortfolio est survolé par la souris, le code déclenche la fonction goCurseur(this); et lorsque la souris ne le survole plus, le code déclenche la fonction backCurseur();
Vous avec certainement noté que l’une des 2 fonctions appelées a comme argument this. Nous reviendrons dessus un peu plus tard…
Attardons nous pour le moment sur les fonctions qui déplacent le curseur.
Ces fonctions vont se servir d’une classe de flash, la classe Tween.
Qu’est-ce que c’est que ça une classe ?
La notion de classe :
Une classe est un ensemble de fonctions et propriétés définies. C’est en quelque sorte des fonctionnalités déjà écrites et que l’on peut réutiliser dans n’importe qu’elle programmation qui le nécessite (vous pouvez même écrire vos propres classes, mais nous n’aborderons pas cela ici).
Il existe plusieurs classes déjà disponibles dans flash, mais dans le cas présent seul la classe Tween nous importe. Cette classe sert à animer les éléments. Que ce soit au niveau de leur taille, de leur forme, de leur transparence, … Vous pouvez animer un élément de façon très précise grâce à cette classe.
Le fonctionnement d’une classe est relativement simple car tout est déjà configuré, donc il ne nous reste plus qu’à l’appeler et à lui définir ce que l’on souhaite pour qu’elle anime les éléments en conséquence.
En gros pour utiliser une classe dans flash il faut procéder de la manière suivante :
- Importer la classe dans flash
- Déclarer une nouvelle occurrence de la classe
- Spécifier les réglages
L’importation de la classe est faite ici avec ces 2 lignes (en excluant les commentaires 
) :
//
//— Importation de la class Tween —
//
import mx.transitions.Tween;
import mx.transitions.easing.*;
La première ligne importe la classe Tween, et la seconde tout un jeu de réglages possibles liés à la classe Tween.
Ensuite ne nous reste plus qu’à définir les réglages par le biais de nos 2 fonctions goCurseur(); et backCurseur(); et le tour est joué (enfin presque).
Commençons par la plus « simple » des deux, backCurseur(); :
//
//— Fonction backCurseur —
//
function backCurseur() {
var translationCurseur:Tween = new Tween(menuBas.curseur, « _x », Strong.easeOut, menuBas.curseur._x, positionCurseur, 0.5, true);
}
Cette fonction n’a qu’une seule action : déplacer le curseur jusqu’à son point d’origine.
Ce que j’appelle son point d’origine c’est tout simplement sa position initiale avant que nous venions tout perturber en baladant notre souris un peu partout.
Cette position est définie au tout début du code par cette ligne :
var positionCurseur:Number = menuBas.bPortfolio._x;
Qui dit que la position initiale du curseur, contenue dans la variable positionCurseur (qui est un nombre : Number), est égale à sa position actuelle (au début de l’animation) menuBas.bPortfolio._x.
Mais revenons à notre fonction…
Notre fonction fait donc appel à la classe Tween pour déplacer le curseur. Voici un schéma explicatif de la syntaxe :
Voyons à présent la fonction goCurseur();, légèrement différente :
//
//— Fonction goCurseur —
//
function goCurseur(idBouton) {
var translationCurseur:Tween = new Tween(menuBas.curseur, « _x », Strong.easeOut, menuBas.curseur._x, idBouton._x, 0.5, true);
}
Elle fonctionne en fait sur le même principe que la fonction backCurseur(); (d’ailleurs nous aurions pu faire une seule fonction mais je tenez ici à vous présenter les 2 cas de manière bien distincte).
La seule différence viens du fait que nous spécifions un argument à la fonction.
Un argu quoi ?
Un argument est un paramètre que l’on peu spécifier lorsque l’on appelle une variable.
Imaginons que nous écrivions une fonction qui ai pour but d’afficher un texte dans une couleur différente.
Nous pourrions prévoir tous les cas de figure directement dans la fonction, mais vous vous rendez bien compte de la masse importante de possibilités. C’est pourquoi il est bien plus simple (et plus pratique aussi pour d’éventuelles modifications) de créer une fonction dont l’un des facteurs est passé en argument, comme cela nous pouvons le définir lors de l’appel, et ainsi appeler une fonction qui effectuera une action différente suivant l’argument qui lui est transmis.
C’est notre cas ici puisque nous n’avons qu’une seule fonction qui gère le déplacement du curseur vers n’importe lequel des boutons.
Examinons l’appel de la fonction :
this.menuBas.bPortfolio.onRollOver = function() {
goCurseur(this);
};
vous voyez que lorsque l’on appelle la fonction goCurseur(); nous lui passons comme argument this.
this correspond ici à menuBas.bPortfolio puisque nous sommes dans son propre code (si nous étions dans le code de bContact, c’est à menuBas.bContact que correspondrait this). Donc par l’intermédiaire du mot réservé this, c’est menuBas.bPortfolio que nous passons en argument à la fonction goCurseur();.
Que se passe-t-il donc maintenant dans la fonction ?
Eh bien la fonction est en attente d’un argument que nous avons nommé idBouton. En fait idBouton est une sorte de variable qui contiendra l’argument passé à la fonction. Donc nous pourrons l’utiliser sous ce nom à l’intérieur de la fonction. Cela permet d’unifier le code (quelque soit la valeur de l’argument, et donc d’idBouton, la fonction marchera).
C’est d’ailleurs pourquoi nous retrouvons idBouton dans le code interne à la fonction :
var translationCurseur:Tween = new Tween(menuBas.curseur, « _x », Strong.easeOut, menuBas.curseur._x, idBouton._x, 0.5, true);
En fin de compte se code signifie que l’état final de l’animation sera la position, sur l’axe des X, de l’occurrence passée à la fonction. Donc la valeur que prendra idBouton.
Voici 2 exemples présentant la même fonction réécrite pour les boutons bPortfolio et bContact :
function goCurseur(menuBas.bPortfolio) {
var translationCurseur:Tween = new Tween(menuBas.curseur, « _x », Strong.easeOut, menuBas.curseur._x, menuBas.bPortfolio._x, 0.5, true);
}
function goCurseur(menuBas.bContact) {
var translationCurseur:Tween = new Tween(menuBas.curseur, « _x », Strong.easeOut, menuBas.curseur._x, menuBas.bContact._x, 0.5, true);
}
Si nous n’avions pas fait une seule fonction pour tous les boutons, nous serions obligé de faire une fonction par bouton (soit 5 ici, et bien plus si notre menu était plus conséquent).
En résumé la construction du code pourrait s’articuler comme suit :
- Phase d’initialisation (définition des variables et importation des classes nécessaires)
- Création des fonctions (écriture des fonctions qui effectueront les animations)
- Actions des boutons (on détermine les fonctions à lancer en fonction de l’état de chaque bouton)
Vous pouvez à présent tester votre animation en AS2 !
Animation du menu en AS3 |
Voici à présent ce à quoi ressemble le même code en AS3 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | // //--------------------------------------------- Initialisations ---// // // //--- Importation de la class Tween --- // import fl.transitions.*; import fl.transitions.easing.*; // //--- Position initiale du curseur --- // var posInitCurseur:Number = menuBas.curseur.x; // //------------------------------------------- Animation du menu ---// // // //--- Fonction deplaceCurseur --- // function deplaceCurseur(event:MouseEvent) { var translationCurseur:Tween = new Tween(menuBas.curseur, "x", Strong.easeOut, menuBas.curseur.x, event.currentTarget.x, 1, true); } // //--- Fonction initCurseur --- // function initCurseur(event:MouseEvent) { var translationCurseur:Tween = new Tween(menuBas.curseur, "x", Strong.easeOut, menuBas.curseur.x, posInitCurseur, 1, true); } // //----------------------------------------- Actions des boutons ---// // // //--- bPortfolio --- // this.menuBas.bPortfolio.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur); this.menuBas.bPortfolio.addEventListener(MouseEvent.MOUSE_OUT, initCurseur); // //--- bProfil --- // this.menuBas.bProfil.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur); this.menuBas.bProfil.addEventListener(MouseEvent.MOUSE_OUT, initCurseur); // //--- bGoodies --- // this.menuBas.bGoodies.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur); this.menuBas.bGoodies.addEventListener(MouseEvent.MOUSE_OUT, initCurseur); // //--- bLiens --- // this.menuBas.bLiens.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur); this.menuBas.bLiens.addEventListener(MouseEvent.MOUSE_OUT, initCurseur); // //--- bContact --- // this.menuBas.bContact.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur); this.menuBas.bContact.addEventListener(MouseEvent.MOUSE_OUT, initCurseur); |
J’en vois déjà qui font la grimace au fond…
Pas de panique, vous allez voir ce n’est pas bien méchant, et j’irais même jusqu’à dire que c’est plus logique que l’AS2.
Tout d’abord vous remarquerez que la structure même du code n’a pas changée. On retrouve toujours nos 3 phases :
- Initialisation
- Fonctions
- Actions des boutons
Bien sûr certaines petites choses ont changé en AS3, comme par exemple la propriété _x qui devient tout simplement x.
Donc l’écriture AS2 :
monClip._x;
devient :
monClip.x;
Ce qui n’est pas grand-chose mais peut dérouter au début.
Les fonctions ont également une légère différence avec celles écrites en AS2, notamment au niveau de l’argument idBouton qui a totalement disparu pour laisser place à quelque chose d’un peut différent, sur laquelle nos reviendrons tout à l’heure.
Mais regardons les codes des boutons, qui en revanche, n’ont plus rien de commun avec ceux vu plus tôt en AS2 (quoique) :
//
//— bPortfolio —
//
this.menuBas.bPortfolio.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuBas.bPortfolio.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
Comme vous l’avez très certainement constaté, la notion de fonction a totalement disparu ici pour laisser place à des écouteurs.
Non ça j’connais, c’est des trucs qu’on met dans les oreilles pour écouter de la musique tranquille !
Presque… En fait les écouteur existent aussi en AS, et ils sont très très très pratiques.
La notion d’écouteur :
Les écouteurs étaient déjà présents en AS2, mais il faut bien reconnaître qu’ils occupent une place bien plus grande en AS3.
L’unique tâche d’un écouteur est de repérer un événement déterminé. Aussi lorsque l’événement en question se produit, nous pouvons préciser à l’écouteur de lancer une action. C’est pourquoi ils sont si importants en AS3 : ce sont eux qui déclenchent les réactions. Vous rencontrerait très certainement aussi le terme callBack, ou plus précisément fonction callback. Une fois de plus nous avons affaire à un terme anglais ici, ou plus précisément 2 termes : call (appel), back (retour). Ce terme fait donc référence à une fonction appelée en retour d’un événement.
En résumé un écouteur appelle une fonction en réponse à un événement.
Vous voilà donc au fait de ce qu’est un écouteur. Voyons maintenant comment il fonctionne au travers de ce petit schéma qui va vous décrypter sa syntaxe :
Il reste encore une légère différence (2 plus exactement) avec le code en AS2, qui se situe(nt) au niveau de la fonction deplaceCurseur(); :
//
//— Fonction deplaceCurseur —
//
function deplaceCurseur(event:MouseEvent) {
var translationCurseur:Tween = new Tween(menuBas.curseur, « x », Strong.easeOut, menuBas.curseur.x, event.currentTarget.x, 1, true);
}
Comme je vous l’évoquais un peu plus tôt, la variable idBouton a ici été remplacée par event:MouseEvent, et idBouton._x est devenu event.currentTarget.x !
Mais kecec’est ça ???
Tout ceci est bien entendu lié aux écouteurs d’événements. D’ailleurs c’est étrange à chaque fois on vois event marqué en premier.
Tiens tiens…
Vous vous souvenez qu’un écouteur ne se déclenche que si un événement précis est en train d’arriver, pour un élément définit et lui seul.
Et bien voilà nous y sommes !
La fonction deplaceCurseur(); attend en argument un événement (MouseEvent.MOUSE_OVER souvenez-vous… mais si… l’écouteur !).
Du coup si nous connaissons l’événement, cela veut dire que nous savons aussi à quel élément il est lié (héhé…). Donc inutile de passer par une variable supplémentaire ici, l’AS3 nous offre la possibilité de faire référence à l’élément concerné grâce à l’expression event.currentTarget. En conséquence de quoi, pour faire référence à sa position sur l’axe des X, il suffit de rajouté la propriété .x à la suite, ce qui nous donne : event.currentTarget.x !
Voilà, maintenant vous pouvez tester votre animation en AS3 !
Conclusion |
Je pense que pour un début ça fait déjà pas mal de notions à intégrer, d’autant que nous travaillons sur 2 versions d’un même langage, donc on va s’arrêter là pour le moment.
J’espère que toutes les explications de ce cours sont suffisamment claires pour tous, si jamais ce n’était pas le cas, n’hésitez pas.
Dans le prochain chapitre, nous nous attaquerons au preload de l’interface et à la réalisation du sous-menu.
WikioCatégorie(s) : Flash, Flash - AS2, Flash - AS3
Article lu 6 924 fois
[4,67 / 5 - 12 vote(s)]
Loading ...
Très bon blog, article didactique et précis, j’adhère
. Tu me redonnes envie de me remettre à flash
Grand merci et longue vie à ce blog !
Merci à vous 2 !
@CUT HERE : merci du compliment
)
Bonjour,Je n’arrive pas à lire les vidéos, l’animation de chargement tourne tourne tourne tourne tourne mais rien ne se passe… Je ne sais pas si cela provient de chez moi, mais ça me frustre, je voudrais voir la suite huhu.Merci !
Bonjour Beaulys, je ne suis pas chez moi ce week-end donc je ne pourrai pas regarder d’où cela peux venir avant dimanche soir en rentrant.
Pourrait-tu déjà me préciser ta configuration s’il-te-plaît (quel système d’exploitation et quel navigateur tu utilise, ainsi que leurs versions).
Merci.
Je me pencherai dessus en rentrant.
Windows Vista SP1 32bits / UbuntuFirefox 3.0.4Flash Player 9 (FP 10 me cause beaucoup plus de soucis qu’autre chose alors je suis revenu au 9)
C’est réglé !
Mes excuses à tous ceux qui ont rencontré le même souci cela était de mon fait car mes liens vers les vidéos étaient incorrectes. Elles fonctionnaient lorsque je faisait des preview mais pas une fois l’article publié.
Désolé de la gène occasionnée.
Merci ça marche impec !
Je ne sais pas ou mettre mon cs3″aucune action ne peut etre appliquée… »je le mets sur un calque appart?…nb : ton site est mal centré, il manque les premiers mots de tes phrases… ça reste compréhensible merci boss
Salut,
Ton CS3 tu l’installe sur ton ordinateur. Ton code AS3 par contre tu doit le placer sur un calque spécial (dans l’exemple il est nommé « CODE »). Mais attention tu doit impérativement donner des noms d’occurrence à tes clips car sinon le code fait référence à des occurrence qu’il ne vois pas donc rien de se passera.
« ton site est mal centré, il manque les premiers mots de tes phrases… »
-> quel navigateur utilise-tu ? pourrait-tu m’envoyer une capture du souci de décalage pour que je regarde ? (mon mail est indiqué dans le footer du site).
Merci
Bien mais malheuresement je suis déçu… incomplet… pour quelqu’un qui veut se lancer dans un site full flash et qui se retrouve a la fin de la part 3 sans avoir abordé le chargement des fichiers swf externe dans le MC contenu… c’est un peu le coeur du probleme et il n’est pas (pour le moment j’espere) traité.Sinon le reste est top, bonnes explications et bonnes illustrations.Mais manque la fin pour le moment dommage…
Je comprends ta frustration mais tout dépend du nombre de parties que comportera le cours dans sa globalité…
D’ailleurs je ne le sais pas encore moi-même (ce qui ne veux pas dire que je ne sais pas où je vais rassurez-vous) car j’essaie vraiment de détailler le plus possible chaque étape de manière a rester compréhensible (surtout pour le néophyte).
Je ne souhaite nullement réaliser ici un tutoriel copié/collé où je me contente de dire quoi faire et quel code placer sans donner d’explications. Ce genre de didacticiels existe déjà et ce n’est pas ce que je souhaite faire.
C’est pourquoi je n’ai pas encore abordé le principe du chargement car même si quelqu’un qui connait flash va construire sa fonction avant même de faire les sous-parties, j’ai décidé de d’abord construire les sous-parties, puis revenir à l’interface principal pour créer les fonctions qui chargeront les parties.
C’est un choix personnel mais je pense qu’il est plus simple d’expliquer comment charger quelque chose qui existe plutôt que de présenter une fonction qui servira à charger des fichiers qui n’existent pas encore (toujours dans l’optique de ne pas embrouiller les personnes qui n’ont jamais travaillé sous flash).
De tout façon le cours va être assez long (ne vous attendez pas à ce que le site soit terminé à l’étape 7 par exemple ça me parait un peu juste au vu du déroulement prévu).
Par contre le prochain chapitre « boucle » la première session sur le fichier principale INTERFACE, donc j’en profiterai pour faire une première incursion dans le monde du préchargement pour présenter une méthode visant à créer une barre de progression avec affichage du pourcentage lors du chargement de l’interface principal.
Je suis d’accord le chargement est un peu le coeur du problème dans un site fullflash mais j’essaie aussi de présenter différents aspects du logiciel au fil des étapes (certaines fonctions de dessin par exemple), donc j’y vais pas à pas, désolé si les plus impatients restent sur leur fin.
Personnellement je vois plutôt ce cours comme une manière de découvrir le logiciel au travers de la réalisation d’un site entièrement en flash plutôt qu’une méthode pour faire du fullscreen. Auquel cas je me serai « contenté » d’un seul article comme celui sur les collisions en AS2 par exemple.
Salut !Je comprends la ou tu veux en venir et c’est bien ainsi pour les personnes qui souhaite apprendre sans allez farfouiller partout !En ce qui me concerne en commençant ton tuto je ne connaissais pas trop flash, a savoir que j’avais juste réaliser des menus animés ou quelques trucs comme sa mais pas de site all flash !Du coup, vu que j’étais motivé, j’ai fouillé la toile pour trouvé « le reste » du tuto mdr ! De ce fait j’ai avancé sur mon site full flash mais je reviendrais régulièrement sur ton site pour voir si ce que j’ai fais est « bien » fait ! ^^En tout cas merci continu comme sa !
Oui en fait je pense que si l’on est vraiment motivé et qu’on veut progresser sans attendre (c’est mon, cas
), le web regorge de ressources et de sites sur tous les sujets possibles et imaginables, comme Mediabox ou gotoAndLearn ou l’excellent yazo par exemple (il y en a plein d’autres !).
Du cou p ceux qui n’ont pas la « patience » (ou le courage ?) d’attendre que je rédige les chapitres suivants iront voir sur d’autre sites pour « compléter »… Mais après tout même si j’ai contribuer à leur donner envie d’en savoir plus je suis plutôt content
.
Maintenant je ne présente ici qu’une manière de faire et il y a toujours moyen de trouver des explications différentes (et non moins intéressantes et justes) ailleurs. Je vous encourage d’ailleurs à ne pas vous limiter à une seule source, c’est plus sûr et plus riche aussi.
Maintenant j’essaie surtout de garder une approche la plus simple et explicative possible pour ceux qui débutent sur flash (comme j’ai essayé de le faire pour la couleur et la typographie d’ailleurs). D’ailleurs il faut bien avouer qu’à la fin le site qui aura été réalisé n’aura rien d’extraordinaire comparé à ce qui se fait aujourd’hui (pas de gestion du XML ni du PHP ou autre). Mais ça reste une première approche donc après on pourra voir d’autres choses plus « complexes » en sachant que l’on a de bonnes bases (en tout cas j’espère).
Je suis complètement conscient que le cours n’aura réellement toute son ampleur qu’une fois complet, mais pour ça, va falloir que je bosse un peu je crois…
Bonjour
J’aurais une petite question…
Lorsque je teste mon animation, à la fin de la vidéo 6, le « gotoAndStop( »interface »); » ne semble pas marcher. C’est surement une erreur de ma part mais, quand j’écris dans le calque « code » : « gotoAndStop( »interface »); », j’obtiens une page blanche et quand j’écris « gotoAndStop(); », ça tourne en boucle, donc clignote.
Je m’arrache les cheveux dessus depuis presque une heure mais impossible de parvenir à une image fixe lors du rendu. :s
J’ai CS4 et ai déjà eu quelques problèmes pour 2/3 animations, mais rapidement réglées en modifiant la propriété du document, en AS 2. Ici, ça ne règle rien… ;(
Si vous avez une idée…
Merci!
Bonjour,
je viens de voir que tu as également posté sur le forum donc je bascule dessus pour te répondre.
Bonjour,
ca fait un moment que je me suis interessée au logiciel flash et c’est effectivement difficile de se familiariser avec. Je commence à avoir des notions d’AS et à connaître l’interface de flash, mais je cherchais justement un tutoriel donnant un exemple global de la conception d’un site flash, et me permettant de revoir, ou découvrir de nouvelles notions. Je trouve ce blog vraiment bien fait: bien structuré et bien expliqué, et surtout (très important je trouve), très bien présenté donc agréable à lire. Sur ce, je vous laisse, je passe à l’étape suivante … Bravo et merci.
Sur ce, je passe à l’étape suivante
Bonjour et merci.
Effectivement flash, comme bien des logiciels, peut vite rebuter les gens car il offre tellement de possibilités (et je n’ai même pas encore pris le temps de regarder les nouveautés de la CS4) qu’il fait tourner la tête.
C’est pourquoi j’essaie de m’appliquer à rendre les choses le plus simple possible. Je suis content de voir que ça semble convenir à pas mal de gens, tant mieux car c’est le but aussi.
J’en profite pour m’excuser car j’ai pris du retard sur le chapitre 5 (beaucoup de taff en ce moment donc pas toujours le courage le soir…) mais il va arriver pas d’inquiétude.
Bonjour,
dslé) apres avoir suivi assuidument le tuto jusqua la partie 4 (test animation) flash me sort une erreur de sortie:
Je suis étudiant en photographie, et pour présenter mon travail, jai decidez decrée un site fullflash et fullscreen. l’html, php,…ne m’interrese pas énormement surtout apres avoir testé.
en plus d’un interet réservé, hors mis par imprime écran, on ne peut copier mes photos…(enfin presque)
je possede donc toute la panoplie adobeCS4, cependant il me manque l’expérience!apres multe recherche google, j’ai réussi a me faire un portfolio flash (avec le composant « loader »)pas tres pratique dailleur. mais voila que je tombe sue ce tuto qui ma fois et supergénial et correspond a ce que je veut.
donc tres grande félicitation au rédacteur et surtout merci…
Cependant(eh oui jai un ptit probleme…
» TypeError: Error #1010: Un terme n’est pas défini et n’a pas de propriété.
at interface_fla::MC_INTERFACE_1/frame1()
»
Donc jai lu sur le forum, qu’il y a un nom doccurance non identique a l’AS3…
mais jai bien tout vérifier, tout correspond et identique.
l’anime se lance bien, mais le curseur ne bouge pas quand je survol mé bouton! donc par déduction, je pense que l’erreur se situe soit sur le curseur,le menu. mais pas sur les bouton car le site nest pas fini donc je nest pas d’action sur les bouton(liens,clicable,….)
quelqu’un peut t’il maidez????????????????
Cdlt
P.S: désolé pour la compréhension et les fautessssssss!!!!!
Bonjour,
Content que le tut te plaise et te serve !
Pour ton souci à priori c’est un souci de nom d’occurrence en effet, mais apparemment tu n’as rien trouvé.
Comme flash fonctionne en interaction sur 2 plans : physique avec les occurrences sur la scène et abstrait avec le code ActionScript, il est assez difficile de trouver l’erreur sans le fichier sous les yeux.
Je te propose donc de m’envoyer ton fichier par mail pour que j’y jette un coup d’œil si tu veux.
Bonjour,
apres reflexion et nombreux test, jai enfin réussi a faire bouger mon petit curseur!!!! oufffffffffffffff
apparement c’était bien un nom d’occurance oublié…mais bon le principal c’est que tout fonctionne desormé.
je viens meme de finir la partie 4 et je commence la partie 5 ce jour!!!!youpi….
par contre au nivaue du preload, apparement tout fonctionne (occurance,interface….)mais je le voit meme pas que je lance l’anim!!a mon avis c’st parce que mon site pour l’instant et tres leger et donc ce charge ala vitesse du son, mais jai quand meme ralenti ma scene a 1img/scd et je le voit toujour pas…
Ba je verrez cela plus tard, une fois du poids ajouté!!!!
en tout cas merci beaucoup, et a bientot(sa c’est sur!!!lol)
Coool félicitation et bonne continuation…
Le souci c’est que vous lisez les cours plus vite que je ne les rédige…
Effectivement lors des tests il est assez difficile de vraiment ce rendre compte de la durée du chargement de l’interface (surtout si celle-ci contient finalement peut d’images et donc pèse très peu).
Une fois le site en ligne, on se rend évidement bien compte de la réalité. Cependant le fait de découper de site en plusieurs parties permet justement de réduire au maximum le poids de chaque fichier.
D’un autre côté cela imposera à l’internaute de voir plusieurs chargements :
- chargement d’ l’interface du site
- chargement de la section
- chargement des images et des textes des projets de la section
… et on peu continuer encore selon la complexité du projet.
Le fait est que je pense, ça n’engage que moi cela dit, qu’il vaut mieux charger ce dont on à besoin quand on en a besoin.
D’abord parce que ça me semble plus judicieux, et ensuite ça évite à une personne peu patiente de partir voir d’autres sites car le vôtre nécessite 5 minutes à se charger…
help j’ai un vieux problème que je n’arrive à résoudre voila j’ai fait tout ce qui a été dit dans ton tutau (dailleur super classe) et le souci c’est que dans mon anim je déplace le curseur sur un autre bouton et sa me fait des mouvement de vas et viens entre le premier bouton et le second comme un balayement. Que faire? est ce que j’aurais oublié un code?
Bonjour,
Ça n’est en fait pas un bug, mais le fonctionnement normal du script :
à chaque fois que la souris « sort » de la zone de réaction d’un bouton (onRollOut), le curseur retourne vers son point d’origine.
Donc logiquement, lorsque tu passe d’une zone réactive à l’autre, si tu as une zone de vide entre les 2, le curseur fait le va-et-viens, car il reçoit 2 instructions l’une après l’autre (retourne là-bas puis viens-ici).
Si tu veux éviter cela, tu doit :
-soit réduire au minimum (voir éliminer) les espaces entre tes zones réactives (ce n’est pas la méthode la plus propre mais elle devrait fonctionner).
-soit modifier la fonction pour qu’elle ne retourne pas systématiquement/immédiatement à son point d’origine (en mettant une temporisation par exemple, ça peut être sympa).
Le script donné n’est là qu’à terme d’exemple, donc il n’est pas nécessairement parfait du point de vue esthétique. Justement, à vous de l’adapter à vos besoins, de l’améliorer, …
ok merci bien pour le tuyau
Bonjour, j’ai quelques petits soucis avec les codes des boutons pour AS:
Symbole ‘interface’, Calque ‘code’, Image 1, ligne 20 1120: Accès à la propriété non définie menuBas.
Symbole ‘interface’, Calque ‘code’, Image 1, ligne 20 1120: Accès à la propriété non définie menuBas.
Symbole ‘interface’, Calque ‘code’, Image 1, ligne 26 1120: Accès à la propriété non définie menuBas.
Symbole ‘interface’, Calque ‘code’, Image 1, ligne 26 1120: Accès à la propriété non définie menuBas.
Symbole ‘interface’, Calque ‘code’, Image 1, ligne 12 1120: Accès à la propriété non définie menuBas.
Ça ressemble fortement à un petit oublie :
le clip contenant le menu (dans lequel sont les boutons) doit avoir comme nom d’occurrence menuBas (dans la palette Propriétés, case « nom d’occurrence »).
Merci beaucoup pour ta réponse, sauf que maintenant il me marque:
ArgumentError: Error #2109: L’étiquette d’image Interface est introuvable dans la séquence Séquence 1.
at flash.display::MovieClip/gotoAndStop()
at interfaceAS3_fla::MainTimeline/interfaceAS3_fla::frame1()
Aurai-je encore oublié quelque chose ?
En effet. Il manque juste une étiquette d’image, du coup comme le gotoAndStop( »interface »); recherche l’étiquette portant le nom « interface », si elle n’existe pas, flash affiche une erreur.
Dans le chapitre 2, la première vidéo explique, entre autre, comment j’ai créé les étiquettes.
Sinon à la fin du chapitre 1 il y a aussi un petit topo sur ce que sont les étiquettes et à quoi elles servent.
Justement j’ai bien mis les étiquettes, c’est d’ailleurs pour ça que je ne comprend pas pourquoi cela ne fonctionne pas (et quand je retire le code gotoAndStop( »Interface ») l’écran clignote lors de la prévisualisation, seul le code du curseur fonctionne).
J’ai donc trouver une « astuce » (tu me dira si j’ai eu tord), j’ai retirer le gotoAndStop( »Interface »);
et j’ai mis un
stop();
dans une image clée vide à la fin du calque interface dans la Séquence1.
Depuis ça me l’affiche correctement, et le code du curseur fonctionne toujours.
Oui ton astuce est bonne.
En revanche je suis perplexe quand au non fonctionnement de l’étiquette.
L’étiquette, comme les nom d’occurrences doivent porter exactement les mêmes noms dans le code que dans l’étiquette (s’il y a/des majuscules, elles doivent êtres présentes au 2 endroits (nom de l’étiquette et code).
Parfois il arrive que le nom de l’étiquette contienne un espace (avant le nom ou après) sans que l’on s’en rende compte, ça peu aussi expliquer pourquoi flash vois une différence.
petit bug en AS3.0 mon curseur va vers sa postion mais revient instantanément a sa position pour recommencer l’animation comme s’il n’y avait pas de stop();
solution???
j’en profite d’ailleurs pour demander pourquoi sur ma timeline principale l’actionscript gotoAndStop ne fonctionne pas comme il devrait alors qu’un gotoAndPlay marche parfaitement.
merci de vos réponses et de ce tutoriel très bien fait que je recherchait depuis un bon bout de temps!
Bonjour,
Pour le petit bug du curseur, en fait c’est tout à fait normal. En remontant juste un peu dans les commentaires, vous verrez que quelqu’un avait le même souci (Anko : message du 1er septembre). Ma réponse est donc la même, si vous ne cliquez pas sur un bouton, sa position initiale reste le premier bouton (telle que définie au début du script dans la partie « initialisation »), donc dès que le bouton sort de la zone réactive qu’il était en train de survoler, le curseur retourne à la position initiale définie.
ok, merci de votre réponse!
Moi je suis en train de suivre à la lettre ton tuto…C’était le genre de tuto que je cherchais…ne pas faire bêtement les choses mais de comprendre ce que je fais..et là avec des explications (pourkoi çi , pourkoi çà) c’à m’aide a comprendre et surtout de progresser.j’espère que je réussirais.Merci et a bientot
Y’a pas de raison, si j’y arrive moi, tout le monde peut le faire !
Il suffit de prendre le temps de comprendre ce que l’on fait et tout devient plus simple (parce que logique) …
Si tu as des questions ou que tu coinces sur un point, une explication ou autre, n’hésite pas.