31 janvier 2009
Livre qui s'ouvre et se ferme
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
Pour réaliser ce tuto nous aurons besoin, d’une bibliothèque
de sons que l’on trouvait exclusivement dans flash 8, vous pourrez la
télécharger ici (ensuite installer la dans C:/Programmes (ou program
files)/Adobe/Flash CS3/ )
Et il nous faudra ensuite les différentes images de l’animation que j’ai au
préalable transformé sous Photoshop (je suis bon avec vous lol), télécharger le
ici.
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.
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.
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.
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.
Ensuite rendez vous dans Fenêtre>Bibliothèque commune>Sons.
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.
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.
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)
12 octobre 2008
Bouton flash mailto
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
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)
Maintenant faites un clic droit et cliquez sur Actions.
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"); }
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.
14 août 2008
Images défilantes
Fond défilant
Un joli effet images défilantes pour ce tuto très simple.
Créez un nouveau document de 700x550.
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.
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.
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.
Maintenant allez dans Fichier>Importer>Dans la bibliothèque, choisissez 5 images de votre disque dur et cliquez sur ok.
Voici vos images dans la bibliothèque.
Créez un nouveau calque ou vous allez déposer vos images nommez images.
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.
Maintenant alignez vos images, et grâce à l’alignement ajuster l’espace entre vos images et alignez les bien au centre.
Maintenant d’un clic droit transformer vos 5 images en un clip (convertir en symbole), donnez lui comme nom diapo, et centrez le bien.
Maintenant disposer votre clip à la droite de votre scène, en dehors du dégradé bleu.
Maintenant ajouter une image clé à la 100ième image, et cela sur les 2 calques.
Allez sur la 100ième image du calque images, et déplacez votre clip, en le mettant à l’extrême gauche du dégradé.
Maintenant ajouter une interpolation de mouvement. Et le tour est joué.
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
04 avril 2008
Mini Lecteur MP3
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
Puis cliquez sur Fenêtre>Bibliothèque commune>Boutons
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.
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();
}
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();
}
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. ^^
31 mars 2008
Faire un bouton
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
Nommez le « bouton » choisissez bouton entre les trois choix et cliquez sur « OK »
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.
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.
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.
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.
Cliquez sur séquence en dessous de la timeline pour revenir sur votre scène.
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.
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.
15 février 2008
Gardez vos polices
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.
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.
Votre police est maintenant un élément de votre bibliothèque.
Arthelius
Si vous avez des questions ou des suggestions rendez vous sur le forum.
06 février 2008
Fond animé
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.
Importez votre image dans la scène (celle qui se trouve en dessous) et placez la bien au centre.
Convertissez la en symbole graphique d’un clic droit, ayant pour nom nuage.
Dupliquez cette image deux fois, placez les deux copies des deux côtés de l’original, collés à l’image du centre.
Sélectionnez l’image du centre et faites Modification>Transformer>Renverser horizontalement.
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.
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
29 janvier 2008
animation : rouages qui tournent
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.
Changez la couleur de fond.
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.
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.
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.
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.
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.
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.
17 janvier 2008
Flocons de neige
Flocons de neige
Fichier exemple : 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.
Cliquez sur Insertion>Nouveau symbole, pour faire un nouveau clip.
Dans ce clip prenez l’outil Ellipse, dessinez un cercle bien au centre avec un dégradé allant du blanc (centre) au noir (bord)
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.
C’est la fin maintenant il vous suffit juste de coller ce code, en cliquant sur la première image, clic droit Actions.
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
16 janvier 2008
Lever et Coucher de soleil
Lever et coucher de soleil
Exemple : coucher_lever
Fichier source : coucher_lever
Pour continuer sur notre thème météo, voici le tuto pour faire un lever et un coucher de soleil.
Ouvrez votre nouveau document, puis prenez l’outil ellipse et tracez un joli cercle jaune sans contour. Une fois fait groupez votre forme, en faisant Ctrl+G.
Cliquez sur l’icône ajouter un guide de mouvement, dans la fenêtre calque.
Prenez l’outil plume, faites partir votre trait en dehors du cadre en bas, quasiment tout en bas, puis cliquez en face en dehors du cadre, ne relâchez pas votre doigt et tirer vers le bas votre trait afin de l’arrondir vers le haut.
Cliquez sur l’image 50 de la timeline, laissé votre doigt appuyé sur la touche Maj (la grosse flèche au dessus de CTRL) glissez vers le bas et faites un clic droit ajouter une image clé.
Maintenant sélectionnez votre soleil en image
1, et placé le sur le bout de la ligne, un petit rond doit apparaitre, ne relâchez
votre doigt que lorsque celui-ci apparait.
Faites de même avec le soleil de l’image 50 mais à l’autre extrémité, faites
bien attention au petit rond.
Maintenant la première image du calque 1 (le soleil) et allez dans les propriétés>interpolation choisissez mouvement.
Il ne vous reste plus qu’a vérifier le tout avec Ctrl+Entrée. Ça marche ? On passe à la suite !
Passons au fond. Créez un nouveau calque que vous placez en dessous du calque 1.
Prenez l’outil rectangle avec un joli bleu comme couleur de remplissage et aucun contour.
Maintenant vous allez mettre une image clé à l’image 5, 40, et 45.
Retournez à l’image 1, sélectionnez votre fond bleu, et choisissez un joli rose pale. Puis allez en image 40, remettez ce même rose pâle, et enfin en 45, un bleu marine.
Il ne vous reste plus qu’à sélectionnez l’intégralité des images du calque 2, en maintenant la touche Maj, et de mettre comme interpolation dans la fenêtre des propriétés Forme.
Et le test final avec Ctrl+Entrée
Si vous avez compris le principe, vous pourrez très bien ajouter une lune, et
ainsi créer un mouvement en boucle. Il est aussi possible de remplacer l’aplat
de rose par un dégradé comme vous pouvez le voir dans le fichier exemple.
Fichier exemple : coucher_lever
Arthelius
Si vous avez des questions ou de suggestiosn rendez vous sur le forum