elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Programación General
| | |-+  ¿Cómo exportar una animación hecha en una página web?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ¿Cómo exportar una animación hecha en una página web?  (Leído 4,784 veces)
big_ed

Desconectado Desconectado

Mensajes: 82


Ver Perfil
¿Cómo exportar una animación hecha en una página web?
« en: 26 Julio 2019, 18:34 pm »

Leer todo por favor. Voy a tratar de explicarme muy claro:

- Quiero hablar especificamente de las animaciones y efectos en los programas de edicion de video o en Affter Effects.
- Estos programas debajo tienen codigo (para producir sus animaciones), que no estoy seguro si es java script + css + html o de otros lenguajes como C#.
- El hecho es que debajo de esas opciones graficas que todos usan (presionar botones, arrastras bloques, etc,) hay codigo...y yo conozco ese codigo, pues tengo nivel avanzado en los lenguajes puros de la web.
- O sea , por ejemplo yo puedo realizar las mismas animaciones que se hacen como programas como After Effets pero con codigo puro..se me hace mas facil (asi me acostumbre)..pero no tengo idea de como haria para exportar esa animacion que veo en el navegador.. y ahi viene mi pregunta
¿como hacen esos programas de -edicion de video o creacion de animaciones- para exportar sus proyectos? ¿que herramienta o codigo usan? No entiendo. Lo unico que se me ocurre es grabar mi pantalla, pero no se si sea la mejor forma, y me parece que no obtengo el resultado con la mejor calidad. ¿Que opciones tengo?


En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: ¿Cómo exportar una animación hecha en una página web?
« Respuesta #1 en: 26 Julio 2019, 20:34 pm »

Pasa el/los códigos que no sabes que lenguaje son.
Pasa también el código fuente de la web que ves en el navegador con los elementos integrados. Súbelo a pastebin si es muy grande.

Cómo lo quieres exportar y para que uso?


En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

big_ed

Desconectado Desconectado

Mensajes: 82


Ver Perfil
Re: ¿Cómo exportar una animación hecha en una página web?
« Respuesta #2 en: 27 Julio 2019, 00:17 am »

Pasa el/los códigos que no sabes que lenguaje son.
Pasa también el código fuente de la web que ves en el navegador con los elementos integrados. Súbelo a pastebin si es muy grande.

Cómo lo quieres exportar y para que uso?
No, mira, me explico:

Yo tengo nivel avanzado en HTML, CSS y JAVA SCRIPT, lo que me permite generar animaciones muy buenas en el navegador. YO  quiero exportar estas animaciones en un formato que sea compatible con los editores de video que uso. En el mundo de la edicion del video, si quieres generar animaciones tienes dos opciones: una es usar el mismo editor con las opciones de efectos que venga; o dos, usar un programa externo que , de manera grafica, te genere los efectos, para luego tu exportarlos y usarlos en el editor de video.
Entonces, yo, que ya se hacer animaciones con codigo puro, pienso que seria genia seguir trabajando asi (sin usar programas), hacer mis animaciones en el navegador y luego exportarlas...el problema es que no se como exportar una animacion generada en el navegador....¿se entiende? No se como "sacarla de alli"....seria muy bueno que los editores de video soportaran documentos html, pero no es asi...aun.
Lo unico que se me ocurre, como dije, es grabar la pantalla de mi escritorio, pero la otra vez que lo hice, la grabo con mala calidad, y eso no me sirve, pues en el navegador la animacion se ve genial, no entiendo por que tiene que ser diferente cuando grabo mi entorno..
... Si tienes ideas seran bienvenidas  ::)
En línea

Tachikomaia


Desconectado Desconectado

Mensajes: 1.198


Superhacker (es broma xD )


Ver Perfil
Re: ¿Cómo exportar una animación hecha en una página web?
« Respuesta #3 en: 27 Julio 2019, 00:55 am »

Supongo que diré una sandez como de costumbre, pero bue, veremos y perdón si es el caso:
Si se trata de cómo funciona (superficialmente) Flash quizá yo puedo ayudarte. No sé si se trata de eso pues aunque leí todo tu 1er post como pediste no entendí qué es lo que quieres. Dices ser experto en "lo puro" y... ¿tienes dudas de cómo funciona "lo impuro"? Pues descarga un sistema así y fíjate. A mí creo que me pasa al revés. Te explico. En Flash dibujas una cosa como si fuese Paint, la conviertes en símbolo (los hay de varios tipos: Gráfico, película, botón y creo que otros como sonido, casi nunca usé esos), y entonces es como si fuese un archivo (pero no separado del archivo .fla que estás creando) que puedes insertar y modificar en cierta medida en la pantalla, ya sea en un fotograma o en otros. También puedes poner código en los fotogramas, que en general te da más control y posibilidades, pero es menos visual, es decir, sólo es código, para ver lo que hace tienes que probar el código o imaginarlo, en cambio las animaciones hechas en fotogramas lo puedes ver cambiando de fotogramas. Luego de que tengas todo hecho puedes probar la película o publicarla. Eso genera un archivo .swf (en el caso de la publicación debe estar configurado que lo genere, pues puede configurarse para generar otro tipo de archivos) que puede subirse a ciertas páginas y así tienes una animación con código, aunque no es tan admisible como un gif. El problema de los gif es que no tienen código, o al menos yo no sé cómo se hace por ejemplo un gif al que le puedas presionar un botón, quizá de hecho es imposible.
Creo que eso no es "exportar" sino "publicar". Exportar es más bien pasar cosas de un archivo a otro archivo. Nunca hice eso porque si quiero hacer eso abro el archivo a "copiar", lo guardo con otro nombre y ya está, o selecciono los símbolos o fotogramas que me hagan falta, y los copio y pego donde me de la gana.
Y supongo que importar es traer cosas de otro archivo. Supongo que con esto se puede copiar cosas hechas por otro o algo así. Nunca lo hice así. Y si a tu modo puedes hacer grandes animaciones no sé qué sentido tendría copiar las de otros, aunque según las palabras que usas no es tu intención.

Respondido...?

Ah, en cuanto a que me pasa al revés, es que por ejemplo no sé dibujar o animar, mucho, usando código puro. Antes dibujaba cosas en Clipper, sí, me daba maña, estaba haciendo una especie de novela gráfica, cambiaban las escenas... pero en Flash me resulta mucho más fácil. No sé si a eso es a lo que le llamas puro, a indicar puntito por puntito con código en vez de dibujar las cosas con el mouse :/
« Última modificación: 27 Julio 2019, 01:02 am por Tachikomaia » En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: ¿Cómo exportar una animación hecha en una página web?
« Respuesta #4 en: 27 Julio 2019, 04:55 am »

Antes de nada... Probaste con click derecho?  Jajajaja

Para la parte del cliente puedes usar la librería ccapture.js jsgif o gif.js entre otros para exportarla como .gif  Con 4 líneas de código lo tienes rulando. Depende de que formato lo tengas. Me imagino que si hablas de lenguaje puro te refieres a javascript vanilla con la data en arrays.

Para serverside tienes gifencoder que creo que es una modificación de gif.js
Si por cualquier historia no te sirviese  puedes ir frame por frame tomando screenshots o simplemente a cada frame lo pones en una parte del html solo tienes hacer el rect con variables como coordenadas y en un for vás dibujando los frames aumentanto las variables junto con un document.write y el canvas + context en vars para que te vaya posteando cada imagen con cada iteración y con un crawler extraes todo. Después haces el gif a partir de las imagenes con cualquier software. Yo uso Photoscape que a parte tiene tapón de clonado, marcos y toda la pesca.

Hago algo parecido para chapar streaming de las webcams por si quiero un recuerdo de lo guapo que soy. Jejeje

Si quieres hacer edit de video en algún software que no te pilla formato .gif hay conversores online tipo: gif to mp4 gif to avi html5 to mp4 html5 to pdf html5 to png...

También hay una forma "pura" de obtener la animación del canvas con javascript y una prácticamente igual en Jquery pero la use 4 veces contadas xD Supongo que alguna de las librerías la usará. Busca la manera de hacerlo en Jquery que ha de ser más fácil de encontrar y si pones la misma parte del código sin la parte de Jquery te saldrá la versión de javascript en google casi seguro. O mírate la implementación de las libs que siempre se aprende.
En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

big_ed

Desconectado Desconectado

Mensajes: 82


Ver Perfil
Re: ¿Cómo exportar una animación hecha en una página web?
« Respuesta #5 en: 27 Julio 2019, 06:57 am »

Supongo que diré una sandez como de costumbre, pero bue, veremos y perdón si es el caso:
Si se trata de cómo funciona (superficialmente) Flash quizá yo puedo ayudarte. No sé si se trata de eso pues aunque leí todo tu 1er post como pediste no entendí qué es lo que quieres. Dices ser experto en "lo puro" y... ¿tienes dudas de cómo funciona "lo impuro"? Pues descarga un sistema así y fíjate. A mí creo que me pasa al revés. Te explico. En Flash dibujas una cosa como si fuese Paint, la conviertes en símbolo (los hay de varios tipos: Gráfico, película, botón y creo que otros como sonido, casi nunca usé esos), y entonces es como si fuese un archivo (pero no separado del archivo .fla que estás creando) que puedes insertar y modificar en cierta medida en la pantalla, ya sea en un fotograma o en otros. También puedes poner código en los fotogramas, que en general te da más control y posibilidades, pero es menos visual, es decir, sólo es código, para ver lo que hace tienes que probar el código o imaginarlo, en cambio las animaciones hechas en fotogramas lo puedes ver cambiando de fotogramas. Luego de que tengas todo hecho puedes probar la película o publicarla. Eso genera un archivo .swf (en el caso de la publicación debe estar configurado que lo genere, pues puede configurarse para generar otro tipo de archivos) que puede subirse a ciertas páginas y así tienes una animación con código, aunque no es tan admisible como un gif. El problema de los gif es que no tienen código, o al menos yo no sé cómo se hace por ejemplo un gif al que le puedas presionar un botón, quizá de hecho es imposible.
Creo que eso no es "exportar" sino "publicar". Exportar es más bien pasar cosas de un archivo a otro archivo. Nunca hice eso porque si quiero hacer eso abro el archivo a "copiar", lo guardo con otro nombre y ya está, o selecciono los símbolos o fotogramas que me hagan falta, y los copio y pego donde me de la gana.
Y supongo que importar es traer cosas de otro archivo. Supongo que con esto se puede copiar cosas hechas por otro o algo así. Nunca lo hice así. Y si a tu modo puedes hacer grandes animaciones no sé qué sentido tendría copiar las de otros, aunque según las palabras que usas no es tu intención.

Respondido...?

Ah, en cuanto a que me pasa al revés, es que por ejemplo no sé dibujar o animar, mucho, usando código puro. Antes dibujaba cosas en Clipper, sí, me daba maña, estaba haciendo una especie de novela gráfica, cambiaban las escenas... pero en Flash me resulta mucho más fácil. No sé si a eso es a lo que le llamas puro, a indicar puntito por puntito con código en vez de dibujar las cosas con el mouse :/

Los programas graficos que tu usas, es decir, esos donde presionas un boton y te genera una accion, o arrastras algo y lo pegas en otro sitio, etc, esos programas estan hechos con codigo, que son comandos o instrucciones..POr ejemplo para hacer paginas web necesitas saber comandos que le manden ordenes al navegador sobre como proyectar en la pantalla lo que tu quieres...claro que hoy ya existen programas graficos que le permiten a la persona sin conocimientos en codigo hacer una web jalando cosas o presionando botones... pero igual esos programas llamados CMS estan hechos con codigo puro y los crean expertos. Tu programa Flash debe estar hecho con codigo, al igual que tu sistema Windows y esta pagina web...todo es codigo...yo aprendi por eso a hacer webs desde cero con codigo porque tenia curiosidad...y me ha servido un monton, y valio la pena tantos años de estudio..
Que sepa codigo no quiere decir que automaticamente conozca el funcionamiento de los programas graficos basados en él.
Me parece que use el termino Exportar correctamente. Por ejemplo si yo creo una animacion con codigo se va a ver en el navegador web, para sacarla de ahi, es decir descargarla en un formato que desee, para incrustar dicha animacion en cualquier programa,  eso seria exportar.
Por ultimo: No se para que usas Flash, pero si es para la web, te recomiendo que aprendas otras tecnologias porque Flash perjudica el posicionamiento de las web, por ende hoy se estan haciendo animaciones con CSS3 y JAVA SCRIPT...hay navegadores que por defecto no muestran flash a menos que lo actives (y la mayoria no sabe activar)...es un consejo. Los videos Flash van a ser remplazados por HTML5 que es superior en muchos aspectos....deben haber otros programas graficos que te sirvan para hacer animaciones como After Effetcs.
En línea

big_ed

Desconectado Desconectado

Mensajes: 82


Ver Perfil
Re: ¿Cómo exportar una animación hecha en una página web?
« Respuesta #6 en: 27 Julio 2019, 07:13 am »

Antes de nada... Probaste con click derecho?  Jajajaja

Para la parte del cliente puedes usar la librería ccapture.js jsgif o gif.js entre otros para exportarla como .gif  Con 4 líneas de código lo tienes rulando. Depende de que formato lo tengas. Me imagino que si hablas de lenguaje puro te refieres a javascript vanilla con la data en arrays.

Para serverside tienes gifencoder que creo que es una modificación de gif.js
Si por cualquier historia no te sirviese  puedes ir frame por frame tomando screenshots o simplemente a cada frame lo pones en una parte del html solo tienes hacer el rect con variables como coordenadas y en un for vás dibujando los frames aumentanto las variables junto con un document.write y el canvas + context en vars para que te vaya posteando cada imagen con cada iteración y con un crawler extraes todo. Después haces el gif a partir de las imagenes con cualquier software. Yo uso Photoscape que a parte tiene tapón de clonado, marcos y toda la pesca.

Hago algo parecido para chapar streaming de las webcams por si quiero un recuerdo de lo guapo que soy. Jejeje

Si quieres hacer edit de video en algún software que no te pilla formato .gif hay conversores online tipo: gif to mp4 gif to avi html5 to mp4 html5 to pdf html5 to png...

También hay una forma "pura" de obtener la animación del canvas con javascript y una prácticamente igual en Jquery pero la use 4 veces contadas xD Supongo que alguna de las librerías la usará. Busca la manera de hacerlo en Jquery que ha de ser más fácil de encontrar y si pones la misma parte del código sin la parte de Jquery te saldrá la versión de javascript en google casi seguro. O mírate la implementación de las libs que siempre se aprende.

Probé lo del click derecho hace mucho tiempo jej, pero guarda como pagina HTML.
En formato gif no creo que se vea bien. Perderia mucha calidad mi animacion. Y aparte no creo quE te permita tanta duracion como una animacion. ¿o si? Creo que es para algo mas corto.
Supongo que entonces seguire intentando grabar mi pantalla. Lo malo es lo que mencione de la calidad  mala. No se por que no se ve como se ve en mi navegador. Tal vez el formato de compresion esta bajandole calidad. Estoy usando OBS.
En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: ¿Cómo exportar una animación hecha en una página web?
« Respuesta #7 en: 27 Julio 2019, 14:11 pm »

Por qué no expecificas explícitamente desde el principio el formato en que lo quieres si se supone que sabes lo que quieres y es algo concreto?
El formato .gif mantiene todos los píxeles. La única diferencia que vas a encontrar es la paleta, que es de 256 colores.Y el tamaño que va a ser bastante tocho al casi no filtrar info. Aunque si que codifica ciertos patrones, la info no se pierde. Con formatos como .mp4 mantienes los 10.000.000 de colores. Pero mucha info es descartada en el encoding.

Te bajará la calidad con el obs porque estás sacando un vídeo de 60 frames, codificado de la animación en pequeño. Una animación de 72727271 pixeles con 1000 fps la puedes mostrar en 1 pixel y capturarla con 10fps. Algunos monitores no van más allá pero se nota, en cambio otros sí muestran más fps.
 Lo de grabar de la pantalla es chapuzas total teniendo toda la data y el código que genera la animación y pudiendo exportarla a cualquier formato desde javascript con una librería y con 4 líneas de código.

En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

big_ed

Desconectado Desconectado

Mensajes: 82


Ver Perfil
Re: ¿Cómo exportar una animación hecha en una página web?
« Respuesta #8 en: 27 Julio 2019, 19:22 pm »

Por qué no expecificas explícitamente desde el principio el formato en que lo quieres si se supone que sabes lo que quieres y es algo concreto?
El formato .gif mantiene todos los píxeles. La única diferencia que vas a encontrar es la paleta, que es de 256 colores.Y el tamaño que va a ser bastante tocho al casi no filtrar info. Aunque si que codifica ciertos patrones, la info no se pierde. Con formatos como .mp4 mantienes los 10.000.000 de colores. Pero mucha info es descartada en el encoding.

Te bajará la calidad con el obs porque estás sacando un vídeo de 60 frames, codificado de la animación en pequeño. Una animación de 72727271 pixeles con 1000 fps la puedes mostrar en 1 pixel y capturarla con 10fps. Algunos monitores no van más allá pero se nota, en cambio otros sí muestran más fps.
 Lo de grabar de la pantalla es chapuzas total teniendo toda la data y el código que genera la animación y pudiendo exportarla a cualquier formato desde javascript con una librería y con 4 líneas de código.


No me fio del gif porque he visto que algunos se medio "cuadrados". O sea como que se lagea.

Creo que me gustaria poder exportarla como video, pero que se viera con toda la calidad con la que se ve en el navegador. Al final sera para agregarla a un documental que edito con un editor de video.

Lo otro no entiendo ¿las animaciones js corren a 1000/fps?
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Cómo colgar pág.web hecha en flash?
Diseño Gráfico
rut 2 1,961 Último mensaje 1 Agosto 2005, 13:49 pm
por rut
Exportar sólamente un control de una DLL en lugar de exportar la DLL entera
.NET (C#, VB.NET, ASP)
Eleкtro 5 3,506 Último mensaje 25 Diciembre 2012, 05:36 am
por spiritdead
[CSS] Animación pre hecha. ¿Donde la pongo?.
Desarrollo Web
Ori-chan 2 2,270 Último mensaje 3 Enero 2013, 14:50 pm
por Ori-chan
Videovigilancia: hecha la ley, hecha la trampa
Noticias
wolfbcn 1 1,539 Último mensaje 19 Mayo 2018, 13:04 pm
por buite
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines