TSW - That Should Work Blog » css

Flex Skin + Sorte = Mac Book Air e mais…

Mário Santos — Mon, 11 Aug 2008 08:01:51 +0000

É daqueles que até têm geito para design, dá uns toques em flex ? então isto é para si!

Skin to Win

O site scalenine está a organizar um concurso, Skin to Win, que têm como principal objectivo o desenvolver de uma skin para flex. Com 2 patrocinadores de peso, a Adobe e a Effectiveui, este concurso consegue oferecer aos 3 vencedores alguns bons prémios como podem ver a seguir…

Primeiro lugar.
(1) Portátil MacBook Air com Solid State Drive (SSD)
(1) Bilhete para o Adobe MAX 2008 – Europa ou North America
A feature on Adobe Developer Connection
(1) Cópia do Adobe Flex™ Builder™ 3 para Mac ou Windows
(1) Cópia do Adobe Creative Suite® 3 Master Collection para Mac ou Windows.

Segundo lugar
(1) Bilhete para o Adobe MAX 2008 – Europa ou North America
(1) Cópia do Adobe Flex™ Builder™ 3 para Mac ou Windows
(1) Cópia do Adobe Creative Suite® 3 Master Collection para Mac ou Windows.

Terceiro lugar
(1) Cópia do Adobe Flex™ Builder™ 3 para Mac ou Windows
(1) Cópia do Adobe Creative Suite® 3 Web Premium para Mac ou Windows.

Podem ainda ser premiados com uma cópia do Adobe Flex™ Builder™ 3 para Mac ou Windows alguns trabalhos que os juizes possam considerar que mereceram pelo esforço.

O prazo de entrega dos trabalhos é dia 10 de Outubro.

Abraço.

TSW Style Switcher – Esperimenta!

Mário Santos — Wed, 11 Jun 2008 13:44:44 +0000

Bem, podem nem ter reparado, mas no topo à esquerda foi agora colocado um Theme Switcher, depois de ler um post na smashing magazine, decidi criar um theme switcher, que neste caso apenas altera as folhas de estilo do site. Totalmente feito à mão, foi um bocado complicado perceber como iria fazer o blog mudar de tema, mas lá decidi colocar sessões php.

Estão disponíveis 3 modos (Vermelho, Verde e Azul):

(Podem testar clicando no topo)

Que em inglês curiosamente significa o padrão de cores (web) Red Green Blue (RGB), para testarem cliquem ou na imagem no topo ou então nos links em cima.

Venham essas opiniões… que tal? qual gostaram mais?

Cores: http://kuler.adobe.com

Abraço.

Adobe Flex Skins, mudando de visual facilmente.

Mário Santos — Mon, 25 Feb 2008 13:56:09 +0000

Quem já está habituado a trabalhar com o Adobe Flex Builder, com certeza que já reparou que nas propriedades da maior parte dos componentes existe algumas propriedades relativas a skin’s, tais como overSkin, downSkin, borderSkin entre outras.. Ora, isto era muito lindo se fosse fácil de perceber.. coisa que se por um lado é bom ter suporte a skins, por outro não se faz a mínima ideia de como as fazer.

Andei a dar mais uma volta pela net e encontrei no site da adobe algo bem interessante. Um componente para o Adobe Photoshop para desenhar skins para o adobe Flex.

Ora, começando, basta fazer o download de flexbuilder3_sdext_b2_ps_100107.zip e extrair o seu conteudo para a pasta Presents que está na pasta de instalação do Adobe Photoshop.

E está feito, basta iniciar o Photoshop, no meu File->Scripts->New Flex Skins e escolham o componente que desejam e aparece-vos o modelo da skin original do Flex. para alterar deve seleccionar layer a layer e alterar um a um, e não colocar mais que um elemento por layer, nem adicionar layers.

No final das alterações feitas, basta esconder o layer (0) o que diz HIDE BEFORE EXPORT, e vão ao menu File->Scripts->Export Flex Skins

Escolhem a pasta de destino e está feita a skin.

No Flex, basta irem em File->Import->Flex Artwork e indicarem a directoria onde o Photoshop guardou as skins.

Depois basta prosseguirem e colocarem um novo Painel na vossa aplicação e ver-lo-ao já com a devida skin.
Nota que esta skin passa a ser utilizada em todos os painéis da vossa aplicação, se desejarem aplicar a apenas um, ou editam o CSS e colocam na definição .meuPainel1 e atribuem essa definição ao Painel, ou q quando da criação da skin no Photoshop, ele pergunta se deseja aplicar a skin a todos os painéis, escolham a outra opção e coloquem o vosso ID do painel a ser afectado pela skin. Mas depois isso fica à vossa descrição.

Ora aqui deixo um pequeno exemplo de um botão e de um Panel:

Para ver o código fonte clique aqui

Mais informações de como alterar a aparência do Flex utilizando o Photoshop, Ilustrador ou Flash CS3

http://blogs.adobe.com/flexdoc/pdf/fbskinning.pdf

http://www.adobe.com/devnet/flex/articles/skins_styles.html

http://www.adobe.com/devnet/flex/articles/flex_skins.html

Então? Fácil não é??

Aguardam-se comentários.

Degrafa, a framework gráfica que faltava no flex.

Mário Santos — Wed, 20 Feb 2008 18:46:59 +0000

Ao dar mais uma vista de olhos pelo fascinante mundo do flex, dei de caras com uma framework que ainda não conhecia:

A Degrafa. (Declarative Graphics Framework).

Esta framework tem por objectivo quase que abolir a necessidade de ter conhecimentos técnicos e aprofundados em Action Script para poder
“desenhar” no flex. Mas a framework não se fica por aqui, acrescenta elementos bastante interessantes como Efeitos de sombras, fade, alpha, fill, gradient fill, bitmap fill, e algumas características bastante interessantes como o mask, css skinning, repeaters e mais alguns outros pontos.

Todo o trabalho “sujo” de Action Script é feito pela framework, e apenas necessitamos de usar MXML para criar os nossos gráficos, e que graficos!!

Estão disponíveis bastantes exemplos com código fonte na sua pagina, bem como uma boa documentação também no seu site.

Ainda só dei uma vista de olhos, mas parece ser bastante interessante e assim partilho com vocês.

Site oficial: http://www.degrafa.com

Exemplos: http://samples.degrafa.com/

Download: http://code.google.com/p/degrafa/