Google Web Designer - Themes HML5 - ZSPIN

Some tutorials for starting with zspin.

Modérateurs : vik, Modérateurs

Avatar de l’utilisateur
aruka
Passionné
Passionné
Messages : 152
Inscription : 02 oct. 2013 - 01:00
A été remercié : 2 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par aruka » 04 août 2015 - 15:16

Super camarade35, excellent tuto ! Désoler de ne pas avoir avancé comme prévu sur le projet, entre le taff et les travaux à la maison j'arrivais pas a dégager suffisamment de temps. La au taff c'est un peu plus calme j'vais pouvoir taffé dessus avec vous

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 04 août 2015 - 15:50

cool akura.
Sinon dans la vidéo je parle du problème de distance entre deux artwork haut.
En fait il suffit de changer la distance dans le code de top à bottom et ça roule ;)
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
aruka
Passionné
Passionné
Messages : 152
Inscription : 02 oct. 2013 - 01:00
A été remercié : 2 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par aruka » 04 août 2015 - 17:23

camarade, tu peux m'envoyé le fichier source du thème 1941, GWD n'aime pas quand on ouvre un fichier publié
Je vais ajouté une sorte de lib pour les animations, fade, flip, rotation etc... basé la dessus https://daneden.github.io/animate.css/" onclick="window.open(this.href);return false;

J'ai fais un essais en local plutôt concluant, l'idéal serait de pouvoir ajouté les classes CSS sans passé par le code pour les moins initiés, à voir si avec l'interface de GWD on peu associé ces fameuses animations.

Avatar de l’utilisateur
Guiguicar
Gourou
Gourou
Messages : 969
Inscription : 31 oct. 2012 - 00:00
A remercié : 62 fois
A été remercié : 51 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par Guiguicar » 04 août 2015 - 17:54

Sympa ce tuto, il va falloir s'y mettre maintenant ;)

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 04 août 2015 - 18:04

aruka a écrit :camarade, tu peux m'envoyé le fichier source du thème 1941, GWD n'aime pas quand on ouvre un fichier publié
Je vais ajouté une sorte de lib pour les animations, fade, flip, rotation etc... basé la dessus https://daneden.github.io/animate.css/" onclick="window.open(this.href);return false;

J'ai fais un essais en local plutôt concluant, l'idéal serait de pouvoir ajouté les classes CSS sans passé par le code pour les moins initiés, à voir si avec l'interface de GWD on peu associé ces fameuses animations.
Purée ça claque, les gars mettez de côté tous vos trucs, va falloir que je regroupe l'ensemble après.

Sinon, avec grand plaisir pour le 1941 : http://sixthemes.free.fr/sources/1941.zip" onclick="window.open(this.href);return false;
Dernière modification par camarade35 le 05 août 2015 - 18:52, modifié 1 fois.
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
NutsreturN2
Modérateur
Modérateur
Messages : 2811
Inscription : 19 oct. 2012 - 01:00
Localisation : BAGES 66670
A remercié : 105 fois
A été remercié : 80 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par NutsreturN2 » 04 août 2015 - 18:25

Est ce que quelqu un s y connait avec adobe flash pro 2015 ?
On peut faire des projet en Htlm5 canvas , apres test cela s'ouvre sans probleme dans firefox mais pas dans chrome ( du coup pas dans Zspin non plus ....). Alors que quand j ouvre un des exemples de adobe flash pro en html 5 et que je les ouvre avec chrome , il s affiche sans probleme .
Merci d avance , suivant les réponses j ouvrirais un post pour l utilisation de ce logiciel qui est assez simple d utilisation .

Avatar de l’utilisateur
aruka
Passionné
Passionné
Messages : 152
Inscription : 02 oct. 2013 - 01:00
A été remercié : 2 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par aruka » 05 août 2015 - 18:20

Désoler NutsretrunN2 je connais pas, sinon je post ici aussi mon test sur la lib daneden, ca servira pour le tuto si ca plait

Alors petit test avec 1945k III http://kbonabot.com/perso/ztheme/1945kiii.html" onclick="window.open(this.href);return false; , j'ai pas reproduit le thème de base j'suis partis d'un truc nouveau à l'arrache c'étais d'avantage pour tester la lib d'animation CSS de daneden (https://daneden.github.io/animate.css/" onclick="window.open(this.href);return false;) voir si on pouvais avoir une animation qui se répète sur un élément, une autre qui s’exécute une première fois au démarrage du thème etc...

Avec cette lib on a tout les outils pour reproduire les animations que l'on avais auparavant sur hyperthème, si vous en avez d'autre en tête je pourrais les crées par la suite.

Rapide explication de son fonctionnement, si ca plait on fera un truc plus propre avec camarade dans son tuto.
  1. Tout d'abord on télécharge la lib css (https://raw.github.com/daneden/animate. ... nimate.css" onclick="window.open(this.href);return false;), on ajoute l'appel de la lib en tête de votre page, entre les balises <head></head> :

    Code : Tout sélectionner

    <link rel="stylesheet" href="assets/animate.css">
    
    Dans cette exemple j'ai placer le fichier dans assets, mais vous pouvez le mettre ou vous voulez temps que l'url est correcte.
  2. Vous testez une animation qui vous plait sur le site de daneden, le "bounce" vous plait, alors gardez son nom en tête car cela sera également celui de sa class CSS.
  3. On ajoute la class "bounce" suivis de "animated" sur la balise qu'il vous plaira (image, vidéo, texte)

    Code : Tout sélectionner

    <img src="assets/ciel-wallpaper-hd-1920x1200.jpg" class="gwd-img-h9iq bounce animated" id="bg">
    
    Si vous désirez que l'animation se répète, ajoutez la class "infinite", ex

    Code : Tout sélectionner

    <img src="assets/ciel-wallpaper-hd-1920x1200.jpg" class="gwd-img-h9iq bounce animated infinite" id="bg">
    
Pour le moment on expérimente mais dans l'idéal je voudrais trouver le moyen de prédéfinir toute les animations directement sur GWD afin d'éviter de toucher au code.
Je créerais aussi par la suite une boite a outil afin de pouvoir modifier le nombre de fois ou l'animation se jouera, la durée, sa vitesse etc...
Dernière modification par aruka le 10 août 2015 - 13:46, modifié 1 fois.

Avatar de l’utilisateur
fanou
Initié
Initié
Messages : 106
Inscription : 25 déc. 2013 - 00:00
A remercié : 1 fois
A été remercié : 2 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par fanou » 05 août 2015 - 18:40

vous me larguez un peu ( pour pas dire bcp ) avec tous ce qui est code , je vais bosser un peu tous ça ;-)

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 05 août 2015 - 18:45

Purée ça déchire, va falloir un gros point sur Mumble.
Trop content de la tournure que ça prend, au passage le 1941 est vraiment classe
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
aruka
Passionné
Passionné
Messages : 152
Inscription : 02 oct. 2013 - 01:00
A été remercié : 2 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par aruka » 05 août 2015 - 19:31

fanou a écrit :vous me larguez un peu ( pour pas dire bcp ) avec tous ce qui est code , je vais bosser un peu tous ça ;-)
J'avou que ca peut paraître casse tête au premier abord, pour le moment je vois comment fonctionne la librairie d'animation après va falloir que je trouve un moyen simple d'appliqué l'animation via l'interface graphique de GWD et non par la vue du code.
camarade35 a écrit :Purée ça déchire, va falloir un gros point sur Mumble.
Trop content de la tournure que ça prend, au passage le 1941 est vraiment classe
Ca roule pour mumble, faudrait trouvé un petit moment un soir, et merci pour le thème ;), on va peaufiné, hypertheme va bientôt nous jalousé ^^

Avatar de l’utilisateur
lankou910
Gourou
Gourou
Messages : 724
Inscription : 16 mai 2013 - 01:00
Localisation : Bordeaux
A remercié : 76 fois
A été remercié : 107 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par lankou910 » 05 août 2015 - 19:54

bonsoir

sa donne envie tous sa.

vas falloir que je bosse la dessus.
Image

Avatar de l’utilisateur
NutsreturN2
Modérateur
Modérateur
Messages : 2811
Inscription : 19 oct. 2012 - 01:00
Localisation : BAGES 66670
A remercié : 105 fois
A été remercié : 80 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par NutsreturN2 » 05 août 2015 - 20:26

D'ou l avantage de adobe flash pro 2015 qui permet de faire des animations simplement sans code . Je comprend pas trop pourquoi il n'y a pas plus de monde qui veulent se pencher dessus

Avatar de l’utilisateur
fanou
Initié
Initié
Messages : 106
Inscription : 25 déc. 2013 - 00:00
A remercié : 1 fois
A été remercié : 2 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par fanou » 05 août 2015 - 20:45

NutsreturN2 a écrit :D'ou l avantage de adobe flash pro 2015 qui permet de faire des animations simplement sans code . Je comprend pas trop pourquoi il n'y a pas plus de monde qui veulent se pencher dessus
je vais regarder ça si tu dis que c simple ;)

Avatar de l’utilisateur
aruka
Passionné
Passionné
Messages : 152
Inscription : 02 oct. 2013 - 01:00
A été remercié : 2 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par aruka » 05 août 2015 - 21:00

Si Nuts, je vais le télécharger la, le soucis c'est qu'il est payant, l'avantage de google web design en 2 clic t'est dans l'application. Après tu me dira on a tous plus ou moins photoshop sur nos bécane pour les thèmes.
Les points qui me font un peu peur sur flash c'est :

-L'export en SWF, mais bon si tu me parle de canva c'est qu'il ya du HTML5
-La manipulation des animations, gérer les animations en CSS c'est vraiment pratique en terme de maintenance et de mise en place. Un copié coller d'une class CSS sur une balise et ta ton animation. Pas besoin de se battre avec la timeline, les images clés et autre actionScript 3 sur flash. Mais ca a sans doute évolué entre temps.
-Le dernier point c'est la gestion des 100% sur les images, vidéos etc... pour que sur un 16/9 et un 4/3 les thèmes tournent proprement.

Mais bon, une fois de plus je m'avance, car fait bien 8 ans que j'ai pas utilisé flash et visiblement il ta plu donc ca mérite qu'on se penche dessus. Je suis en train de prendre la version CC la, jvous fais un retour demain

Avatar de l’utilisateur
himura95
Maître
Maître
Messages : 3177
Inscription : 05 mars 2015 - 20:13
Localisation : Pontoise
A remercié : 911 fois
A été remercié : 562 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par himura95 » 05 août 2015 - 21:13

Je viens de tester flash cc pro 2015 et on peux faire "publier" pour avoir le html/js ;)

Pour les animations je sais pas je connais pas (encore) flash :oops:

Par contre les thèmes flash seront plus lourds qu'avec du css, non ?
Image

Avatar de l’utilisateur
NutsreturN2
Modérateur
Modérateur
Messages : 2811
Inscription : 19 oct. 2012 - 01:00
Localisation : BAGES 66670
A remercié : 105 fois
A été remercié : 80 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par NutsreturN2 » 05 août 2015 - 21:35

Avec Adobe Flash Pro 2015 j arrive a faire des themes en HTML5 canvas mais mon probleme c 'est quils ne s ouvrent que avec Firefox , sous Chrome et internet explorer j ai une page blanche . Je m y connais pas assez pour savoir le pourquoi du comment

Avatar de l’utilisateur
fanou
Initié
Initié
Messages : 106
Inscription : 25 déc. 2013 - 00:00
A remercié : 1 fois
A été remercié : 2 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par fanou » 07 août 2015 - 15:00

un essai avec adobe edge animate

ddonpachi

" onclick="window.open(this.href);return false;

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 09 août 2015 - 09:34

@fanou : sympa le thème et ça fonctionne bien. Si tu veux ajouter un cadre maintenu, il faut faire une div contenant vidéo+cadre

@aruka : j'ai testé les animations, c'est vraiment rapide et pratique au final, tu place l'image/vidéos en position finale et hop, animlated, cool.
Juste un truc, est-il possible, de mettre un "delay" et de choisir la vitesse de celle-ci ?
Merci pour ton retour.
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
NutsreturN2
Modérateur
Modérateur
Messages : 2811
Inscription : 19 oct. 2012 - 01:00
Localisation : BAGES 66670
A remercié : 105 fois
A été remercié : 80 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par NutsreturN2 » 09 août 2015 - 10:39

Est ce qu'il est possible d afficher une image 3d ?

Avatar de l’utilisateur
slana54
Habitué
Habitué
Messages : 81
Inscription : 06 mars 2013 - 00:00
Localisation : 54840 - GONDREVILLE
A remercié : 23 fois
A été remercié : 1 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par slana54 » 09 août 2015 - 11:07

NutsreturN2 a écrit :Est ce qu'il est possible d afficher une image 3d ?
Oui bien sur. Regarde ce tuto: https://www.youtube.com/watch?v=ekHvbzoTSHY

Répondre

Revenir à « Tutorials »