Re: ANIM ORAVOX

[SergeV]

Pour animation APNG (site gratuit)

https://ezgif.com/apng-maker

[SergeV]

voila l'anime du son

[JYS]

Voici le WIP pour l'animation des étoiles de fond en fonction du play/pause/rewind

https://www.mojofarmer.com/oravox/Stars ... se_rewind/

Lancez le fichier Stars_control.html

La vitesse et le fading et quantité d'images en fading/trail sont ajustable par slider en bas de page, ainsi, une fois décidé par le grand manitou, ceux-ci pourront être hard-coded.

La quantité de colonnes 8 ou 10 est automatiquement définie par la quantité d'images fournie dans le code:

Code: Select all

<div class="image-track" id="imageTrack" style="--fade-speed: 300ms">
            <div class="image-container"><img src="icon-72.png" alt="Image 1"></div>
            <div class="image-container"><img src="icon-72.png" alt="Image 2"></div>
            <div class="image-container"><img src="icon-72.png" alt="Image 3"></div>
            etc...

Pour l'instant le js et styling sont dans le html.

J'ai ajouté un drop down pour le de choix de blending des étoiles sur le fond.
Dans tous les modes de blending que permet le CSS, certains n'ont pas d'effet car la couleur des étoiles n'est pas appropriée pour ce type d'effet et on ne voit rien qui se passe, le png disparaît, normal. Faudrait changer la couleur des étoiles et refaire un png.... etc....

Perso je suis pour le Screen ou Color-Dodge.

[CPAS]

ca rend bien !!

par contre, concentrez-vous bien sur la partie graphique (png) de l'animation pour ne pas faire trop d'efforts inutiles/redondants (sauf si ca vous pete ) parce que pour des raisons d'intégration je vais recoder toute la partie logique (javascript, et un max en css pour dépendre le moins possible de js)

[SergeV]

Très bien je trouve !, on verra au montage final.
Le fichier fait 12ko !!!?? extra non? Xavier?

- De mon coté j'hallucine, c'est très bien même le sens de play, de rewin et arret. c'est terrible.

- Après ce seras plus probablement 8 Etoiles que 10 car sinon elle dépassent du format général. Ce qui diminuerait sans doute le poid de l'image non? ou pas forcément?

- On va continuer les animes comme cela !? .ok? -Cela t'aide quand même Xavier?

Le bebe grandit a vue d'œil par devant et par derrière .. c'est incroyable.. merci à tous

[JYS]

Voici le WIP pour l'animation de la timeline

- 8 étoiles qui gagnent de l'opacité en fonction de la quantité de secondes jouées du fichier mp3.
- on peut changer la quantité de secondes à jouer pour tester diverses situations.
- on peut accélérer 2x 4x le temps pour voir que cela reste consistent avec les fichiers plus grands.

https://www.mojofarmer.com/oravox/Stars ... melinebar/

Lancez le fichier TimelineBar01.html - Première version
Lancez le fichier TimelineBar02.html - Avec l'adaptation suggérée par Serge dans le post ci-dessous


Buenos à tous!

[SergeV]

Salut Jean Yves, Xavier et Myq
Bien pour les animes.. !!

Une remarque ergonomique de lecture.

1 TIMELINE : Peux t'on imaginé une surface jaune qui viens recouvrir l'Etoile de gauche a droite sur toute la ligne comme une vrais timeline mais dans les etoiles separement ; qui commence a s''allumé (recouvrir) a la fin de l'autre.

Avantages : ce qui permettrais de mettre plus un point précis dans la tète des gens. C'est même plus facile comme cela pour ce repérer que le système traditionnel avec juste la barre. - le repère est plus évident comme cela, visuellement c'est top.
ils vont tous finir par faire comme nous. hehehe

De plus cela permettrait un visuel avec plus de longueur de texte par défaut.

tu en pense quoi ?

2 TIMEVOX : peux ton imaginé que si tu appuyés deux ou 3 x sur le rewin ca accélère le rewin et aussi pour le play avance rapide en re-appuyant sur play 2x et 3x
Avantage directe avec le re ajustage a la Timeline, de la Timevox

Un avis???

[CPAS]

j'avais pas compris ce que tu disais Serge, mais en regardant la démo de Jean-Yves j'ai capté, et je pense que ca sera même plus simple à coder que d'avoir des étoiles qui s'allument séparément les unes de autres, il faut juste dérouler un bandeau d'opacité vers la droite, je vote pour cette solution parce que je suis une feignasse \o/

Jean-Yves, j'arrive pas à voir le javascript utilisé pour tes démos, j'ai loupé un truc ?

Et si toi ca te dit de jeter un œil au code, je viens de faire un zip avec les fichiers de la webapp (sans les mp3, pour garder ca léger)

[JYS]

Morituri te salutant!
Dans la version 2: Létoile, le script et css sont pour l'instant emboutis dans le html, plus facile pour bidouiller (il n'y a qu'un fichier a éditer)
L'utilisation d'un opacity mask en html n'est pas encore complètement adapté sur tous les browsers et cela fût une galère pour trouver une solution. Le masking ne pouvait pas être contrôlé par une simple image noir/blanc, ni par un png avec son opacité, ni avec un svg externe au code html. La soluce s'est réduite à devoir convertir le masque svg en codebas64 et l'emboutir dans le html (cool pour changer le design - NOT!).

* Merci pour le code source Xavier!
Je lookerai cela, voir si je sais adapter aux events de ton code et aussi les séparer en fichiers html, js et css comme il se doit.

[CPAS]

l'intégration de la barre de progression s'est bien passé, idéalement il faudrait la caler sur une "grille" qui correspond aux étoiles de l'image de fond de l'oravox mais... ca sera... pour une prochaine fois.

jean-yves : ah ok j'ai capté, j'avais pas pensé à regarder dans l'html ^^'

[JYS]

Voici le WIP pour la transition de la couverture de l'histoire vers l'oravox interne

https://mojofarmer.com/oravox/Background_Transition/

Je n'ai pas encore l'image de fond Oravox donc pour l'instant c'est la couverture de l'histoire de Draculahaha

[SergeV]

3

- j'ai un gros problème avec corel draw. depuis 3 jours j'arrive plus a enregistrer en exportant des fichiers. c'est la merde je crois que je vais tout effacé et remettre le programme. mais il date et je sais pas si ca va fonctionner. shaize shaize corel

- Pour la transition animée de l'affiche, a la page "synopsys". j'arrive pas a enregistrer l'anime.. Me cago en la lèche !
Donc jean-yves si tu pouvais la faire comme je te l'ais expliquer ce serait super. oublie les pixels de l'image, vois plutôt la trame d'Etoile comme des pixels. 8 de large et 10 de haut soit 80 pixels. (Ces 80 pixels sont l'organe métrique de Oravox, le cœur. Même si c'est pas vrai !.)
fait une vague qui part de en bas, de la barre de temps (Etoile jaune) vers le haut quand tu clique sur l'affiche. Comme une vague horizontale pour donner le change a la ligne de son qui vient de gauche a droite.
- tu couvres l'affiche d'Etoiles et tu redescends l'les Etoiles pour donner en fondu enchainer la profondeur et l'image 2 "synopsys".
Simple et je pense plus facile a faire.
Pour que tu imagines JY : Pas de transition extra ou déformation, qui casse le concept, ca doit rester propre et dans l'esprit.

On pourrais utiliser cette trame d'etoiles également, pour faire la transition (sous une autre forme), et faire apparaitre le talisman. que ce soit moins tranché, et adoucir l'apparition du talisman. Si tu vois ce que je veux dire ?

- j'ai besoin d'un nouveau COREL au secours !

PHRASE DU JOUR : Eps... ta pas une clop fils de pute ! - Tout dans la même phrase.

[SergeV]

voila exemple de transition, je suis occupé a faire l'anim attendre avant de faire un script de bien comprendre...

[CPAS]

pour les animations, il y a un dilemme. il y avait deux options, dont deux pourries, il y en désormais trois, dont trois pourries

1) vous faites toutes les animations vous-mêmes. je les intègre comme elles sont, dans un png animé ou quelque chose du genre, et je crée un minimum de code pour les controler en javascript. je n'aurai pas beaucoup de boulot, mais ca sera très lourd donc peu réactif. c'est pourri.

2) je continue à fonctionner en CSS + JS, et à accumuler des couches et des couches de CSS et des couches et des couches de JS. ca me permet de pas devoir refactoriser le code mais ca va vite devenir très instable. c'est pourri.

3) j'utilise un canvas en javascript et je fonctionne comme il faut : en dessinant comme dans un véritable écran, et je paramètre mes animations en javascript. il faut que je change tout le code pour qu'il soit ce qu'il devra etre au final : un code de production. c'est hors de question que je fasse ca, on était d'accord pour un prototype et là on est plus du tout là dedans. c'est pourri.


après analyse la solution 1 est la moins pourrie de toutes, parce qu'elle correspond bien à un prototype et ne nécessite pas que je me tue à faire des animations avancées avec des outils pas adaptés

[CPAS]

bon en fait le PNG animé ca pue la m, le javascript permet pas de le controler. faut soit faire des spritesheets (vous etes pas prêts) soit faire l'animation moi-même... bon voilà ce qu'on va faire : je vais faire le reste (l'upload, terminer la reco vocale (j'ai oublié la relance et le tiemout) et après on verra ce qu'il reste comme temps et on avisera)

[SergeV]

Animations part 1, 2, 3

[SergeV]

voila l'anim du talisman a l'echelle sur 614x995 en ce que je suis pas prêt ! hehehe fucking spritesheet

[SergeV]

Coucou JY
- peux tu faire l'anim avec ces anneaux? en codes? et dans le sens d'une montre?!!

[JYS]

Bon, pour l'option de sprite sheets, j'ai réussi a mettre la main sur texturepacker full version.

https://www.codeandweb.com/texturepacker
https://www.codeandweb.com/texturepacker/tutorials/css

Je fais les anims dans After Effects, exporte une chiée de png's et puis les ferai passer par Texturepacker pour le spritesheeting.

Ok?


-

[JYS]

Voici texture packer - version portable et pré-crackée.

Xavier, si tu pouvais y jeter un coup d'oeil et voir quel format d'exportation te convient le mieux.

Pour des raisons de performance, surtout sur gsm's, le programme déconseille d'exporter les animations en un spritesheet/png unique (type longue bande) mais plustôt en plusieurs sprite sheets séparés, respectant un ratio ^2 - 512, 1024, 2048, 4096.
Pour l'animation du timeline d'étoiles, qui aura 100 png's de 610x987 cela ferait un sprite sheet png de 6100x9870

Texture Packer avertit que:
The maximum texture size for mobile devices should not exceed 2048. Bigger textures might not be displayed on some devices or might cause jittering sprites.