Essa é uma aula a tempos pedida pela galera que assiste as aulas de Catalyst. Acontece que não dá para dar aula sobre tudo, vamos aos poucos dando ênfase naquilo que é mais pertinente a essa atividade que se chama Design de Interface, que é o que faço na DClick, juntamente com a parte de User Experience.

Com base nisso, pedi ao nosso Arquiteto de Informação que criasse alguns wireframes de algo bem genérico, optamos por um ShowRoom Virtual feito em Flex, desses que não podemos chamar de mero website, e sim uma aplicação inteligente para mostrar aos clientes alguns produtos, apesar de web, eu não considero como site e sim como uma webapp.

Enviei algumas premissas ao nosso Arquiteto que foram:

Criar um showroom virtual que pode na verdade ser qualquer coisa.

Ele será feito em flex4.

Não quero utilizar combo, quero uma navegação tranquila e mais fácil, porém tudo será dinâmico, ou seja, por um admin poderá ser alterado o menu, o que terá na vitrine etc. Isso na nossa lógica. Nós mesmos iremos até a parte da Skin.

1. Terá uma vitrine com uns 6 produtos em destaque.

2. Cada produto tem suas 3 ou mais fotos, e poderá ter até 1 vídeo.

3. A visualização desses produtos em destaque se dará por pageflip.

4. O menu será horizontal

5. Terá busca.

6. Menu por categoria e subcategoria.

7. Utilizará o tamanho padrão, não pode ter barra de rolagem.

8. Deverá ter o mínimo de coisa no menor espaço possível.

9. Vamos explorar mesmo a navegação do flex como se fosse um iOS (um iPad) etc..

Baseada nessas premissas nosso Arquiteto criou os wireframes, o mesmo ficou de criar alguns screencasts mostrando como funciona esse processo.

.

AULA 1

.

Vamos aprender como criar uma interface completa no Adobe Photoshop CS5, nosso foco é criar uma interface para Flex 4.

.

.

AULA 2

.

Criando o menu Bar com buttons e técnica para visualização do Wireframe diretamente na interface.

.

.

AULA 3

.

Trabalhando com os estados dos botões, up, over, down, técnicas para criar facilmente essa skin.

.

.

AULA 4

.

Aprendendendo a tabalhar com Layer Comps

.

.

AULA 5

.

Finalização da parte mais básica da interface, aplicação das imagens no ambiente com a mask.

.

.

AULA 6

.

Trabalhando bastante com SmartObject

.

.

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Devido o sucesso do último screencast, a décima sexta aula de Catalyst, onde ensino a criar um design diferenciado com o um estilo Apple, e a pedidos do pessoal que assiste, resolvi refinar esse layout.

A idéia é bem simples, depois do Mário Junior (Dev RJ) e do Thiago Felix (Dev SP) terem ficado perguntando porque eu não havia usado um Data List para organizar as imagens, tive que inserir nesse Screencast, e como comento o motivo era o tempo…

Mas aproveitei para mostrar como inserir imagens de maneira simples e fácil no Data List, e como mudar a sua orientação de vertical para horizontal, apesar de simples muitos ainda não conheciam essas funções.

Verá isso e outras dicas nesse Screencast.

.

.

flashcatalyst_17.fxp

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

post que explica como exportar o fxpl de um “menu wizard” no catalyst. Neste post você vai ver como importar o arquivo fxpl, criar um skin para o ButtonBar, modificar e aplicar o skin criado pelo Eduardo no novo skin do ButtonBar.

Para quem ainda não viu o screencast do Beck sobre skins, vale a pena conferir. Neste screencast o Beck foca bastante no skin do Button, e mostra as regras básicas para se criar um skin. Como o post do Eduardo fala sobre um ButtonBar, irei focar neste componente.

Antes de mais nada, vamos olhar a documentação do ButtonBar:



Pela documentação fica claro que o skin default do ButtonBar (spark.skins.spark.ButtonBarSkin) é composto por 4 partes, sendo 3 delas as partes que representam botões do ButtonBar, o primeiro botão (firstButton), os botões do meio (middleButton) e o último botão (lastButton). Vamos usar os botões que o Eduardo criou para mudar os skins dos botões.

1. Faça o download do arquivo fxpl disponibilizado pelo Eduardo.
2. Importe o fxpl no FlashBuilder




3. Após importar o arquivo, podemos ver a criação de um projeto library, que contém todos os componentes criados no Catalyst e também todos os assets necessários. Vamos nos atentar a 3 arquivos no projeto, Step1ToggleButton que vai ser o firstButton, o Step2ToggleButton que vai representar o middleButton e o Step3ToggleButton que vai ser o lastButton.





4. Após importado, vamos criar o skin do ButtonBar.






5. Agora vamos trocar os skins dos botões do WizzardButtonBarSkin que criamos no passo 4, usando os skins criado pelo Eduardo.




1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

xml version=“1.0″ encoding=“utf-8″?> “http://ns.adobe.com/mxml/2009″ ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark” ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″> ? ? ? ? ? ? ? ? ? ? ? ? “{vs}” ? ? ? ? ? ? ? ?? skinClass=“components.WizarButtonBar” ? ? /> ? ? ? ? “vs”> ? ? ? ? “Step1″> ? ? ? ? ? ? ? ? ? ? ? ? ? ? text=“Wizard step 1″ /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? “Step2″> ? ? ? ? ? ? ? ? ? ? ? ? ? ? text=“Wizard step 2″ /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? “Step3″> ? ? ? ? ? ? ? ? ? ? ? ? ? ? text=“Wizard step 3″ /> ? ? ? ? ? ? ? ? ? ? ? ? ? ?




6. Agora é só utilizar o novo skin e ver o resultado. Lembre-se de importar a biblioteca no seu projeto Flex.




1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

“http://ns.adobe.com/mxml/2009″ ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark” ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″> ? ? ? ? ? ? ? ? ? ? ? ? “{vs}” ? ? ? ? ? ? ? ?? skinClass=“components.WizarButtonBarSkin” ? ? /> ? ? ? ? “vs”> ? ? ? ? “Step1″> ? ? ? ? ? ? ? ? ? ? ? ? ? ? text=“Wizard step 1″ /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? “Step2″> ? ? ? ? ? ? ? ? ? ? ? ? ? ? text=“Wizard step 2″ /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? “Step3″> ? ? ? ? ? ? ? ? ? ? ? ? ? ? text=“Wizard step 3″ /> ? ? ? ? ? ? ? ? ? ? ? ? ? ?





7. Para finalizar, vamos arrumar o espaço entre os botões do ButtonBar. Para fazer isso é simples, é só editar o Skin que criamos no passo 4, e diminuir o gap do layout de -1 para -31, como segue:




1 2 3 4 5

“dataGroup” width=“100%” height=“100%”> ? ? ? ? ? ? ? ? ? ? “-31″/> ? ? ? ?



A arte final fica assim:

Agora voce já sabe como criar um skin para o ButtonBar e como você pode criar uma biblioteca de componentes usando o arquivo fxpl exportado do Catalyst.

O Eduardo fala sobre o Catalyst. O Gustavo fala sobre BDD e o Rafael Silva oferece boas dicas para quem está preparando monografia na área de TI.

Click to play

Clique aqui para fazer download

Em conversa com o Beck Novas (@becknovaes), a respeito de interfaces, ele fez uma observação muito interessante sobre os Widgets do Mac, sabe aquele botão de + para acrescentar novos Widgets? Pois bem, ele sobe e se torna o botão de fechar x, porém ele faz isso apenas rolando, é um efeito interessante. Estávamos discutindo isso para uma aplicação, e resolvi fazer um teste no Catalyst e mostrar como é possível usar tais recursos fugindo do tradicional do Flex.
Espero que gostem do resultado, eu direcionei o botão no sentido horário, mas o ideal e você rotacionar no sentido anti-horário para que ele pareça deslizar pela “parede” e volte no sentido horário…

Enfim, se não entendeu nada, assista ao Screencast.

AppleStyle

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Venho falar de um projecto que terminei em Janeiro, e que foi bem interessante de desenvolver visto que foram optadas algumas práticas de desenvolvimento focadas em display’s TV / LCD.

O projecto trata-se de o desenvolvimento de uma plataforma de comunicação visual para apresentação publica em Televisores. Com certeza já passou num aeroporto, hotel, ginásio e viu alguns LCD’s espalhados por lá com as mais diversas informações, principalmente nos aeroportos com as chegadas / partidas, pois então, o projecto focou-se no desenvolvimento de uma plataforma dessas em Adobe AIR (Flex 4) que pudesse facilmente ser administrada pelo cliente, mas também que fosse facilmente personalizada para poder ser distribuída por vários clientes.

O sistema baseou-se me duas aplicações, uma front-end para distribuição pelos clientes, apenas com controlo de chaves (Numero de série gerado pela administração) e que carregará toda uma playlist de vários módulos, bem como toda a skin (cores e logo). A segunda aplicação consiste numa area administrativa onde o cliente pode gerir a sua playlist, noticias, videos, animações, aniversariantes, noticias manuais, etc’s. Esta area administrativa também permite no caso do login de Super Administrador de gerir todos os clientes, skins, e restantes informações.

As playlists são ilimitadas, pelo que podem criar uma playlist completa para o dia!

Todo o sistema do cliente, ao abrir-se  (na primeira apresentação pede a chave da aplicação) carrega todas as informações do servidor; Skin, playlist e logotipo e adapta-se em fullscreen ao ecrã. Dá-se então inicio ao processo de carregamento da playlists e seus elementos. Esta palylist consiste na apresentação de variados modulos e respectivas durações de apresentações.  (Vejam as imagens mais em baixo…)

Os módulos desenvolvidos foram os seguintes:

• Noticias; Vários modulos de noticias de varias categorias, quer com fonte num Feed RSS  ou na base de dados (Inserção manual). Categorias: Actualidade, Mundo, economia, tecnologia, inovação, desporto, cultura, saúde, país.
• Tempo; Previsão de tempo para o dia e próximos 3 dias com a possibilidade de 1 ou mais locais na area central, e com os display das temperaturas para todas as grandes cidades no topo;
• Informação financeira; Bolsa de valores (cotações em tempo real) e Cambios.
• Aniversariantes; Possibilidade de apresentar aniversariantes e suas fotos /departamentos na area central para os próximos 7 dias.
• Animações / Publicidade; Possibilidade de colocar animações em formato SWF para display apenas na area central ou em fullscreen.
• Videos / Publicidade; Apresentação de videos em streamming na area central ou em fullscreen.

As noticias na area central podem conter também fotografias vindas de um feed RSS ou da base de dados. A playlist pode ser organizada com varios destes elementos / módulos, e facilmente gerida via “drag&drop”.  O sistema ficou preparado para a qualquer hora poder criar um novo módulo e integra-lo na playlist; Novos módulos se adivinham como conferências, dicas, publicidade, classificações de jogos, programação de canais de televisão, etc’s…

O sistema ainda conta com auto-update para se actualizar sem necessidade de intervenção do administrador, tal como a própria aplicação procura actualizações de noticias, skins, imagens, videos, playlist de 15 em 15 minutos para que desta forma apresentar sempre conteúdo actualizado.

Se eu ao inicio tinha algumas duvidas se o consumo de memória e processador da aplicação no (…)
Leia o resto de Adobe Air; Comunicação visual via TV (311 palavras)

© msdevweb for TSW – That Should Work Blog, 2011. | Permalink |No comment | Add to del.icio.us

Post tags: Air, catalyst, Desktop, flash builder, flex4, illustrator, tv

Joao Neves fala sobre testes unitários de DBUnit. E o Eduardo (@eduardohorvath 08:01) continua sua Saga sobre o Flash Catalyst e o Eduardo continua sua série de posts sobre o Flash Catalyst (um verdadeiro treinamento da ferramenta para você e de graça aqui no blog da DClick).

Click to play

Clique aqui para fazer download deste Podcast.

São 4 screencasts que tratam da criação de uma skin simples.

Nessas aulas você vai aprender a criar um menu dropdown (ainda com função combo, futuramente teremos a finalização detalhada desse menu), com add interaction em subníveis, vai aprender a lidar com o smooth transition fazendo transições harmônicas.

.

Flash Catalyst CS5 – Menu DropDown 01 (Button + Datalist)

.

.

Flash Catalyst CS5 – Menu DropDown 02 – Smooth Transition

.

.

Flash Catalyst CS5 – Menu DropDown 03 + Form (text imput + button + check box)

.

.

Flash Catalyst CS5 – Menu DropDown 04 – Add Interaction (sub níveis) + Smooth Transition

.

.

Arquivos FXP e PSD

flashcatalyst_dropdown

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Gustavo fala sobre RabbitMQ, AMQP e Spring-AMQP e o Eduardo continua sua série de posts sobre o Flash Catalyst (um verdadeiro treinamento da ferramenta para você e de graça aqui no blog da DClick).

Click to play

Clique aqui para fazer download deste Podcast.

Como havia prometido para vocês, hoje a aula é sobre preparar um componente para exportar um FXPL, arquivo para ser usado no Flex com library.

Eu faço uma rápida configuração no Fireworks, levo o arquivo ao Catalyst, organizo e explico alguns detalhes e mostro como fazer a exportação de maneira correta.

Em breve para continuar essa aula o nosso amigo Henrique Marino vai mostrar como importar essa library no Flex para montar o menu dinâmico.

Para download:

fxpl