[Flash MX] Interface avec bouton optimisés

Découvrez les outils et techniques propres aux graphistes.

[Flash MX] Interface avec bouton optimisés

Messagede Anatoly » 22 Oct 2004 12:24

Une Navigation Simple
Voici un petit tuto sur comment faire une petite navigation ^^
Voir le résultat du Tuto

Je n'aborderai que l'ActionScript pour 2 raisons :
1 - L'habillage est quelquechose de très personnel.
2 - Je suis nul en Vecto :p

Ce tuto perfectionne les interface :
1 - Il permet d'avoir une Animation sur le bouton qd on le SURVOLE ET qd on SORT DU SURVOL
2 - On bosse plus vite avec cette tech car on sépare le graphisme+animation des actions des boutons.

_________________________________________________________________
Etape 1 : Créer les Movie Clips dont on aura besoin.
_________________________________________________________________

:arrow: Nouveau document
:arrow: Faire un nouveau symbole qu'on appellera "reactif" de type MovieClip (ctrl+F8)

Image

:arrow: Y tracer la forme d'un des boutons de notre interface
Image

:arrow: Faire un nouveau symbole qu'on appellera "interface" de type MovieClip (ctrl+F8)
Image

:arrow: Y tracer la forme de notre interface mais sans les boutons
Image

:arrow: Faire un nouveau symbole qu'on appellera "bouton" de type bouton (ctrl+F8)
Image

:arrow: aller à l'image "Hit" du bouton
Image

:arrow: Y insérer une image clé ( F6)
:arrow: Y mettre une instance de l'objet "bouton" ( le glisser depuis la library (ctrl + L)
Image


_________________________________________________________________
Etape 2 : Mettre les movies clips sur la scène et ajouter l'actionScript.
_________________________________________________________________

:arrow: Allez sur la scène courante
:arrow: créez 2 nouveaux calques et les nommer comme sur l'image
Image

:arrow: mettez une instance de chaque symbole dans le claque correspondant ( alignez bien votre bouton et votre réactif)
Image

:arrow: P.S : les boutons apparaiteront avec un arrière plan vert-bleu clair ( cnormal vu qu'il ne contiennent rien d'autre que leur zone sensible " Hit")
:arrow: Lockez les calques "boutons" et "reactifs"
Image

:arrow: Cliquez sur votre reactif et sortez l'éditeur d'ActionScript (F9)
:arrow: mettez le code suivant
Image

:arrow: petit commentaire :
- chaque fois que le movieClip est affiché (onClipEvent ( enterframe)) , Flash teste si il y a contact avec la souris ( hitTest )
- si oui : il teste si la taille du bouton est de 160%, sinon il l'augmente de 6%
- si non : il teste si la taille du bouton est de 100%, sinon il la réduit de 6%


:arrow: Lockez le calque "reactifs" et délockez "boutons"
Image

:arrow: séléctionnez votre bouton et ajoutez y les actions désirées ( dans mon cas l'ouverture de la page "page.html")
Image

:arrow: enregistrez au fur et a mesure.
_________________________________________________________________
:arrow: Testez et Voila ^^

Tuto Entièrement réalisé par Anatoly pour 2077.net

Veuillez insérer ce Copyright si vous comptez le mettre sur votre site.
Flash MX Interface avec bouton optimisés
Anatoly
Habitué(e)
Habitué(e)
 
Messages: 446
Inscription: 11 Oct 2004 0:43

Messagede potatoes » 22 Oct 2004 16:13

super anatoly :good: je vais m'y essayer :)
Image
Avatar de l’utilisateur
potatoes
VIP
VIP
 
Messages: 2711
Inscription: 01 Juin 2004 16:14
Localisation: lyon

Messagede Anatoly » 22 Oct 2004 17:03

Un Tip ^^
Si vous programmez en Php et bien sachez que l'actionSCript c pratiquement de la syntaxe PhP ( qui elle est presque du C).
Anatoly
Habitué(e)
Habitué(e)
 
Messages: 446
Inscription: 11 Oct 2004 0:43

Messagede DoudzZ » 22 Oct 2004 17:49

Super Anatoly :)

J'ai une petite question ou est ce que je peut me procurer Flash Mx svp Merci d'avance c'est super !
Vous avez un site ou un blog ?
Mais vous n'avez pas de visites... Inscrivez votre site gratuitement sur l'annuaire gratuit !
Avatar de l’utilisateur
DoudzZ
Fidèle
Fidèle
 
Messages: 1319
Inscription: 04 Aoû 2004 11:38
Localisation: [36]

Messagede François » 22 Oct 2004 17:58

[Fight666] a écrit:J'ai une petite question ou est ce que je peut me procurer Flash Mx svp Merci d'avance c'est super !

A la Fnac par exemple :wink: ...

Ou en version d' évaluation afin de tester le logiciel...
François
VIP
VIP
 
Messages: 7277
Inscription: 25 Sep 2003 20:09

Messagede Anatoly » 22 Oct 2004 17:58

Achète le ^^

Tu peu el commander sur le net

Sinon ben y a les sources illégales, mais bon :lol:
Anatoly
Habitué(e)
Habitué(e)
 
Messages: 446
Inscription: 11 Oct 2004 0:43

Messagede Anatoly » 22 Oct 2004 18:00

.:up Voici le source du tuto ::
Anatoly
Habitué(e)
Habitué(e)
 
Messages: 446
Inscription: 11 Oct 2004 0:43

Messagede Tarentio » 22 Oct 2004 18:44

thanks.
Le suicide c'est la force de ceux qui n'en n'ont plus, l'espoir de ceux qui ne croit plus, l'ultime force du guerrier vaincu.
Avatar de l’utilisateur
Tarentio
Insatiable
Insatiable
 
Messages: 3371
Inscription: 30 Aoû 2003 22:03

Messagede JoN » 26 Oct 2004 18:35

Anatoly a écrit:Achète le ^^

Tu peu el commander sur le net

Sinon ben y a les sources illégales, mais bon :lol:


c'est genre 1000 euros mdr

:-x

sources illgalles :-P

merci pour ce tuto je debute dans le flash
JoN-PoO
Avatar de l’utilisateur
JoN
Régulier(ère)
Régulier(ère)
 
Messages: 168
Inscription: 09 Fév 2004 7:51
Localisation: Bruxelles

Messagede Anatoly » 27 Oct 2004 0:51

Oui Oui ^^

Et comme j'en ia besoind ans le boulot j'ai du l'acheter :bored:

Mais bon faut ce qu'il faut :D
Anatoly
Habitué(e)
Habitué(e)
 
Messages: 446
Inscription: 11 Oct 2004 0:43


Retourner vers Tutos Graphisme

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités