31 octobre 2013

bon halloween

tridenttridenttridenttridenttridenttridenttridenttridenttridenttridenttridenttrident

 

 

 

Posté par pierreflash à 16:57 - Commentaires [0] - Permalien [#]
Tags : ,

25 octobre 2013

horloge digital toute bete

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>

</body>
</html>

Posté par pierreflash à 18:24 - - Commentaires [0] - Permalien [#]
Tags :

Snap.svg : une nouvelle bibliothèque JavaScript par Adobe

http://snapsvg.io/

Baptisée Snap.svg, cette dernière propose des interfaces de programmation permettant d'animer et de manipuler des contenus SVG. Pour mémoire, le format graphique SVG, Scalable Vector Graphique, permet de représenter une forme géométrique en interprétant les données d'un code XML. Cette librairie fonctionne en outre avec n'importe quel fichier SVG, qu'il ait été conçu par Illustrator, Inkscape ou Sketch.

Développée par Dmitry Baranovskiy, concepteur de la bibliothèque Raphaël, Snap.svg est compatible avec les navigateurs modernes, à savoir IE9+, Safari, Chrome, Firefox et Opera. Il est ainsi possible d'ajouter des masques, d'effectuer du clipping ou d'ajouter des dégradés. Snap.svg est distribué sous la licence Apache 2.

a savoir ie ne prend pas en charge animationsvg (smil)

firefox utilise beaucoup uc avec image.svg

sous chrome tout fonctionne correctement

Posté par pierreflash à 14:44 - - Commentaires [0] - Permalien [#]
Tags : , ,
22 octobre 2013

creation montre en javascript css svg

en construction

je vais essayer ecrer montre comme celle que j ai realisé en flash

http://animationswf.canalblog.com/archives/2013/10/22/28264637.html

1/les aiguilles

2/les chiffes

3/le fond animé du cadran

utilisons ca

Posté par pierreflash à 11:39 - - Commentaires [0] - Permalien [#]
Tags : ,

banniere en html 5 css canvas svg suite

1/utilisation d'image svg

je vais utiliser image svg pour l image de fond et le traineau du pere noel et aussi peut etre pour le texte

http://msdn.microsoft.com/fr-fr/library/ie/gg589526%28v=vs.85%29.aspx

http://lipn.univ-paris13.fr/~cerin/maitrise/svg

http://jeremie.patonnier.net/post/2010/06/29/Introduction-a-SVG

http://www.gchagnon.fr/cours/xml/svg.html

http://svground.fr/paths.php

http://www.svgbasics.com/paths.html

http://ux.saggezza.com/articles/creating-a-svg-sprite/

http://www.w3schools.com/cssref/pr_class_display.asp

2/convertir traineau en svg ok fait

avec flash decompiler j extrait le sprite traineau

dans flash je fais disocier et degrouper les graphique puis copier

je colle dans illustrator et sauvegarder en svg

petit probleme rencontre lors conversion image ai en svg:dans l image ai il y avaient calques mode superposition dans svg ca n existe pas il faut donc rajouter un filtre svg sur le calque pour que le filtre apparaisse lors de la conversion

3/faire suivre au traineau une trajectoire ( dans mon cas une courbe sinusoidale) ok fait

http://stackoverflow.com/questions/13932704/how-to-draw-sine-waves-with-svg-js

https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

4/connaitre position et angle traineau sur la trajectoire ( en ai besoin pour etincelle)

la  c'est dur

http://msdn.microsoft.com/fr-fr/library/ie/gg193979%28v=vs.85%29.aspx#example5

http://svground.fr/svgdom.php

https://developer.mozilla.org/en-US/docs/Web/SVG

how-to-manipulate-translate-transforms-on-a-svg-element-with-javascript-in-chrom

https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform

http://www.w3.org/TR/SVG/animate.html#ValueAttributes

http://stackoverflow.com/questions/12784821/svg-getattribute-setattribute-simply-adding-to-coordinates-instead-of-setting

http://msdn.microsoft.com/en-us/library/ie/ff972117%28v=vs.85%29.aspx#properties

5/parenthese j ai trouve ca

http://dropthebit.com/592/pathanimator-moving-along-an-svg-path/

6/deplacement traineau:utilisation requestanimationframerate

http://creativejs.com/resources/requestanimationframe/

7/petit détour sur le dom ( display object manager) des navigateurs

http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

8/javascript prototype

http://blog.xebia.fr/2013/06/10/javascript-retour-aux-bases-constructeur-prototype-et-heritage/

9/je vais essayer mettre image svg dans script pour avoir seulement un script a inserer

http://code.google.com/p/x2js/

http://goessner.net/download/prj/jsonxml/

http://www.utilities-online.info/xmltojson/#.UotxMeImiwV

http://www.alsacreations.com/article/lire/1161-json-ajax-jquery-jsonp-getjson.html

http://stackoverflow.com/questions/9723422/is-there-some-innerhtml-replacement-in-svg-xml

 

10/pour verifier syntaxe et tester

http://www.w3schools.com/default.asp

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform-origin

http://jsfiddle.net/73g7t/395/

11/utilisation font svg

je peux realiser le texte avec canvas le default c est qu il faut incorporer la fonte ou alors utiliser une fonte commune

http://schepers.cc/svg-webfonts

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts

19/filtre

http://stackoverflow.com/questions/14307079/make-blend-modes-in-svg-actually-work

http://msdn.microsoft.com/fr-FR/library/jj206437.aspx

http://svground.fr/filtres.php

les filtres pour le blendmode  qu on trouve parfois dans image ai ne fonctionnent pas dans tous les navigateurs malheureusement

20/animation rapide dans navigateur

http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

21/inserer image svg dans canvas

http://getcontext.net/read/svg-images-on-a-html5-canvas

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

http://stackoverflow.com/questions/12673527/html5-canvas-use-image-as-mask

 

Posté par pierreflash à 13:18 - - Commentaires [0] - Permalien [#]