top

Animação 2D, Sobre o site, UI Design

menu experimental circular 2011-2012

30 Mar , 2012   Video

[28 de Maio, 2024] Este é o menu do meu site na época (quando ainda era “PortNathan”, antes de ser “NStar Concepts”.

Os detalhes dos botões interativos que funcionavam como menu, e todo o layout, foram um design criado por mim de fato. Então eu integrei-o com um XML (para fazer funcionar o evento de mudança de URL com o clique), e apliquei no meu site (também em WordPress na época) para desempenhar o papel de menu-global, e seus detalhes visuais compondo o layout com o restante dele.

Estas são algumas das versões anteriores do layout do meu site na época (continuou nesse padrão até mais ou menos ~2015). Clique para ver maior:



[30 de Março, 2012] Essa interface era, em sua maior parte, de uma iniciativa minha. Apenas algoritmos de autoria alheia foram usados, sendo: o que faz funcionar o movimento circular, e os códigos que executam o efeito fluído no background…
O resto (botões, caixas de texto, XML, animações, imagens, efeitos visuais) são produções minhas, agregando a biblioteca de códigos Greensock.

Programei tudo em AS3, a partir de um tutorial que encontrei ensinando como fazer uma virtual compass (bússola virtual… muita trigonometria aplicada) no Flash, cujo site, de um programador chamado Andrew N. Price, já não se encontra mais on-line; mas podem ser encontrados os códigos precursores aos dele nesta sessão de forum.
Tratava-se apenas de uma seta que seguia os movimentos do mouse… Então alterei alguns parâmetros do código (de fato inverti o sentido do movimento da seta, afim de fazer o cursor interagir com todos os botões do círculo, o que não acontecia com o código do autor), adicionei botões, integração com XML (para conseguir alterar a URL a partir do evento de click nos botões ao redor do círculo interativo), e adaptei tudo de acordo com o que eu precisava.

Arrisco dizer que o resultado final tornou-se único na web, uma vez que encontrar uma interface desta forma, em versão swf, foi praticamente nulo na época em que me lancei nesta empreitada (entre 2009 e 2010).

A versão a seguir é a antiga interface PortNathan, antes de o meu site ser um cms de WordPress.
Foi trambém a primeira vez em que apliquei o menu circular, o que na verdade foi iniciado como um trabalho da faculdade — disciplina “Criação de Portfolio”. Aperfeiçoei essa interface SWF com o tempo, até a versão atual que vc vê agora aqui, hoje, à direita do layout do meu site.

Clique na imagem para conferir o trabalho.

 
 

, , , , , , , , , ,


Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *