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.

14 août 2008

Images défilantes

Fond défilant

Fichier exemple

Un joli effet images défilantes pour ce tuto très simple.

Créez un nouveau document de 700x550.

01

Nous allons maintenant faire un fond en dégradé afin d’égayer le tout. Pour cela prenez l’outil rectangle, supprimer la couleur de contours et dans la couleur de fond sélectionner le dégradé bleu. Puis dessinez un rectangle de la taille de votre scène.

02

Maintenant dans la fenêtre des couleurs à droite, ajoutez un godet au dégradé et sélectionnez un bleu, puis dans le godet central mettez du blanc et dans le troisième ajouter le même bleu que dans le premier.  Changez le dégradé radial en linéaire.

03

Maintenant prenez l’outil transformation libre, et tournez votre rectangle à 90° afin que votre dégradé soit à l’horizontal, grâce au petit cercle qui se dessinera une fois que votre souris sera dans l’un des coins. Ensuite il suffit d’ajuster le fond à la scène.

04

Maintenant allez dans Fichier>Importer>Dans la bibliothèque, choisissez 5 images de votre disque dur et cliquez sur ok.

05

Voici vos images dans la bibliothèque.

06

Créez un nouveau calque ou vous allez déposer vos images nommez images.

06bis

Avec un glissé déposé, faites glissé vos 5 images, ne cliquez sur rien et profitez en pour mettre toutes vos images à la même taille (en largeur seulement). Pour cela indiquez 250 dans les propriétés la case L, vérifiez bien que le petit verrou qui se trouve à côté soit coché afin que l’image soit homothétique.

07

Maintenant alignez vos images, et grâce à l’alignement ajuster l’espace entre vos images et alignez les bien au centre.

08

Maintenant d’un clic droit transformer vos 5 images en un clip (convertir en symbole), donnez lui comme nom diapo, et centrez le bien.

09

Maintenant disposer votre clip à la droite de votre scène, en dehors du dégradé bleu.

10

Maintenant ajouter une image clé à la 100ième image, et cela sur les 2 calques.

11

Allez sur la 100ième image du calque images, et déplacez votre clip, en le mettant à l’extrême gauche du dégradé.

12

Maintenant ajouter une interpolation de mouvement. Et le tour est joué.

13

Il ne reste plus qu’à améliorer un peu le tout en ralentissant un peu la cadence et en ajouter une ombre portée sur le clip par exemple. Il est aussi possible de faire défiler les images dans la hauteur, ou en diagonale.

Arthelius

Si vosu avez des questions rendez vous sur le forum

Posté par arthelius à 12:04 - Tutorial Flash - Commentaires [7] - Rétroliens [0] - Permalien [#]
Tags : , , ,

Commentaires

Comment supprimer les contours

Salut, je voudrais savoir comment supprimer le contour blanc de mon animation flash car, quand je veux l'intégrer au HTML, le cadre surpasse mon texte ... (et c'est moche ^^)
Merci d'avance =)

Posté par Slizin, 31 octobre 2008 à 14:09

cadre

salut

lorsque tu colles ton code, tu doit avoir une ligne dans ton fichier HTML, nommer border= il faut mettre zéro.
Sinon ça vient de lorsque tu as fait ton fichier fla, tu as peut être mis un tour blanc.

Posté par arthelius, 31 octobre 2008 à 16:46

le mien xD

voilà le mien ! xD (j'ai pas utilisé ton tuto parce que je savais déjà faire défiler quelque chose, mais j'avais envie de le poster xD)

http://pspgraph.free.fr/tusors.swf

Posté par doeufman, 01 novembre 2008 à 16:45

Contours??

Bonjour,
Merci pour ce très bon tuto ^^
mais j'ai également un petit problème pour supprimer le contour blanc de mon animation flash et çà déborde sur le texte.
J'ai pas bien compris ce que je dois faire quand je prends l'outil rectangle, je fais le rectangle puis je supprime le contour??:'( j'y arriverai jamais!
parce qu'au niveau HTML on peut rien changer, j'ai tout essayer
Aidez moi!!
Merci d'avance :)

Posté par pixman, 01 novembre 2008 à 20:05

lorsque vous choisissez l'outil rectangle avant de le dessiner supprimer le contours, normalement ç devrai régler votre soucis.

Posté par arthelius, 01 novembre 2008 à 23:38

Merci, ca devrais marché :)

Posté par pixman, 03 novembre 2008 à 18:48

voir le résultat

je souhaite qu'il ait un lien pour voir le pour voir le resultat du tutoriel.
Merci

Posté par Mahabon, 09 décembre 2008 à 18:51

Poster un commentaire







Rétroliens

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

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