Cargador con Porcentaje | Solo Photoshop

Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Anunciar en SoloPhotoshop

Cargador con Porcentaje | Solo Photoshop

Tutorial Flash

Tutorial por JMX

JMX muestra como hacer un cargador (Preloader) de porcentaje, el action script utilizado es muy fácil de aplicar.

Primero agradecemos todos sus comentarios respecto a los tutoriales flash publicados anteriormente.
En esta ocasión haremos una Barra de Cargador con Porcentaje.
Lo primero es presionar crear un Nuevo Simbolo, presionando Ctrl + F8 o desde el menú Insertar >> Nuevo Simbolo. Seleccionamos Clip de Pelicula, en este caso l con el nombre "cargador" como puedes ver en la imagen a la derecha.

Siguiente paso es dibujar la barra que usarás como cargador en las cordenadas X=0 y Y=0.
El ancho y alto depende de tus necesidades.
Recomendamos no usar borde, al menos mientras dominas la técnica.

Selecciona la barra y presiona F8 o botón derecho del ratón >> Convertir en Simbolo.
Entonces hay que seleccionar Clip de Pelicula y nombrar, en este caso lo llamamos "barra del cargador" .
Registro: El registro te indica la manera en la que se desplaza la barra del cargador durante la animación. En este caso se ha seleccionado el punto medio a la izquiera, lo cual dá como resultado un desplazamiento de izquierda a derecha como tradicionalmente sucede.
Prueba luego con los demás puntos.

Selecciona la barra del cargador y en la barra de propiedades bajo "clip de pelicula" ponemos "barra" que será el nombre que lleve en el código.

Introduce un campo de texto debajo de la barra, el cual deberá ser Texto Dinámico y llamamos a la variable (var) "txt" todo nos queda mas claro con la imagen.
Ten cuidado de hacer el campo de texto lo suficientemente amplio.
Aquí mismo, sobre la barra de propiedades, puedes dar formato al texto.

Volvemos a escena y entonces desde la Bibliiteca sacamos el clip Cargador.

Selecciona el clip del cargador y abrimos la barra de Acciones, luego pegamos el código que a continuación, y podemos ver los nombres de las distintas variables que hemos ido agregando al clip. Resulta lo que vemos en la imagen.
Mientras no domines la técnica te recomendamos uses los mismos nombres usados aquí.

Sobre nuestra capa 1, frame 1, inserta un fotograma presionando F5 o con el menú Insertar >> Línea de tiempo >> Fotograma.

Luego crea una segunda capa e insertar un fotograma clave en el frame 4 presionando F6.

Ahora selecciona el fotograma 1 de la capa 2 y agregas un "stop" en la barra de acciones como se ve en la imagen.

En el fotograma 4 de la capa 2 mete un "gotoAndPlay" y en el parentesis escribimos entrecomillado "inicio" para que cuando la carga termine lo lleve a un fotograma etiquetado con el nombre "inicio".

Inserta una nueva capa, la número tres hasta ahora.

Sobre la capa 3, frame 3, inserta un fotograma clave presionando F6 y etiquetalo con el nombre de "inicio" desde la barra de propiedades, como lo vemos en la imagen.

Esta imagen es de la nueva XBOX 360, del juego Dead or Alive 4, el cual promete mucho a los fanáticos del mismo.
Presiona Ctrl + R para importar tu imagen a la escena.

Hay que colocar la imagen en las cordenadas X=0 y Y=0, como vemos en la imagen.

Para poder visualizar la animacion del cargador en tiempo real, como si ya estubiese en internet presiona un par de veces Ctrl + Enter.

La siguente animación nos muestra la forma en que funcionaría nuestro cargador.

Descarga los Archivos de este tutorial:
Para descomprimir necesitarás WinZip

Macromedia Flash MX 2004

Macromedia Flash MX

IMPORTANTE

" Los archivos fueron analizados con un antivirus actualizado, sin embargo recomendamos los analices con tu propio antivirus antes de abrirlos "
" En SoloPhotoshop.com No nos hacemos responsables de los daños o perjuicios que estos archivos puedan causar "

Comentarios de Cargador con Porcentaje | Solo Photoshop

↑ Tutorial

ferspi

2005-06-22 14:30

no funciona ^^
pinipon

2005-06-30 20:30

a mi si ke me funciona xD
rock_vai

2005-07-06 11:31

Excelente, nunca me habia salido bien una precarga y esta me funciono perfecto, y no sabia ese truco para verlo en tiempo real. gracias!!
stewartcastro

2005-07-13 20:31

Pregunta....se puede hacer el mismo efecto pero sin que salga otra vez la barra de porcentaje????, me entienden no???
victor+

2005-07-17 22:31

esto no es un tutorial sobre photoshop...pero aun asi me gusta n_n!
redcomperu

2005-07-18 15:31

muy bueno
ekuafilms

2005-08-06 00:31

hola!, disculpa...mira me resulto lo de cargar una imagen...pero resulta k ahora kiero hacer lo mismo pero kon una pagina entera k ya tengo kasi lista en flash, la kual tiene alrededor de 20 capas, se me okurrio ponerlas todas en el frame 3 y kon la etiketa inicio pero no me resulto:P
komo tengo k hacerlo?¿

bkan tus tutoriales, son muy didacticos!! de echo los unikos k entiendo!!
klitos

2005-08-10 17:31

No me funciona, ya lo hice dos veces y la sintaxis esta comprobadisima, pero no se por que no me funciona...me aparece de un solo la imagen...
juan_312005

2005-08-15 14:31

es exelente pero no me funciona y segui todos los pasos a la perfeccion 2 veces
lunalu

2005-09-06 07:30

Me pareció estupendo
eltripas

2005-09-07 23:30

excelente me encanto, aun no lo he puesto en practica pero esto nos da una gran ventaja en nuestras paginas web
kyo239

2005-10-12 00:31

bueno espí¨ro lean esto y me puedan decir por favor por q me marca error al poner todo lo q muestran en este tutorial por q no me salio por q me dice q hay errores espero me puedan contestar a kyo239@
Thorinx

2005-10-27 13:31

A mi me sale un error a la ora sacar el clip de cargador, ya que me dice que no se puede poner 2 veces el mismo cargador o algo así, es decir que el cargador ya esta en la escena y sigo todos los pasos y al final no va:S
sickubo

2005-10-28 02:31

Hey gracias por este magnifico tutorial me encantaria poder ver mas tutoriales como por ejemplo como crear un sitio web entero en flash
karla*

2005-10-30 16:31

a mi tampoco me funciona.. habra ke revisarlo.. mes ale la barra sin nada.. y no se mueve :S
osiris

2005-11-12 14:30

lo checare y despues te digo si funciona de antemano gracias por el dato
felix15

2005-11-13 22:30

Muy bueno y la explicacion exelente...
Andrea1989

2005-11-30 13:30

Good...
perking

2005-12-05 17:31

El tutorial esta bien,pero no hay manera de hacerlo funcionar.
Probe a colocar una imagen mas grande para que tardara en descargar y sigue sin funcionar.
El texto tampoco sale y lo carga todo de golpe.
Lo he revisado como 50 veces y no hay manera.
therola

2006-02-06 16:28

pense que solo era ami que no me funcionaba xD
::metatron::

2006-02-11 12:28

Espero lo siguiente le sirva a quienes quieren cargar una pelicula mas grande:
Yo hice el cargador en una escena y mi pelicula en otra escena, despues quité la sentencia [gotoandplay("inicio");] que esta en el fotograma 4 de la capa 2. De esta manera en vez de ciclarse, me manda a la siguiente escena, donde esta mi película.

Saludos.
kyo239

2006-03-30 12:31

tienen razon este tutorial tiene algun error por ahi por favor si lo pueden arreglar se los agredecere mucho att:vampire
gercba

2006-04-27 16:10

una masa!
parawas

2006-05-10 16:00

intentare eso de kitarle la sencia ojala alguien mas pueda subir otro tutorial sobre esto, algo un poco mas elaborado
gracias
80766377

2006-05-19 09:14

Genial, me funciono de maravilla, una pregunta?? en vez de cargar una imagen, puedo generar que me cargue un banner o una pelicula??
marcelorullan

2006-05-25 09:13

una pregunta, hice todo el tutoria y no tengo errores. Lo único que la barra desaparece muy ràpido y no puedo ver la barra cargandose. Si alguièn sabe como puedo arreglar este problema porfavor escriban algún comentario.Gracias!!
Jhoe

2006-06-11 20:33

No me salió :(... Bueno, si salió, pero no se carga.. no se que hice mal...
Tu tutorial es bueno, pero no se que pasó... En fin, seguiré viendo detalladamente para saber cual fue mi error..
b.lopez

2006-06-13 07:03

No me funciona!!! :-(
Juliog

2006-06-21 15:16

hay un problema con la sintaxis me dio como 4 errores, despues segui intentado y ahora solo me queda resolver 2 mas que dicen **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 1: Clip events are permitted only for movie clip instances
onClipEvent (load) {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: Clip events are permitted only for movie clip instances
onClipEvent (enterFrame){

Total ActionScript Errors: 2 Reported Errors: 2
que rayos significa esto!!!!!
iosin

2006-07-02 11:40

con que programa hay que hacerlo?
emma_rb18

2006-07-03 15:05

Que onda locoo..me aparecio estoo....

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 1: Sólo se permiten los eventos de clip para instancias de clip de película
onClipEvent (load) {

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 4: Sólo se permiten los eventos de clip para instancias de clip de película
onClipEvent (enterFrame){

Total de errores de ActionScript: 2 Errores comunicados: 2

HELP! I NEED SOMEBODY!!
ratido

2006-07-04 12:04

desde ya muchisimas gracias por habilitar esta info, pero no me funciono le pase el corrector de instancia no me salen errores pero cuando lo publico me aparece lo siguiente:
**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 7: Se espera ')' o ','
_root.gotoAndPlay("inicio"};

Total de errores de ActionScript: 1 Errores comunicados: 1
y como hago para que me habra (en vez de la foto) el archivo de flash que ya tengo armado
adolfo gonzalez

2006-07-07 13:07

a mi me cargo la imagen...será que esta peso menos y es por eso que no vemos cuando se carga el preloader..Ah?
skipy_dgd

2006-10-06 15:54

HOLA :.
ME PODRIAS MANDAR EL ACTION SCRIPT PARA LA FUCION CARGANDO.
::GRACIAS:: SALE BYE:...
skipy_89@hotmail.com
matijdk

2006-11-07 04:22

a mi tampocop me anda, me tira estos errores:

permiten los eventos de clip para instancias de clip de película
onClipEvent (enterFrame){

Total de errores de ActionScript: 2 Errores comunicados: 2

si podes responderme t lo agradeceria mucho.matidreher@hotmail.com
kndesign

2006-11-09 10:35

alguien pudo solucionar los errores???
xstean

2006-11-19 15:27

al intentar pasar desde la bibioteca al escenario el "cargador" me dice que no se puede pasar desde un clip al mismo
:S
por favor ayudenme
gracias
aqui les dejo mi msn

xstbnx@gmail.com
xstean

2006-11-19 18:06

ya me resxlto pero la parte de las acciones del fotograma uno de la capa uno, no salen los codigos, eso no lo entendi muy bien:S
dayan.montoyag

2006-12-01 11:21

Definitivamente hay algo mal por que no funciona y los archivos del tutorial que se descargan tampoco
thermo

2006-12-28 15:04

NO ME FUNCIONO ☺☺☺☺☺☺☺
Girao

2007-01-03 13:20

no me tira xD
fueradelresto

2007-01-10 12:59

FORMAS DE VER CORRECTAMENTE EL CARGADOR
=======================================
* Hacer dos veces CTROL + ENTER. (desde Flash)
* Cargalo desde una pagina web.

de nada !^_^!
Masterdavids

2007-01-16 15:22

hola.
me salen los mismos errores. alos qe les ha funcionado revisen el codigo y si notan alguna diferencia por favor mandenla.
gracias.
spideydesig

2007-01-18 15:16

Gracias definitivamente asi voy a aprender bastante rapido sabes estoy haciendo mis primeros pininos en flas y creo (modestia aparte) que voy muy bien y como no con ayuda como la pretada aqui gracias
estrellitaninya

2007-02-01 17:30

ehh, muy buena... salio todo... gracias!
cloud23x

2007-02-01 18:55

Me funciono perfecto, pero ahora falta hacerlo con un clip
jeison

2007-02-28 17:27

necesito que cargue de una escena a otra como se haria?
lmd_91_2004

2007-07-29 15:04

Alguien se puso a pensar que tal ves no funciona por que el tutorial esta echo en español y tal ves muchos de nosotros tenemos el flash en ingles ? nose es la razon mas coerente que se me ocurre .. yo te trabe en la parte de poner el code, ahy un code raro que no se que tecla es .. ahora voya ver si logro averiguar cual es .. bueno .. esperemos que me funcione, sino voy a tener que pasar todo el code ese a ingles :s .. muy bueno el tuto , pero pudiste haber puesto los codes para que nosotros hagamos "copiar" , "pegar", pero aun haci muy bueno .
punkboy

2007-08-10 22:11

Ami tampoco me funciono de echo te publicare el error que aparece:

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 7: Syntax error.
_root.gotoAndPlay("inicio"){

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 8: 'else' encountered without matching 'if'
}else{

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: Statement block must be terminated by '}'
onClipEvent (enterFrame){

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 14: Syntax error.
}

Total ActionScript Errors: 4 Reported Errors: 4

Por si queires repararlo o investigarlo nose
BastianSigfried

2007-10-04 12:14

Si a alguien le sale solo la imagen, haganle otra vez ctrl+enter y veran k si les salio pero tiene k hacer ctrl+enter un par de veces como dice en el tutorial ..
MeCCo

2007-10-15 12:40

Exactamente lo mismo...
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 1: Clip events are permitted only for movie clip instances
onClipEvent(load){

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: Clip events are permitted only for movie clip instances
onClipEvent(enterFrame){

Total ActionScript Errors: 2 Reported Errors: 2
MeCCo

2007-10-15 12:44

Es que complicais la vida en vez de poner la imagen con el ActionScript para que lo copiemos...Por que no lo copias y pegas como texto..Seria mas comodo para todo el mundo y no habria quejas con que el codigo esta mal o alguna cosas de esas como exactamente me a a pasado ami ...
:D
danny_oxxo

2007-10-18 11:26

saludos buen tutorial
tangod2

2007-10-19 16:59

me aprecen dos errores, como los puedo solucionar, el que desarrollo el tutorial podria tomar en consideracion a las personas que le resulto, aunque dudo que a alguien le haya resultado.
lostprophet87

2007-12-17 17:19

me parece muy bueno pero no me funciono.
kloyzter

2008-01-30 00:00

me baje el archivo y tampooko funciona plop
xmartox

2008-09-24 09:36

Hola... Soy nuevo en esta paginita... Tengo una consulta... Resulta que quiero usar esta barra de carga para un video... En los fotogramas que esta la imagen puse un video en SWF, pero no puedo hacer que ande... El video lo tengo en formato de video también asique si alguien me puede decir como hacer esto se lo agradeceria...

Dejo mi MSN, no se si esto se puede hacer, pero bueno, lo intento... kamikaze_ssn@hotmail.com... Dejo tambien el chivo de la pagina que estoy haciendo... www.legionskateboards.com.ar

Gracias...
quijano24

2008-12-13 20:29

gracias por el tuto esta excelente , si me funciono solo uj puequeño detalle, despuer de cargar sigue corriendo entre las imagenes del cargador y la de la foto, es normal o no me funciono el stop ??? gracias e_quijano@hotmail.com