La innovación y creatividad en la web ha venido en gran medida gracias a Flash y su altisima capacidad de «experimentar», entre ellas, los nuecos conceptos de navegación, eso si, siempre manteniendo la usabilidad; este es un ejemplo de ello, un menu de navegación con efecto de easing (Desaceleración) que es implementado gracias a ActionScript.

Lo que haremos será:
1. Teoría
Crear un clip bajo una mascara, que de acuerdo al botón que se presione, el clip se moverá a determinado punto. Sintetizando, tenemos que crear un clip, una mascara, y los botones (para nuestro caso, 3 son suficientes)

2. Practica
Para trabajar el mismo fla que dejo para la descarga, haremos lo siguiente:
Ajustar el tamaño de nuestra película a 300 X 400 px
Crear un movie clip de tamaño 300 X 50, en la posición x=0, y=100 con nombre de instancia «clip_mc»
A este clip «clip_mc», crearle una mascara de tamaño 100 X 50 en posición x=100, y=100
Crear tres botones con nombre de instancia «a_btn», «b_btn» y «c_btn», en cualquier posición.
Si alguno de los puntos anteriores no es claro, revisar el fla de descarga.

3. Codigo ActionScript
Al «clip_mc» pongámosle este código:
/*Cargamos una variable cualquiera «x» con valor 0, que será la que modificaremos con los botones, y claro, el clip lo cargaremos en la posición «_x» con valor 0*/
onClipEvent(load){
x=0;
_x=0;
}
/*ahora , cíclicamente, se estará calculando un incremento en la posición «_x» del clip, de acuerdo al resultado de la ecuación «(x-_x)*0.3», que cambiara notablemente cuando cambiamos el valor de «x», al presionar los botones. Recordemos que esto se ejecuta constantemente, por el evento «enterFrame» es decir que siempre estará disponible para cualquier cambio en sus variables iniciales, que le darán el efecto de movimiento*/
onClipEvent(enterFrame){
_x+=(x-_x)*0.3;
}

En el frame pongamos este otro código:
//al presionar «a_btn», se cambia el valor de «x» asignado a «clip_mc» a 100
a_btn.onRelease = function() {
clip_mc.x=100;
}
//al presionar «b_btn», se cambia el valor de «x» asignado a «clip_mc» a 0.
b_btn.onRelease = function() {
clip_mc.x=0;
}
//al presionar «c_btn», se cambia el valor de «x» asignado a «clip_mc» a -100.
c_btn.onRelease = function() {
clip_mc.x=-100;
}

Probemos nuestra película con CONTROL+ENTER y si no funciona revisemos el fla de descarga.

Llevaba tiempo queriendo añadir una explicación sobre el uso de las escasas capacidades tridimensionales de Illustrator y del mapeado (proyección) de imágenes y me he dado cuenta de que esta técnica es una forma excelente de explicar esos conceptos.

Crear o tener una imagen del mapa mundi.

Ahora, lo coloreamos. En este caso, he usado CMYK «50/0/100/0» para el relleno y CMYK «80/0/0/0» con 0,3 puntos para el trazo de las masas de tierra.

Advertencia: No uses degradados ni efectos como «Estilizar – Sombras paralelas / Resplandor interior / Resplandor exterior» y similares. La razón es que el efecto de giro en tres dimensiones y su proyección de imágenes no los recoge y los resultados son impredecibles

Crear la linea de coordenadas

Aunque hay muchos modos de crear líneas paralelas y perpendiculares, en un caso como éste, lo más sencillo es usar la herramienta «Cuadrícula rectangular», que está en el mismo grupo que «Segmento de línea».

Nos colocamos encima del mapamundi y trazamos una cuadrícula rectangular que lo cubra razonablemente.Antes de soltar, podemos controlar el número de rayas verticales y horizontales con las teclas del cursor del teclado (hacia la izquierda y abajo, quitamos; hacia la derecha y arriba añadimos). Tras soltarla, vamos a «Ventana – Transformar» y rematamos el tamaño, redondeándolo.

Una vez la tengamos, le damos el grosor necesario al trazo (0,3 puntos) y lo hacemos discontínuo («Ventana – Trazo – Línea Discontinua – Guión: 2 ptos / hueco: 4 ptos»). Como color de trazo, le damos CMYK 100/0/0/0; de «Relleno», le damos «Ninguno».

Para el mar, creamos un recuadro exactamente del mismo tamaño que la cuadrícula, lo rellenamos de 40% de cian y lo enviamos detrás.
Para rematar, centramos la cuadrícula y el fondo con respecto al mapa con la herramienta «Alinear».

Crear el símbolo

Agrupamos los tres elementos (mar, mapa y cuadrícula) y los arrastramos dentro de la paleta «Ventana – Símbolos». El motivo es únicamente que Illustrator sólo puede proyectar imágenes que previamente hayan sido convertidas en «Símbolos».

Si vamos a trabajar con más imágenes como símbolos es buena idea darles nombres adecuados y descriptivos.

Crear la esfera

Paradoja: La esfera no es una esfera. Debe ser un semicírculo. Por eso, primero creamos una circunferencia con la herramienta «Elipse».

A continuación, la cortamos en dos partes iguales con las «Tijeras».

Le damos color de trazo (no de relleno) de 75% cian. A doferencia del color, el grosor no es especialmente relevante pero conviene que sea más bien fino.

La esfera y sus opciones.

Con el semicírculo seleccionado, vamos a «Efecto – 3D – Girar». Aparecerá el cuadro de diálogo que vemos arriba. Por cierto, éste es un filtro que consume bastante ordenador y, dependiendo de tu máquina, podrías encontrarte que el sistema se vuelve inestable. Cierra programas, simplifica ilustración,… Y, si puedes, trabaja con la previsualización desactivada. Quedas avisado.

Advertencia: Si en vez de una esfera, aparece una especie de taburete, como el que se ve arriba, la solución es cancelar y rotar el semicirculo 180º (La razón de este comportamiento es el sentido de giro que aplica el filtro y no hay que preocuparse por ello).

En la opción «Superficie», que sirve para crear un sombreado de iluminación, marcamos «Sin difuminado», ya que daremos el efecto de volumen como veremos más adelante. La opción «Difuminado plástico», que es la que viene predefinida, es la más realista y compleja.

La proyección del mapa.

Para proyectar el mapamundi sobre la esfera, vamos a la opción «Mapear ilustración». En la persiana desplegable de «Símbolo», elegimos la ilustración que vamos a proyectar. En este caso, es el mapamundi que guardamos como «Símbolo».

Si el tamaño original del símbolo es mucho mayor que el de la esfera, podemos marcar la opción «Escalar para ajustar», pero eso deformará el símbolo proyectado. De ahí mi advertencia anterior de trabajar a tamaños similares. En nuestro caso, como queremos vestir la esfera con el mapamundi, la usamos.

Una vez veamos que se ha cubierto el tapiz, damos a «Aceptar»..

Si queremos variar la perspectiva, jugamos a placer con los tres valores de rotación (ejes X, y y Z).

Dar volumen
Aunque podríamos haber usado la opción de iluminación del filtro 3D de Illustrator, es más fácil, flexible y sobrecarga menos el sistema usar el siguiente método.

Creamos una circunferencia del mismo ancho y alto que la esfera del mapamundi.

Creamos un degradado de Cian 100% a Blanco (CMYK 0/0/0/0) y lo aplicamos pinchando en una zona superior izquierda con la herramienta «Degradado» para simular una iluminación superior (debe quedar más o menos como vemos sobre estas líneas).

Con la paleta de «Transparencia«, la ponemos en modo «Superponer«.

La colocamos justo encima de la esfera del mapamundi.

El trabajo ya está realmente terminado, pero aun podemos afinar un par de detalles.

Añadir una sombra ficticia

Duplicamos el círculo que hemos usado para dar volumen y lo reducimos sólo verticalmente a un tercio o cuarto de su tamaño original. Le damos de relleno un color 40% de negro y le aplicamos un «Efecto – Estilizar – Desvanecer» del valor que mejor nos parezca.

La paleta apariencia
Lo mejor de esta técnica es que podemos rotar la esfera como queramos después de haberla construido.

Seleccionamos el semicírculo (recuerda que está «debajo» del círculo en modo superponer) y abrimos la paleta «Ventana – Apariencia». Allí verás que está disponible el efecto «Girar – 3D» con todas sus opciones. Basta con editar lo que quieras.

Descarga gratuitamente este paquete de estilos de Capa para Photoshop los cuales dan una apariencia de gel a tus letras o botones. El paquete trae tres colores diferentes “Rojo, Verde y Azul”