Stop Motion “Descarga Letal”: Desarrollo y Producción
Introducción
El Stop Motion tiene múltiples aplicaciones y ha sido utilizado en diversos ámbitos, especialmente en el cine de animación, series de televisión, publicidad, así como en proyectos educativos y artísticos. Esta técnica permite crear la ilusión de movimiento a partir de una secuencia de imágenes estáticas, manipulando progresivamente los objetos cuadro por cuadro.
En esta práctica se lleva a cabo la creación de un Stop Motion titulado “Descarga Letal”, una historia ambientada en el contexto de la ingeniería, que aborda los riesgos relacionados con la seguridad informática. Para su realización, se utilizaron distintos programas tanto para la captura de imágenes como para su edición, incluyendo la incorporación de efectos visuales y sonido. A través de esta animación, se busca representar de forma creativa y didáctica cómo una descarga maliciosa puede comprometer un sistema, resaltando así la importancia de la ciberseguridad.
Definición Stop Motion
Primero, es fundamental comprender qué es el Stop Motion. Esta técnica de animación, también conocida como animación fotograma a fotograma, consiste en capturar una secuencia de imágenes estáticas de objetos en diferentes posiciones para crear la ilusión de movimiento. Esto se logra mediante la manipulación progresiva de los objetos: se colocan en una posición específica, se toma una fotografía y luego se modifica ligeramente su ubicación de forma lógica. Al reproducir estos fotogramas en orden, se genera el efecto visual de que los objetos se mueven por sí solos.
Proceso de Producción
1. Planificación
En la fase de planificación se establecen los criterios fundamentales para el desarrollo del Stop Motion, abarcando desde la temática y estructura narrativa hasta el guion, los ángulos de cámara, los efectos sonoros y las acciones que realizará cada personaje.
La idea original gira en torno a un personaje que intenta navegar por internet, pero se ve imposibilitado debido a la extrema lentitud del sistema, causada por un disco duro lleno. En busca de una solución, recurre a su celular para preguntar en redes sociales, de esta forma decide descargar un programa de limpieza y optimización. Sin embargo, accede a una página sospechosa e inicia la descarga de un software malicioso, lo que compromete el sistema y provoca que la pantalla quede completamente en negro. Ante esta situación, decide acudir a un ingeniero, quien finalmente logra recuperar el sistema.
Durante esta etapa también se definen las actitudes y expresiones de los personajes. Por ejemplo, el personaje principal debe reflejar impaciencia y frustración al inicio, evolucionando hacia la desesperación conforme se desarrolla la historia. Dado que se busca evitar el uso de diálogos verbales, se planifican los movimientos corporales de cada personaje, con el fin de transmitir las emociones y situaciones de manera clara y expresiva. Asimismo, se seleccionan los efectos sonoros que acompañarán las distintas acciones realizadas por los personajes. Por último, se determinan los elementos físicos adicionales que formarán parte de la escena, como escritorios, sillas y el computador.
2. Construcción de los Personajes, Materiales y Escenarios
Para el desarrollo del Stop Motion se empleó la técnica de animación con marionetas, una de las formas más representativas del stop motion. Esta consiste en la creación y manipulación de títeres o figuras articuladas. Por esta razón, los personajes principales de la animación son dos maniquíes de madera, que se diferencian por accesorios: el personaje que descarga el software malicioso tendrá un gorro y el ingeniero tendrá unas gafas que se realizaron con plastilina negra.
Luego, utilizando tablones de madera de diferentes tamaños (18.1 x 7.3 x 0.48 cm y 11.5 x 11.5 cm) y formas (rectangulares y cuadradas), se construyeron dos escritorios, uno para cada personaje. Con el mismo material, se elaboró una representación de un ordenador, así como la parte superior de dos sillas, cuyas patas fueron formadas con palos de paleta.
Una vez finalizada la construcción de estos elementos, se procedió a su personalización mediante la aplicación de pintura y elementos adicionales. El escritorio del personaje con gorra fue pintado de negro y decorado en los laterales con diversas figuras realizadas con sellos. Por su parte, el escritorio del personaje con gafas, de mayor tamaño, fue pintado en color café. El ordenador se pintó de negro y se complementó con impresiones que simulan el teclado y la pantalla. El celular fue elaborado con cinta negra y detalles en corrector blanco para representar la pantalla y cámaras.
Estos elementos principales fueron complementados con accesorios adicionales que se tenían al alcance, que se integraron a la escena con el fin de enriquecer la ambientación y aportar mayor credibilidad al espacio representado.
3. Configuración de las Escenas
La elección del espacio y la iluminación es un aspecto fundamental en la producción, ya que influye directamente en la coherencia visual de la animación. Por esta razón, se seleccionó cuidadosamente un área específica que ofreciera estabilidad en la iluminación y la perspectiva, además de contar con el espacio suficiente para colocar y manipular los elementos de la escena. Para asegurar una iluminación uniforme y adecuada, se utilizó un aro de luz, lo que permitió mantener una buena visibilidad y evitar sombras indeseadas. Así mismo se uso un soporte de celular para mayor estabilidad al momento de tomar las fotografías.
Con base en la historia planteada, se definieron dos escenarios principales:
- El primero simula un escritorio con un ordenador, un celular y otros elementos decorativos, representando el área de trabajo del protagonista.
- El segundo recrea el departamento de informática, donde se desarrolla la segunda parte de la historia.
4. Captura Fotográfica
4.1. Captura Elementos Físicos
En esta fase se utilizó la herramienta Stop Motion Studio, una aplicación que permite capturar fotografías de objetos o escenas cuadro por cuadro, moviendo ligeramente el objeto o la cámara en cada toma. Además, la plataforma ofrece funciones de retroalimentación visual, lo que facilita revisar en tiempo real cómo va quedando la secuencia animada. También permite eliminar o añadir fotogramas según sea necesario, y en su versión Pro incluye configuraciones adicionales que optimizan el proceso de edición y animación.
Con la app se realizo la captura de las fotografías que compondrían la animación. Este proceso requiere un alto grado de paciencia y precisión, ya que cada cambio debe ser registrado para mantener la continuidad del movimiento. Así que, una vez ubicados todos los elementos en el espacio previamente asignado, incluyendo la iluminación y la posición de la cámara para asegurar una captura coherente y uniforme, se da inicio al proceso de animación, que consiste en mover ligeramente a los personajes u objetos y tomar una fotografía por cada pequeño cambio. Este procedimiento se repite de manera precisa para construir la secuencia que dará la ilusión de movimiento continuo.
La captura incluyó secuencias de:
- El protagonista entrando en escena caminando.
- La acción de sentarse frente al ordenador.
- Expresiones corporales (movimientos de brazos, cabeza).
- Interacción con un teléfono móvil simulado.
- Transición entre escenarios.
- Interacción entre personajes.
- Secuencias de espera (sentado, realizando ejercicio, observando).
- Interacción con el ordenador.
4.2 Captura Elementos Digitales
Por otra parte, para representar las interacciones con el ordenador, se desarrollaron elementos que fueron capturas de pantalla tomadas desde un monitor real, las cuales fueron organizadas y editadas en Canva, una herramienta de diseño gráfico. Esto permitió simular la secuencia manteniendo la esencia del Stop Motion, es decir, el uso de fotografías o fotogramas. Una vez finalizados todos los fotogramas, se exportaron como imágenes individuales.
Los elementos digitales incluyen:
- Simulación de una página de Google cargando lentamente.
- Interfaz del explorador de Windows mostrando un disco lleno.
- Diseño de una página web ficticia para la descarga del programa.
- Interfaz de permisos del sistema.
- Animación del proceso de descarga con barra de progreso.
- Mensaje de error crítico del sistema.
- Efecto de apagado del monitor.
- Mensaje de recuperación del sistema.
5. Desarrollo de Código Para Simulación
Cabe destacar que la creación de la página web, la simulación de permisos, la descarga, el error del sistema y su posterior recuperación se realizaron mediante código, utilizando herramientas de programación como IntelliJ IDEA, lo que permitió representar de forma más realista las diferentes fases del incidente informático narrado en la animación.
Pagina Web
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>UltraCleanerPro9000 - Descarga oficial</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(to bottom right, #fefefe, #e0e0e0);
margin: 0;
padding: 0;
}
header {
background-color: #222;
color: white;
padding: 20px;
text-align: center;
}
.container {
max-width: 800px;
margin: 30px auto;
background-color: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
text-align: center;
}
.hero-icon {
font-size: 60px;
color: #d90000;
}
h2 {
color: #333;
}
p {
font-size: 18px;
color: #555;
}
.download-btn {
background-color: #ff2b2b;
color: white;
padding: 15px 40px;
font-size: 20px;
border: none;
border-radius: 10px;
cursor: pointer;
margin-top: 25px;
transition: background-color 0.3s;
}
.download-btn:hover {
background-color: #c40000;
}
.rating {
color: #ffaa00;
font-size: 18px;
margin-top: 15px;
}
.testimonials {
margin-top: 30px;
font-style: italic;
color: #666;
font-size: 14px;
}
footer {
margin-top: 50px;
padding: 10px;
font-size: 12px;
text-align: center;
color: #999;
}
/* Pop-ups */
.popup, .popup-completo {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border: 2px solid #d90000;
padding: 30px;
width: 300px;
z-index: 999;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
border-radius: 10px;
text-align: center;
}
.popup h3, .popup-completo h3 {
color: #d90000;
margin-bottom: 15px;
}
.progress-bar {
margin-top: 15px;
background: #eee;
border-radius: 5px;
overflow: hidden;
height: 20px;
}
.progress {
width: 0%;
height: 100%;
background: #00c853;
animation: progressAnim 4s linear forwards;
}
@keyframes progressAnim {
to {
width: 100%;
}
}
.popup-completo {
border-color: #00c853;
}
.popup-completo h3 {
color: #00c853;
}
</style>
</head>
<body>
<header>
<h1>UltraCleanerPro9000</h1>
</header>
<div class="container">
<div class="hero-icon">🧹</div>
<h2>¿Tu PC lento? ¡Arréglalo YA!</h2>
<p>Con UltraCleanerPro9000 puedes liberar espacio, borrar basura oculta y mejorar el rendimiento de tu computadora en solo minutos.</p>
<button class="download-btn" onclick="mostrarPopup()">⬇ DESCARGAR GRATIS</button>
<div class="rating">★★★★★ 4.9/5 – Más de 1.4M de descargas</div>
<div class="testimonials">
“Me salvó la vida, ahora mi PC vuela” – UsuarioAnónimo23<br>
“No sabía que tenía 79 GB de basura escondida. ¡Gracias UltraCleaner!” – HackerDelAmor
</div>
</div>
<!-- Pop-up de descarga en progreso -->
<div class="popup" id="popup">
<h3>Descargando archivo...</h3>
<p>UltraCleanerPro9000.exe</p>
<div class="progress-bar">
<div class="progress"></div>
</div>
</div>
<!-- Pop-up de descarga completa -->
<div class="popup-completo" id="popupCompleto">
<h3>✔ Descarga completa</h3>
<p>El archivo ha sido guardado en tu carpeta de Descargas.</p>
</div>
<footer>
© 2025 UltraCleanerPro Inc. – No nos hacemos responsables si algo explota.
</footer>
<script>
function mostrarPopup() {
document.getElementById("popup").style.display = "block";
setTimeout(() => {
document.getElementById("popup").style.display = "none";
document.getElementById("popupCompleto").style.display = "block";
}, 4000); // Espera 4 segundos y muestra el de descarga completa
}
</script>
</body>
</html>Permisos del Sistema
import javax.swing.*;
import java.awt.*;
public class VentanaPermisos {
public static void main(String[] args) {
JFrame frame = new JFrame("Control de cuentas de usuario");
frame.setSize(450, 200);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null);
JLabel texto = new JLabel("<html>¿Desea permitir que esta aplicación<br>realice cambios en el dispositivo?</html>", SwingConstants.CENTER);
texto.setFont(new Font("Segoe UI", Font.PLAIN, 16));
JButton permitir = new JButton("Sí");
JButton cancelar = new JButton("No");
permitir.addActionListener(e -> JOptionPane.showMessageDialog(frame, "Permiso concedido"));
cancelar.addActionListener(e -> frame.dispose());
JPanel botones = new JPanel();
botones.add(permitir);
botones.add(cancelar);
frame.setLayout(new BorderLayout());
frame.add(texto, BorderLayout.CENTER);
frame.add(botones, BorderLayout.SOUTH);
frame.setVisible(true);
}
}Instalación del Software
import javax.swing.*;
import java.awt.*;
public class VentanaInstalacion {
public static void main(String[] args) {
SwingUtilities.invokeLater(() -> mostrarVentanaInstalacion());
}
static void mostrarVentanaInstalacion() {
JFrame frame = new JFrame("Instalando UltraCleanerPro9000");
frame.setSize(400, 150);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null);
JLabel texto = new JLabel("Instalando, por favor espere...", SwingConstants.CENTER);
JProgressBar barra = new JProgressBar();
barra.setIndeterminate(true);
frame.setLayout(new BorderLayout());
frame.add(texto, BorderLayout.NORTH);
frame.add(barra, BorderLayout.CENTER);
frame.setVisible(true);
// Crear y detener el timer después de ejecutarse una vez
Timer timer = new Timer(4000, e -> {
((Timer) e.getSource()).stop(); // Detiene el timer
frame.dispose();
mostrarVentanaCompletado();
});
timer.setRepeats(false); // Evita que el timer se repita
timer.start();
}
static void mostrarVentanaCompletado() {
JFrame frame = new JFrame("Instalación completada");
frame.setSize(350, 120);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null);
JLabel texto = new JLabel("UltraCleanerPro9000 se instaló correctamente.", SwingConstants.CENTER);
texto.setFont(new Font("Segoe UI", Font.PLAIN, 14));
JButton cerrar = new JButton("Finalizar");
cerrar.addActionListener(e -> frame.dispose());
frame.setLayout(new BorderLayout());
frame.add(texto, BorderLayout.CENTER);
frame.add(cerrar, BorderLayout.SOUTH);
frame.setVisible(true);
}
}
Error del Sistema
import javax.swing.*;
import java.awt.*;
public class VentanaError {
public static void main(String[] args) {
JFrame frame = new JFrame("Error del sistema");
frame.setSize(500, 150);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null);
JLabel texto = new JLabel("<html><center>ERROR CRÍTICO: El sistema encontró un problema<br>y necesita reiniciarse.</center></html>", SwingConstants.CENTER);
texto.setForeground(Color.RED);
texto.setFont(new Font("Segoe UI", Font.BOLD, 14));
frame.add(texto);
frame.setVisible(true);
}
}Restauración del Sistema
import javax.swing.*;
import java.awt.*;
public class VentanaRestauracion {
public static void main(String[] args) {
JFrame frame = new JFrame("Sistema restaurado");
frame.setSize(400, 120);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null);
JLabel texto = new JLabel("El sistema ha sido restaurado con éxito.", SwingConstants.CENTER);
texto.setForeground(new Color(0, 153, 76));
texto.setFont(new Font("Segoe UI", Font.PLAIN, 15));
frame.add(texto);
frame.setVisible(true);
}
}6. Montaje
En la fase de montaje y producción, todas las imágenes fueron importadas a CapCut, una herramienta de edición de video que permite trabajar de manera sencilla y eficiente con contenido visual de forma gratuita. En esta plataforma, las imágenes se organizaron de forma cronológica siguiendo el guion previamente establecido. Luego, se ajustó la duración de cada fotograma para generar una secuencia fluida que transmitiera adecuadamente el movimiento de los personajes y la progresión de la historia.
Una vez organizadas las imágenes, se procedió con la selección de efectos sonoros, los cuales fueron tomados tanto de la biblioteca de CapCut como de sitios web como FreeSounds y Pixabay. Posteriormente, fueron incorporados en momentos específicos de la secuencia para aportar mayor realismo, dinamismo y coherencia narrativa, para mayor ambientación y la experiencia auditiva.
Por último, se diseñó la portada que presenta el título “Descarga Letal” directamente en la aplicación CapCut y se añadieron los créditos al cierre del videoclip. Finalmente, el video fue exportado en formato MP4.
7. Resultados
Conclusiones
El proyecto “Descarga Letal” demuestra que la técnica del Stop Motion es una herramienta para animar mediante la captura cuadro por cuadro, permitiendo combinar elementos físicos y digitales para representar de manera clara y atractiva conceptos abstractos, como los riesgos de descargar archivos maliciosos. A lo largo de su desarrollo, también fue evidente el nivel de dificultad que implica cada etapa del proceso: desde la planificación inicial, hasta la ejecución práctica, donde se requiere gran precisión y paciencia para lograr movimientos y capturas exactas, puesto que solo así es posible construir una secuencia lógica de acciones que refuerce el mensaje que se desea transmitir.
Durante la realización del proyecto se destacó la importancia de seguir una metodología estructurada, que inició con la planificación del guion visual, continuó con la elaboración de escenarios y personajes, y avanzó hacia la captura fotográfica precisa, finalizando con un proceso de montaje y edición . Esta organización no solo favoreció la coherencia narrativa del producto final, sino que también permitió integrar sin dificultades los elementos digitales requeridos para simular situaciones reales en el ámbito de la seguridad informática.
A pesar del surgimiento de técnicas de animación más ágiles, como la animación digital por computadora, el Stop Motion continúa siendo ampliamente utilizado en diversos ámbitos. Esta técnica tradicional mantiene su vigencia gracias a su capacidad para crear piezas visuales únicas, con un estilo distintivo que no siempre puede replicarse con métodos más modernos y que tiene una esencia única.
Créditos
Autor: Yerli Tatiana Urrea Naranjo
Editor: Carlos Iván Pinzón Romero
Código: UCCGG1-9
Universidad: Universidad Central
Referencias Bibliográficas
Adobe. (s.f.). Animación stop motion: funcionamiento de la técnica cinematográfica fotograma a fotograma [Imagen]. Adobe. https://www.adobe.com/es/creativecloud/animation/discover/stop-motion-animation.html
Alonso, L. (2020, 9 diciembre). ¿Qué es animación stop motion? Domestika. https://www.domestika.org/es/blog/4705-que-es-animacion-stop-motionxd
Animación stop motion: definición, técnicas y ejemplos | Adobe. (s. f.). https://www.adobe.com/es/creativecloud/animation/discover/stop-motion-animation.html
Cateater. (s. f.). Imagen promocional de la aplicación Stop Motion Studio [Imagen]. Google Play. https://play.google.com/store/apps/details?id=com.cateater.stopmotionstudio&hl=es_CO
School, A. C. A. (2024, 14 noviembre). La Animación Stop-Motion: Qué es, cómo se crea y ejemplos. Animum 3D. https://www.animum3d.com/blog/animacion-stop-motion/
