un défi aux pros de l'actionscript

[crebindiou]

Je vous invite à aller voir ce site :
www.cutchemist.com ;

Celui qui a réalisé le site est un TUEUR, et je veux être comme lui : il a réussi à faire tourner les pages d'un livre en actionscript !
Voilà le défi : essayez de faire pareil, mais expliquez moi ensuite ! Je ne suis pas une pro du flash, c'est pourquoi je m'adresse à vous : est-ce que c'est du (on press) sur un bouton ? Est-ce que c'est du startDrag ? Est-ce qu'on conditionne la lecture d'un clip par le déplacement de la souris ? Comment fait-il pour faire revenir les pages en arrière ou les faire aller en avant lorsque la souris est relâchée ?

Et autre question : comment fait-on pour créer un player qui joue la musique e continu sans que ce soit trop lourd pour l'animation ?
Merci à tous,
crebindiou.

 

[geoffrey]

Salut,
Je n'ai pas de reponse a tes questions mais j'ai deja vu ce principe des pages du livre qui se tournent de cette maniere donc a mon avis en cherchant sur des sites sur l'action script, je suis sur que tu trouveras ce que tu veux (et donc le mec n'est pas une bete mais sais juste ou chercher les choses )

 

[jeanba3000]

Ok c'est pas simple à expliquer, mais à réaliser c'est simple : tu as chaque image bitmap avec un masque animé, l'image a un mouvement différent du masque et le tout donne l'illusion de l'apparition du verso par dessus le recto comme si on pliait la page et on la tournait en la plaquant. éventuellement tu peux ajouter une forme graphique transparente et floutée identique au masque pour faire une ombre portée sur la page du dessous. Après il faut une bonne gestion des superpositions, vu que tu as une animation pour chaque face de page, recto et verso ayant leur propre movie clip pour pouvoir tourner les pages dans un sens ou dans l'autre.

Je l'avais déjà fait pour un travail pour la BNF il y a 2 ans.

 

[Anonyme]

En tous cas c'est class

 

[poildep]

Ok c'est pas simple à expliquer, mais à réaliser c'est simple : tu as chaque image bitmap avec un masque animé, l'image a un mouvement différent du masque et le tout donne l'illusion de l'apparition du verso par dessus le recto comme si on pliait la page et on la tournait en la plaquant. éventuellement tu peux ajouter une forme graphique transparente et floutée identique au masque pour faire une ombre portée sur la page du dessous. Après il faut une bonne gestion des superpositions, vu que tu as une animation pour chaque face de page, recto et verso ayant leur propre movie clip pour pouvoir tourner les pages dans un sens ou dans l'autre.

Je l'avais déjà fait pour un travail pour la BNF il y a 2 ans.

Bon truc, j'essayerais bien de faire qqchse dans le genre. Merci ! :zen:

 

[crebindiou]

Alors comment fait-il pour faire que les pages retournent en arrière ou partent en avant en fonction de l'endroit où on lâche la souris ?

 

[jeanba3000]

Un peu de programmation je pense, il décide d'une zone où la page doit "repartir en arrière" et une où elle doit "finir de tourner" quand on lâche la souris, par exemple si on passe le pli entre deux feuilles. une fonction avec onEnterFrame fait alors avancer ou reculer l'animation de la page et donc la fait soir revenir à son point de départ soit arriver à son point d'arrivée. Un ptit contrôle pour la faire s'arrêter de boucler une fois arrivée à une extrémité. Avec de bonnes notions de maths, tu peux même entièrement programmer la translation du masque et de l'image de la page sans la moindre animation linéaire, en fonction de la position de la souris, ce qui facilite la gestion du lâcher en cours de route de la souris puisque tu as déjà la fonction de déplacement de tout ça. Enfin façon de parler bien sûr, ce n'est pas forcément à la portée du débutant. Dans la version que j'avais faite, il n'y avait pas cette notion de tirer la page avec la souris et de la lâcher en cours de route ; on cliquait et elle tournait entièrement, ce qui est plus simple à gérer.

 

[tatouille]

:siffle: :siffle: :siffle:

 

[crebindiou]

O.K., ça a l'air plus simple, maintenant que tu me dis qu'il est possible de commander à flash de lire la timeline en arrière (c'est bien ça ?). Mais je n'ai pas bien compris le principe du bitmap qui bouge différemment du masque...Je dois paraître chiante avec toutes mes questions, mais je pense que je ne connais pas assez d'actionscript pour y arriver et c'est ça que j'aimerais découvrir ! Disons qu'après ça, je pourrai pousser mes limites encore plus loin !

c'est clair qu'au pire, je fais un bouton qui déclenche l'animation du mouvement de la page, mais sans interactivité, c'est moins intéressant...

Merci en tout cas de tous vos posts, c'est sympa !

 

[jeanba3000]

Tu peux animer ton masque comme n'importe quelle forme vectorielle avec une translation basique, et ton image idem. ton masque ne doit laisser apparaître au début qu'un coin en bas de ta page puis se "laisse rattraper" par la page qui se supperpose de plus en plus avec lui et apparaît ainsi de plus en plus au fur et à mesure que ça se déplace sur la timeline du movie clip. Observe bien le site dont tu parles, imagine séparément la page et le masque et leurs translations respectives.

Pour programmer l'illustion de lecture arrière de la timeline, il faut faire une fonction qui à chaque tour ordonne d'aller à la frame précédente. Sinon ça n'est pas possible.

 

[poildep]

imact = leclip._currentframe;
leclip.gotoAndStop(imact--);

ça doit marcher

 

[crebindiou]

J'ai téléchargé un .FLA, sur un site, et je comprends mieux en utilisant le fichier aide de flash. Le gars qui a créé le bidule a utilisé un registerClass sur son clip, et sur chaque prototype il a mis des fonctions différentes. Ca simplifie énormément le truc ! Je pense que je vais faire comme ça en utilisant son modèle tout en l'adaptant "à mon cas" (lol). Mais effectivement, je n'avais pas pensé à ton astuce pour faire lire la timeline à l'envers....

Merci à tous, c'est cool d'avoir des réponses comme ça !

 

[crebindiou]

juste une pitite question : si je loade, à chaque page de mon livre, des photos etc... il faut que je mette dans l'animation de la page qui se tourne(celle qui s'affiche), un bitmap on est d'accord. Mais comment je retrouve l'interactivité de mes pages : les photos qui bougent, etc ? je fais un load movie une fois que la page a fini de tourner ?
Tu me parlais d'une bonne gestion des superpostitions, je crois que c'est clair.... Est-ce que, au chargement de mon site, il faut que tous les clips de pages avec leurs codes soient chargés ? C'est encore vachement confus dans min têteuh.... Je crois même que vous n'arriverez pas à me lire...
Je récapitule : est-ce qu'avant que mon livre s'ouvre au surfer, au preload par exemple, il faut que tous mes clips soient opérationnels ou puis-je les faire dépendre de la page en cours ? De toutes façons, pour chaque page qui se tourne, il me faut un FLA ? puis je les loade dans un clip invisible dans la scène principale ?

 

[jeanba3000]

De toute façon tu ne peux afficher une frame que si elle est chargée. Donc il te faut un preload pour patienter au moins le temps que ta prog soit chargée et une partie des pages pour que le visiteur puisse commencer à feuilleter avant d'avoir fini de tout charger. Évidemment si le type tourne très vite les pages, il risque de se retrouver bloqué avant d'avoir fini le chargement complet. Ça aussi c'est à gérer. C'est même à la bonne gestion des chargements et de la patience du visiteur qu'on reconnaît un bon site en Flash.

 

[lock]

J'ai téléchargé un .FLA, sur un site, et je comprends mieux en utilisant le fichier aide de flash. Le gars qui a créé le bidule a utilisé un registerClass sur son clip, et sur chaque prototype il a mis des fonctions différentes. Ca simplifie énormément le truc ! Je pense que je vais faire comme ça en utilisant son modèle tout en l'adaptant "à mon cas" (lol). Mais effectivement, je n'avais pas pensé à ton astuce pour faire lire la timeline à l'envers....

Merci à tous, c'est cool d'avoir des réponses comme ça !

J'arrive un peu tard dans la discussion mais j'avais bien aimé l'idée des pages d'un livre pour un site en Flash. Après avoir fureter sur le net j'étais tombé sur ça qui rendait très bien et que j'avais pu adapter http://www.iparigrafika.hu/, la source est téléchargeable, je l'ai mise en PJ, sinon elle est téléchargeable ici : http://www.iparigrafika.hu/pageflip/pageflip_v2_source.zip
Et il y a là : http://www.iparigrafika.hu/pageflip/pageflip2.html, quelques explications sur la réalisation du flip book

Si tu avais l'adresse où tu as téléchargé le .fla ça serait sympa qu'on puisse jeter un coup d'oeil pour comparer

 

[crebindiou]

Si tu avais l'adresse où tu as téléchargé le .fla ça serait sympa qu'on puisse jeter un coup d'oeil pour comparer

Punaise, Lock, Kestufoutais !!! C'est un truc comme ça qu'on attendait !!! Merci, Merci, Merci, Merci, Merci, Merci, Merci, Merci, Merci !!!! C'est excellent ! même si pour l'instant je comprends rien à son code...

En fait j'ai été sur www.flash-france.fr. Ce n'est pas un page flip que j'ai trouvé, mais étant en "détresse" j'ai téléchargé une anim faite par Daynos ("anim controller 001"), c'est une anim qui se joue en fonction de la position de la souris, laquelle calculée en pourcentage par rapport au nombre de frames de la timeline.... Je ne sais pas attacher des fichiers à a réponse sinon je te l'aurais mis là --comment t'as fait ??

 

[poildep]

J'arrive un peu tard dans la discussion mais j'avais bien aimé l'idée des pages d'un livre pour un site en Flash. Après avoir fureter sur le net j'étais tombé sur ça qui rendait très bien et que j'avais pu adapter http://www.iparigrafika.hu/, la source est téléchargeable, je l'ai mise en PJ, sinon elle est téléchargeable ici : http://www.iparigrafika.hu/pageflip/pageflip_v2_source.zip
Et il y a là : http://www.iparigrafika.hu/pageflip/pageflip2.html, quelques explications sur la réalisation du flip book

Si tu avais l'adresse où tu as téléchargé le .fla ça serait sympa qu'on puisse jeter un coup d'oeil pour comparer

Vraiment excellente cette ressource fla. Et ça donne un résultat encore plus baleze que le site de cutchemist vu qu'on peut bouger les pages comme on veut.

 

[lock]

Crebindiou : Pour attacher un fichier, quand tu réponds tu scrolles un peu vers lme bas et tu tombes sur options supplémentaires (bouton gérer les pièces jointes). Mais il ne prend que les fichiers "bmp doc gif jpe jpeg jpg pdf png psd txt zip" donc pas de fla ou de swf.
Pour utiliser le .fla de manière rapide tu n'as qu'à changer les clip contenus dans le dossier PageElements de la librairie. Tu arriveras directement un résultat personnalisé. Par contre si tu veux rajouter des pages, ajouter des fonctionnalités, il faut rentrer dans le code, mais tout est indiqué en commentaire. Par exemple pour ajouter des pages, tu n'as qu'à créer des clips, les nommer "pageNUMERO_DE_PAGE_SUIVANT" et les intégrer dans le code:

//page data... (export names/tearing flag)
pageOrder = new Array("page0","page1","page2","page3","page4","page5","page6","page7","page8","page9","page10","page11","page12","page13","page14","page15","page16","page17");
pageCanTear = new Array(false, false, false, false, false, false, false, false, false, false, false, true, true, false, false, false, false, false); //pages TEAROFF function!

page=0; //first page (normally it is 0 = the page before the cover = blank page)
maxpage=16; //last page (back cover, should be even number)
hcover = true; //hard cover on/off
clickarea = 64; //pixel width of the click sensitive area at the edges..
afa = 56; //width of the autoflip starter square.
gs = 2; //goto page flip speed
ps = 5; //mouse pursuit speed
es = 3; //flip speed after mouse btn release
canflip = true; //page flipping enabled


A noter qu'à la fin du code tu as des fonctions en commentaires que tu peux également utiliser :
/* you can use these functions:
gotoPage( destinationPageNo ); //quick jump to the page number: destinationPageNo; values = 0-maxpages;
autoflip(); //start autoflip (direction is calculated from _xmouse)
canflip //it's a variable. setting its value to false disables flipping
other functions of page turning is automatic;
*/

Donc voilà normalement tu devrais trouver ton bonheur avec ça...


poildep : Les mecs qui l'ont fait sont à mon avis bien balèze, ça gère en plus la transparence, les masque, etc... Et le tout est open-source donc réutilisable en citant les auteurs dans les crédits.

 

[crebindiou]

Réutilisable sans changer le nom des clips, alors. EXCELLENT ! Et en plus c'est gratuit. Ce sont des hongrois qui ont fait ça ? C'est dément....
J'en reviens pas : je viens d'imprimer le code, pour essayer de comprendre sans faire de conneries dessus : 9 pages ! Taille de la typo : 6....
Merci encore !