Posts

<<First | <Prev | 26-35 of 38 | Next> | Last>>

Tutorial: Layout para um player de músicas
Entry posted on Apr 21 by Ana Laura Gomes

Tutorial: Layout para um player de músicas

Este tutorial é, além de uma referência para criar botões de um player de músicas, uma abordagem do fluxo de trabalho com o Fireworks. Portanto, a etapa inicial do trabalho é o planejamento seguido então pela execução.

A ideia inicial de se criar um player de músicas para ser usado no Connect, que é nossa sala de reunião online, veio do Gustavo Del Vechio, manager do grupo Designers do Interior de São Paulo. Rapidamente a comunidade flash se interessou e o Lauro Santo, manager do grupo MUGBA Multimedia User Group Bahia, fez os testes técnicos com o Flash e lançou o desafio de desenvolvimento da interface.

Bem... Isso é um trabalhinho excelente para o Fireworks!

:-)

#1 _ Planejamento

#1.1

Primeiro passo: dar uma olhada nos players existentes:

• windows media player

• rádio UOL

• myspace

#1.2

Quais os botões mais comuns?

• play/pause - o mesmo botão assume uma função ou a outra, de acordo com o contexto
• próxima música e música anterior
• reprodução aleatória - é o botão que parece um X de setas
• repetição
• volume - com algum tipo de slider para ocontrole
• com/sem áudio - botão contextual que assume uma ou outra função
• slider indicando o tempo de reprodução da música

#1.3

Agora uma olhada na interface do connect, onde o player será utilizado. Principalmente para criar um player que seja delicado o suficiente para não comprometer o uso da ferramenta sem perder a usabilidade dos botões de comando e controle.

Usando a ferramenta Pixus (http://adobe.ly/ee9kS2) foi medida uma possível área (230x50px) onde o player pode ser colocado, sem atrapalhar a interface de compatilhamento.

Com esses dados, já podemos partir para a contrução do player.

#2 _ Planejamento no Fireworks

(as telas são do Fireworks 5.5, mas versões mais antigas podem ser usadas)

#2.1

Abra o Fireworks e indique uma página de 230x50px.

Obs.: a altura do player não é muito rigorosa, o mais importante é manter a largura...

#2.2

Antes de desenhar prá valer, é melhor fazer um pequeno rascunho do projeto. Para isso, vamos retomar a lista de botões e criar uma pequena legenda de símbolos para cada um dos botões.

• círculo vermelho - play/pause
• um círculo para cada azul - próxima música e música anterior
• quadrado verde - reprodução aleatória
• quadrado amarelo - repetição
• retângulo vermelho - volume
• círculo verde - com/sem áudio
• retângulo verde - tempo de reprodução da música

E então, colocar esses símbolos na área planejada e "brincar" um pouco com a posição dos elementos.

Para facilitar a minha brincadeira, eu reproduzi o texto no bloco de notas para conferir minhas decisões de posicionamento dos botões.

Repare que esta é uma boa hora para verificar o tamanho destes botões. Se você está visualizando a área de desenho a 100% e está com dificuldade de manipular as formas geométricas, como espera que o seu visitante interaja com sua interface? Neste player não há espaço para texto, mas ele pode crescer um pouco na altura para receber uma caixa de texto com facilidade. Por enquanto vamos ficar apenas com os botões e controles deslizantes.

Obs.: essa foi a minha opção, qual foi a sua? se quiser, mande a sua versão do layout através dos comments deste post.

#3 _ Criação no Fireworks

#3.1

Guarde o projeto em uma página e inicie uma nova página para o desenho de fato da arte. Para isso use o painel Pages (Páginas).

#3.2

Escolhendo um conjunto de cores com o Kuler.

Essa etapa é dispensável se você costuma se dar bem na escolha de cores. Mas, se você está com pressa ou de fato é um tanto desprovido de habilidade artística, use o Kuler para facilitar o seu trabalho!

Obs.: Para essa etapa será necessário estar conectado à internet.

#3.2.1

Abra o painel Kuler: Windows > Extensions > Kuler (Janela > Extensões > Kuler)

#3.2.2

Escolha um tema ou cor e digite-o na caixa de busca. Pressione ENTER e aguarde as respostas em cores...

Procure até encontrar um conjunto de cores que lhe agrada... Nesse caso, vou ficar com a Montain tech.

#3.2.3

Clique no conjunto de cores desejado e, em seguida, no botão Add selected theme to swatches (Adicionar tema selecionado ao painel Amostras)

No painel Swatches você terá as cores adicionadas no final.

#3.2.4

Para usar essas cores do painel Swatches em qualquer caixa de seleção de cor, basta escolher uma dessas caixas, seja no painel de ferramentas ou no painel propriedades, clicar na caixa de cor, em seguida no botão de opções da caixa e escolher a opção Swatches Panel (Painel Amostras).

Dessa forma, as cores adicionadas do painel Kuler ao painel Swatches estarão sempre à disposição para utilização.

#3.3

Desenhando o botão Play:

Desenhe um triângulo (ferramenta Smart Polygon com 3 lados)

Rotacione para ficar com a ponta virada para a direita.

Neste exemplo foi usada a cor verde e a altura de 25px.

Em seguida, com o triângulo selecionado, adicione dois filtros no painel Properties:

• Bevel and Emboss > Inner Bevel

• Shadow and Glow > Drop Shadow

O resultado é o que segue:

#3.4

Salvando o estilo de filtros:

Para facilitar a utilização dos filtros criados nos outros botões, salve-os como estilos no painel Styles.

Com o triângulo selecionado, no painel Styles, clique no botão New Style .

Na janela New Style, digite um nome para o estilo e clique no botão OK.

O estilo fica salvo no painel Styles e disponível para ser utilizado sempre que necessário. Dessa forma, você poderá aplicar os dois filtros com apenas um clique.

#3.5

Desenhando o botão Avançar:

Desenhe um triângulo (ferramenta Smart Polygon com 3 lados).

Rotacione para que fique com a ponta virada para a direita.

Duplique o triângulo (Ctrl + Alt + D) e coloque um ao lado do outro.

Desenhe um retângulo estreito e que tenha a altura dos dois triângulos.

Neste exemplo foi usada a cor verde, triângulo de 15x9px e um retângulo de 15x3px.

Obs.: use a ferramenta de alinhamento da barra de ferramentas:

Selecione todos os elementos desse botão e clique no estilo Botão verde no painel Styles.

Em seguida, no painel Properties, pinte o preenchimento dos elementos na cor azul claro.

Agrupe os elementos para facilitar sua seleção.

#3.6

Desenhando o botão Retroceder:

Selecione o botão Avançar e duplique-o (Ctrl + Shift + D).

Arraste-o para o lado esquerdo do botão Play.

Obs.: Mantenha a tecla Shift apertada enquanto arrasta para manter o eixo ortogonal horizontal.

Na barra de ferramentas clique na opção Flip Horizontal.

Selecione os três botões e, no painel Align, clique no botão Space Evenly Horizontally.

O resultado deve ficar aproximadamente como segue.

#3.7

Desenhando a barra de reprodução:

Desenhe um retângulo de cantos arredondados (ferramenta Rounded Rectangle).

Pinte seu preenchimento de azul claro.

Obs.: foram usadas as medidas de 165x5px e cantos 100% arredondados.

Duplique a barra e altere seu comprimento para pouco menos da metade.

Obs.: Use o botão de controle Resize do objeto especial.

Pinte-a de verde.

Desenhe um retângulo de cantos arredondados para servir de controle deslizante.

Selecione o retângulo e aplique o estilo Botão Verde.

Obs.: Foi usado um retângulo de 5x16px.

#3.8

Desenhando o botão de reprodução aleatória:

Desenhe uma seta com a ponta voltada para a direita (ferramenta Arrow).

Obs.: Foi usada uma seta de 45x11px.

Rotacione a seta, aproximadamente 45°.

Duplique e inverta verticalmente (Botão Flip Vertical da barra de ferramentas).

Utilize a seta para baixo do teclado para afastar um pouco as setas do botão.

Selecione as duas setas e, no painel Path, clique no botão Union Paths.

Com as setas selecionadas, clique no botão do estilo Botão verde.

Pinte as setas de azul claro.

Altere a altura para 18px, mantendo a proporção na largura.

Obs.: Para isso, ative o botão Constrain Proportions no painel Properties.

#3.9

Desenhando o botão de repetição:

Desenhe uma seta e ajuste seus controles para que fique conforme segue:

Duplique a seta e inverta hozizontal e verticalmente.

Com o auxílio das setas do teclado, ajuste a posição das setas para que fique como segue:

Obs.: a altura das setas deve ficar com 18px.

Com as duas setas selecionadas, clique no botão de estilo Botão verde, em seguida, pinte-as de azul claro.

Agrupe os elementos para facilitar sua seleção.

Ajuste o posicionamento de todos os botões até o momento.

#3.10

Desenhando o botão de controle de áudio:

Desenhe um triângulo e um retângulo de bordas arredondadas.

Solde os dois elementos utilizando, no painel Path, a opção Union Paths.

Desenhe um Doughnut e use os controles da forma para diminuir o raio interno e alterar a forma do segmento.

Duplique esta forma e diminua um pouco.

Ajuste o alinhamento e a aproximação dos elementos.

Selecione todos os elementos e clique no estilo Botão verde.

Agrupe os elementos para facilitar sua seleção.

#3.11

Desenhando as barras de controle de áudio:

Desenhe um retângulo de aproximadamente 25x3px. Duplique-o 9 vezes e posicione-os conforme segue:

Com a ferramenta Pen, desenhe uma forma para criar o efeito de "escada" nos retângulos.

Selecione apenas os retângulos e combine-os utilizando, no painel Path, a opção Join Paths.

Posicione os retângulos para baixo da forma (Ctrl + Shift + Seta para baixo).

Selecione a forma e os retângulos e, no painel Path, clique na opção Punch Paths.

Selecione as barras e separe-as utilizando, no painel Path, a opção Split Paths.

Selecione os sete retângulos da parte inferior e pinte-os de verde.

Acerte a posição dos elementos.

#3.12

Desenhando o background:

Desenhe um retângulo que cubra toda a área de trabalho.

Pinte o retângulo de cinza escuro e escolha a textura Hatch4 e ative a opção Transparent.

Posicione o retângulo atrás de todos os elementos.

Não tenha nada selecionado.

No painel Properties, pinte a cor do Canvas de preto.

O resultado final é o que segue:

#4 _ Dicas finais

#4.1

Coloque cada um dos elementos em sua própria camada.

Para isso, selecione um botão, pressione as teclas Ctrl + X para recortar o elemento.

No painel Layers crie uma nova camada.

Clique duas vezes no nome da camada e escreva o nome do botão.

Pressione as teclas Ctrl + V para colar o elemento na camada criada.

#4.2

Crie novas páginas para indicar o aspecto dos botões quando passar o mouse por cima ou clicar.

Para duplicar uma página pronta, no painel Pages, clique na página e arraste-a para o botão New/duplicate page.

Nesse exemplo, será necessário criar o botão Pause e o botão Sem áudio.

Veja como ficariam:

Agora é com o pessoal da programação do Flash.

Depois eu conto o resultado!

Quem quiser contribuir e mandar suas opções, estejam a vontade!

Será um prazer receber suas sugestões e utilizá-las no player de nossas reuniões online.

bjs,
Ana Laura Gomes

Twitter do grupo: @fireworksBR
Entry posted on Jan 24 by Ana Laura Gomes

olá para todos!

acabo de criar o twitter do grupo:

@firewroksBR

uma forma rápida e divertida de trocar dicas e ideias!

acompanhe, divulgue, participe!

abs,
ana laura gomes

Teste - comparando taxa de compressão
Entry posted on Mar 03 by Ana Laura Gomes

olá!

numa bola levantada no grupo HTML5/CSS3 sobre compactação de imagens, resolvi fazer um teste rápido para ver o resultado... vejam:

• selecionei uma imagem e escolhi o tamanho - 500x500px, 65kb.

• redimensionei usando 3 métodos diferentes:

  ❉ serviço online kraken.io >> resultado: 34kb

       - fiz o upload da imagem,

       - fiz a escolha de otimização, primeiro lossless e depois lossy, entretanto as duas deram o mesmo resultado

       - baixei o arquivo de resultado

  ❉ photoshop >> resultado: 26kb

       - abri a imagem original

       - file > save for web

       - ajustei manualmente as configurações de exportação, observando o resultado final para não haver perda da qualidade (produto final com JPG, qualidade 40)

  ❉ fireworks >> resultado: 21kb

       - abri a imagem original

       - botão preview

       - painel optimize e configurei manualmente, observando o resultado final para não haver perda da qualidade (produto final com JPG, qualidade 60)

vejam a qualidade das imagens abaixo!

acho que ainda poderia espremer um tiquinho a mais, tanto no photoshop quanto no fireworks, mas já dá para perceber a diferença. nos dois a imagem ficou menor que no serviço online. sei que não é todo mundo que tem estas ferramentas, mas é bom lembrar que em tempos de mobilidade é super importante reduzir cada byte de informação desnecessária. e tem outra coisa, acho muito importante olhar o resultado antes de comprimir. eu estou vendo o que estou fazendo, isso conta bastante!

espero que tenham gostado!

bjs,

ana laura gomes

original - 65kb:

serviço online kraken.io >> resultado: 34kb

photoshop >> resultado: 26kb

fireworks >> resultado: 21kb

comparando taxa de compressão em arquivos jpg: serviço online, photoshop e fireworks

Hoje - reunião online - apresentação FW CS6
Entry posted on Apr 25 by Ana Laura Gomes

olá!

hoje, 25/04, às 17h30, farei a primeira reunião online de apresentação dos novos recursos do Firewroks CS6.

local: http://experts.adobeconnect.com/fireworkscs6/

todos devem entrar como GUEST e colocar seu nome.

não é necessário ser membro do grupo para participar, mas vai ser muito legal se os não membros cadastrarem-se!!

bjs e até daqui a pouco

ana laura gomes

Page curl (página enrolada) no Fireworks
Entry posted on Aug 12 by Ana Laura Gomes

Página enrolada no Fireworks

:: tradução: Lucas Holtz Mano (lholtzmano@gmail.com)
:: revisão: Ana Laura Gomes (analauragomes@gmail.com)
:: original: http://www.voidix.com/fireworks_page_curl.html

Nesse tutorial vou te mostrar como adicionar uma curva de página estilosa à sua imagem.

Para começar, vamos pegar uma imagem que podemos utilizar para adicionar a curva de página. Aqui está a que eu usei.

#1

Utilize a ferramenta Polygon Lasso para selecionar o canto que você quer encurvar. Faça uma seleção semelhante à minha. Quando tiver selecionado, aperte Delete para remover aquele pedaço da imagem.

#2

Clique na ferramenta Gradient e escolha um Gradiente Linear. Troque as cores para combinar com a imagem que você está utilizando. Você quer que a página pareça que está virando para você, então coloque a parte mais clara do gradient perto do centro. Posicione seu gradiente de forma que as linhas fiquem paralelas à inclinação da curva da página. Veja o exemplo abaixo.

Obs.: Neste ponto há uma falha no roteiro original. É melhor criar, com a ferramenta Pen, uma forma geométrica igual ao "buraco" deixado na imagem e então aplicar o gradiente. Se usar o Gradiente Cone facilita também.

#3

Agora nós vamos colocar isso na posição correta. Escolha [menu] Modify > Transform > Free Transform.

#4

Rotacione seu gradiente e posicione-o na linha que você deletou da imagem.

#5

Agora vamos dar a imagem um pouco de profundidade. Adicione uma Drop Shadow clicando + na sua barra de propriedades. Mude a direção da fonte de luz para que a sombra apareça na sua imagem e não no espaço deletado.

#6

Está pronto! Aqui está um exemplo de como fica com um texto e um background escuro.

Obs.: outro detalhe interessante de usarmos um vetor para fazer a "virada" é que podemos aprimorar o acabamento:

• depois da rotação, aumentar um pouco o vetor para que ele se encaixe mais perfeitamente ao recorte;
• em seguida ajustar o gradiente;
• por fim, com a ferramenta Freeform, acrescentar uma ligeira curva na parte inferior do triângulo para aumentar a sensação de "virada". (pode ser necessário aprimorar a curva com a ferramenta Subselection.)

Camiseta sorteada no 3º encontro online
Entry posted on Jun 30 by Ana Laura Gomes

olá membros do grupo!

é com muita honra que divulgo a foto do ganhador da camiseta do terceiro encontro: marcos reis!

demorou pq foi de são paulo até maceió!! além disso, ele mandou fazer uns ajustes, para cair ainda melhor e fazer bonito, morri de orgulho!

bjs e boa sorte à todos nos próximos sorteios...

ps - é marcos, confesso q tb dou uma ajustadinha nas minhas... tamanho americano é fogo :)

Gradientes
Entry posted on Feb 24 by Ana Laura Gomes

Vendo esse artigo sobre gradientes, www.creativebeacon.com/more-gradient-options-with-adobe-fireworks, me lembrei do quanto essa pequena ferramenta é poderosa. Muito embora os tais gradientes não sejam levados muito a sério por alguns designers, eles podem ser usados, principalmente quando dentro de uma composição agradável, sem exageros...

A dica da ferramenta é: aplique o gradiente e tente novas variações com a ferramenta de seleção nas alças de controle do preenchimento.

Lembre-se de que você pode ainda usar os controles da caixa de cor para adicionar cores ou alterar a opacidade das mesmas.

bjs,
ana laura gomes

Resultado do encontro 2
Entry posted on Mar 28 by Ana Laura Gomes

olá para todos!

aqui estão alguns dos links que compartilhamos ontem, além das nossas fotos e o resultado dos sorteios!

agradeço do fundo do coração ao Rodrigo, ao Yuri e à Larissa que enfrentaram a chuva e compareceram: super obrigada!

quem não pode participar lá, pode agora saber um pouquinho sobre o que falamos...

links que rolaram para buscar novas extensões para turbinar o fireworks:

http://johndunning.com/fireworks/

http://fireworks.abeall.com/extensions

conjunto de extensões já selecionadas (por ana laura, arquivo zip, 6.3mb):

http://www.mediafire.com/?rzbjh28q7it0u12

acrescentei um outro conjunto de extensões no anexo deste post: ficou um pouquinho maior... 6.77mb. está mais atual.

lembrete...
quem tem windows deve executar o programa para instalar extensões - Adobe Extension Manager - como administrador:
clique com o botão direito > executar como administrador

adobe shadow

para quem ainda não viu o novo programa free da adobe que auxilia a criação para múltiplos dispositivos

http://webdemais.com.br/2012/03/07/novidade-adobe-shadow/

desenvolvimento web

grupo do Yuri no Facebook para desenvolvodeores web

http://www.facebook.com/groups/desenvolvimentoweb/

bloco de notas online gratuito:

http://notepad.cc

Parece que nem todos estão recebendo as mensagens de notificação sobre o que acontece no grupo.

Me comprometi a fazer um roteiro do que assinar dentro do grupo para receber emails de notícias/blog/thread.

Vamos fazer uns testes e depois compartilho o resultado/roteiro.

e como não poderia deixar de ser... nós!!!

Rodrigo, Larissa e Yuri

Rodrigo, Larissa, Yuri e Ana Laura

resultado do sorteio:

Rodrigo: livro Dreamweaver

Larissa: Camiseta

Yuri: livro Fireworks

Todos levaram mousepad e caneta :)

Um agradecimento mais que especial para a Eng DTP & Multimídia que abrigou nosso encontro e ofereceu um welcome coffee delicioso!!!

bjs à todos!

ana laura gomes

Caixas em diversos formatos para conter textos
Entry posted on Aug 12 by Ana Laura Gomes

Contornando formas com textos

:: tradução: Lucas Holtz Mano (lholtzmano@gmail.com)
:: revisão: Ana Laura Gomes (analauragomes@gmail.com)
:: original: http://www.fireworkszone.com/redirectionNbClicks.php?root=2&idLogiciel=4&idTutorial=449

#1.

Para quebrar um texto ao redor de um objeto, você precisa primeiro criar a forma que irá conter o texto. Em nosso exemplo, estamos contornando o texto em volta de um círculo.

#2.

Desenhe um círculo de 177x177px de diâmetro e um retângulo de 277x160px que será o recipiente para o texto.

#3.

Certifique-se de que o círculo esteja cobrindo o retângulo. Selecione os dois e vá em [menu] "Modify > Combine Paths > Punch".

#4.

Digite um texto.

Selecione o texto e a forma e vá em [menu] "Text > Attach In Path" e seu texto seguirá a forma.

[nota: no Firewroks CS 5.5 o texto permanece editável memso após o comando]

[outro modelo]

#5.

Outras Formas

Formas que você pode usar para receber os textos.

#6.

Limitação (ões)

O texto deve ser inserido em uma forma fechada e não funciona com o Auto Shapes a não ser que você as desagrupe.

Gravação e arquivos do primeiro encontro 1
Entry posted on Apr 13 by Ana Laura Gomes

oi pessoal!

uma reunião rapidinha para marcar o início da nova série!

foi muito bacana! começou timidamente mas depois chegou a galera! super, super obrigada!

espero q todos gostem bastante.

é para quem está iniciando, e um pouco sobre a nova versão CS5.5 e o que está por vir... navegadores, devices...

http://experts.adobeconnect.com/p3jag2lys5d/

os arquivos estão no arquivo ZIP anexo ao post.

curtam bastante e vamos tocar esse grupo, ok?!

divulgar é preciso!

bjs,
ana laura

Filter by Date

Filter by Tag

Change View

Titles
Summaries
Table
Clip
Clip & Comments
Full

Change Sort

Alphabetically
By Last Activity
By Date Posted
By Number of Comments
By Number of Views
By Author