TUTORIALES FLASH

Galería de Imágenes Externas

Luego de esto selecciono los colores de borde y relleno para realizar un rectángulo con las herramientas como se indica en la imagen.

Y hago el rectángulo que formará parte de mi botón.

con doble click sobre el rectángulo selecciono el borde y relleno del mismo y presiono botón derecho y Convert to Symbol

de manera que ese rectángulo lo transformemos en un botón, con el nombre btnAnterior como indica la imagen

Una vez convertido a símbolo, con doble click sobre el mismo ingreso a ese objeto, en la barra superior se ve como la imagen

y con la herramienta de texto escribo "<< Anterior", y lo centro al medio del rectángulo

presionando en la barra superior sobre "Scene 1" regreso a la escena principal

en este punto le di ubicación a mi botón en la parte inferior izquierda con las propiedades como indica la imagen y también le di un nombre de instancia "anterior_btn" (que usaremos mas adelante)

el botón siguiente es igual al de anterior para ello en la librería del documento (window, library o CTR L) hacemos botón derecho duplicate como indica la imagen

y le damos el nombre "btnSiguiente" como indica la imagen

a este botón le damos ubicación en la parte inferior derecha y el nombre de instancia "siguiente_btn" como indica la imagen

de esta forma tenemos listo los elementos gráficos de este mini tutorial, jeje sabido es mi limitada capacidad gráfica de programador por tanto vayamos rapido a la programación que permitirá mostrar las fotos...

Bien, lo siguiente es organizar un poco el documento, para esto (1) agregaremos un nuevo layer, el anterior es el layer 1 que contiene los elementos gráficos hasta ahora realizados (2), luego en este layer agregaremos las acciones de programación Action Script (3), por ello al layer 1 le pondremos el nombre "Visor", dandole doble click en el nombre actual, y al layer 2 le daremos el nombre "Acciones" también con doble click (4)

ubicandonos ahora en el Frame 1 del layer Acciones (3 img anterior) vamos a realizar la programación del sitio, para esto tenemos que ir a la ventana de acciones con la tecla F9 y escribiremos este código:

contador = 1;
_root.createEmptyMovieClip("contenedorfoto", 1);
_root.contenedorfoto._x = 0;
_root.contenedorfoto._y = 0;
_root.contenedorfoto.loadMovie("foto" + contador + ".jpg");
stop();

anterior = function () {
contador = contador - 1;
_root.contenedorfoto.loadMovie("foto" + contador + ".jpg");
};

siguiente = function () {
contador = contador + 1;
_root.contenedorfoto.loadMovie("foto" + contador + ".jpg");
};

anterior_btn.onRelease = anterior;
siguiente_btn.onRelease = siguiente;

explicare ahora por parte el código y la idea general

contador = 1; // permitirá la imagen actual que estamos mostrando, para este tutorial las imagenes se llamaran "foto1.jpg", "foto2.jpg", "foto3.jpg", etc

_root.createEmptyMovieClip("contenedorfoto", 1); // crea dinámicamente un movieclip para contener la foto, este MC (movieclip) se llamara "contenedorfoto", este nombre es importante para referenciarlo mas a delante en la programación

_root.contenedorfoto._x = 0; // ubicamos el MC recien creado en la parte superior izquierda por tanto posición 0,0 de nuestro documento (el documento principal en la programación se le llama "_root", esa es la palabra clave con que Action Script se refiere al documento principal

_root.contenedorfoto._y = 0;

_root.contenedorfoto.loadMovie("foto" + contador + ".jpg"); // en este punto vamos a cargar en nuestro MC contenedorfoto una imagen cuyo nombre sera "foto" + contador + ".jpg", si recordamos que contador vale 1 tenemos "foto" + 1 + ".jpg" por tanto se cargara la imagen "foto1.jpg"

stop(); // detiene la ejecución del swf ya que se hizo todo lo que debe hacer cuando inicia

Lo siguiente son las declaraciones de las acciones que deben ejecutarse cuando se presiona el botón anterior o siguiente

anterior = function () { // declaramos la función anterior

contador = contador - 1; // como se debe mostrar la imagen anterior debe restar 1 al contador o sea que si estábamos en foto2.jpg volverá a foto1.jpg

_root.contenedorfoto.loadMovie("foto" + contador + ".jpg"); // igual que como hacíamos anteriormente cargaremos la imagen correspondiente al contador

};

siguiente = function () { // declaramos la función siguiente
contador = contador + 1; // como debemos mostrar la sigueinte imagen aumentamos el contador, por tanto si estamos en foto1.jpg pasara a foto2.jpg

_root.contenedorfoto.loadMovie("foto" + contador + ".jpg"); // cargamos la imagen de la misma forma

};


Luego de definida estas dos funciones de carga de imagen que hasta ahora estan aisladas debemos decirle al flash cuando deben ejecutarse para esto haremos lo siguiente

anterior_btn.onRelease = anterior; // esto indica que el objeto "anterior_btn" cuando se presiona debe ejecutar la funciona llamada "anterior", así es como se diría esa línea en español, como entiende esto flash, bien, "anterior_btn" es el nombre que le dimos a la instancia del botón anterior en los primeros pasos de nuestro dibujo en la figura 9, y "onRelease" es una palabra clave de Action Script que define la acción a realizarse cuando se presiona un objeto, por ultimo "anterior" es la función que llama al presionar

siguiente_btn.onRelease = siguiente; // de la misma forma que declaramos la acción del botón anterior declaramos la del botón siguiente

Listo fin de la aplicación, espero me explicara bien y a las ordenes ante cualquier duda, la aplicación esta funcionando en:

Ver funcionamiento

y el zip con fotos, swf y fla se baja de:

Descargar solución

saludos

elQuique