FabKzo.com

Auteur/autrice : FabKzo

  • Making SVG+js presentations with sozi

    Hi there,

    Today I’ll just remind you Sozi’s existence , has a plugin for inkscape. That’s free and easy to use, no need to code, just do it graphically.

    Very nice to make « Prezi-like » presentations ; you can add video and audio if you want, but just be sure that your browser(s) implement it well ( actually i’m a bit slow under firefox, very nice with chrome )

    The top should be to make it as there: http://svg-wow.org/blog/2010/08/14/camera/  but forget it, your « slides » won’t move like that;

    If you’re more interested with javascript , also exists impress.js : http://bartaz.github.com/impress.js/#/bored

    but a bit harder to understand.

    The good point for using Sozi is that  it generates a SVG file , giving you the possibility to use it as a page, to implement it in a html page etc, etc…

     

    There I call it with an iframe, as on sozi’s site ( http://sozi.baierouge.fr/wiki/doku.php ), to make it interactive and to adjust its size.

    

     
    

    but you can also use this link to see it in fullscreen as an SVG page ( copy and paste in your browser) :
    

    fabkzo.com/wp-content/uploads/2013/02/qrcodesozi.svg
    

     
    

    

    
			
    
		
    
		
	
  • 
		
		
    
			
			
    SMIL Animated star button
    
			
    Today one little thing;  I’m preparing  something bigger . I just need more time;
    

    This is an animated star with SMIL attributes, even I know we can do it with ecmascript.
    

    [svg src=http://www.fabkzo.com/images/etoiles.svg width=100 height=100]
    

    So I’ve tested there a synchronisation between all elements after an interaction with the visible star.
    

    Well, if you want the interaction working well you have to implement it in a Html5 based page ,there you’ll have to display it full to see the animation; to adjust size and position change the height, width and viewBox parameters.
    

    Study it to understand 🙂
    

    You can do almost the same  with CSS3 I think, but with multiple images called, must be heavier than that…
    

    
			
    
		
    
		
	
  • 
		
		
    
			
			
    A  QRCode ‘SVG + SMIL’ based game
    
			
    

    That’s not a new idea, someone has already given it a name: Qrcoderoulette;
    

    the idea is to submit multiple QRCodes to the user who has to fall on the « right one » not pointing-for example- on an internet shock site, putting at risk the device scanning these codes.
    But all this remained hopelessly static and require more display space on the concerned page. (Http://blogs.mcafee.com/mobile/no-winners-at-qr-code-roulette)
    I do not wish here to implement this type of practice, I take the idea in order to make -at choice: a game, a joke, a piece (!)
    How to reuse the concept saving space, attracting the eye and interest?
    Take inkscape, SMIL attributes, an Internet browser, mix them together and you get something like this:
    

    qrcodejeu
    

    Note: my animation is not perfect because there is a gap between two QRCodes. Image weight: 44.8 KB
    

    Here 2 QRCode on 3 refer to the phrase “you’ve lost”, the other pointing “www.fabkzo.com”; changing colors and animation are just there to spice up the game, this idea can be used for competitions, small gains etc etc …
    

    Obviously we could do animation in javascript or .gif format, or anything else, I’ve chosen SMIL for its ‘natural’ implementation in most browsers (except IE of course, and it seems some browsers’ mini ‘smartphones like Opera mini), animations are part of the image and might not be blocked unless you decide not to display the picture.
    

    In the case of these browsers that do not support SVG animations I propose converting it to video (. Ogg,. Webm,. Mp4). If you find a (simple) way to convert it to .gif just let me know.
    

    Don’t forget to remove any way to easily determine which is the winning qrcode.
    

    If you want to learn how to make yours, follow me there ==> Coming soon
    

     
    

    
			
    
		
    
		
	
  • 
		
		
    
			
			
    SVG rotations with SMIL
    
			
    Trying something misused
    

    This is my own complete creation, made last year. I wanted to innovate and start from nothing, creating a « logo »and  a slogan I had never met. It ‘s time for me to share it, you can use it only for personnal use.
    

    naturetakecare2
    

    Licence Creative Commons
    Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 3.0 non transposé
    

    it represents what I love with SVG and animations : You can edit it in inkscape directly and work on it, print it, export it as usual, but when you open it with the right browser …. tadaaa! it turns 🙂 (you’ll just have to remove the 1ms ie case path before )
    

     
    

     
    

    
			
    
		
    
		
	
  • 
		
		
    
			
			
    Animating an old bitmap picture with SVG, javascript and SMIL
    
			
    Hi ,
    

    Today I just finished a little project ; this a scan of an old advert found in  « le petit illustré » France 1914 ,cleaned in GIMP then integrated in INKSCAPE . I just wanted to gave them life back ~~; if you want the « settime »script to work, just save it on your machine then open with your browser.