CU3ER – Elemento para transição de Imagens 3D
Nesta coluna aprenderemos passo a passo como
utilizar o elemento CU3ER.
O CU3ER é um elemento desenvolvido para facilitar a implementação 3D
(Flash) de imagem deslizante com conteúdo dinâmico carregado através de
um arquivo XML, é muito simples de editar e utilizar em seu projeto,
deixando com um visual profissional e impactante.
Para iniciar devemos acessar: http://www.progressivered.com/cu3er/ 
Após baixar os arquivos mapeie em seu software para desenvolvimento web:
Após mapear vamos verificar o arquivo que da toda a dinâmica em nosso
efeito de transição (config.xml):
<?xml version="1.0" encoding="utf-8" ?><br /><cu3er><br /> <settings><br /> <prev_button><br /> <defaults round_corners="5,5,5,5"/><br /> <tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/><br /> <tweenOut tint="0x000000" /><br /> </prev_button><br /><br /> <prev_symbol><br /> <tweenOver tint="0x000000" /> <br /> </prev_symbol><br /><br /> <next_button><br /> <defaults round_corners="5,5,5,5"/> <br /> <tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/><br /> <tweenOut tint="0x000000" /><br /> </next_button><br /><br /> <next_symbol><br /> <tweenOver tint="0x000000" /><br /> </next_symbol> <br /><br /> </settings> <br /> <slides><br /> <slide><br /> <url>images/slide_1.jpg</url><br /> </slide><br /> <!-- changing transition between first & second slide --><br /> <transition num="3" slicing="vertical" direction="down"/><br /> <slide><br /> <url>images/slide_2.jpg</url><br /> </slide> <br /> <!-- changing transition between second & third slide --><br /> <transition num="4" direction="right" shader="flat" /><br /> <slide><br /> <url>images/slide_3.jpg</url><br /> </slide><br /> <!-- transitions properties defined in transitions template --><br /> <slide><br /> <url>images/slide_4.jpg</url><br /> </slide><br /> <transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05" z_multiplier="4" /><br /> <slide><br /> <url>images/slide_5.jpg</url><br /> </slide><br /> </slides><br /></cu3er>
Abaixo as principais funcionalidades do cu3er 3D
que pode ser modificada no arquivo xml:
- Real transições 3D
- Sombreamento
- Cúbica horizontal
ou vertical - Direção de transição – esquerda, direita, cima,
baixo - Duração e tempo de transição
- Cor do Cubo
- Direção
automática frente e para trás transição - Substituir as
configurações globais para cada transição - Cantos arredondados
para navegação e descrição caixa - Alterar as coordenadas,
dimensões, orientação, cor, alfa e informação - Linear e circular
modelos personalizáveis para preloader e slideshow indicador - Incorporar
fonte favorita - Texto – tamanho, cor, alinhamento, margem,
levando e espaçamento entre letras ajustes - Combinações e
possibilidades ilimitadas - Inserir imagens
É um bom elemento para colocar nas seus projetos. Embora ele não permita
edição no Adobe Flash. Você pode usá-lo editando o XML com a suas
configurações.
Um exemplo simples para verificar como é fácil inserir em seu projeto:
Resultado:
Bom essa é a dica de um excelente elemento dinâmico,
totalmente gratuito, com isso seu projeto ficará mais atraente e com
movimentação dinâmica e atual.
Referência:
http://www.progressivered.com/cu3er/
Um abraço a todos!
é Analista e Desenvolvedor de Sistemas desde 2005, atualmente desenvolvendo sistemas na Telefônica Brasil, atuando no Centro de Operações Comerciais - COC.
