docNovas tecnologias de animação na Web
download 
Denúncia Transcrição
Novas tecnologias de animação na Web
Novas Tecnologias de Animação na Web Sistemas Multimédia 2010 Filipe Carvalho João Mota Almeida Sistemas Multimédia ISMT Coimbra [email protected] Sistemas Multimédia ISMT Coimbra [email protected] Abstract — Este documento visa explorar as tecnologias utilizadas para criar animações para a Web. (Abstract) Keywords-web; animação; flash; shockwave; 3D; realidade virtual. I. As desvantagens são ter que manter a animação muito simples, apenas permite utilizar 256 cores, não permite adicionar som, para permitir criar uma animação com uma duração substancial, tem que se “saltar” entre as frames, tornando a animação pouco fluida. INTRODUÇÃO Animação numa página web é qualquer forma de movimento por parte de objectos e/ou imagens. Essa animação poderá ser um simples GIF Animado, um componente Flash/Shockwave, um plugin dHTML, um vídeo, etc. A utilização de animações em páginas web pode ser resumida a três razões: • Atrair a atenção do utilizador para uma secção específica da página • Enriquecer um texto demonstrativo com uma animação correspondente (por exemplo, demonstrar o funcionamento de um motor tendo uma animação Flash interactiva que permita ao utilizador acompanhar o que é descrito) • Simplesmente entreter o utilizador (mini-jogos, vídeos, etc.) Os Web designers dispõem então de um leque de software que lhes permite criar as mais variadas animações para a Web. Iremos explorar as aplicações mais comuns para o efeito. II. GIF’S ANIMADOS Um GIF Animado é um ficheiro GIF – Graphics Interchange Format – que contém um conjunto de imagens que são apresentadas segundo uma determinada ordem. Este tipo de animação foi das primeiras a ser considerada um padrão em páginas Web. As principais vantagens dos GIF’s Animados são o tamanho reduzido do ficheiro, a facilidade com que se pode trabalhar com este formato e o facto de ser automaticamente reconhecido pelos browsers. Figura 1. Frames individuais num GIF Animado.[1] III. HTML DINÂMICO As páginas Web começaram por ser maioritariamente ficheiros estáticos, ou seja, uma vez carregados permaneciam praticamente na mesma. Isto porque o HTML, linguagem principal de programação de páginas web, apenas diz ao browser onde colocar os elementos constituintes da página. Com o evoluir da Internet, este comportamento estático das páginas Web tornou-se limitativo e obsoleto. Era necessário acrescentar dinamismo aos sites, criar e adicionar conteúdo que pudesse mudar mesmo após o carregamento da página Web. Surge assim o HTML Dinâmico, ou dHTML[2]. O dHTML não é uma linguagem de programação ou um standard web; em termos gerais simboliza a junção de HTML, CSS, JavaScript e DOM. O World Wide Web Consortium[3] – W3C – tem a seguinte definição de dHTML : "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.". A implementação do dHTML veio permitir o aparecimento de livrarias JavaScript open-source, facilitando a criação de animações em páginas Web mesmo a utilizadores que não tenham conhecimentos de programação. Para tal, basta fazer o download da livraria pretendida, incluí-la no código da página e fazer a chamada da classe pretendida. • • Acrescentá-la à página que se está a criar <head> <script type="text/javascript" src="jquery.js"></script> </head> Fazer a chamada da função que se pretende utilizar <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); }); </script> </head> <body> <p><a href="#" id="start">Animar</a></p> <div id="box" style="background:#98bf21;height:100px;width:100px;positi on:relative"> </div> </body> </html> Neste exemplo está a ser utilizada a função animate() para animar um quadrado. Ao carregar no link “Animar”, o cubo irá aumentar o valor da altura, seguidamente aumentar o valor da largura e depois retorna aos valores originais. A animação será então o cubo a esticar em altura e em largura e seguidamente a encolher para o tamanho inicial. A título de curiosidade, apresentamos uma comparação de velocidade de execução de cinco livrarias JavaScript mais utilizadas. Existem várias livrarias JavaScript, como por exemplo DOJO[4], MooTools[5], Prototype[6], YUI[7], ExtJS, SmartClient, jQuery[8], etc. . Todas elas diferem em termos de rapidez de execução, fiabilidade de resultados e plataforma preferida. A título de exemplo iremos abordar a livraria jQuery. jQuery é uma livraria JavaScript leve e compatível com vários browsers, que dá primazia à interacção entre o JavaScript e o HTML. Foi criada por John Resig e tornada disponível em 2006. É um software gratuito e open-source, ao abrigo de duas licenças - MIT License[9] e GNU General Public License, Version 2[10]. A sintaxe do jQuery está pensado para tornar mais simples a navegação num documento, seleccionar elementos DOM, criar animações, gerir eventos e desenvolver aplicações AJAX. Tal como a maioria das livrarias JavaScipt, o jQuery permite a criação de plugins por parte dos seus utilizadores, que podem ser integrados em qualquer página que utilize esta livraria. A utilização da livraria jQuery é bastante simples: • Fazer o download da livraria através do site da mesma (http://www.jquery.com) Figura 2. Resultados por browser.[11] As principais diferenças entre estas duas plataformas são: • Os ficheiros Flash carregam mais rapidamente do que os ficheiros Shockwave. • O Shockwave permite a utilização de mais tipos de ficheiros do que o Flash. Por exemplo, é possível importer um ficheiro Flash para um Shockwave, mas o contrário já não é aplicável. • O Flash apresenta uma maior difusão entre os utilizadores. Mais de 90% dos utilizadores Web têm instalado o plugin de Flash, ao passo que um pouco menos do que 60% têm o plugin shockwave. • O software de criação do Flash – Flash Profissional CS4 – é mais barato do que o software de criação Shockwave – Director 11. Figura 3. Resultados por livraria.[11] IV. FLASH E SHOCKWAVE O Flash da Adobe[12] é uma plataforma multimédia que se tornou popular por permitir a criação de animações, inserção de objectos interactivos nas páginas Web, bem como a integração de vídeos e o desenvolvimento de rich internet applications. Suporta gráficos vectoriais e bitmap, bem como o streaming bidireccional de áudio e vídeo. O controlo das animações em Flash é feito maioritariamente com recurso à sua linguagem de programação – Actionscript. Esta linguagem é baseada na linguagem ECMAScript, a mesma base que o JavaScript. O Director da Adobe é também uma plataforma multimédia, mas ao contrário do Flash que surgiu como uma ferramenta vocacionada para a Web, o Director é uma ferramenta vocacionada para a criação de CD-ROMs interactivos. Os utilizadores podem criar aplicações com base numa metáfora de filme, ou seja, o utilizador é o “Director” do filme. O Director utiliza uma poderosa linguagem de programação chamada Lingo. Esta linguagem permite interagir com ficheiros externos e certas interfaces de aplicações do Windows (API). Esta interacção permite a mimetização de Interfaces Gráficas e a criação de protótipos de aplicações, bem como a criação de CD’s e DVD’s interactivos. Outra funcionalidade para o Director é a criação de jogos. Um dos aspectos mais fundamentais do Director é a sua extensibilidade, conseguida através de plugins chamados Xtras. Existem, por exemplo, Xtras para a manipulação de objectos do Sistema Operativo – Criação de pastas, ficheiros, eliminar pastas, etc. Para além destas duas plataformas, surgiu recentemente o Silverlight[13] da Microsoft. Esta plataforma serve basicamente os mesmos propósitos que o Flash, não estando ainda obviamente tão difundida. V. ANIMAÇÕES 3D Gráficos 3D são gráficos conseguidos através de uma representação tridimensional de dados geométricos. O processo de criação de gráficos 3D engloba três fases distintas: • • • Modelação - A modelação é o passo onde se gera a forma do objecto. Existem várias maneiras de modelar um objecto, sendo as duas mais usuais a modelação poligonal – pontos interligados no espaço tridimensional para criar uma rede poligonal (mesh) – e a modelação por primitivas – são utilizadas formas primitivas (esferas, cones, cilindros, cubos) para construir o modelo do objecto pretendido. Layout and animation - Neste passo, os objectos criados anteriormente são posicionados numa cena (scene), definindo a relação espacial e temporal entre cada objecto – localização, tamanho, como se movem, etc. Rendering - Este é o passo final, onde o modelo é convertido na representação final, com recurso a simulações de luzes, sombras, texturas reais, etc. Este passo é geralmente acompanhado por uma representação bidimensional da representação final tridimensional. A utilização de animações 3D na Web começou graças ao VRML - Virtual Reality Modelling Language – tendo evoluído para o standard X3D[14]. O X3D é um standard ISO baseado em XML para a representação de gráficos 3D. Fornece a tecnologia necessária para permitir aos utilizadores a visualização, edição e reutilização de visualizações 3D entre várias aplicações na Web, bem como a utilização em telemóveis e super computadores. VI. • • REFERÊNCIAS REALIDADE VIRTUAL Realidade Virtual pode ser definida como conteúdo tridimensional interactivo. Podemos distinguir três patamares de realidade virtual na Web: • excessivamente grandes para poderem ser visualizados decentemente na Web, a não ser que o utilizador disponha de uma generosa largura de banda no seu acesso à internet, bem como uma máquina com um desempenho relativamente elevado. Em primeira instância, e sendo esta a mais simplista, podemos ter uma visualização 3D de um objecto em que o utilizador pode rodá-lo e vê-lo de vários ângulos. No patamar intermédio, temos os mundos virtuais em que o utilizador pode ter alguma forma de interacção, como seja mover-se no mundo, interagir com objectos e/ou pessoas, etc. No patamar superior, temos a Realidade Virtual como a conhecemos em filmes, por exemplo, em que o utilizador necessita de equipamento especial – luvas, óculos – para poder ter a sensação de uma realidade imersiva. Tendo em conta o que já foi visto anteriormente em relação ao X3D, pode-se facilmente ver que este standard poderá ser uma solução mais viável para a criação de mundos virtuais propícios para a utilização em páginas Web. CONCLUSÃO Rapidamente chegamos à conclusão que os GIF’s Animados são uma espécie em vias de extinção. As limitações deste formato aliadas à disseminação global de ferramentas como o Flash, tornam o GIF Animado um formato obsoleto. Em termos de animações para a Web, podemos considerar o Flash e o dHTML como as ferramentas predominantes nos Web designers actuais. Outra conclusão a tirar, é que as animações 3D e a realidade virtual são o futuro das animações para a Web. Mas se assim é, porque não estão estes formatos tão estandardizados como por exemplo o Flash? A resposta prende-se com questões técnicas que sempre assolaram a Web. A largura de banda e a própria configuração de hardware dos computadores pessoais foram as principais responsáveis pela evolução dos conteúdos das páginas Web. O caso do 3D e da Realidade Virtual são exemplos crassos do impedimento tecnológico/físico presente na Web. Para estes formatos serem apelativos para o utilizador, deverão utilizar texturas realistas, luz e sombras e áudio. Estes elementos tornam os ficheiros finais [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] How Stuff Works, 1 de Abril de 2010, <http://www.howstuffworks.com> W3Schools, 30 de Março de 2010, <http://www.w3schools.com> World Wide Web Consortium, 30 de Março de 2010, <http://www.w3c.org> DOJO, 31 de Março de 2010, <http://www.dojotoolkit.org> MooTools, 31 de Março de 2010, <http://www.mootools.net> Prototype, 31 de Março de 2010, <http://www.prototypejs.org> YUI, 31 de Março de 2010, < http://developer.yahoo.com/yui> jQuery, 31 de Março de 2010, <http://www.jquey.com> MIT License, 1 de Abril de 2010, <http://www. opensource.org/licenses/mit-license.php > GNU License, 1 de Abril de 2010, <http://www.gnu.org/licenses/licenses.html> MooTools vs jQuery vs Prototype vs YUI vs DOJO Comparison Revised, 1 de Abril de 2010, <http://blog.creonfx.com/javascript/mootools-vs-jquery-vsprototype-vs-yui-vs-dojo-comparison-revised> Adobe, 1 de Abril de 2010, <http://www.adobe.com Silverlight, 1 de Abril de 2010, <http://www.silverlight.net> Web 3D Consortium, 31 de Março de 2010, <http://www.web3d.org>
Documentos relacionados
imprimir currículo
Rua Agostinho Gomes, 960 Bl B ap 2052 Ipiranga - 04206-001
São Paulo - SP | (11) 2914-4023 | (11) 8578-5699
