compteur
 
AccueilPortailFAQS'enregistrerConnexion

Partagez | 
 

 (Resolu] Zone du html5

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Admin
Administrateur
Administrateur


Nombre de messages : 18417
Localisation : Toulouse
Date d'inscription : 11/12/2005

Message Sujet: (Resolu] Zone du html5   Sam 08 Déc 2012, 06:30

Bonjour,

Au sujet de l'animation au format HTML5.

Actuellement je produit une animation composée de "divs".
Les objets bougent correctement, les scripts simples (inscrits dans programmer et dans la fenêtre 'mtasc') sont reconnus.
OK, ça ça va.

Il reste un soucis : l'animation  n'est pas limitée dans une zone. Les divs sont visibles sur la totalité de la page HTML.

J'ai pensé à une solution avec un canvas ou bien du SVG. Mais ça risque d'alourdir le javascript.
Auriez vous une autre solution  

Merci à vous, pour tous ce que vous faites sur le Forum pendant que je suis dans ma programmation  flower  

Phildes

_________________
.
Revenir en haut Aller en bas
http://www.e-anim.com
TORAK
Accro
Accro


Nombre de messages : 1452
Age : 27
Localisation : Ain
Loisirs : prog, soft, hardware, sciences physiques & cosmologie
Date d'inscription : 23/12/2008

Message Sujet: Re: (Resolu] Zone du html5   Sam 08 Déc 2012, 11:07

Salut Phildes,
en regardant vite fait les script Js d'un site j'ait vu une expression tel que orgcanvas = new canvas(640,400,"main");
expliquation :

/**
Create a new canvas object.

canvas(w, h, divname)


@class canvas
@param {Number in pixel} w The Width of the canvas you want to create.
@param {Number in pixel} h The Height of the canvas you want to create.
@param {String} [divname] The div id you want the create the canvas to. If not specified, the canvas will be hidden.
@property {Number in pixel} width The Width of the canvas.
@property {Number in pixel} height The Height of the canvas.
@property {Object} canvas object of this canvas. Wink
@property {Object} contex the 2d context of this canvas.
@property {Number in pixel} handlex the x coord of the handle (0 by default).
@property {Number in pixel} handley the y coord of the handle (0 by default).
@property {Number in pixel} tilew the Width of a tile (IF this canvas is a tileset).
@property {Number in pixel} tileh the Height of a tile (IF this canvas is a tileset).
@property {Number} tilestart the number of the first tile (usefull for tileset like font).
@example
var mycanvas = new canvas(640, 480, "main");

*/


la classe canvas est dans le fichier joint http://codef.santo.fr/codef/codef_core.js

Ayant déjà vu pas mal d'animation a base de canvas, je peut te dire que c'est très performant, je ne pense pas que ça alourdisse quoi que se soit Wink

Le hic, c'est surement - et comme toujours - IE, sera il compatible avec ce framework ?
Revenir en haut Aller en bas
http://torak01.fr/
Admin
Administrateur
Administrateur


Nombre de messages : 18417
Localisation : Toulouse
Date d'inscription : 11/12/2005

Message Sujet: Re: (Resolu] Zone du html5   Sam 08 Déc 2012, 21:36

Bonsoir Torak,

Effectivement, le canvas est une solution qui semble correcte.
Mais E-anim produit de l'animation. Aussi le canvas doit être redessiné 25 fois par seconde.
Dans un contexte sérieux (par exemple en java), ça ne poserait pas de problème.
mais avec l'organisation du HTML5, qui est d'une sottise affligeante(1), je me méfie de tout.

TORAK a écrit:
Le hic, c'est surement - et comme toujours - IE, sera il compatible avec ce framework ?
Comme tu le dis, on doit commencer par se méfier des lubies (en espérant que ce ne soit pas du calcul néfaste) des différents navigateurs.

-------------------------------------

Pour en revenir à la solution de la div...
Normalement une "div" doit pouvoir effacer 'ce qui dépasse',
cf. la propriété : overflow: hidden

Mais comme nous la constatons régulièrement, ça fonctionne quand ça veut.
J'aurais aimé rester à une structure simple de 'divs' qui est un composant élémentaire du HTML.

Mais en tout cas, si je suis coincé par les divs, ta recommendation de me pencher en priorité sur le Canvas m'interesse beaucoup sunny
Je vais commencer à m'y pencher dessus.

Merci Torak

Phildes

(1)Note : il faut se souvenir que le Html5 est une norme qui est créée par un groupe d'entités qui ont des intérêts divergents (est dont certains semble très passionnément aggripés à leurs intérêts, avec leurs griffes acérées)
Quelques bisounours imaginent que cette association contre nature pourrait produire une norme qui répondra aux intérêts des utilisateurs.



TORAK a écrit:
Salut Phildes,
en regardant vite fait les script Js d'un site j'ait vu une expression tel que orgcanvas = new canvas(640,400,"main");
expliquation :

/**
Create a new canvas object.

canvas(w, h, divname)


@class canvas
@param {Number in pixel} w The Width of the canvas you want to create.
@param {Number in pixel} h The Height of the canvas you want to create.
@param {String} [divname] The div id you want the create the canvas to. If not specified, the canvas will be hidden.
@property {Number in pixel} width The Width of the canvas.
@property {Number in pixel} height The Height of the canvas.
@property {Object} canvas object of this canvas. Wink
@property {Object} contex the 2d context of this canvas.
@property {Number in pixel} handlex the x coord of the handle (0 by default).
@property {Number in pixel} handley the y coord of the handle (0 by default).
@property {Number in pixel} tilew the Width of a tile (IF this canvas is a tileset).
@property {Number in pixel} tileh the Height of a tile (IF this canvas is a tileset).
@property {Number} tilestart the number of the first tile (usefull for tileset like font).
@example
var mycanvas = new canvas(640, 480, "main");

*/


la classe canvas est dans le fichier joint http://codef.santo.fr/codef/codef_core.js

Ayant déjà vu pas mal d'animation a base de canvas, je peut te dire que c'est très performant, je ne pense pas que ça alourdisse quoi que se soit Wink

Le hic, c'est surement - et comme toujours - IE, sera il compatible avec ce framework ?

_________________
.
Revenir en haut Aller en bas
http://www.e-anim.com
globe
Accro
Accro


Nombre de messages : 1072
Age : 38
Localisation : 53 Mayenne
Date d'inscription : 24/04/2009

Message Sujet: coucou   Dim 09 Déc 2012, 12:07

bonjour,

pour ma part je pense aussi que le caneva soit la bonne solution pour ce qu'on utilise vraiment à 90% avec e-anim .

j'ai cru comprendre qu'on utiliserai le svg pour vraiment désiner pixel par pixel.
"genre le sprite dessins au crayon"!

enfin bon pour ma part il faut mieux partir sur du canevas .
me trompe peut être

pour les divs , moi je conseillerai plutôt de partir sur une div d'affichage standard.

j'ai compris la chose de la façon suivante ,

un div (un bloc ou on apel le canevas),
une feuille de style pour dimensionné le canevas (l'object animation).

je pense que se qui va plus nous embêter c'est la feuille de style. car il faudrait la généré en même temps que le canevas!!

Aprés la c'est plus la salle des machines qui parlera lol !!

enfaite sa fait plusieurs chose à construire en même temps.

- la page html ( avec div, canevas ou svg ect ect )
- la feuille de style qui me parait indispensable
- fichiers java script ( si besoin et)

enfin bon un vrai bordel ( à savoir oui si tout les navigateur interpréterons les feuilles de styles de la même façon) si il ne faut pas une feuille de style par navigateur lol

bon courage
Wink Wink
Revenir en haut Aller en bas
Admin
Administrateur
Administrateur


Nombre de messages : 18417
Localisation : Toulouse
Date d'inscription : 11/12/2005

Message Sujet: Re: (Resolu] Zone du html5   Mar 11 Déc 2012, 00:43

Bonsoir Globe,

Oui, j'étudie actuellement le canvas.

Mais il n'y a pas de problème de feuille de style. Tout cela se règle par programme.
La feuille de style est un simple outil de présentation. Que tu composes par programme ou avec la feuille de style cela devrait revenir au même.

Evidemment, si les auteurs de la noree HTML ont l'idée farfelue de ne pas reproduire les propriétés CSS en Javascript cela peut poser des problème. Et avec cette soit disant 'norme'(1) je m'attends à tout.

Pour en revenir aux 'divs',
1 - j'ai essayé de placer des 'sous-divs' dans une 'div' parent,
2 - dans cette la div parent, j'ai défini la propriété : 'Overflow:hidden;'
-> (Ca veut dire 'cacher ce qui dépasse')
3 - résultat => les sous-divs qui dépassent ne sont pas cachées.

Pouvez-vous tester et me confirmer que l'option 'Overflow:hidden' ne fonctionne pas correctement ?

Et dans ce cas connaissez-vous une valeur de l'Overflow' qui cache correctement ce qui dépasse ?

Phildes


Cool

Phildes

(1) voir le note du

globe a écrit:
bonjour,

pour ma part je pense aussi que le caneva soit la bonne solution pour ce qu'on utilise vraiment à 90% avec e-anim .

j'ai cru comprendre qu'on utiliserai le svg pour vraiment désiner pixel par pixel.
"genre le sprite dessins au crayon"!

enfin bon pour ma part il faut mieux partir sur du canevas .
me trompe peut être

pour les divs , moi je conseillerai plutôt de partir sur une div d'affichage standard.

j'ai compris la chose de la façon suivante ,

un div (un bloc ou on apel le canevas),
une feuille de style pour dimensionné le canevas (l'object animation).

je pense que se qui va plus nous embêter c'est la feuille de style. car il faudrait la généré en même temps que le canevas!!

Aprés la c'est plus la salle des machines qui parlera lol !!

enfaite sa fait plusieurs chose à construire en même temps.

- la page html ( avec div, canevas ou svg ect ect )
- la feuille de style qui me parait indispensable
- fichiers java script ( si besoin et)

enfin bon un vrai bordel ( à savoir oui si tout les navigateur interpréterons les feuilles de styles de la même façon) si il ne faut pas une feuille de style par navigateur lol

bon courage
Wink Wink

_________________
.
Revenir en haut Aller en bas
http://www.e-anim.com
globe
Accro
Accro


Nombre de messages : 1072
Age : 38
Localisation : 53 Mayenne
Date d'inscription : 24/04/2009

Message Sujet: Re: (Resolu] Zone du html5   Mar 11 Déc 2012, 09:55

bonjour,
as tu essayer
Overflow:auto

?

As tu essayer l'affichage avec plusieurs navigateur? ( je pense aussi qu'il y à une interprétation des navigateurs aussi )

parle tu de divs ou de div ? car divs je ne connais pas ce terme ou es ce une erreur de frappe.

pour la feuille de style ok !!

mais j'ai bien peur qu'il en faille une !! Et oui bienvenue dans le pays des bisounours.
lol
je me renseigne de mon coter et je vais faire des test.


Par contre une div dans une autre div j'ai jamais tester !

j'aimerais être bien sur du résultat que tu souhaite optenir !

une page html avec une div qui défini l'emplacement de ton object
que la div se gere de façon automatique ou de façon fixe ? hauteur*largeur

bon conclusion , y à de la graisse partout lol
bon courage
je fait des test de mon coter !



Revenir en haut Aller en bas
TORAK
Accro
Accro


Nombre de messages : 1452
Age : 27
Localisation : Ain
Loisirs : prog, soft, hardware, sciences physiques & cosmologie
Date d'inscription : 23/12/2008

Message Sujet: Re: (Resolu] Zone du html5   Mar 11 Déc 2012, 15:41

Oui, vraiment bizarre que l'Overflow ne marche pas avec les div enfant ! a moins que certaine balise ne soit pas correctement fermé ?

Sinon, as tu essayé avec la propriété display: none; / display:block; ?

regarde : http://www.greensock.com/gsap-js/
Il y a une animation en html5 (compatible ie6) et tout est téléchargeable !
En intégrant cette librairie, cela te faciliterais beaucoup la tâche non ? (timeline, déplacement, couleur etc...)
Revenir en haut Aller en bas
http://torak01.fr/
Admin
Administrateur
Administrateur


Nombre de messages : 18417
Localisation : Toulouse
Date d'inscription : 11/12/2005

Message Sujet: Re: (Resolu] Zone du html5   Mer 12 Déc 2012, 02:04

Bonsoir,

Merci loïc de tes recherches. Mais j'i une bonne nouvelle, ce n'est utile de continuer

J'ai trouvé une solution grâce à au scepticisme de Torak
TORAK a écrit:
Oui, vraiment bizarre que l'Overflow ne marche pas avec les div enfant
Je connais les qualités de Torak, donc j'ai pris très au sérieux sa remarque. Alors j'ai cherché, cherché, cherché...

Et j'ai trouvé cheers ! ! !

La propriété 'overFlow: hidden' ne fonctionne pas avec une div 'relative' (même si la div est bien délimitée par un largeur et une hauteur)
Si quelqu'un peut m'en expliquer la raison, je suis curieux de la connaitre.

Mais cette propriété 'overFlow: hidden' fonctionne avec 'position absolute' cheers

Alors, MERCI INFINIMENT TORAK ! ! ! flower
Tu m'enlèves une grosse grosse épine du pied

@ très bientôt

Phildes

TORAK a écrit:
Oui, vraiment bizarre que l'Overflow ne marche pas avec les div enfant ! a moins que certaine balise ne soit pas correctement fermé ?

Sinon, as tu essayé avec la propriété display: none; / display:block; ?

regarde : http://www.greensock.com/gsap-js/
Il y a une animation en html5 (compatible ie6) et tout est téléchargeable !
En intégrant cette librairie, cela te faciliterais beaucoup la tâche non ? (timeline, déplacement, couleur etc...)

_________________
.


Dernière édition par Admin le Lun 17 Déc 2012, 16:12, édité 1 fois
Revenir en haut Aller en bas
http://www.e-anim.com
TORAK
Accro
Accro


Nombre de messages : 1452
Age : 27
Localisation : Ain
Loisirs : prog, soft, hardware, sciences physiques & cosmologie
Date d'inscription : 23/12/2008

Message Sujet: Re: (Resolu] Zone du html5   Dim 16 Déc 2012, 02:13

Woarf, comme tu y va Phildes ^^ mais l'important c'est que ça marche Wink

De mon coté je vais faire quelque test pour délimiter une zone d'affichage de l'animation. Passer par un canvas ou autre truc compliqué ne me parait pas être la meilleur solution... d'ailleurs ce n'ai pas la méthode utilisé dans les anim html5 que j'ai peu voir.
let's go!
Revenir en haut Aller en bas
http://torak01.fr/
TORAK
Accro
Accro


Nombre de messages : 1452
Age : 27
Localisation : Ain
Loisirs : prog, soft, hardware, sciences physiques & cosmologie
Date d'inscription : 23/12/2008

Message Sujet: Re: (Resolu] Zone du html5   Dim 16 Déc 2012, 23:34

Admin a écrit:

Actuellement je produit une animation composée de "divs".
Les objets bougent correctement, les scripts simples (inscrits dans programmer et dans la fenêtre 'mtasc') sont reconnus.
OK, ça ça va.

Il reste un soucis : l'animation n'est pas limitée dans une zone. Les divs sont visibles sur la totalité de la page HTML.

J'ai pensé à une solution avec un canvas ou bien du SVG. Mais ça risque d'alourdir le javascript.
Auriez vous une autre solution

Trouvé Very Happy
Il faut simplement exploité le problème que tu as rencontré avec overFlow: hidden. Ainsi on peut créer une sorte de masque, comme dans flash.

Démo avec préchargement :
TEST >> http://torak01.fr/media/html5/1/
(on peut cliquer sur l'image pour l'animer - image qui est en fait plus grande que la zone d'affichage)

Le principe :

- une div qui nous sert de container avec propriété CSS
position: relative;
width: 700px;
height: 200px;
overflow: hidden;


- dans ce container, une div qui nous servira de loading (préchargement) (fermer la balise) - CSS :
position: relative;
width: 700px;
height: 200px;
background: #000 url(http://www.radeonpro.info/Images/loading.gif) center no-repeat;


- toujours dans le container, une autre div qui contiendra l'animation (demo)
position: absolute;
width: 700px;
height: 300px;
overflow: hidden;
visibility:hidden;


Soit,
Code:

<div id="container">
    <div id="loading"></div>
    <div id="demo">
        // contenu
        <div id="logo"></div>
        //
    </div>
</div>

Ensuite il n'y a plus qu'à gérer tout ça via le javascript...
Par contre c'est pas mal la galère pour gérer les décalages causé par le position: absolute;
Revenir en haut Aller en bas
http://torak01.fr/
Admin
Administrateur
Administrateur


Nombre de messages : 18417
Localisation : Toulouse
Date d'inscription : 11/12/2005

Message Sujet: Re: (Resolu] Zone du html5   Lun 17 Déc 2012, 16:21

Merci Torak pour ces indications. ça me permettras de convertir les masque à bords droits.

C'est une option que javais envisager, mais je n'ai pas poussé les tests aussi loin que toi (en fait je ne l'avais pas encore testé) Merci ! Cool

Mais pour faire un masque en forme de coeur

----------------------------------------------------------------------

J'aurais aimé avoir un outils aussi simple le masque de Flash. Bon, alors pour l'instant je vais me contenter de ce que ce pauvre CCS Asthmatique sait faire

Phildes





_________________
.
Revenir en haut Aller en bas
http://www.e-anim.com
TORAK
Accro
Accro


Nombre de messages : 1452
Age : 27
Localisation : Ain
Loisirs : prog, soft, hardware, sciences physiques & cosmologie
Date d'inscription : 23/12/2008

Message Sujet: Re: (Resolu] Zone du html5   Ven 21 Déc 2012, 12:38

Admin a écrit:

Mais pour faire un masque en forme de coeur

Avec le css uniquement ça semble impossible, en effet Rolling Eyes

Mais avec le javascript... why not ? >> http://www.netzgesta.de/edge/ <<
Revenir en haut Aller en bas
http://torak01.fr/
Admin
Administrateur
Administrateur


Nombre de messages : 18417
Localisation : Toulouse
Date d'inscription : 11/12/2005

Message Sujet: Re: (Resolu] Zone du html5   Ven 21 Déc 2012, 14:29

Bonjour,

C'est un début de piste.

D'après ce que j'ai lu, il semble que ces masques sont construits en Canvas, mais je n'ai pas compris si ils utilisent :
1 - des filtres proposés par le HTML5
2 - ou bien un traitement pixel par pixel.

Ceci est important pour la vitesse de traitement puisque l'animation répète le traitement de masque 25 fouis par secondes.

Merci pour toutes ces recherches. Elles me donnent des pistes à explorer Cool

Phildes


TORAK a écrit:
Admin a écrit:

Mais pour faire un masque en forme de coeur

Avec le css uniquement ça semble impossible, en effet Rolling Eyes

Mais avec le javascript... why not ? >> http://www.netzgesta.de/edge/ <<

_________________
.
Revenir en haut Aller en bas
http://www.e-anim.com
Contenu sponsorisé




Message Sujet: Re: (Resolu] Zone du html5   Aujourd'hui à 11:48

Revenir en haut Aller en bas
 
(Resolu] Zone du html5
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» (Resolu] Zone du html5
» [Resolu]Zone danger Tomtomax sur Nüvi 2597 LMT
» RESOLU Insérer une petite image dans la zone de signature
» IMPOSSIBLE DE FAIRE UNE MAJ FIREWALL ZONE ALARME [RESOLU]
» [Résolu] Disparition de la barre d'icône zone de saisie posts.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
E-anim :: Utiliser E-anim :: Problème, bug :: Sujets résolus-
Sauter vers: