[Inkscape Brasil] Animacoes em SVG via SMIL ou Javascript. Tutorial no Zine

wagnerdequeiroz wagnerdequeiroz em yahoo.com.br
Quarta Março 12 16:21:15 BRT 2008 

No site do visualizador SVG da Adobe tem exemplos profissionais de 
animacao SVG. Tinha um livro da IBM sobre SVG da serie Code Red que nao 
acho mas ele dava umas licoes interessantes sobre animacao. o Site 
Kevlindev.com tem tutoriais bacanas de animacao SVG usando SMIL e 
JavaScript. Ainda é trabalhoso isso. Eu tinha sugerido umas extensoes 
para nosso amado Inkscape para fazer animacoes SVG. A ideia era vc 
escolher um objeto e uma janelinha permitir vc mudar um ou outro 
parametro na animacao como fazer o X mudar de um valor para outro, mudar 
a opacidade, etc. Dai o script iria montar a tag da animacao. Esta coisa 
relativamente simples iria dar um tremendo impulso na animacao.

como o exemplo abaixo do KevLindev:

<rect x="45" width="10" height="10" fill="red">
    <animate attributeName="y" from="0" to="90" dur="10s" repeatCount="indefinite"/>
</rect>


temos a tag Animate que seria gerada pela extensao. Veja que ela manda 
mudar o atributo Y de 0 a 90 por 10 segundos. Infelizmente esta tag deve 
ser colocada dentro do Objeto. Tem uma outra opcao de gerar a Tag 
Animate usando o nome do Objeto, mas nao vou escrever sobre ela aqui 
para nao cansar o pessoal da lista. Qualquer coisa meu MSN esta facil 
caso alguem se interesse na minha ideia.

Pessoal a pouco enviei um email que tinha que esperar o moderador 
liberar o email. Estou reproduzindo-o novamente e ele possui informacoes 
interessantes sobre animacao SVG

Oi Wellington, voce pode mesclar SVG com Javascript. ademas o svg pode 
ser animado pelo smil.

http://www.design-ireland.net/index.php?http%3A//www.design-ireland.net/alpha/controller/view_article.php%3Foid%3D00000000053 

http://www.kevlindev.com/tutorials/basics/animation/svg_smil/index.htm

Voce deve desenhar as figuras no inkscape, nomea-las e depois usar as 
tags de animacao como mostra o link acima.

O Kevlindev.com tem exemplos do Java TB. Se vc estudar bem isso e manjar 
de Java pode botar o Flash no bolso. Infelizmente nao sao todos os 
navegadores de internet que suportem animação de SVG via SMIL.

Eu só movi objetos e fiz desaparecer ou aparecer pelo SMIL mas dava um 
trabalhao.


Wagner

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


Sobre o Zine, eu tenho aquele tutorial tosco de 3 paginas que talvez 
pudesse ser usado na zine, basta apenas mudar a identidade visual dela 
para casar com a Zine. Para mim seria um grande prazer ver meu tutorial 
na Zine.

--------
 A Tag Abaixo mostra um evento de animacao que retirei do KevLindev.

<rect y="20" width="10" height="10" fill="red">
    <animate attributeName="x" values="0;40" begin="click" dur="2s"
             onbegin="advance(evt, 'Running')"
             onend="advance(evt, 'Stopped')"/>
</rect>


Menphystofeles wrote:
> Já dei uma olhada lá e fiquei meio sem coragem de estudar tudo aqui... 
> ainda mais porque ainda não vi nenhum exemplo que me convencesse a 
> estudar... mas acho que vai ser o jeito porque não estou achando nada...
> Se alguém souber de umas animações mais profissionais feitas em SVG, 
> agradeço...
>
> ----- Mensagem original ----
> De: Leon Prado <leonlatour em gmail.com>
> Para: Comunidade Inkscape Brasil 
> <inkscape-brasil em listas.softwarelivre.org>
> Enviadas: Quarta-feira, 12 de Março de 2008 11:36:38
> Assunto: Re: [Inkscape Brasil] Animação em SVG
>
> cara tb nao entendo, mas até onde eu sei essa liguagem foi contruida 
> para substituir o flash... por tanto acredito q tenha sim
> vai na www.w3.com <http://www.w3.com> , la tem toda documentação do 
> svg (acho q deve estar em ingles)
>
> Em 12/03/08, *Menphystofeles* <menphystofeles em yahoo.com.br 
> <mailto:menphystofeles em yahoo.com.br>> escreveu:
>
>     Não me lembro exatamente quem era, mas lembro que alguém aqui da
>     lista fez algumas animações bem simples em SVG.
>     Lembro de uns exemplos simples de animação em SVG que vi na net
>     também, mas queria fazer algo um pouco mais sofisticado para
>     interface de websites (precisamente para um menu ou algo assim).
>     Alguém sabe se dá pra fazer algo no nível do flash em SVG?
>     Desculpem se a pergunta for tosca porque de fato sou amador nisso...
>     Abraços.
>
>     Wellington
>
>     ------------------------------------------------------------------------
>     Abra sua conta no Yahoo! Mail
>     <http://br.rd.yahoo.com/mail/taglines/mail/*http://br.mail.yahoo.com/>,
>     o único sem limite de espaço para armazenamento!
>
>     ____________________________________________________
>      Lista de Discussão Inkscape-Brasil
>      O Site da Comunidade:
>      http://inkscapeBrasil.org
>      Sobre a Lista de Discussão:
>      http://inkscapeBrasil.org/.Comunidade#ListaDeDiscussao
>
>
> Pessoal, eu enviei um email a alguns minutos e nao apareceu na lista 
> pq precisava do moderador estou reproduzindo-o aqui novamente


>
> -----Anexo incorporado-----
>
> ____________________________________________________
>   Lista de Discussão Inkscape-Brasil
>   O Site da Comunidade:
>   http://inkscapeBrasil.org
>   Sobre a Lista de Discussão:
>   http://inkscapeBrasil.org/.Comunidade#ListaDeDiscussao
>
>
> ------------------------------------------------------------------------
> Abra sua conta no Yahoo! Mail 
> <http://br.rd.yahoo.com/mail/taglines/mail/*http://br.mail.yahoo.com/>, 
> o único sem limite de espaço para armazenamento!
> ------------------------------------------------------------------------
>
> ____________________________________________________
>   Lista de Discussão Inkscape-Brasil
>   O Site da Comunidade:
>   http://inkscapeBrasil.org
>   Sobre a Lista de Discussão:
>   http://inkscapeBrasil.org/.Comunidade#ListaDeDiscussao

Mais detalhes sobre a lista de discussão Inkscape-Brasil