BD numérique : ze tuto pour que toi aussi tu copies moon

[moon]

Certain(e)s l’attendaient ! Le voilà.
Le tutorial sur de la BD numérique !
( du moins sur une forme de BD numérique parmi d'autres )

Il vous permettra de créer ET publier sur votre blog.

Exemple basique : http://lebloggirlydemoon.blogspot.com/search?updated-max=2009-11-04T01%3A02%3A00%2B01%3A00&max-results=1

Lisez pas à pas ! Aucune utilité pour les débutants de lire tout d'un coup, sans Flash sous les yeux ; )

_______________________________________________

Prérequis :

Flash.
Des images.
( je réalise tous les dessins et la mise en page sur Photoshop et consor avant même d’ouvrir Flash )

________________________________________________

Vous avez tout en main ? Alors on commence !

Au lancement de Flash, choisissez de créer un nouveau fichier en Action Script 2.

Petite vérification :
Faites un clic droit sur la fenêtre principale qui contient la feuille blanche.
Par le biais des « propriétés du document » vous pourrez définir la taille en largeur et en longueur ( par défaut c’est du 640 x 480 ).

1- Préparation

Faites un glissé déposé de vos images vers la fenêtre « bibliothèque » sur la droite.
Là encore, par un clic droit, vous pourrez définir certains paramètres.
------------------------------------------------------------

2 – Un second calque

A présent, dans la fenêtre Scénario en bas, insérez un nouveau calque en faisant un nouveau clic droit.
Une image clé vide est directement créé: un petit rectangle avec un rond apparaît dans cette fenêtre de Scénario ; l’espace pris par ce petit rectangle symbolise 1 frame.

Un clic droit dessus vous permettra d’accéder tout en bas de la liste à la très utile fenêtre «Actions».
A l’intérieur de celle-ci, il vous faut exactement écrire ça :

stop();

Ce simple petit code permet d’éviter l’enchaînement automatique d’une image sur la suivante.
Dans la fenêtre Scénario, vous remarquerez un petit a sur le petit rectangle, confirmant la présence du code.

Info utile : grâce à la fonction "copier les images", "copier les images" vous pourrez répéter l’opération sur les cases suivantes sans avoir à copier le code à chaque fois !

Ne revenez plus à ce calque jusqu’à l'étape 5.
----------------------------------------------------------

3 – Un bouton

Maintenant, tout tout en haut, cliquer sur Insertion puis Nouveau symbole.
Entrez le nom de votre choix ( moonisthebestoftheworld par exemple ) et choisissez Bouton dans Type, juste en dessous.

Après avoir validé, il devrait se mettre automatique dans la bibliothèque à droite, avec les images.

Une nouvelle fenêtre principale est également apparue. Inutile pour ce que nous voulons faire.
Pour la précision quand même, vous êtes sur une fenêtre permettant de réaliser les différentes étapes d’un bouton ( enfoncé, cliqué, survolé, etc ).

Revenez en cliquant sur « Séquence » en haut de cette fenêtre principale.
-----------------------------------------------------------

4- Le premier calque et le bouton

Nous allons désormais nous occuper du calque existant depuis l’ouverture.

Une image clé est déjà présente.
Faites un glissé déposé du bouton nouvellement crée vers la fenêtre principale.
Un petit cercle "marqué" doit apparaître en haut à gauche de la feuille blanche.

A ce stade ( si nous testions avec 2 images ), la simple présence de ce bouton dans l’image permettrait, en appuyant sur la touche Entrée de passer à l’image 2. Vous avez donc créé votre premier diaporama simplifié ! : )
Mais on peut améliorer encore un peu ce principe !

Directement après le glissé deposé, faites un clic droit sur le petit cercle "marqué" puis « Actions ».
Il va falloir entrer un nouveau code.

on (keyPress "<Right>"){
nextFrame();
}

on (keyPress "<Left>"){
prevFrame();
}

Vous n’y connaissez rien en Action Script, et pourtant, je suis persuadé qu’en analysant un peu vous comprendrez un peu la signification de ce code. Arrêtez donc de lire plus bas et essayez de deviner tiens ; )

…

tic tac …

Alors ?

…

Réponse :

keyPress : pression d’une touche du clavier
Right : touche fléchée droite.
nextFrame : frame suivante ( qu’on pourrait traduire, ici, par image suivante ).

Je vous laisse traduire la seconde partie du code ( c’est facile alors ne lisez pas la phrase suivante ! ).

En appuyant sur la touche droite, par ce code vous pourrez désormais passer à l’image suivante et inversement revenir à la précédente avec la touche gauche : )
---------------------------------------
4 - a
Retour sur la fenêtre Scénario pour faire un copier les images de cette première frame ( notez le a qui vient d’apparaître ) puis un coller les images juste à côté pour créer la frame suivante ( sans avoir à retaper le code ). Méthode personnelle : j’essaye d’en avoir quelques unes d’avance.
---------------------------------------
4 - b
Revenez/cliquez sur la première frame. Glissez deposez votre première image ( ou plutôt celle qui doit apparaître en premier ) sur la fenêtre principale. Normalement, vous devriez pouvoir facilement l’aligner avec les bords.

Il vous suffit désormais de reprendre les actions 4 – a et 4 – b autant de fois que votre nombre d’images.
----------------------------------------

5 – Le second calque, le retour de la vengeance

Là encore, grâce à la fonction copier les images,coller les images, vous allez créer autant de frames contenant le code stop(); que d'images.
----------------------------------------

6 – Finalisation

Faites Ctrl+Entrée pour tester ça.

Ça ne fonctionne pas ? Je me suis peut-être planté dans mon explication ou alors vous n’avez pas été attentif au cours ! ( c’est ça de gribouiller des dessins sur le coin de son cahier pendant que le prof parle )

Ça fonctionne ? Parfait !!! On finalise tout ça alors : )

Allez dans Fichier tout en haut, puis Exporter/Exporter l’animation.
Le fichier créé va être en .swf
---------------------------------------------------------

7 - Publication

A présent, il faut que votre jolie création soit visible de tous : )

Pour se faire, hébergez votre fichier swf. sur ce site : http://localhostr.com/
Conservez la fenêtre ouverte.

Pour qu'il fonctionne dans une résolution de votre choix ( qui collera mieux que le plein écran ), il vous faut un lecteur à placer dans votre note ( de blog ).

Je vous communique un petit code qui vous permettra de le faire :

<embed src="lien donné par le site localhostr" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/x-shockwave-flash" quality="high" bgcolor="#00000" width="640" height="480"></embed>

width : c'est pour la largeur
height : pour la hauteur

Complétez avec le lien du site Localhostr, modifiez les dimensions et copiez le tout dans votre message.

Voilà, c'est fini : )
( je mangerais bien une madeleine pour fêter ça, pas vous ? )

_______________________________________________________

Ce tutorial n’est certainement pas exempt de défauts ( la mise en page est affreuse n'est-ce pas ? ) ; je vous invite donc à venir compléter/corriger les erreurs que j’ai pu écrire.

En espérant néanmoins que ma méthode vous aura un peu aidé.

Amusez-vous bien.
Au plaisir de découvrir vos créations.

moon

[Gaylord]

Je n'ai pas encore testé, mais l'idée du tuto flash me plait beaucoup !

(j'ai toujours pensé que flash était un bon support pour la bd, voir la bd interactive !)

Bravo !

[moon]

Je fais suite à une réflexion qu'on vient de me faire et qui, ma foi, est légitime.

Importer des images de cette manière alourdi ( logiquement ) le poids du fichier !

Dessiner directement en Flash permet d'alléger grandement le fichier, de profiter de petit plus ( redimensionnement aisé du format, calage des images, etc ... ).

Enfin, on me précise qu'il y aurait un diaporama/slideshow Flash dans les modèles proposés au démarrage ( que je n'ai pas pris la peine de regarder ).
J'aurais donc fait tout ça pour rien ?

[aXelis]

Mais sinon, le fichier .swf se créé tout seul dans le répertoire du fichier .fla aussi lorsque tu fais "ctrl+entrée"

Et pour poster sur mon blog un fichier swf qui roule, je dois passer par un petit code html.

<object width="550" height="400" id="clip" data="http://storage.canalblog.com/39/05/154629/44525369.swf" type="application/x-shockwave-flash">
<param value="http://storage.canalblog.com/39/05/154629/44525369.swf" name="movie" />
<param value="high" name="quality" /></object>

Avec les dimensions à préciser selon la taille de mon fichier et l'adresse à laquelle canalblog me l'a hébergé (à mettre deux fois ici)

[Shotaro]

Ah c'est sympa ce petit tuto pour faire les BDs web nouvelle génération ! Il est logique que dessiner en flash soit plus léger qu'importer ses images dans le fichier, d'un côté on a du bitmap ou assimilé et de l'autre du vectoriel, le second étant beaucoup beaucoup mais alors beaucoup moins gourmand en terme de place

En tout cas merci pour ta peine, il faudra que j'essaie d'en faire une un de ces quatre (enfin quand j'aurais le temps en fait ^o^), mais c'est pas évident, car au-delà de l'aspect technique, ça demande de repenser entièrement sa narration mais c'est un beau challenge.

[moon]

J'ai communiqué un lien de site pour permettre la publication sur le net.

Mais après un certain de visionnage, il semble que le fichier soit automatiquement supprimé, il faut donc reuploader le fichier. A terme c'est assez contraignant.

Si quelqu'un a une solution sous forme d'explication qui pourrait compléter ce tuto, n'hésitez pas.
Merci.

[Shotaro]

Eh bien, http://imageshack.us héberge des *.swf par exemple. Sinon une ferme de blog comme Over-Blog permet d'uploader des fichiers flash me semble-t-il (Je vais vérifier, je reviens !)

...


Alors oui c'est possible mais seulement avec le pack premium :/
Mais bon, imageshack.us est une bonne alternative sinon les ftp de pages perso que proposent quasiment tous les FAI sont une solution. Par exemple, je suis chez SFR-Neuf et j'ai un espace de stockage qu'ils appellent "9 Go", y a les très connues pages Free aussi etc..

[Dr_Folaweb]

Petit bug avec le code que fourni webcomics.fr pour afficher un fichier swf (on saute systématiquement une frame), mais ton code avec <embed> fonctionne bien.

http://drfolaweb.webcomics.fr/page/en-a ... deo-ignito

Par contre, le tuto est améliorable, c'est un fait Je crois que virer l'humour au profit de la clarté serait une bonne chose, quitte à le réintroduire ensuite, quand le texte fonctionnera.

Cela manque de précision sur quoi et où il faut cliquer. Il n'est pas dit ce qu'on doit faire des images une fois dans la bibliothèque. Les digressions pourraient être regroupées pour ne pas éclater le texte principal.

Je découvre flash —en anglais— et il m'a fallu relire quatre ou cinq fois ton tuto avant de pouvoir m'y retrouver. "Frame", par exemple, ne se traduit pas vraiment par "image" (frame=cadre), même si c'est bien le mot employé dans la VF.

Sinon, j'suis pas connaisseur d'action script, mais je suis sûr qu'il y a moyen de s'en tirer autrement qu'en copiant-collant deux fois chaque frame !

[Dr_Folaweb]

Plutôt que de copier-coller l'action et la détection de la pression des flèches sur chaque frame, un calque vide suffit, à condition d'étirer la frame sur la totalité de l'anim'.

[Sixelak]

Bon allez trop bien j'ai fait un strip en flash, trop bien !
http://sixelak.free.fr/index.php?page=1

Trop bien !


Merci moon !

Je sais pas si avec ça on peut conquérir le monde mais c'est déjà un début.

[Sixelak]

Alors j'ai fait un nouveau strip en diaporama mais cette fois sans utiliser le diabolique flash mais avec le javascript alors pour ceux qui serais intéressés je peux leur donner les sources de plus qu'il n'y a pas de connaissance à avoir pour l'utiliser et pas besoin d'acheter\craquer un logiciel à 1500 euros.

Bon voilà le résulta : http://sixelak.free.fr/index.php?page=4
En prime vous pourrez voir ma sale gueule