Tuto Flash

13 500x421 [Illustrator, Photoshop, etc.] Bien placer les ombres

Il y a quelques temps, lors d’un sondage, une lectrice m’avait demandé si je pouvais faire un tuto expliquant comment placer les ombres. Une idée forte intéressante, car il s’agit là d’un fondement du dessin : savoir gérer les ombres et les lumières. C’est ce que nous allons essayer de faire aujourd’hui avec ce petit tuto très explicatif.

Continuer la lecture

VN:F [1.9.18_1163]
Evaluez cet article :
Rating: 7.2/10 (20 votes cast)

Livre qui s’ouvre et se ferme

Je vous propose aujourd’hui de réaliser un livre au style
ancien, ou vous pourrez présenter vos travaux ou photos, le tout dans un livre
qui s’ouvre. Comme vous pouvez le voir sur mon site d’illustration à cette
adresse : www.vianney.fr/illustrations

Attention !
Ce tuto  nécessite l’utilisation de ressources. Or ces ressources étaient hébergées sur Megaupload (vous connaissez tous le sort de ce site), et après vérification je en possèdes plus ces fichiers sources. Je sais c’est bête. Il vous faut donc trouver sur internet un fichier son imitant le bruit des pages (vous pourrez en trouver gratuitement sur le site sound-fishing) et une page vieillit que vous pourrez trouver facilement sur un site de ressources comme stocx ou devianart. Encore désolé pour ce désagrément.

Nous avons maintenant en mains, tous les outils nécessaires.
Ouvrez un nouveau, et importer toutes les images de l’archive dans votre
bibliothèque.

35347979 500x345 Livre qui souvre et se ferme

35348013 203x500 Livre qui souvre et se ferme

Ensuite la méthode va être simple, il va juste falloir
mettre les différentes toutes les 5 images.
Commençons par la page de gauche et de droite. Faites glisser la page de droite
sur la scène. Coller la en bas, à droite.

35348027 500x288 Livre qui souvre et se ferme

En faisant ceci, nous allons gagner du temps pour la suite,
et surtout cette page sera toujours au bon endroit. Maintenant d’un simple clic
droit, insérer une image-clé toutes les 5 images. Et cela jusqu’à la 95 images.

35348038 500x93 Livre qui souvre et se ferme

Maintenant il va juste falloir insérer les différentes
images de l’animation toutes les 5 images. Je vous explique pour la première,
et vous donnerai juste la liste ensuite. La page de gauche doit être supprimé
sur toutes les images jusqu’à l’image 90. Il suffit de faire glisser les images
sur la scène.
* image 5 = page_gauche02
* images 10 = page_gauche03
* image 15 = page_gauche04
* image 20 = page_gauche05
* image 25 = 05
* images 30 = 04
* images 35 = 03
* images 40 = 02
* images 45 = 01

Nous voici à la moitié de l’animation, pour le reste c’est
la même chose mais à l’envers, on repart de 02 jusqu’à page_gauche01.

Votre livre est terminé mais afin de rendre l’animation plus
réaliste nous allons simplement ajouter le bruit des pages qui tournent. Pour
cela ajouter un nouveau calque.

35348062 Livre qui souvre et se ferme

Ensuite rendez vous dans Fenêtre>Bibliothèque
commune>Sons.

35348082 500x252 Livre qui souvre et se ferme

Maintenant choisissez le son book drops et faites le glisser
sur votre scène, ajouter une image clé en 50 et reglissez le son book drops.

35348106 500x91 Livre qui souvre et se ferme

Il reste une petite touche finale, rendre l’animation un peu
plus fluide, pour cela rien de plus simple double cliquez sur la cadence (voir
photo), et passez la en 28 images/secondes.

35348124 Livre qui souvre et se ferme

J’ai essayé d’être le plus clair possible, mais les tutos
pour flash sont les plus compliqués à écrire mais aussi à comprendre, je
pensais donc refaire ce tuto mais en vidéo en fonction des demandes, si vous
désirez donc avoir ce tuto en vidéo laissez moi un petit commentaire.
De plus je pensais le complété avec un second tuto sur les pages qui tournent
avec un simple clic, de même si vous désirez voir ce tuto faites le moi savoir.

Arthelius

Si vous la moindre question, merci de la poser sur le forum (enregistrement obligatoire)

VN:F [1.9.18_1163]
Evaluez cet article :
Rating: 5.7/10 (16 votes cast)

Créer un mailto sur un bouton flash

Un tuto vraiment simpliste pour vous expliquer comment créer
un bouton flash, pour vos sites qui permettra à vos visiteurs de vous contacter
grâce à leur boite mail favorite.

Créer un nouveau document en AS2, puis allez dans
Fenêtre>Bibliothèque commune>Boutons

31176978 500x231 Bouton flash mailto

Maintenant choisissez le bouton de votre choix (c’est pour l’exemple
après, bien entendu, vous fabriquerez vos propres boutons, créer sous photshop
ou illustrator par exemple)

31176988 500x223 Bouton flash mailto

Maintenant faites un clic droit et cliquez sur Actions.

31177010 Bouton flash mailto

Ensuite coller le code qui suit, bien sur il faut changer l’adresse
mail par la votre. Appuyez sur F9 pour ouvrir la fenêtre actions.

on (release) { getURL("mailto:arthelius5@aol.com?subject=Mailto
Flash"); }

31177110 500x67 Bouton flash mailto

Il ne reste plus qu’a faire un petit
Ctrl+Entrée pour vérifier si cela marche, et m’envoyer un mail par l’occasion
par exemple.

Arthelius

Si vous avez des questions, n'hésitez pas le forum est là pour ça.

VN:F [1.9.18_1163]
Evaluez cet article :
Rating: 10.0/10 (3 votes cast)

Fond défilant

Fichier exemple

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

Créez un nouveau document de 700×550.

28925681 Images défilantes

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.

28925697 499x371 Images défilantes

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.

28925725 Images défilantes

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.

28925739 Images défilantes

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

28925750 500x343 Images défilantes

Voici vos images dans la bibliothèque.

28925759 Images défilantes

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

28925770 Images défilantes

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.

28925781 Images défilantes

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

28925788 Images défilantes

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

28925798 Images défilantes

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

28925809 500x148 Images défilantes

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

28925820 Images défilantes

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

28925830 500x173 Images défilantes

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

28925836 Images défilantes

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

VN:F [1.9.18_1163]
Evaluez cet article :
Rating: 6.3/10 (7 votes cast)

Mini lecteur MP3

Fichier source : minilecteur
Fichier exemple : minilecteur

Tuto proposé par X-bead sur le forum, puis photographié et écrit
par Arthelius.

Nous allons voir comment faire un mini lecteur MP3, qui lira
qu’une seule musique. Idéal pour mettre un extrait de musique sur un site. Ceci
a pour but de voir comment faire un mini lecteur MP3, avant de voir comment
faire un lecteur plus gros et complet dans un futur tuto.

Attention ! Ce tuto est fait en actionscript 2.0

Ouvrez un nouveau document en AS 2.0

24026869 Mini Lecteur MP3

Puis cliquez sur Fenêtre>Bibliothèque commune>Boutons

24026887 Mini Lecteur MP3

Vous trouverez à l’intérieur des boutons déjà tout fait,
vous pouvez aussi faire un bouton vous-même grâce au précédent tuto.

Une nouvelle fenêtre s’ouvre, double cliquez sur le dossier « playback
flat » cliquez sur flat blue play et faites glisser votre boutons dans la
scène.

24026892 Mini Lecteur MP3

Faites un clic droit sur votre bouton, et cliquez sur
actions, et la collez le code suivant (l’adresse est une adresse d’exemple,
vous pouvez très bien prendre un autre fichier MP3 trouvez sur le net, elui ci
se lira directement à partir du site, je vous conseil donc de l’héberger sur
votre site pour éviter le vol de bande passante) :

on (press) {
mySound = new Sound();
mySound.loadSound(“http://error.view.free.fr/musiques/the_do.mp3“,true);
loaded = mySound.getBytesLoaded();
total = mySound.getBytesTotal();
}

24026905 500x115 Mini Lecteur MP3

Et voici votre mini lecteur MP3. Si vous désirez mettre un
bouton stop, choisissez le fichier flat blue stop, que vous glisserez sur la
scène et auquel vous apposerez ce code AS 2.0

on (press){
stopAllSounds();
}

24026946 Mini Lecteur MP3

Il ne vous reste plus qu’a mettre votre document à la bonne
échelle et d’habiller tout ceci.

Fichier exemple : minilecteur

Arthelius

Si vous avez des questions le forum est là pour ça. ^^

VN:F [1.9.18_1163]
Evaluez cet article :
Rating: 7.8/10 (6 votes cast)

Faire un bouton

Fichier source : bouton

Exemple : bouton

Si vous désirez mettre la moindre interactivité sur vos
documents flash, vous devrez obligatoirement passer par des boutons. C’est
primordial dans Flash, car les boutons peuvent avoir des fonctionnalités ActionScript
que les simples dessins vectoriels ne peuvent avoir.

 

Créez un nouveau document. Puis allez dans Insertion>Nouveau Symbole

23881338 Faire un bouton

Nommez le « bouton » choisissez bouton entre les
trois choix et cliquez sur « OK »

23881383 Faire un bouton

Votre scène a changé ainsi que votre timeline, vous êtes
maintenant dans votre bouton. Les 4 images de la timeline correspondent aux 4
états de votre bouton : Haut, lorsqu’il est présent sans être activé,
Dessus, lorsque la souris passe dessus, Abaissé, lorsque celui-ci a été cliqué,
et enfin cliqué pour définir la zone cliquable.

23881398 Faire un bouton

Prenez l’outil de dessin, ellipse ou rectangle à votre
convenance, puis allez dans la couleur de contour pour la supprimer puis mettez
la couleur que vous désirez pour la couleur de remplissage.

23881431 Faire un bouton

Puis dessinez une forme sur la scène, une fois cela fait,
cliquez sur l’image dessus puis d’un clic droit ajouter une image clé, faites
de même pour l’image abaissé. Voici votre bouton de fait.

23881452 Faire un bouton

Maintenant, prenez l’outil flèche noire, sélectionner votre
forme puis l’image dessus et changez la couleur de fond, puis faites de même
pour l’image abaissé. Votre bouton comporte maintenant 3 couleurs selon l’image
sur laquelle vous cliquez.

23881472 500x300 Faire un bouton

Cliquez sur séquence en dessous de la timeline pour revenir
sur votre scène.

23881492 Faire un bouton

Si votre bibliothèque est bien ouverte, vous devriez voir
votre bouton à l’intérieur, cliquez dessus et faites le glisser jusqu’à votre
scène.

23881512 Faire un bouton

Faites un Ctrl+Entrée pour voir le fruit de vos efforts.
Vous pouvez bien entendu ajouter du texte ou des effets à chaque état de votre
bouton sans soucis. Petit conseil, essayez au maximum de bien faire votre
bouton sur votre première image afin que les copies qui suivent soit le plus
conforme possible et qu’il n’y est pas de soucis de décalage.

Exemple : bouton

Arthelius

Si vous avez des questions ou des suggestions rendez vous sur le forum.

VN:F [1.9.18_1163]
Evaluez cet article :
Rating: 7.0/10 (6 votes cast)

Les polices restent visibles

Vous avez surement déjà du avoir ce soucis, vous ouvrez un
document flash mais il manque les polices. Avec ce tuto nous allons voir comment
faire pour que vos polices soient visibles de tous.

Dans votre document, faites un clic droit dans la
bibliothèque, en faisant attention a ce que votre souris ne se trouve sur aucun
élément. Sélectionnez Nouvelle police.

22179689 Gardez vos polices

Entrez un nom pour désigner votre police, puis sélectionnez
votre police dans le menu déroulant. Cochez ou non les cases du style de votre
police. Puis cliquez sur Ok.

22179695 Gardez vos polices

Votre police est maintenant un élément de votre
bibliothèque.

22179703 Gardez vos polices

Arthelius

Si vous avez des questions ou des suggestions rendez vous sur le forum.

VN:F [1.9.18_1163]
Evaluez cet article :
Rating: 10.0/10 (3 votes cast)

 Arrière plan qui
défile

fichier exemple : nuages
Fichier source : nuages

Le temps des fonds statiques est révolu, avec ce tuto nous
allons voir comment faire un fond qui défile.

Créez un nouveau ActionScript 3, puis changer les paramètres
de votre scène, par ceci : taille, 500 pixels de largeur, et 350 de
hauteur, et une vitesse de 30 images seconde pour que l’animation soit fluide.

21842352 Fond animé

Importez votre image dans la scène (celle qui se trouve en
dessous) et placez la bien au centre.

21842371 Fond animé

Convertissez la en symbole graphique d’un clic droit, ayant
pour nom nuage.

21842377 Fond animé

Dupliquez cette image deux fois, placez les deux copies des
deux côtés de l’original, collés à l’image du centre.

21842387 500x132 Fond animé

Sélectionnez l’image du centre et faites
Modification>Transformer>Renverser horizontalement.

21842395 Fond animé

Sélectionnez les trois images et convertissez-les en symbole
de clip, avec un alignement à gauche. Nommez le clip fond, n’oubliez pas de nommer aussi votre occurrence Fond.

21842400 Fond animé

Créez un nouveau calque, nommé AS et collez ce code à l’intérieur

Fond.addEventListener
(Event.ENTER_FRAME,deplacement);

function
deplacement (evt:Event):void{

evt.target.x -= 2;
if(evt.target.x <= -1000) {
 evt.target.x = 0;

 }
}

Voilà votre fond animé est créé. Voir le fichier :nuages

Arthelius

Si vous avez des questiosn ou des suggestions rendez vous sur le forum

 

VN:F [1.9.18_1163]
Evaluez cet article :
Rating: 4.8/10 (5 votes cast)

Rouages qui tournent

exemple : rouage
fichier source :rouage

Dans Illustrator nous avons vu comment faire un rouage 3D,
maintenant nous allons voir comment faire tourner des rouages avec flash.

Dans votre nouveau document, prenez l’outil ellipse et
tracez un grand cercle au centre.

21562715 animation : rouages qui tournent

Changez la couleur de fond.

21562731 animation : rouages qui tournent

Et maintenant tracez un cercle plus petit, placez le en haut
au centre (si vos repères sont magnétisés, normalement un petit rond apparait)
et faites un Ctrl+C puis un Ctrl+V, et placez le second cercle, en face en bas.

21562745 animation : rouages qui tournent

Sélectionnez les 2 formes et allez dans
Fenêtre>Transformer, mettez 45° dasn pivoter, et cliquez sur la petite icône
en bas>  « copiez et appliquez la
transformation. » Récliquez sur l’icône 3 fois.

21562768 500x263 animation : rouages qui tournent

Sélectionnez toutes les formes vertes (ou d’une autre
couleur chez vous) et appuyez sur la
touche suppr. Pour supprimer et ainsi
créer votre rouage.

21562793 animation : rouages qui tournent

Faites Ctrl+V suppirmer un cercle et posez l’autre sur le
rouage, grâce aux outils d’alignement (dans fenêtre si vous ne l’avez pas, il
est collé au menu transformation) et encore une fois supprimer ce cercle vert.

21562806 animation : rouages qui tournent

Maintenant sur votre timeline, allez à 10 et mettez une
image grâce au clic droit, puis allez dans les paramètres et ajoutez lui une
interpolation de mouvement, puis dans rotation mettez vers la gauche.

21562817 500x90 animation : rouages qui tournent

Puis faites un clic droit sur votre forme et transformer le
en clip. Nommez le rouage1 ça sera plus simple. Voilà votre rouage de créé. Maintenant
vous pouvez très bien dupliquez cette forme et ce coup ci fait le tourner vers
la droite ainsi vous aurez deux rouages qui s’enroulent, n’oubliez pas de
nommer cette seconde forme rouage2, et de mettre le rouage qui vont vers la droite
dans le même calque et celui qui va vers
la gauche dans un autre.

exemple ici : rouage

arthelius

Si vous avez des questions ou des suggestiosn rendzez vous sur le forum.

VN:F [1.9.18_1163]
Evaluez cet article :
Rating: 3.7/10 (6 votes cast)

Flocons de neige

Fichier exemple : neige

Fichier source :neige

Après la pluie, on passe à la neige, avec
cette fois ci de l’actionscript.

Ouvrez votre nouveau document, et mettez comme
couleur d’arrière plan du noir, en cliquant dans les propriétés sur taille.

21136025 Flocons de neige

Cliquez sur Insertion>Nouveau symbole, pour
faire un nouveau clip.

21136039 Flocons de neige

Dans ce clip prenez l’outil Ellipse, dessinez
un cercle bien au centre avec un dégradé allant du blanc (centre) au noir
(bord)

21136048 500x212 Flocons de neige

Revenez sur votre scène, importez votre clip
au dessus de votre cadre noir en haut à gauche, que vous nommerez flocon dans
le nom d’occurrence.

21136058 Flocons de neige

C’est la fin maintenant il vous suffit juste
de coller ce code, en cliquant sur la première image, clic droit Actions.

 

21136072 Flocons de neige

for (i=0; i<=200; i++) {

 flocon.duplicateMovieClip(“flocon”+i,
i);

 this["flocon"+i]._x
= random(500);

 this["flocon"+i]._y
= random(400);

 this["flocon"+i]._height
= random(20);

 this["flocon"+i]._width
= this["flocon"+i]._height;

}

 

vitesse = 5;

 

ralentit = true;

onEnterFrame = function () {

 

 if
(ralentit == true) {

 

 choix
= Math.floor(random(2));

 

 ralentit
= false;

 

 ajout
= -1;

 }

 if
(choix == 0 || choix == 1) {

 

 if
(choix == 1) {

 

 signe
= 1;

 }

 

 if
(choix == 0) {

 

 signe
= -1;

 }

 

 vitesse
+= ajout;

 

 if
(vitesse<=5) {

 

 ajout
= 1;

 }

 

 if
(vitesse>=20) {

 

 ralentit
= true;

 }

 }

 

 for
(i=0; i<=200; i++) {

 

 vent
= this["flocon"+i]._height/vitesse*signe;

 

 descente
= this["flocon"+i]._height/5;

 this["flocon"+i]._y
+= descente;

 this["flocon"+i]._x
+= vent;

 

 if
(this["flocon"+i]._y>=410) {

 

 this["flocon"+i]._x
= random(500);

 }

 

 if
(this["flocon"+i]._x>=510) {

 

 this["flocon"+i]._x
= -5;

 }

 

 if
(this["flocon"+i]._x<=-10) {

 

 this["flocon"+i]._x
= 505;

 }

 }

};

Arthelius

Si vous avez la moindre questions ou suggestions, n’hésitez pas à vous rendre sur le forum

Fichier exemple : neige

VN:F [1.9.18_1163]
Evaluez cet article :
Rating: 7.0/10 (1 vote cast)

messages récents du forum

Devenir membre

Archives

Abonnez vous au blog

ChargementChargement


Nuages de mots 3D

Débuter avec …

Ebook

Partenaires

Silverfox, site de tutos Photoshop et Illustrator

Page facebook