WFLORIPA – Prof. Willians Silva

alve Galera!

a pedidos, vai a dica ai… especial para a turma de web…

Dicas de Atalhos:

F5 – Compartilhar os Frames,
F6 – Criar um novo KeyFrame, e copia os objetos do KeyFrame Anterior, no mesmo local.
F7 – Criar um novo KeyFrame vazio (em branco);
F8 – Converte o objeto em Symbol;
F9 – Abre o painel de Action;
F12 – Visualiza o flash no navegador através de um arquivo .html;
Shift + F5 – Quando selecionado os frames, apaga/deleta;
Ctrl + Shift + V – colar no mesmo local da Cópia.
Ctrl + L – Abrir o painel Biblioteca;
Ctrl + 1 – Visualiza o Estage em zoom de 100%;

————————————————————

Técnica de Pré-Load com: percentual, kbytes e barra

ifFrameLoaded(“anima”,50){
gotoAndPlay(“anima”,1);
}
bytes = int(this.getBytesLoaded() / 1024) + “KB”;
A = this.getBytesLoaded() / this.getBytesTotal() * 100;
porcentagem = int(A) + “%”;
setProperty(“_root.bar”, _xscale, A);
————————————————————

Substituir o ponteiro do Mouse

Tipo 1:
I – faça um desenho de uma seta (por exemplo: >), converta em MovieClipe (F8), e coloque nome de Instância como: cursor_mc

II – no primeiro frame adicione a ação de script abaixo:

import mx.effects.Tween;
import mx.transitions.easing.*

var objRetorno:Object = new Object()
var objList:Object = new Object();

objRetorno.onTweenUpdate = function(Valor) {

cursor_mc._x = Valor[0];
cursor_mc._y = Valor[1];

};

objList.onMouseMove = function() {

Mouse.hide()

var animacao = new Tween(objRetorno, [cursor_mc._x, cursor_mc._y], [_root._xmouse, _root._ymouse], 800);
animacao.easingEquation = Elastic.easeOut;

};

Mouse.addListener(objList);

Mouse.hide() ;

————–

Tipo 2:

I – faça um desenho (exemplo uma seta), convert em movie clip (f8), e dê um nome de instancia de : mover_mc;

II – no primeiro frame da scene 1 coloque a action abaixo:

startDrag(“mover_mc”, true);
Mouse.hide();

boa sorte,

Abração

Profe.

Salve Galera!

A pedidos segue a receitinha do Motion Tween, no Flash 8..

Alguns Atalhos:
F5 => Compartilha os Frames (extende);
F6 => Cria um novo KeyFrame (quadro Chave) e copia os objetos que estão no KeyFrame anterior;
F7 => Cria um novo KeyFrame em Branco;
F8 => Converte o ítem selecionado em Symbol ( Graphic, Bottom ou Movie Clipe);
Shift + F5 => Excluir os frames selecionados;
Ctrl + Shift + V => Colar no mesmo local;

I – Desenhe uma elipse (pode ser uma foto, ou um texto.. também);

II – com a Seta preta, selecione o objeto(a bolinha desenhada) e acione a tecla F8 para converter em Graphic;

III – Após converter em Graphic, clique no frame 50 (na Timeline) e acine a tecla F6 ;

IV – Com a seta preta, selecione (na timeline) o frame 1 até o frame 50;

V – na parte inferior do software, vá no painel de properties, opção: Tween / Motion (processo de interpolação de Movimento);

VI – Clique (na timeline) no frame 25, acione a tecla F6 e mova (com a seta preta) o objeto (a bolinha) para cima,

 VI – Acine as teclas: ctrl + Enter, para visualizar a animação;

Exemplo 1:

Exemplo 2: 

Obs.: Para fazer mais de uma animação concomitante, deve-se criar outra layer, ou seja, uma layer correspondente para cada animação.

Boa Sorte!

Fireworks Tips and Tricks

Comunique-se!

Este texto tem a intenção de auxiliar o Web designer a comunicar com eficiência.

A comunicação consiste no ato de emitir, transmitir ou receber mensagens, seja por meio de sons, sinais, gestos ou por meio da linguagem oral e escrita. Para ser completa, é preciso haver um emissor, que produz e envia a mensagem, e um receptor, que recebe e decodifica essa mensagem, procurando apreender o seu conteúdo.

A comunicação para a vida humana é de extrema importância. Vale lembrar que quem recebe a mensagem não é um ser passivo, que apenas absorve informações. Direta ou indiretamente, o receptor exerce influência sobre quem transmite a mensagem. Para ser compreendido, o emissor precisa saber em que condições sua mensagem será recebida. (Fonte:http://revistaescola.abril.com.br/online/planosdeaula/ensino-fundamental1/PlanoAula_276911.shtml).

Existem à disposição sofisticados meios de comunicação e informação, baseados no extraordinário desenvolvimento científico-tecnológico desse campo nas últimas décadas: telégrafo, correios, telefone, rádio, TV, satélites artificiais, internet e outros. Alguns deles atingem milhões de pessoas, como é o caso dos sites.

Imagens são importantes recursos para a comunicação de idéias. De acordo com Martins, Gouveia e Piccinini (2005), as imagens comunicam de forma mais direta e objetiva do que as palavras. Há uma diversidade de formas de engajamento com a imagem (afetivo, cognitivo, estético) e uma variedade de estratégias de leitura.

As figuras, fotos e imagens têm uma força maior de comunicação do que as palavras desde que bem selecionadas para a mensagem que se quer passar. Nesse sentido, há que se considerar se a imagem utilizada é condizente com o público alvo que se quer atingir. Desta forma, se terá mais chances de que a idéia seja transmitida com sucesso. Outra dica interessante é trabalhar com símbolos socialmente reconhecidos. Há! E não se pode esquecer também da preservação da fonte e da verificação do direito autoral sobre a imagem.

Outra forma importante de se comunicar é por meio do som. No dia-a-dia esta é a principal e ás vezes única forma de comunicação. Um grande exemplo é a TV que utiliza principalmente da imagem, mas que sem o som não consegue transmitir sua mensagem por completo. Não concorda? Tente assistir TV com o som no mudo…

Apesar de grande apelo, o som é pouco explorado por sites. Em geral, é possível dividir em três tipos o modo como as pessoas se relacionam com a informação: o visual, o auditivo e o sinestésico (fazendo).

Este é um tema muito interessante, mas aqui vamos restringir o assunto só para lembrar que o meio de comunicação que utiliza o som, a imagem e a interação atinge o maior número de pessoas e conquista maior receptividade.

Estas são algumas dicas, então, mãos à obra Web Designer!!

Importante! estas explicações são exclusivas para meus alunos do curso de web,  muitas informações não estão citadas aqui, foram faladas em aula.

Salve Galera!

ai vai a pedidos .. a receitinha de bolo..

I – lembrando.. cria a pasta raiz do site, vai no menu site/new e cadastra esse novo site apontando pra pasta raiz…

II – crie uma pagina em html em branco(file/new/general/create) e salve como layout.html(ctrl + s);

III – faça a “sua” estrutura do site ex.: (monte uma tabela 3 x 1, na primeira linha coloque o menu, na segunda linha fica reservada para o conteudo e na terceira linha coloque as informações do rodapé) e salve (ctrl + s);

IV – salve como template: file/save as template, nomeie esse template(na janelinha que irá abrir);

V – clique na célula (da tabela) ou no local onde será inserido a região editável, inserir pela barra common – Templates: Editable Region, nomeie como conteudos.. e salve (ctrl + s) e feche o arquivo;

VI – vamos agora inserir novas paginas usando o modelo criado, vá em: file/new/templates/ escolha o seu site com o modelo correspondente e create.

VII – salvar essa nova pagina criada (ctrl +s) e inserir o conteudo dentro da área editavel.

VIII – repetir o processo do item VI para todas as páginas…

IX – depois de todas as pagina criadas, vá nas pasta templates, e abra o seu arquivo .dwt, selecione os seus links e aponte para as páginas, criando os links, após salve o arquivo (ctrl +s)

x – feche o template, abra o seu index.html e com F12 visualize no seu navegador e teste.

abraço

Willians

Salve Galera!

Nesta terça-feira, passei boa parte do dia gravando uma entrevista para a TvBv , Programa Educação e Cidadania – da Maria Odete Olsen, onde conta sobre a jornada de trabalho de um Web Designer, ..

Além da entrevista comigo, o pessoal de Games e o Rodrigo Carvalho (ex-aluno do curso de web) falaram também sobre a área ..

Vai para o ar no sábado dia 12 de julho, as 19hs no canal 9!

Seguem as fotinhos dos bastidores!

Abraços

veja as fotos no link: Fotos

Salve Galera!

Aconteceu o esperado Churraula!

Em coqueiros de frente para o mar, um visual paradisíaco, com muita gente animada e de bem com a vida, a turma do curso de web e convidadeos, confraternizaram-se e aproveitaram para aprender um pouco mais de web…

Com um pequeno atraso, pois Domingo o povo dorme bem, então somente as 11h15m o professor Willians(quem vos fala ..rs), iniciou a palestra ” e Agora, o que vem? se ficáx zóiando as tainha, váz mofá com a pomba na baláia.. ” onde mostrou a crescente utilização da internet no mundo e pelo mercado Brasileiro, a utilização do E-mail, e a web multimodal apresentando o iPhone..

As 12h entrou em cena o prof. Jackson, mostrando as tendências de uso da linguagem de programação, especificamente sobre Php, com exemplos bem interessantes.

A tecnóloga Ynamara Moraes finalizou a sessão de work shops falando sobre o Senac Ti e os cursos, e juntamente com a equipe do Senac presente: Anderson e Cris, entregaram brindes para os participantes.

Esse tipo de evento, sem muita formalidade, deixa os participantes bem à vontade e gera uma confraternização mais amigavel.

Valeu Galera!

Até a próxima.

Importante! estas explicações são exclusivas para meus alunos do curso de web,  muitas informações não estão citadas aqui, foram faladas em aula.

Salve Galera!

Vamos fazer aquele menu com botões rollover, que quando passamos os mouse em cima ele muda.. usando o Fireworks 8

I – Inserir um retângulo e escrever um texto sobre ele, alinhar a caixa de texto no centro, depois selecione a caixa de texto e o retangulo;

II – Pressione a tecla F8 ou vá no menu: modify/Symbol/Convert to Symbol e escolha Button;

III – Utilizando a seta preta ou branca, dê um duplo clique em cima do botão;

IV – Você estará agora dentro das propriedades do botão, visualize na parte superior as áreas: up/over/down/over while down/active area – clique na guia over, copia a imagem que está no estado up, clicando no botão no canto inferior direito da sua tela (copy up Graphic);

V – Clique no estado down, e copie a imagem do estado over, clicando no botão no canto inferior direito da sua tela (copy over Graphic);

Nota: você pode alterar as configurações de texto, cores e formas nos estados up/over/down e over while down.

VI – Vá no botão Done (no canto inferior direito da sua tela) para finalizar o processo.

VII – Selecione o botão com seta preta ou branca, segure a tecla Alt e arraste para gera uma cópia e repita esse processo de cópia para gerar as quantidades  que vc quer…
VIII – Selecione cada botão e vá na barra properties(em baixo da tela) na opção text e edit (troque) o texto para o que você necessita.

IX – Acione a tecla F12 para visualizar no navegador.
X – Para finalizar, dê um Trim Canvas (aparar a tela) usando (ctrl + alt + t), salve em seus arquivos com (ctrl + s) e export para usar no html (ctrl + shift + x) ..

Boa sorte

Profe

Importante! estas explicações são exclusivas para meus alunos do curso de web,  muitas informações não estão citadas aqui, foram faladas em aula.

As Janelas pop-up, são aquelas janelinha que abrem em cima da página do site, geralmente contendo fotos, ou conteúdos promocionais, etc..

I – Abra no Dreamweaver 8, uma nova página em html(File/New/Create), salve-a com o nome publicidade.html, escreva algum texto ou coloque um contéudo qualquer inserido nessa página.

II – Abra uma nova página, em html, salve-a com o nome produtos.html (ou qualquer outro nome), escreva um um pequeno texto. “para inserir um link, referenciando a página publicidade.html” (exemplo: Clique AQUI para saber das promoções ! )

III – Selecione a palavra “Aqui” (referida no item acima), e na barra de properties, opção links, escreva: javascript:; (esse comando em js, deixará o texto “Aqui” com propriedades de links, porém não levará a lugar nenhum)

IV – Selecione a palavra “Aqui” (onde foi realizado o link), e acima da barra de properties (onde é mostrado as tags) selecione a tag <a>;

V – Na lateral esquerda do Dreamweaver, vá no painel Tag Inspector/Behavior/+/Open Browser Window, clique no botão Browse, e escolha a página (publicidade.html), logo abaixo na opção Window Width e Height, insira as medidade de Largura e Altura da página que será aberta(ex.: 400 e 300), após salvar (ctrl + s);

VI – Teclar F12 para visualizar no navegador, clique no link para ver a janela..

Obs.: ser for abrir a janela pop-up com foto, nas opções do behavior, insira a largura e altura exatamente do tamanho da foto.

Se você quiser que a janela pop-up abra junto com o carregamento da página, isto é, sem ter de clicar, selecione a tag <body> (na opção que mostra as tags, acima da barra properties) e seguir as mesmas instruções acima, de configuração do painel behaviors…

Boa Sorte