Taller #8 - Composición y animación

En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 949
Joined: Fri Jan 15, 2016 6:13 pm

Taller #8 - Composición y animación

Post by xacarana » Mon Oct 09, 2017 3:09 pm

Para ir preparando las habilidades técnicas que necesitamos para desarrollar el libro digital del final, en esta clase vamos a aprender y a practicar lo siguiente. Con estos tres ejercicios terminamos el seguimiento de la segunda parte del curso, solo queda pendiente la nota de producción del final.
  1. Composición en múltiples planos (color de fondo, patron svg transparente, patron imagen superpuesto)
  2. Composición de objetos en el escenario apartir de un spritesheet
  3. Animación usando una secuencia de png
Referencias
Ejemplo de clase

Este ejercicio se puede optimizar para no repetir tantas veces el mismo código en los objetos. La solución es usar una clase para lo que sea común. Como ejercicio realice el cambio, esto hace parte de la evaluación.

HTML

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.spritely.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			$('#personaje').sprite({fps: 12, no_of_frames: 11});
		}
	</script>
</head>
<body>

	<div id="escena">
		<div id="oso"></div>
		<div id="reloj"></div>
		<div id="balon"></div>

		<div id="personaje"></div>

	</div>


</body>
</html>
CSS

Code: Select all

#escena{
	position: relative;
    width: 900px;
    height: 540px;
    margin: 0 auto;
    background-color: yellow;
    background-image: url(../img/black-scales.png),url(../img/patron.png),url(../img/camara.png);
    background-repeat: repeat,repeat-y,no-repeat;
    background-position: 0,0,top right;
    overflow: hidden;
}

#personaje{
	position: absolute;
	background-image: url(../img/caminata.png);
	width: 100px;
	height: 182px;
	top: 1px;
	left: 1px;
}

#reloj{
	position: absolute;
    background-image: url(../img/sprite_objetos.png);
    background-position: -128px 0px;
    width: 128px;
    height: 128px;
    top: 281px;
    left: 121px;
}
#oso{
	position: absolute;
    background-image: url(../img/sprite_objetos.png);
    width: 128px;
    height: 128px;
    top: 291px;
    left: 531px;
}
#balon{
	position: absolute;
    background-image: url(../img/sprite_objetos.png);
    background-position: -256px 0px;
    width: 128px;
    height: 128px;
    top: 451px;
    left: -49px;
}
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
DianaAristizabal
Posts: 4
Joined: Sun Jul 23, 2017 10:13 pm

Re: Taller #8 - Composición y animación

Post by DianaAristizabal » Mon Oct 30, 2017 4:00 pm

Ejercicios del Mapa Zonas, Menú con Sprites y Animación.
(Los ejercicios de clase están en la esquina superior derecha).

http://www.dianaristizabal.com/

User avatar
JorgeBernal
Posts: 4
Joined: Sun Jul 23, 2017 9:27 pm

Re: Taller #8 - Composición y animación

Post by JorgeBernal » Mon Oct 30, 2017 4:03 pm

http://www.jabernal.com

Ejercicio de Mapa de Zonas, Animación con Sprites, Menú con Sprites (Está con con los botones de arriba)

User avatar
Migueco
Posts: 3
Joined: Mon Jul 17, 2017 2:55 pm

Re: Taller #8 - Composición y animación

Post by Migueco » Mon Oct 30, 2017 4:07 pm


User avatar
nataliaroldan
Posts: 4
Joined: Wed Jul 19, 2017 11:03 pm

Re: Taller #8 - Composición y animación

Post by nataliaroldan » Fri Nov 10, 2017 7:45 am

Aquí publico mi ejercicio 8

http://nataliarol.com

Post Reply