Publicidad
Programar una Galería de Imágenes en Flash | Solo Photoshop
Tutorial Photoshop
Tutorial por Solo Photoshop
SoloPhotoshop
TUTORIALES FLASH
PROGRAMAR UNA GALERÍA DE IMÁGENES FLASH
Tutorial por Jmx de www.EstiloFlash.com
Hola estimadas amigas y amigos, con el fin de seguir contribuyendo en el aprendizaje o simplemente con el reforzamiento de ideas. A continuación presento el tutorial que lleva por nombre Galería de Imágenes, esta galería puede llevar las imágenes que desees, sin embargo, en esta ocasión solamente se pondrán como ejemplo cuatro imágenes.
Comenzar por crear un documento de dimensiones 250*306 píxeles de ancho y alto respectivamente y con un color de fondo gris (#CCCCCC).
Crear cuatro imágenes de tamaño 50*50 píxeles nombrarlas small_modelo_1, small_modelo_2, small_modelo_3 y small_modelo_4, también crear las mismas imágenes pero de tamaño 250*250 píxeles a estas nombrarlas Big_modelo_1, Big_modelo_2, Big_modelo_3 y Big_modelo_4. Una vez creadas las ocho imágenes el siguiente paso es importarlas a la biblioteca. Espero que manejen el programa Photoshop, es más practico hacer las imágenes en este programa.
Este paso es relativamente sencillo, crear cuatro símbolos y nombrarlos boton_1, boton_2, boton_3 y boton_4 respectivamente, darles de comportamiento botón. La ruta para este propósito es presionar ctrl. + F8 ó Insertar >> Nuevo símbolo
Ahora en el símbolo boton_1 arrastrar desde la biblioteca la imagen de nombre small_modelo_1. Hacer la misma operación pero ahora en el boton_2 insertar la imagen de nombre small_modelo_2, en el boton_3 insertar la imagen small_modelo_3 y en el boton_4 insertar la imagen small_modelo_4. Colocar cada una de las imágenes en coordenadas X=0 y Y=0
Crear un nuevo símbolo nombrarlo galeria_modelos y darle como comportamiento clip de película.
Una vez instalados en el símbolo galeria_modelos, en el fotograma 1 arrastrar desde la biblioteca la imagen de nombre Big_modelo_1 colocarla en cordenadas X=0 y Y=0.
Insertar tres fotogramas claves vacíos más y en cada uno de ellos colocar la imagen correspondiente. Esto es fotograma 1 Big_modelo_1, fotograma 2 Big_modelo_2, fotograma 3 Big_modelo_3 y fotograma 4 Big_modelo_4
Insertar una segunda capa, seleccionar el fotograma 1 de esta capa y en la barra de acciones escribir un stop();
Regresar a la escena, arrastrar desde la biblioteca el símbolo llamado galeria_modelos, y escribir como Nombre de instancia galeria. Hacer visible el panel de Transformar presionando ctrl. + T ó Ventana >> Paneles de diseño >> Transformar y con ayuda de esta herramienta sesgar verticalmente 180º.
Crear una segunda capa y en esta arrastrar desde la biblioteca los botones y a cada uno escribirle un nombre de instancia esto es:
Para el boton_1 el nombre de instancia es imag_1 y las coordenadas son X=10 Y=254
Para el boton_2 el nombre de instancia es imag_2 y las coordenadas son X=70 Y=254
Para el boton_3 el nombre de instancia es imag_3 y las coordenadas son X=130 Y=254
Para el boton_4 el nombre de instancia es imag_4 y las coordenadas son X=190 Y=254
La imagen solo muestra como fue arrastrado y nombrado el boton_1
Por ultimo crear una tercera capa nombrarla acciones seleccionar el fotograma de esta capa y en la barra de acciones escribir el siguiente código:
function go(frame:Number) {
galeria.gotoAndStop(frame);
};
imag_1.onPress=function() {
go(1);
};
imag_2.onPress=function() {
go(2);
};
imag_3.onPress=function() {
go(3);
};
imag_4.onPress=function() {
go(4);
};
Con esto queda concluido este sensacional tutorial. Espero que les haya sido de ayuda y sigan escribiendo sus comentarios acompañados de su e-mail para tener un contacto más directo.
P.D. Presionar ctrl. + entar para visualizar la prelícuala y no olvidar dar clic a cada una de las imágenes pequeñas. Hasta pronto.
Así queda:
Con esto damos por concluido el tutorial, para mayor información revisar los tutoriales que tratan sobre cursores. Hasta muy pronto
Comentarios de Programar una Galería de Imágenes en Flash | Solo Photoshop
↑ Tutorial
lucianocasilda
2006-10-18 13:01
ximena rojas
2006-10-18 18:28
custommolino
2006-10-18 21:54
archi
2006-10-21 03:58
function go(frame:Number) {
galeria.gotoAndStop(frame);
};
imag_1.onPress=function() {
go(1);
};
si vuestras imagenes no tienen el nombre de instancia como esas por ejemplo imag_1 y tienen de nombre pepiro_1 normal ke el flash no lo entienda revisar los nombres de instancia fantastico tutorial :) un saludo amigos
llemito
2006-10-21 11:20
riccardo
2006-10-30 09:17
rorock
2006-10-30 12:55
meklas
2006-10-30 14:02
pero como lo puedo hacer con mas
fotos???...
ojala respondan
iolanda...
hamslet
2006-10-30 17:52
fenrirsulven
2006-10-30 23:17
luckytlv
2006-11-02 19:47
no me vacila, alguien sabe uno mas complejo....
como los de: slide.com
q cuandos e hace clik sobre una imagen se abre otra ventana con la imagen en jpg para guardarlo px
avila
2006-11-04 10:19
kristianP
2006-11-06 09:43
LunarWolf
2006-11-07 10:02
josejaimemaravilla
2006-11-07 14:06
ame_flores
2006-11-07 14:44
AaronDark
2006-11-08 15:13
CHOFO
2006-11-09 13:31
paquo360
2006-11-13 10:25
visual
2006-11-13 11:16
kentiass
2006-11-13 18:47
edw4
2006-11-14 19:51
edw4
2006-11-14 20:03
asboullosa
2006-11-17 12:47
CsarGt
2006-11-18 11:37
proxer
2006-11-21 15:25
Sarimma
2006-11-22 08:53
Hecho en falta algún tutorial más sobre escritura.
elelegido100
2006-11-22 10:32
anubis_jpm
2006-11-30 19:59
colapela
2006-12-08 11:47
rosario.zamudio
2006-12-08 14:16
frank182
2006-12-08 21:33
laluenbaires
2006-12-21 13:08
evil_spidey
2006-12-25 18:48
oxidan
2007-01-02 14:31
SALUDOS DESDE PERU DANTE
OXIDAN@YAHOO.COM SI ME QUIEREN RESPONDER PERSONALMENTE
elyon
2007-01-02 21:18
:)
Pirinsho
2007-01-07 12:35
quiterio
2007-01-12 00:05
quiterio
2007-01-12 00:30
mime
2007-01-16 08:38
laluenbaires
2007-01-24 13:46
magaro
2007-01-24 18:37
gracias
danielbriceño
2007-01-27 11:38
king_drako
2007-02-02 14:36
len_0101
2007-02-09 15:43
angie1
2007-02-20 00:24
rolo237
2007-03-01 14:14
gracias
luisrampersadm
2007-03-10 18:04
jdcraig
2007-03-12 12:26
Muchas gracias!! ahora a probar otras cosas..
Saludos!
artjteo
2007-03-14 21:38
Saludo
dominiouat
2007-03-28 13:15
johacristancho
2007-04-18 13:07
Jsi
2007-04-29 12:11
Existe alguna diferencia el hacer el ejemplo con Flash Mx 2004 ?
fica
2007-05-16 02:30
jose ernesto
2007-05-18 17:49
pd: si algun day lees este komment, espero ke me kontestes ya! gracias!
jimmy hugo
2007-05-19 10:55
kampfer07
2007-05-19 23:29
kamikaze_sam
2007-05-22 12:58
Di_salazar
2007-05-22 16:17
felinitap
2007-05-25 10:34
Aborigenes
2007-06-28 15:24
Puse en el fondo 1 fondo de web y mas fotos para las fotos lo que hay que hacer es:
imag_5.onPress=function() {
go(5);
};
xd
xanxurrita
2007-07-20 00:28
uuuuuf..me salvo..! muchas..muchas gracias!!
buen tutorial..!
poohyssej
2007-10-17 13:32
Gracias
agua78
2007-12-22 09:49
nancymtorres
2008-01-09 11:24
Para los que dicen que no les sale, por favor que sigan los pasos uno por uno, a mi no me estaba saliendo, leí detenidamente, con paciencia y lo logré. Funciona de verdad. Saludos! :D
danielituz
2008-05-15 19:09
J_GOMEZ@ucol.mx
2008-05-28 11:08
coloskater
2008-10-06 14:09
imag_1.onPress=function() { Espero me puedan responder pronto, gracias.
JulioAcme
2009-07-13 22:28
Lo intenté hartas cuantas veces y nada.
El flash se vé pero las imágenes no cambian. Más encima el ultimo mensaje lo hicieron desde Octubre del año pasado... Dificil que alguien ayude.
Si alguien cacho el mal paso que lo tire por acáaaaa...
Se agradece ^^
JulioAcme
2009-07-13 23:40
Help Me, please!!!
germanja
2009-07-25 01:21
Mil gracias
↑ Tutorial