ArtBook - le blog des tutoriaux graphiques -

Un blog rempli de tutoriaux gratuits et complets pour apprendre à utiliser Photoshop, Illustrator, Flash et d'autres applications web. Mise à jour très fréquentes.

22 novembre 2007

Faire une TV en flash

Faire une TV

 

Au programme faire une TV ou vous pourrez changer de chaine simplement en cliquant sur un bouton.

Tout d’abord il va vous falloir 4 vidéos, peu importe le format, ici j’ai choisi l’avi, mais cela fonctionne aussi avec du mov voir du flv qui est plus léger. De plus il va vous falloir un cadre de TV, vous pouvez prendre celui que j’ai mis (il est déjà détouré) ou en choisir un autre de votre choix.

 

TV

Ouvrez un nouveau document, peu importe la taille. Puis créer 5 calques, qui vont se placer du plus bas au plus haut : fond, bouton, video, etiquette, AS

1

Prenez votre outil éllipse ou rectangle, à votre choix, et dessinez un petit carré ou cercle. Faites clic droit convertir en symbole, choisissez bouton et nommez le btn

2

2bis

Double cliquer dessus, et insérez une image clé à chaque état. Ensuite modifiez juste la couleur de chaque état. Ainsi lorsque votre souris passera ou cliquera dessus il changera de couleur.

3

Revenez sur la scène et dupliquez ce bouton 3 fois. Aligner les soit à l’horizontal soit à la vertical, selon le modèle de TV que vous avez prise.

4

Placez vous sur votre scénario à l’image 50, maintenez la touche Maj enfoncé (la flèche au dessus de Ctrl) et sélectionnez tout les calques, clic droit>insérez une image clé.

5

Allez dans le calque « etiquette » et à l’image 10, 20, 30, 40 mettez une image clé. Puis nommez l’image 10 (etiquette d’image en bas dans propriétés) sequence1, et faites de même avec les images 20,30 et 40, en changeant bien entendu le chiffre, ce qui donne donc sequence2, sequence3, sequence4. Un petit drapeau rouge va apparaitre c’est normal.

6

Passons au calque AS, en 1, 10, 20, 30, 40, et 50 insérez une image clé et ce code (clic droit>Actions)

stop () ;

Des petits « a » apparaissent sur vos images c’est normal, c’est pour indiquer qu’il y a de l’actionscript.

7

C’est au tour du calque « video » Nous allons importer chacune des vidéos que vous avez préalablement récupéré et renommez, sequnce1, sequence2, sequence3, sequence4. Allez sur l’image 10 mettez une image clé, et faites Fichier>Importer>Importer de la vidéo…
Choisissez la qualité de votre vidéo, en streaming (la première option) et sans enveloppe surtout, et enfin terminé. 
Faites de même sur les images clés 20,30 et 40 avec les 3 autres séquences. Laissez leur taille comme tel pour l’instant.

8

Nommez ensuite chaque image du calque « video » en 10, 20, 30 et 40, nommez les ainsi seq1, seq2, seq3, et seq4

9

Nous arrivons à la fin. Cliquez sur le bouton 1, clic droit>Actions et insérez ce code.

on (release) {

 gotoAndPlay("sequence1");

}

10

Faites de même pour les 3 autres boutons en oubliant pas de changer le nom de la séquence. Maintenant chaque bouton correspond à une vidéo, donc à une chaine.

Testez votre animation en faisant Ctrl+Entrée
Si tout ne fonctionne pas, reprenez le tuto depuis le début c’est que vous avez du rater une étape ou que votre code est mal tapé.
Si cela fonctionne il ne vous reste plus qu’à l’habiller avec le calque fond sur lequel vous apposez la TV que je vous ai fourni au début, en remontant le calque en haut de la liste. Et en oubliant pas d’ajouter vos boutons sur celle-ci. N’oubliez pas de mettre vos vidéos à la bonne échelle.

Et voilà le résultat !

11

Arthelius

Si vous n'avez pas réussi, que vous avez des questions ou suggestions, venez les poster sur le forum

Posté par arthelius à 11:22 - Tutorial Flash - Commentaires [0] - Rétroliens [0] - Permalien [#]

Commentaires

Poster un commentaire







Rétroliens

URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=327702&pid=6977881

Liens vers des weblogs qui référencent ce message :