Postagens

Mostrando postagens de Janeiro, 2010

Fireworks CS4: Criando Group Mask

Imagem
Acham que máscaras interessantes existem somente do Photoshop e Flash?!

Não, também conseguimos criar máscaras muito boas no Fireworks. Claro de uma forma diferente, mas no final é uma máscara.

Prática? Sim

Fácil? Mas é claro... não poderia ser diferente hehehehehe

Como já tenho uma vídeo aula, convido-os para assistirem:




Photoshop CS4: Trabalhando com o Painel Clone Souce

Imagem
O painel Clone Source tem opções para as ferramentas Clone Stamp e Healing Brush e é muito útil.Você pode configurar até cinco origens de amostra diferentes e selecionar rapidamente a que precisa aplicando na sua montagem.

Não é necessário criar uma amostra novamente toda vez que precisar alterar para uma origem diferente. É possível exibir uma sobreposição da origem da amostra para auxílio na clonagem da origem em um local específico.

Você também pode redimensionar ou girar a origem da amostra para melhor correspondência de tamanho e orientação do destino da clonagem.

Isso não é fantástico???? Respondeu: - Simmmmmmmmmmmmmmmmmm.

E com morangos não fica melhor, ainda????? - Mas é claro...

Veja a vídeo aula e bom estudo e no final você verá quanta praticidade podemos ganhar com esta ferramenta...

Vídeo aula: Trabalhando com a Clone Source

Esta é uma amostra de como ficará o exemplo da vídeo aula:


Criando Movie Clip como máscara no Flash CS4

Imagem
Pois é... em conversa com alguns alunos e tirando algumas dúvidas de alguns poucos esquecimentos, resolvi postar este pequeno tutorial que ensina como fazermos uma máscara usando Movie Clips. Então, vamos lá...

1- Importe para a palco (Stage) uma imagem, clicando em File > Import > Import to Stage.
2- Renomeie-e esta layer para "imagem" .
3- Deixe a imagem no tamanho de 400x300 pixels.
4- Crie uma nova layer e renomei-a para “Mask”.
5- Desenhe um retângulo na parte de cima da imagem de tamanho 400x50 na layer “Mask”.
6- Transforme esta forma em um símbolo Movie Clip com o nome de “mask”.
7- Crie uma nova layer e renomei-a para “luz”, deixando-a acima da layer "Mask" .
8- Dê um duplo clique me cima do Movie Clip “mask” e transforme a forma novamente em Movie Clip de nome “barra”.
9- Duplique este símbolo até cobrir totalmente a imagem.














10- Com todos os movieclips selecionados no palco, vamos clicar em Modify > Timeline > Distribute to Layers, assim cada …

Formatando Hiperlinks no Flash CS4

Imagem
É possível criar hiperlinks no Flash? Sim

É fácil? Sim

É prático? Muito...

Então, vamos ver como funciona.

1- Crie um arquivo novo no Flash: Flash File (ActionScript 3.0);
2- Crie uma caixa de texto dinâmico e coloque o nome de instancia de "txt";
3- Numa nova camada chame o painel actions (F9);
4- Digite a action abaixo:







Uma variável nomeada de "css" é declarada e configurada como um objeto da classe StyleSheet. Essa classe é especialmente útil para formatar hiperlinks, mas suporta apenas a configuração do HTML 1.0

A propriedade htmlText é configurada para o campo de texto dinâmico, para que este aceite as tags do HTML.

5- Teste seu filme e veja o resultado:
















... é quem disse que o Flash não é bom mesmo????

... é apaixonante e desafiador...

Abraços e bom estudo.

Trabalhando com Backgrounds

Imagem
Imagine que são 08:00hs da manhã de uma segunda-feira e você recebeu uma demanda de fazer um layout fluido ou elástico, significando que ele precisa se adaptar em altura e largura ao navegador do usuário.

"Mas o que é isso?" Pensa...

Não tema, estou aqui para ajudar. Portanto, vamos a parte divertida:

1- Crie um novo arquivo HTML;
2- Iremos configurar uma regra para a tag body, aonde teremos um filetizinho de uma imagem gradiente, que pode ser criado no Photoshop, Fireworks ou qualquer outro aplicativo gráfico de sua escolha;
A regra fica da seguinte forma:

body{
background-image: url(fundo_site.jpg);
background-repeat: repeat-x;
background-color: #9A9A9A;
}

Configuramos a cor de background do corpo com cinza (#9a9a9a) e repetimos a imagem em gradiente somente ao longo do eixo X.

3- Agora vamos criar colocar uma imagem no canto superior direito da tela do navegador. Criamos uma div absoluta:






4- Nossa próxima tarefa é estilizar essa Div, adicionando a imagem de background:

#imag…

Máscara com guia de movimento no Flash CS4

Imagem
Criar máscaras no Flash é muito bom e na versão CS4... Ufa!!! ficou uma maravilha. Vamos ver como fazemos:

1- Crie um novo documento e importe para o palco uma imagem;
2- Selecione esta imagem e converta-a em um símbolo Movie Clip;
3- Selecione este Movie Clip e no painel Properties de o nome de instância para ela de “foto” no campo Instance Name.
4- Renomeie a layer que contém a imagem para “mascarada”, clique no frame 40 e escolha a opção Insert Frame.
5- Crie uma nova layer, renomeando-a para “mascara”.
6- Desenhe um círculo na esquerda da tela e converta-o para um símbolo Movie Clip;
7- Instancie este Movie Clip para “bola”;
8- Insira um Keyframe no quadro 40 da camada “mascara” e altere a posição do Movie Clip para a direita da tela.
9- Clique com o botão direito do mouse entre os frames e escolha a opção "Create Classic Tween";
10- Clique com o botão direito do mouse em cima da layer "mascara" e escolha a opção "Add Classic Motion Guide";
11- Na lay…

Criando estilos css para imagens

Imagem
A frase "uma imagem vale por mil palavras" é um clichê que perdurou com razão. As imagens são uma forma extraordinária de representar uma informação que um texto não consegue, e é por isso que imagens em sites é uma união perfeita.

Deste tutorial criaremos um estilo css com bordas e padding para estilizar o estado hover da imagem.

Nosso HTML ficará desta forma:

img src="imagem.jpg" width="200" height="133" alt="Imagem"
Em seguida criaremos uma regra css do tipo class para aplicar na imagem como o exemplo abaixo:

.foto {
background-color: #DDBB73;
padding: 15px;
border: 3px groove #853824;
}
.foto:hover {
background-color: #8D3D26;
}
Depois de criada as regras aplicamos na imagem:

img src="imagem.jpg" alt="Imagem" width="200" height="133" class="foto"

Ao final nossa imagem ficará com uma moldura com preenchimento e quando passarmos o mouse em cima o fundo mudará a cor, também:


Brinque a vont…