Passo a Passo São Paulo 2002 1
Índice O Xara 3D...3 Vamos iniciar nossos estudos do Xara 3D...3 Exibindo as barras de ferramentas e Status...5 A barra de Status (Status Bar)...9 Vamos começar a trabalhar com as ferramentas do Xara 3D...10 Salvando a sua animação de texto...12 Exportando as animações de texto para serem utilizadas num editor de páginas...13 Exportando animações de texto na forma estática...15 Criando o texto personalizado no Xara 3D...16 Aplicando o Extrude no texto...18 Aplicando Bevel (ângulo oblíquo) no texto animado...21 Animando e girando o texto...23 Executando a animação...25 Mudando a cor do Texto...26 Aplicando textura ao Texto animado...27 Mudando o Background do projeto...30 Aplicando textura ao plano de fundo do projeto...31 Trabalhando com os efeitos de luzes...32 2
O Xara 3D O software Xara 3D pertence à xara.com e permitirá a criação de textos em 3 dimensões (largura, altura e profundidade), deixando os seus gráficos com aspecto profissional, além de esbanjar na qualidade de apresentação. Esse programa poderá ser obtido através da Internet acessando o endereço do site http://www.xara.com/products/xara3d/ que irá oferecer uma versão demonstrativa (amostra) onde nem todos os recursos funcionarão plenamente. Além dessa versão, há uma opção permanente, onde o usuário deverá pagar uma taxa para a utilização free (livre) do mesmo. O Xara 3D será muito utilizado por aqueles que desejam deixar as suas páginas com um aspecto profissional e criativo. Ele apresenta ferramentas intuitivas e simples de serem manipuladas. Não requer prática nem tão pouco habilidade para a utilização desse software. O usuário poderá utilizar outros programas como Photoshop da Adobe Corporation, Flash da Macromedia, que irá exigir conhecimentos mais avançados para a criação dos mesmos gráficos que os senhores poderão criar com o Xara 3D. Vamos iniciar nossos estudos do Xara 3D Para iniciar o programa Xara 3D devemos: Iniciar Programas Xara 3D 3
Visualize abaixo a janela do Xara 3D: 4
Exibindo as barras de ferramentas e Status Para ativar a barra de ferramentas do Xara 3D com as ferramentas básicas (abrir, salvar, criar textos, ativar/desativar animação, etc) devemos: Menu View Toolbar 5
Antes Depois Para ativar a barra de ferramentas de texto do Xara 3D com as ferramentas (fonte, esboço, negrito, itálico, espaçamento entre linhas e caracteres, etc) devemos: Menu View Text Toolbar ou <Ctrl>+<T> 6
Antes Depois Para ativar a barra de status do Xara 3D devemos: Menu View Status Bar 7
Antes Depois 8
A barra de Status (Status Bar) A barra de status irá descrever as ferramentas que estão sendo usadas, além de indicar as dimensões (largura e altura) da sua janela de trabalho e os ângulos do seu gráfico. Veja o exemplo abaixo: Área de Redimen Exibe a largura e altura da sua janela de trabalho. Largura = 412 Altura = 304 Utilize as alças de redimensionamento para alterar as dimensões (largura e altura da sua janela). Basta passar a seta do mouse sobre qualquer ferramenta e automaticamente você obterá a Exibe os ângulos do seu gráfico. -40º Ângulo vertical: 10º basta clicar sobre o texto e arrastar. 9
SP omeçar a trabalhar com as ferramentas do Xara 3D Para criarmos uma nova animação de texto devemos: File New ou <Ctrl>+<N> Para abrir uma animação de texto que já foi salvo com a extensão Menu ou <Ctrl> + <O> ou A opção abrir só será válida para os arquivos *.X3D, ou seja, outras extensões não serão reconhecidas e irá aparecer como arquivo A vantagem de possuir esse recurso é justamente alterar animações Xara 3D. 10
COLÉGIO PRESBITERIANO MACKENZIE A janela Open será ativada. Veja o exemplo: Procure o diretório (pasta) em que foi salvo a sua animação. Lista com todos os arquivos Área de visualização do arquivo. 11
Salvando a sua animação de texto Existem basicamente duas formas de salvar a sua animação de texto: Menu File Save ou <Ctrl>+<S> A janela Save As será ativada. Veja o exemplo: Defina o local em que será salvo a sua animação. Não esqueça de salvar na sua unidade (F: ou G:) e sua respectiva pasta (que vai de acordo com a sua turma e o micro que você e seu parceiro de trabalho elegeram). 12
Observação: Quando for salvar pela primeira vez poderemos a sua animação de texto tanto faz utilizar a opção File Save As, File Save ou *.X3D.. Através dessas opções você irá salvar com a extensão Se for salvar apenas as alterações, utilize apenas a opção File Save ou. Muito cuidado para não utilizar a opção File Save As para salvar as alterações do seu arquivo, caso isso ocorra você estará duplicando o mesmo arquivo várias vezes. Exportando as animações de texto para serem utilizadas num editor de páginas Seria interessante e produtivo criar as animações para serem usadas futuramente na(s) página(s) que você e seu amigo estão desenvolvendo no FrontPage ou em qualquer outro software de criação e gerenciamento de páginas (Dreamweaver da Macromedia ou Go Live da Adobe). Se utilizarmos a opção anterior (File Save As) não iremos conseguir inserir esse texto animado na nossa página, uma vez que a extensão que você irá salvar é *.X3D, e o FrontPage não reconhecerá essa extensão. A única solução para esse problema será salvarmos com uma extensão que fique fácil de reconhecer como por exemplo: *.GIF ou *.AVI. File Export animation ou <Ctrl>+<Shift>+<X> 13
A janela Export animation será ativada. Veja o exemplo: Defina o local em que será salvo a sua animação. Não esqueça de salvar na sua unidade (F: ou G:) e sua respectiva pasta (que vai de acordo com a sua turma e o micro que você e seu parceiro de trabalho elegeram). Defina a extensão que você deseja salvar seu arquivo *.gif ou *.avi. 14
Lembre-se: Para inserir essa animação que você acabou de exportar na sua página que está sendo montada no FrontPage, utilize a opção Insert Picture From File (FrontPage inglês) ou Inserir Figura Do arquivo... (FrontPage português). Ou ainda, Insert Image (no caso do Dreamweaver). Exportando animações de texto na forma estática Um outra forma de exportar o seu texto animado será o recurso Export Bitmap, ou seja, através dessa opção você poderá salvar o seu arquivo com as extensões *.bmp (bitmap), *.jpeg, *.png e *.gif (na forma parada/estática). Por convensão vamos salvar de preferência com a extensão *.gif ou *.jpeg e nunca como *.bmp, uma vez que nossos servidores não reconhecem esse tipo de arquivo quando eles são publicados na Internet. Menu File Export Bitmap ou <Ctrl>+<Shift>+<E> ou A janela Export bitmap será ativada. Veja o exemplo: 15
Defina a extensão que você deseja salvar seu arquivo *.gif ou *.jpg. Criando o texto personalizado no Xara 3D Podemos usar qualquer texto no Xara 3D. Esse texto pode ser uma letra, palavra ou frase. A vantagem é trabalhar com as 3 dimensões largura, altura e profundidade. Isso não seria possível num editor de texto simples como por exemplo o bloco de notas e o Word Pad, apesar de existir o Word Art no MS-Word que oferece alguns exemplos de textos artísticos (2D e 3D). Menu Edit Text ou <Alt>+<T> ou 16
A janela Text Aplique negrito e/ou itálico Para mudar o aspecto de como será apresentado (entre 10 e 1000%), ou seja, mais fino, mais espesso. Digite o seu texto Área de Visualização
COLÉGIO PRESBITERIANO MACKENZIE Entendimento: A opção Aspect ratio (tradução: relação de aspecto) permite mudar a espessura e a largura do seu texto. Você poderá definir um valor entre 10 a 1000%, ou seja, quanto menor a porcentagem maior será a espessura (mais grossa) e a largura da letra. Assim, quanto maior a porcentagem, menor será a espessura (mais fina) e a largura do texto. Relação Aspect Ratio 10% 100% 1000% Vamos continuar trabalhando com esse arquivo. O próximo passo será mudar a cor de fundo da letra. Aplicando o Extrude no texto Através do comando Extrude é possível mudar a profundidade, a face dianteira e traseira do texto, a grossura da borda e a cor do texto. Menu Edit Extrude ou <Alt>+<E> ou 18
COLÉGIO PRESBITERIANO MACKENZIE SP Extrude Mude a cor do texto. Escolha a cor desejada. 19
Aprenda a mudar a face dianteira e traseira. Desativando essas opções, você estará optando por tirar a massa que preenche o texto, ou seja, desativando a opção Front face todo o seu conteúdo externo (ou visível) estará oculto. Veja o modelo: Com a opção outline (esboço) irá mostrar apenas o contorno, ou seja, a borda. Com a opção width podemos mudar a largura da borda (mais fina ou mais grossa). Quanto maior a porcentagem mais grossa a borda ou se preferir, maior será a definição do contorno (esboço). Veja no modelo: 20
Também temos a opção profundidade quer irá fazer com que o objeto fique em destaque no espaço. Devemos entender como espaço a área que abrange o objeto (texto) e o plano de fundo. Veja o modelo: Altere a numeração da profundidade. Aplicando (ângulo oblíquo) no texto animado bevel temos formatos prontos (curved angled,, round faced, faced, etc) para aplicar no texto animado. Temos nesse comando o depth (profundidade) que estará mudando a profundidade do etra e não sobre o espaço como aprendemos no tópico anterior. Menu Edit Bevel ou <Alt>+<B> ou 21
SP Veja o exemplo abaixo: Escolha o formato e aplique no seu texto. Altere a do seu objeto e não do 22
Animando e girando o texto Vamos começar a movimentar o nosso texto. Essa parte com certeza será muito utilizada por todos vocês. O que faz o Xara 3D ser o sucesso entre os apaixonados por animação é justamente a interface fácil de criar animação. Repito: não requer habilidade e tão pouco conhecimento, basta apenas ser criativo e explorar todos os recursos oferecidos, um vez que não são tantos como os programas de animação profissional. Menu Edit Animate ou <Alt>+<A> ou A janela Animate será ativada. Veja o exemplo abaixo: Quando desmarcada muda o sentido da leitura. Ao girar o texto irá mostrar as letras de trás para frente. 1º-Frames per revolution (revolução por quadros/frames): quanto menor a numeração, maior será a quantidade de voltas em cada frame/quadro. 2º-Frames per second (frames/quadros por segundos): quanto maior a numeração, maior será a quantidade de voltas por segundo. 23
COLÉGIO PRESBITERIANO MACKENZIE Marque os itens que você deseja utilizar a animação. No exemplo ao lado podemos aplicar animação ao texto (text) e às luzes (lights). Utilize essas para mostrar o sentido que texto. Da esquerda para a direita. De baixo para Vale a pena ressaltar que todos esse recursos aprendidos sobre animação, apenas funcionará utilizando a opção animation). (Start / Stop 24
Executando a animação Depois de definir e escolher os formatos e os tipos de animações, vamos vê-las em movimento utilizando o comando Start animation. Menu View Start animation ou <Ctrl>+<Space> ou Lembre se: inserir na sua página que você gravou na unidade (F: ou G:) e a respectiva pasta. Como proceder? Animation Cuidado: File Export Bitmap Irá salvar apenas o texto estático, ou seja parado. 25
Muita atenção: File Save As Você estará salvando o texto no Xara 3D com a extensão *.X3D. Essa extensão será apenas reconhecida pelo Xara 3D e não por outros aplicativos (FrontPage, Dreamweaver, etc). Mudando a cor do Texto Utilize essa opção para mudar a cor das letras deixando-as do seu gosto e de acordo com a proposta do trabalho. Menu View Text Color 26
SP Defina a cor desejada. Aplicando textura ao Texto animado Aprendemos que para mudar a cor da letra devemos usar View Text Color ou simplesmente dar dois cliques sobre a(s) palavra(s). Além disso, podemos aplicar uma textura, ou seja, aplicar um plano de fundo personalizado sobre as letras, como por exemplo, a imagem da bandeira do Brasil sobre a palavra Brasil, ou mesmo montar um fundo que seja a junção das bandeiras dos dois países que será sede da Copa do Mundo 2002, além de inúmeros exemplos. O mais importante de tudo é a sua criatividade e o seu empenho no projeto. 27
Menu View Text texture ou 28
ivo usado como plano de preferência as extensões Visualize o arquivo que você selecionou. Veja como ficaria, utilizando a textura da bandeira do Brasil: 29
Mudando o Background do projeto Para o mudar o plano de fundo (background) do seu projeto, é simples: Menu View Background Color ou <Alt>+<G> Clique sobre o tom de cor Veja o exemplo abaixo: 30
Aplicando textura ao plano de fundo do projeto Da mesma forma que usamos um background (plano de fundo) para o texto, podemos também aplicar ao espaço em que encontra o texto. Menu View Background texture ou <Ctrl>+<Shift>+<G> 31
Defina qual será o arquivo usado como plano de fundo. Utilize de preferência as extensões *.jpg ou *.gif. Visualize o arquivo que você selecionou. Veja a aplicação: Trabalhando com os efeitos de luzes Vamos ajustar os efeitos de luzes sobre o gráfico. Menu View Display lighting ou <Ctrl>+<Tab> ou 32
Clique e arraste para a nova posição. mudando o foco de luz que incide sobre o juntas (vertical, horizontal e diagonal) do texto. 33
Observe o gráfico: y z x O gráfico apresenta três eixos (x, y, z), cujas letras foram escolhidas arbitrariamente. Com isso podemos fazer uma analogia entre esse gráfico e a imagem anterior (que apresenta o efeito Display lighting ) onde as setas assumem as mesmas posições (x,y, z). Os eixos x, y, z poderão assumir respectivamente os sentidos de luzes horizontal, vertical e diagonal). E conforme você altera a posição deles (basta clicar e arrastar sobre a seta 3D), estará mudando o foco de incidência das luzes sobre o objeto. 34