Como hacer un cargador animado con Swishmax - Preloader
Posteado el 22. Mar, 2010 por Webi in Swishmax
Hoy veremos como hacer en este tutorial en la web con Swishmax como hacer un cargador animado.
PASO1
Crear un nuevo documento de swishmax.
PASO 2
Vamos a la ventana Properties al botón Movie Properties y aplicamos los valores que se ven en la imagen.
PASO 3
Ahora vamos a seleccionar la Scene en la ventana Outline y ahora en la ventana Properties le colocamos el nombre de Preloader.
PASO 4
Con la herramienta Tex tool escribimos la palabra cargando con un tipo de letra Comic Sans.
PASO 5
Ahora con la herramienta tex tool vamos a escribir 00% con un tipo de letra Comic Sans y un tamaño de 48 pts.
PASO 6
Ahora con el texto aun seleccionado vamos a la ventana Properties y vamos a colocarle nombre a nuestro texto en la casilla de arriba colocamos el nombre _porcentaje, luego colocamos el modo Dinamic, en el espacio Var: colocamos el nombre porcentaje y marcamos la opción Use Device Font.
PASO 7
Con la herramienta Rectangle Tool vamos a crear un rectangulo con un color de relleno solido el color de relleno no importa.
PASO 8
Ahora con la herramienta Auto Shape vamos a crear un rectángulo con puntas redondeadas y vamos a colocarle un gradiente el color que guste, este tiene que ser un poco más grande que el rectángulo que realizamos anteriormente.
PASO 9
Ahora seleccionamos las dos formas y les damos clic derecho Grouping – Group as Movie Clip.
PASO 10
Ahora vamos a la ventana propesties y renombramos al Movie Clip con el nombre de bar y marcamos la opción Use bottom object as mask.
PASO 11
Ahora desplegamos nuestro Movie Clip y agregamos un movimiento de 100 frames y con la tecla flecha a la derecha movemos nuestra barra con el gradiente por encima de nuestro cuadrado.
PASO 12
Ahora vamos a dibujar una ranita y la vamos a agrupar en un grupo.
PASO 13
Ahora vamos a agrupar nuestro grupo en un Movie clip haciendo clic derecho sobre nuestro grupo y vamos a Grouping – Group as Movie Clip.
PASO 14
Ahora desplegamos nuestro movie clip y vamos a Timeline y agregamos un movimiento de 20 frames y movemos nuestra ranita hacia arriba en diagonal.
PASO 15
Ahora agregamos un movimiento de 20 frames y movemos nuestra rana hacia abajo en diagonal.
PASO 16
Ahora realizar el mismo movimiento de regreso.
PASO 17
Ahora seleccionamos la Scena Preloader y ahora vamos a la ventana Script y luego pegamos el siguiente codigo:
onSelfEvent (enterFrame) {
myVar = percentLoaded();
porcentaje = myVar +"%";
tellTarget (bar) {
gotoAndStop(myVar);
}
if (myVar >= 100) {
gotoSceneAndPlay("Scene_1", 1);
}
}PASO 18
Ahora vamos al menú Insert y luego a Scene.
PASO 19
Ahora vamos a la ventana properties y renombramos la Escena como Scene_1
PASO 20
Ahora colocamos todos los elementos que necesitamos en nuestra Scene_1 y luego vamos al Frame 1 y le damos clic derecho y luego en Movie Control – Stop().
PASO 21
Listo ya tenemos nuestro cargador.
Actualización al comentario de faraon:
Aquí te dejamos nuestra respuesta gracias por tu comentario. Sigue participando con nosotros que estamos para servirles en lo que podamos 
PASO 1
Me imagino que este es el error que te despliega cuando pegas el código.
PASO 2
El problema esta en las comillas, esa es la razón por la cual da el error entonces solo hay que sustituir las comillas por las comillas correctas las cuales en tu teclado se encuentran en el teclado numérico superior en el numero 2, (shift + 2).
PASO 3
Quedara de la siguiente forma, si nos damos cuenta ahora nos marca error en la línea 8 pero de igual forma solo sustituimos las comillas por las correctas.
PASO 4
Nos quedara de la siguiente forma, en este caso sustituimos las dos de lo contrario no seguirá dando error.
Bueno espero que esto resuelva tu problema
21 Respuestas para “Como hacer un cargador animado con Swishmax - Preloader”
Deja tu Comentario
- Como hacer un formulario en Swishmax con captcha y browse
- Como hacer un cargador animado con Swishmax - Preloader
- Formulario con selección de email en Swishmax
- Formulario con Dreamweaver y PHP (incluye examinar y .send)
- Galeria de fotos en Swishmax
-
tuto: Para servirte...
-
tuto: De nada que bien que te gustaron...
- Stay Heavy: Esta muy buenoo!! Gracias!!...
- jose luis macias: gracias estan bonitos...
-
creativo: De nana Eldin.
Saludos ;)...
faraon
29. Mar, 2010
Te felicito por los tutoriales pero, hago todo sin la ranita pero genera un error.
” in script:
Preloader::onSelfEvent (enterFrame)
Preloader, line 3: porcentaje = myVar +”%”;
” in script:
Preloader.bar::onSelfEvent (enterFrame)
Preloader.bar, line 3: porcentaje = myVar +”%”;
Gracias por tu tiempo
faraon
06. Apr, 2010
Claro!!! eso era el problema, ahora si funciona, no te digo que brinca la rana de alegria porque no esta jajaja pero muchas gracias por tu tiempo en explcar el error.
Webi
06. Apr, 2010
Pues aqui te seguiremos esperando. Estamos a las ordenes y si tienes ideas de tutoriales que deseas ver envianos tus comentarios por el formulario. Feliz dia.
faraon
18. Apr, 2010
Hola gracias.
Bueno como le he entrado de lleno al asunto del flash por medio del swishmax 3, que es la version que manejo.
Claro no hay muchos tutoriales para esa versión y algunas formalidades no son compatibles con dicha version.
Bueno, puede ser posible que hicieran un tutorial con otro metodo de contact form, en donde el visitante pueda elegir a quien ira dirigido el correo, por decirte, que este servidor quiera enviar un correo a diseños y no a ventas, o viceversa.
Espero haberme explicado bien :p
Gracias por tu tiempo.
paatril
21. Apr, 2010
hola, muchisimas felicidades los tutoriales estan de lujo, super bien explicados y en realidad he aprendido muchas cosas y me han sacado de dudas enormes pero me podrias decir como puedo meter un archivo swf dentro de swish o como realizar una galeria fotografica para una pag web te lo agradeceria muchisimo y una ves mas felicidades.
Webi
21. Apr, 2010
Pues que bueno que te gusten pero sobre todo que te sirvan.
Pablo
22. Apr, 2010
Hola, justo lo que buscaba !! Te hago una consulta:
Cuando la Scene_1 es más pesada que la de tu ejemplo, la barra verde llega al final varias veces antes de que el cargador llegue al 100%.
Como hago para que la barra haga solo un movimiento ?
Que no se repita, sino, que al llegar al fondo sea justo al 100%.
Espero que puedas ayudarme, gracias !!
Webi
22. Apr, 2010
Gracias por tu aporte Pablo vamos a prepararte una respuesta y la publicamos.
Pablo
23. Apr, 2010
Gracias, lo espero con ansias !!
Roma
09. May, 2010
hola que tal he seguido tus pasos pero me sale un error que es el siguiente:
ERROR: Cannot find ‘myVar’
Loader, line 5:
gotoAndStop(myVar)
estoy utilizando la version swish max 3 espero me puedar ayudar grax . Saludos!!!
Webi
10. May, 2010
Vamos a revisar tu error y te respondemos por esta via gracias por compartir tu inquietud
Webi
11. May, 2010
Fijate que estuvimos viendo el error y analizamos que el problema debería estar en el codigo porque no revisas si copiaste bien tu codigo, porque no debería darte problemas. Nos cuentas
Omar Maras
04. Jul, 2010
Hey! Felicitaciones Webi por el aporte!!! tengo una duda.. más que duda es un problema que tengo… he seguido todos los pasos… ahi esta mi preloader y luego mi Scene_1, todo bien, pero al subirlo a mi web .. carga sólo hasta el 4% y de ahi se pasa al Scene_1 en el cual la animación se detiene en varios fotogramas (obvio hasta terminar de cargarlo)… ayudame porfavor!!!!
Daniel Acevedo
04. Jul, 2010
Saludos, primero que nada sobran las palabras para agradecerles por los tutoriales, durante AÑOS me he negado al swish por que me sacaba las canas pero estos tutoriales estan super claros. Bueno, el unico problema que he tenido es el que planteo Pablo acerca de que la barra (en mi caso el logo, trabajo con mascaras que aprendí de otro tut de esta web=D) llega al final y vuelve a empezar. De nuevo mil gracias y si consigo la solución en otro lado la posteo acá para colaborar. Saludos.
Webi
06. Jul, 2010
Daniel Acevedo aqui te dejo el link que resuelve tu problema, ya lo habiamos posteado pero te lo comparto para que puedas resolverlo.
http://www.tutorialesenlaweb.com/desarrollo-web/web-design/preloader-con-swishmax-con-avance-similar/
Saludos.
Webi
06. Jul, 2010
Omar Maras con respecto a tu duda es posible que tu película no sea tan pesada como para que el cargador termine el ciclo y por esa razón se quede en un 4% y luego pase a tu Scene_1.
Saludos.
Juan
19. Jul, 2010
hola el coment esta un poco fuera del tema de este foro.. pero es una urgenciaaa.. tengo varios elementos dentro de un movie clip.. los cuales tienen todos varios scripts y efectos.. mi problema es que he hecho desaparecer estos elementos con efectos…pero aun asi siguen ejecutandose los scripts. por ejemplo .. tengo un script roll over.. y aun cuando el elemento ya no esta porque lo desapareci…si pasas por donde estaba el objeto el script funciona y se me va la escena pa otro lado.. probe colocando REMOVE a cada objeto una vez q se desaparecio pero aun asi siguen funcionando los scripts de los objetos invisibles =S.. ayudaaaaa he probado varias vueltas pero nada funk
juan
19. Jul, 2010
jajaja disculpen justo acabo de dar con el problema gracias igual esta bueno el forito =) estamos en contacto amigos.
Julio
03. Nov, 2010
Hola webi, muchas gracias x estos tutoriales esta de madre
, sabes también te queria comentar un error q me sale:
ERROR: Cannot find ‘myVar’
Loader, line 5:
gotoAndStop(myVar)
Es el mismo q le sale a roma, e incluso baje tu el archivo q colgaste, pero aún asi sigue saliendo el mismo error
, xfavor no se si sera mucha molestia me podrías ayudar. Muchas gracias
creativo
03. Nov, 2010
Fijate bien en el nombre que le colcaste a la barra en las propiedades, de eso depende el funcionamiento de la barra del cargadro.
Saludos.
Julio
04. Nov, 2010
He seguido buscando mi error en esa parte del codigo, pero bueno en esta parte está :
tellTarget (bar) {
gotoAndStop(myVar);
}
Ese myVar del gotoAndStop dice q no lo encuentra he estado viendo que podria ser pero lamentablemente, soy muy nuevo en este tipo de programacion, y si quito esa pequeña parte de codigo el indicador numérico ya no me carga
, he bajado su archivo q han publicado asi como estan exactamente varias veces, me he dado cuenta de las comitas, y aun asi no me corre, me sale el error que mencione:
ERROR: Cannot find ‘myVar’
Loader, line 5:
gotoAndStop(myVar)……Muchas gracias x ayudarme y disculpen los inconvenientes