FORUM des THQ
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

FORUM des THQ

promos 2007
 
AccueilPortailRechercherDernières imagesS'enregistrerConnexion
-17%
Le deal à ne pas rater :
SSD interne Crucial SSD P3 1To NVME à 49,99€
49.99 € 59.99 €
Voir le deal

 

 EXOS CORRIGES 1

Aller en bas 
2 participants
AuteurMessage
Alex XIV
Admin
Alex XIV


Nombre de messages : 236
Age : 48
Localisation : par GPS
Date d'inscription : 02/02/2007

EXOS CORRIGES 1 Empty
MessageSujet: EXOS CORRIGES 1   EXOS CORRIGES 1 Icon_minitimeMer 21 Fév 2007 - 12:23

EXO N°1 - Exercice du mercredi 21 Fevrier

Objectif:
Créer un menu dynamique avec un effet de rollover sur les boutons.


1- Ouvrir Flash !

2- CREER UN BOUTON

Nous allons créer un seul bouton qui sera répété plusieurs fois sur la scéne ( dans notre séquence ), Pour cela:

- Ctrl + F8 puis cliquer sur "bouton" - le nommer (par ex: bouton!) puis OK
( Il est utile d'ouvrir aussi la bibliothèque afin d'avoir une meilleure visibilité des objets que nous allons créer pour cela : Ctrl + L ( L comme Library soit Bibliothèque en Anglais!" )

- Nous allons maintenant dessiner un bouton . Remarquons que nous travaillons sur notre nouvel élément de bibiothèque appelé bouton ( voir sous la Time Line ) et non sur la séquence qui correspond elle à notre animation finale!
"Bouton" n'est qu'un simple élement que nous allons d'abord construire puis glisser sur la séquence ultérieurement.

Dessinons justement ce bouton, ici un simple rectangle de couleur fera l'affaire.
On remarque qu'un marqueur nous indique le milieu de la page, et que notre rectangle possède lui aussi un marqueur en son centre.
Il est utile pour la suite de bien centrer notre rectangle sur la page donc d'aligner le centre de la page et le centre du rectangle.
Pour cela : selectionner le rectangle puis ouvrons la fenêtre "aligner" et utilisons les outils d'alignement qui sont les mêmes que sur Illustrator!

3 - CREER UN ROLLOVER

Ici nous voulons un changement de couleur du rectangle au passage de la souris.

Pour cela :
Allons dans la Time Line en haut de la page, on remarque qu'elle ne contient que 4 cases:

HAUT : correspond au bouton tel qu'il apparaitra sur la page.
Nous allons utiliser HAUT dans notre exemple car le bouton doit être visible!!! D'ailleurs nous l'avons déja utilisé rien qu'en dessinant le rectangle ( voir en haut sur la time Line : "HAUT" contient un point noir donc une image clé : le rectangle! )

DESSUS : correspond à l'état du bouton au passage de la souris.
Nous allons utiliser DESSUS dans notre exemple pour créer le rollover.

ABAISSE : correspond à l'état du bouton au clic.
Nous n'utiliserons pas ABAISSE dans notre exemple car on veut juste faire un rollover simple.

CLIQUABLE : permet de créer une zone réactive autour du bouton ( Ici notre bouton est un rectangle donc une forme pleine, nous n'aurons donc pas besoin de "CLIQUABLE", mais imaginons qu'au lieu d'avoir dessiner un bouton nous avions écrit un texte. Alors la souris n'aurait réagit que sur le corps du texte qui est trés fin! nous aurions donc placer un rectangle sur "CLIQUABLE" afin de créer une zone réactive autour du texte.

Pour commencer cliquons sur "DESSUS", "HAUT" étant déja rempli d'un point noir correspondant à l'image clé de notre rectangle.

Aprés avoir cliqué sur "DESSUS" on appuie sur F6 ( raccourci pour créer une nouvelle image clé ) on va ainsi copier le rectangle.
On change la couleur du nouveau rectangle ( Soit dans le panneau"Propriétes" soit avec l'outil "Pot de peinture")

VOILA! Nous avons créer un bouton dans la bibliothèque!
Mais nous voulons du texte sur notre bouton:

4 - CREATION DU TEXTE DYNAMIQUE

Dans la palette des calques, nous allons créer un nouveau calque au dessus de celui contenant le bouton.
Sur ce calque nous allons placer une zone de texte dynamique.

Pour cela:
Utilisons l'outil texte et dessinons un cadre sur le rectangle.

Dans la fenêtre "propriétés" :
- Bien faire attention à définir ce texte en tant que "texte dynamique"
- Nommer le texte ( var : titre )
- Attention aussi à décocher le bouton "selectionnable" ( c'est un bouton avec marqué "ab" ).

A ce stade nous avons:
- créer un bouton dans la bibliothéque ( voir dans la fenêtre ).
- créer un rollover sur ce bouton
- insérer un champs de texte dynamique (vide) au dessus du bouton.

Bien...

5 - CREATION DU CLIP

Nous allons maintenant créer un clip qui va contenir notre bouton.
Là c'est pas compliqué:

- Ctrl + F8 pour créer un nouvel élement de bibliothèque, mais là nous allons choisir "clip", nommons le ( clip par exemple! ) puis OK.
- Dans le panneau bibliothèque, on va cliquer sur le "bouton" ( c'est à dire notre rectangle crée précedemment ) et le glisser sur la page.
- Voila!... Nous avons créer un clip contenant notre bouton!


6 - PLACER DES CLIPS SUR LA SEQUENCE

Maintenant nous allons aller sur notre séquence pour y placer plusieurs de ces "clip".
Cliquer sur séquence 1 en haut de la page!

Sur notre séquence nous allons placer 4 "clips" en faisant cliquer/glisser depuis la bibliotèque comme prédemment. Nous avons donc 4 rectangles que allons aligner pour former un menu.

Cliquer sur chacun des boutons puis dans la fenêtre "propriétés" (à gauche) nommons les occurrences ( cad les 4 boutons ) c1 puis c2 et enfin c3 et c4.
Rappel : notre champs de texte dynamique s'appelle lui : "titre"
Ces noms vont jouer un rôle juste ci-dessous :

Pour l'instant les boutons ne contiennent pas de texte et c'est normal car nous allons le gérer dynamiquement.
C'est à dire que les mots contenus dans les textes dynamiques qui sont sur les rectangles seront écrits dans le code! donc dans l'actionscript!!!

7 - TAPER LE CODE ACTIONSCRIPT

Pour cela:
Se placer sur la Time Line en haut de la page et cliquer sur la première image clé ( celle contenant un point noir )
puis appuyer sur F9.
La fenêtre d'actionscript vient de s'ouvrir, nous allons y taper le code suivant:

c1.titre="LIEN 1";
c2.titre="LIEN 2";
c3.titre="LIEN 3";
c4.titre="LIEN 4";

C'est à dire que nous avons placés les mots LIENS1 LIENS2 LIENS3 LIENS4 dans nos boutons.

Voila c'est fini!
Il ne reste plus qu'à tester notre travail en faisant Ctrl + Entrée.

Si ça bug! Voila ce qu'il faut vérifier en premier:

- D'avoir bien nommer les différents éléments ( "titre" pour le texte et "c1 c2 c3 c4" pour les boutons dans le panneau de propriétes.)
- La syntaxe du code actionscript
- d'avoir bien placé le code actionscript en faisant F9 sur la 1ére image clé de la TimeLine
- que l'icône "selectionnable" (ab) est décochée dans les propriétes du texte dynamique. pour cela il faut retourner sur "bouton" et non "séquence 1"
- D'avoir allumer son ordinateur.


Dernière édition par le Jeu 1 Mar 2007 - 11:59, édité 1 fois
Revenir en haut Aller en bas
https://thq-autograf.1fr1.net
Noelito
THQ
THQ
Noelito


Nombre de messages : 57
Date d'inscription : 02/02/2007

EXOS CORRIGES 1 Empty
MessageSujet: Re: EXOS CORRIGES 1   EXOS CORRIGES 1 Icon_minitimeJeu 22 Fév 2007 - 1:03

C EST MERCI POUR LES INFOS Alex XIV !!!

Embarassed

lol!
Revenir en haut Aller en bas
 
EXOS CORRIGES 1
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» EXOS CORRIGES 2
» EXOS CORRIGES 3
» BESOIN EXOS!
» Script " interdiction de clic droit! "
» Exos du jour!

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
FORUM des THQ :: Logiciels :: Flash-
Sauter vers: