Vamos a crear un nuevo archivo, hacerlo de un tamaño de 800x600 y transferirle algunos archivos, a saber, estas pocas imágenes y el "ruido del bosque mp3", es decir, el sonido. Lo muevo aquí. Lo que tenemos como resultado es una imagen de este tipo: este es un bosque, se llama "bg", "reproducir" y "pausa", estos son botones. Los moveré hacia abajo ahora, los moveré, así, la opción más fácil.
Comenzaré la animación ahora, presione cntr + enter, es solo un bosque y solo dos botones, nada funciona. Si quiero hacer que un sonido se reproduzca automáticamente para mí, se llama "ruido del bosque", luego necesito seleccionar esta capa y seleccionar "reproducción automática" aquí, ahora cuando presione cntr + enter, reproduciré un sonido. Asombroso.
Si solo dibujamos algún tipo de botón y hay algún tipo de fondo, entonces si hacemos clic en él, no habrá transición en ninguna parte. Para agregar enlace en el que se puede hacer clic necesitamos seleccionar este botón, hacer clic con el botón derecho en abrir acción, botón de falta, lo tengo llamado así, y hacer clic en hacer clic, es decir, lo que se hará cuando se haga clic. Y aquí tenemos que seleccionar Abrir eres raol.
En este video mostraré cómo hacerlo, nada complicado, pero debe comprender correctamente dónde debe copiar el código correcto y dónde debe pegarlo.
digamos que tienes video hecho en adobe edge animate, al hacer clic en él, se abre la página de destino deseada, está en el formato animado de borde y se guarda en la carpeta con el código fuente y los scripts de Java. Lo abrimos en cualquier editor de texto, puede usar cualquier editor de prueba, por ejemplo: bloc de notas, etc.
Aquí puede copiar fotogramas clave, es decir, selecciono un fotograma, presiono cntr + c, hago clic en el campo deseado, presiono cntr + v, la animación se reproducirá en bucle, es decir, no en bucle, pero en este caso, vaya desde el punto de partida de vuelta al punto de partida. Si ejecuto este video, presiono cntr+enter, vemos que la animación dura solo 1 segundo, va por un lado y regresa por el otro.
En este video mostraré cómo hacerlo, nada complicado, pero debe comprender correctamente dónde debe copiar el código correcto y dónde debe pegarlo.
Digamos que tiene un banner hecho en adobe edge animate, cuando hace clic en él, se abre la página de destino deseada, está en formato edge animate y se guarda en la carpeta con el código fuente y los scripts de Java. Lo abrimos en cualquier editor de texto, puede usar cualquier editor de prueba, por ejemplo: bloc de notas, etc.
A continuación, quiero insertar este banner en el sitio. ¿Lo que debe hacerse? Debe descargar el archivo de índice, luego abrirlo también en un editor de texto, copiar el código de Adobe Edge y al final agregar el código aquí antes del "encabezado", luego antes del título del lugar donde agregaremos nuestro banner, antes de la div. Para una ejecución más precisa, hay una instrucción que te ayudará: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. Después de guardar e ir al servicio FTP, tengo filezilla, busco la ubicación de almacenamiento para su sitio y copio la carpeta de índice a su archivo en el servidor, reemplazando los archivos actuales. A continuación, cargamos todos los scripts de Java y actualizamos el sitio. Todo está listo: la animación funciona y también se abre la pestaña con la página de destino.
Si estás interesado en tales lecciones, suscríbete a mi canal, porque. habrá muchos videos nuevos en un futuro cercano - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1
00:32 - Digamos que tienes un banner hecho en Adobe Edge Animate
01:30 - agregar un banner al sitio
02:09 - agrega código antes de la etiqueta "head"
02:50 - instrucciones para agregar un banner al sitio
03:31 - subir archivos al servidor
05:29 - ¡Actualizamos el sitio y listo!
Únete y haz preguntas:
Descargue tres plantillas gratuitas de Muse: http://website/free-landing.html
http://vk.com/adobeedgeanimate
Estoy en vkontakte: http://vk.com/danilfimushkin
En el seminario web, conté y mostré cómo se puede hacer un banner animado completo a partir de una ilustración vectorial.
00:17 - comienza a animar la ilustración vectorial en Edge Animate
14:06 - crea un movimiento con las patas del personaje
16:54 - beneficios de personajes anidados
17:48 - ¿Qué es un símbolo anidado?
18:24 - prescripción de una animación en bucle
19:42: la animación en bucle está lista
23:40 - crea ojos parpadeantes
26:54 - determinar los nombres de los archivos al guardar
27:57 - animación del texto "desplegable"
28:39 - adjuntando una curva de movimiento - cambiando el eje de la animación
30:03 - subtotal de animación, creando un paisaje nevado y animando un copo de nieve
33:39 - Descripción general de Edge Animate
34:52 - tarea
35:25 – cómo agregar un enlace activo
39:09 - crea varios botones y adjunta enlaces
Únase y haga preguntas: http://vk.com/adobeedgeanimate
Adobe Edge Animate: tutoriales de animación de sitios web
La animación para el sitio ha sido durante mucho tiempo una forma buena y efectiva de presentar la información necesaria. De acuerdo, es mucho más agradable mirar una composición hermosa y en movimiento que percibir una imagen estática e inmóvil. Y la tasa de clics es más alta, y para el diseño puede ser una buena ventaja, y los precios de dicho trabajo pueden ser completamente diferentes. Entonces, las ventajas de la animación son obvias. Queda un poco aprender a hacer esta misma animación.
Anteriormente, la palabra animación estaba fuertemente asociada con el concepto de Flash. Un buen formato, que tiene amplias oportunidades, es bastante conveniente y comprensible en el trabajo. Pero, dio la casualidad de que esta tecnología no ha recibido distribución para dispositivos modernos. Sí, muchos navegadores lo admiten, pero los dispositivos Apple no tienen el software necesario para mostrar flash. Bueno, los chicos no compartían la esfera de influencia. Y si es así, los webmasters deben aprender otros métodos para crear animaciones. El concepto de adaptabilidad es ahora un requisito previo.
Así que apareció un nuevo lenguaje de marcado, llamado HTML5, que puede brindar a los desarrolladores oportunidades casi ilimitadas para la creatividad. Muchos ya lo han dominado, pero, como de costumbre, para un trabajo completo y efectivo, necesita un programa que implemente todas estas funciones en un formato conveniente. Este es un programa así.
Las capacidades del programa Adobe Edge son bastante amplias. Aquí también puede crear un banner con cualquier efecto de animación. Puede hacer un hermoso protector de pantalla para la página principal, botones, menús, para una variedad de recursos para niños y juegos: el campo para la creatividad es el más amplio. Entonces, te guste o no, es deseable dominar el programa. Además, la interfaz es bastante simple, comprensible, no hay dificultades particulares para dominar. Habría un deseo.
Para aquellos que no están listos para pagar de inmediato una buena suma por el programa Adobe Edge, pueden intentar trabajar con la versión de prueba del programa, que, por supuesto, se puede descargar desde el sitio web de Adobe. Durante el período de prueba, podrá decidir si este programa es adecuado para usted. Para aquellos que aún no tienen fondos suficientes, pueden encontrar fácilmente una versión compartida de este programa. Nuestros artesanos trabajan rápidamente y siempre puedes encontrar la versión más reciente en los mismos torrents. Cómo actuar, cada uno determina por sí mismo.
Dominar el programa Adobe Edge es, en principio, un procedimiento bastante sencillo. Aquellos que han trabajado con Adobe Flash pueden resolverlo fácilmente. Pero, en cualquier caso, las lecciones simples y comprensibles para trabajar con este programa no interferirán. Después de buscar un poco, encontré varios tutoriales en video que permitirán que cualquiera domine este programa en el menor tiempo posible. Hice una selección para mí, pero, como de costumbre, si es útil para alguien, solo seré feliz.
Este tutorial le muestra cómo crear un nuevo proyecto en Adobe Edge Animate y guardarlo en su computadora. Qué archivos genera el programa al crear un nuevo proyecto.
En este tutorial, conocerá el espacio de trabajo de Edge Animate, conocerá todos los paneles y botones de interfaz necesarios.
Ver un vídeo sobre Adobe Edge Animate
La primera parte del tutorial sobre cómo crear su primera animación en Adobe Edge Animate. El autor de la lección, Valery Medvedev, muestra de manera simple, clara y completa todas las acciones necesarias y el significado de los botones del panel de control.
Ver un vídeo sobre Adobe Edge Animate
En este tutorial, terminaremos de crear nuestra primera animación en Adobe Edge Animate. El resultado fue un clip simple que, sin embargo, permite familiarizarse con las técnicas iniciales necesarias para crear animación.
Ver un vídeo sobre Adobe Edge Animate
En este video, aprenderemos cómo ver una animación creada con Edge Animate en un navegador web. Un poco de información sobre HTML5.
Ver un vídeo sobre Adobe Edge Animate
Un ejemplo interesante de animación cuando un cohete despega en un cierto valor de contador.
Código de activación listo:
cuentatiempo = 5; sym.$("contador_txt").html(contadortemporizador); tContador = setInterval(temporizador, 1000); función temporizador () ( timerCount -= 1; if (timerCount< 1) { sym.play("start"); clearInterval(tCounter); return; } sym.$("counter_txt").html(timerCount); }
cuentatiempo = 5 ; tCounter = setInterval (temporizador, 1000); temporizador de función () contador de tiempo -= 1 ; si (contador de tiempo< 1 ) sim. jugar("comenzar"); clearInterval(tContador) ; devolver; sim. $("contador_txt") . html(contadortemporizador); |
Ver un vídeo sobre Adobe Edge Animate
Cómo hacer que el estado del botón cambie al pasar el mouse. Código requerido para mouseleave:
sym.getSymbol("goBtn").stop("normal");
Ver un vídeo sobre Adobe Edge Animate
Puede incrustar fácilmente videos de YouTube en nuestras animaciones. Cómo hacer esto, lo consideramos en la lección. Código de inserción requerido:
var youtube = $("
Ver un vídeo sobre Adobe Edge Animate
Cómo hacer que la animación comience a reproducirse solo después de que el usuario desplace la página al lugar correcto. Lo hacemos usando un proyecto de ejemplo en Adobe Muse. Configure la posición inicial para el lanzamiento.
Ver un vídeo sobre Adobe Edge Animate
Cómo hacer que la imagen gire 180 grados alrededor del eje vertical al pasar el mouse.
Puede descargar los archivos y códigos necesarios.
Ver un vídeo sobre Adobe Edge Animate
Creamos un efecto interesante cuando, al mover el mouse sobre el video, cada elemento se mueve de forma independiente.
Ver un vídeo sobre Adobe Edge Animate
Cómo hacer que el logo deseado gire alrededor de su eje. Desafortunadamente, resultó que no se podía hacer clic en el logotipo.
Ver un vídeo sobre Adobe Edge Animate
Cómo agregar sonido al hacer clic en un botón.
Ver un vídeo sobre Adobe Edge Animate
Como puede ver, no hay nada complicado, todo es simple, comprensible, por así decirlo, intuitivamente. Pero puedes agregar elementos espectaculares y coloridos a tus sitios, todo depende de tu imaginación. Sí, y con los clientes, puede discutir opciones de pago adicional para elementos tan modernos.
¡Buena suerte a todos y éxito creativo!
Para preparar las creatividades HTML para colocarlas en ADFOX, es importante cumplir con los requisitos para insertar el código que procesa el clic en el banner y cuenta los eventos en el banner.
Al desarrollar código HTML, puede usar los editores para los que está escrita esta instrucción:
-Adobe Animate CC;
- Diseñador web de Google;
-Adobe Edge Animate CC.
Prepara tu proyecto con los siguientes requisitos:
1.
El número máximo permitido de caracteres en el código HTML es 65.000;
2.
Preferiblemente, JavaScript y CSS deben colocarse dentro del código HTML del banner;
Si el código HTML resultante excede el número máximo permitido de caracteres, entonces es necesario reducir el código moviendo JavaScript y CSS a archivos separados:
- guarde el código js y css en archivos separados con extensión .js o .css;
3.
Solo puede haber un archivo .html en un proyecto;
4.
El número máximo permitido de archivos en un proyecto es 50;
5.
Tipos de archivos permitidos en el proyecto: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf, otf, ttf, abf, acfm, gdr, etx , eot, fnt, fon, mf, ttc, woff;
6.
Tamaño máximo de cada archivo (también válido para archivos dentro del archivo):
- 300Kb;
- 1Mb para archivos de video.
7.
Los nombres de archivo deben contener solo números o letras del alfabeto inglés, guiones bajos. No está permitido utilizar letras rusas, espacios, comillas y caracteres especiales en el nombre del archivo;
8.
No se pueden utilizar letras rusas en los nombres de variables y objetos.
La única excepción es el texto del banner.
9.
El formato del proyecto terminado - cremallera archivo.
1. Preparación de editores.
Para crear un nuevo proyecto en Adobe Animate CC, seleccione el proyecto "HTML5 Canvas".
El código de esta plantilla se puede utilizar como base para crear creatividades en el editor.
Para aplicar una plantilla a un proyecto, en la configuración de publicación, seleccione "Configuración de publicación avanzada -> Importar nuevo...".
La plantilla contiene script adfox_HTML5.js
3. Manejo de clics
Si la creatividad tiene una animación en bucle, use códigos para los botones solo de la sección.
3.1 Para que se pueda hacer clic en toda el área del banner y tener un enlace al que ir, agregue el siguiente código en el primer cuadro de la animación:
canvas.style.cursor = "puntero"; canvas.addEventListener("clic", function() ( ventana.callClick(); ));
3.2 Para agregar varios botones para navegar con diferentes enlaces, agregue el botón principal para hacer clic en el banner en la capa de animación superior, asigne al botón un nombre de instancia (Nombre de instancia) y escriba el código en el botón:
This.btnMain.addEventListener("clic", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ); )) ;
Agregue otros botones, cuando se hace clic, el usuario se transfiere a diferentes páginas del sitio anunciado.
Coloque algunos botones en la capa superior sobre ciertas partes de la animación, asigne nombres de instancia a los botones (Nombre de instancia) y escriba el código para cada botón:
This.btnLeft.addEventListener("clic", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(n); ); ) );
Dónde norte
3.3
This.btnText.addEventListener("mouseover", function() ( window.callEvent(n); ));
Dónde ratón sobre- evento javascript, norte- número de evento del 1 al 30, que debe llamarse.
Para implementar una animación en bucle en la creatividad en el editor de Animate CC:
- configure la opción "Línea de tiempo de bucle" en la configuración de publicación;
- usar códigos para botones de esta sección, y los códigos para botones ordinarios de los puntos 3.1 y 3.2 deben eliminarse.
Código creativo con un botón y animación en bucle:
If (typeof(this.stopCycle) == "indefinido") ( this.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( ventana.callClick(); ); )); this.stopCycle = true; )
Si hay varios botones, en el código de llamada del evento ADFOX, agregue el siguiente código:
If (typeof(this.stopCycle) == "indefinido") ( this.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ); )); this.btnLeft.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t. button == 0) ( window.callClick(n); ); )); this.stopCycle = true; )
Dónde norte- número de evento del 1 al 30, que debe llamarse.
Los botones transparentes se pueden usar, por ejemplo, si necesita hacer que se pueda hacer clic en toda el área del banner o solo en una parte. Para ellos, al igual que para los botones ordinarios, se debe agregar un código de llamada de transición o evento.
Los botones en Animate son símbolos que contienen cuatro marcos. Puede dejar los primeros tres vacíos y solo completar el último "Clic" ("Hit") agregando contenido (un elemento gráfico) a través de Insertar> Línea de tiempo> Fotograma clave (Insertar> Línea de tiempo> Fotograma clave).
Los contenidos del marco "Click" (Hit) son invisibles y definen el área del botón que responde al clic. Puede agregar contenido (elemento gráfico) a este marco a través de Insertar> Línea de tiempo> Fotograma clave (Insertar> Línea de tiempo> Fotograma clave). Si el resto de los marcos se dejan en blanco o son invisibles, el botón en el escenario aparece azul translúcido y tiene la forma del contenido incluido en el siguiente marco de "Acceso". Al publicar el proyecto, el área azul transparente no será visible.
Para hacer que el banner se extienda a lo ancho del contenedor en el que se ubicará en el sitio, realice la configuración: Seleccione Archivo > Configuración de publicación.
en taba Básico, seleccionar Hacer responsivo > Ancho, Alto o Ambos.
Seleccionar Escala para llenar el área visible para ver la salida en modo de pantalla completa.
Al seleccionar "Ajustar a la vista" se escalará el contenido para llenar el espacio de pantalla disponible mientras se mantiene la relación de aspecto. Entonces, si ya se alcanzó el ancho máximo, entonces el área de altura de la pantalla puede permanecer vacía y viceversa.
Si no puede lograr el resultado deseado usando la configuración del programa, use scripts.
Estos son ejemplos de códigos:
Descargar código para escalar con relación de aspecto.
Descargar código para escalar sin relación de aspecto.
Descargar código para posicionar elementos donde an0..an4 es el nombre de instancia de los elementos.
Si desea mostrar un banner desde el estado expandido, al agregar un banner en la interfaz, debe especificar el valor sí en el parámetro "Expandir automáticamente siempre" o "Expandir al inicializar" y agregar el código en la creatividad HTML:
Window.global_exp_banner = this.exp_banner; ventana.global_main_banner = this.main_banner; ventana.global_exp_banner.visible = falso; if (window.isBannerExpanded) ( window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false; ) else( window.global_exp_banner. visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = true; ) window.global_main_banner.btnExpand.addEventListener("click", expandBanner.bind(this )); window.global_exp_banner.btnCollapse.addEventListener("clic", colapsoBanner.bind(esto)); window.onBannerExpand = function() ( window.callEvent(2); window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false ; ) window.onBannerCollapse = function() ( window.callEvent(3); window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = cierto; )
5. Publicación del proyecto.
¡Importante! Al obtener una vista previa de un proyecto en un navegador a través de (Ctrl-Intro | Cmd-Intro) los enlaces en los nombres de archivo en HTML se agregan con valores aleatorios de la forma ?1468231208369
. Dichos valores deben ser excluidos del proyecto cuando se carga en ADFOX.
Para ello, el proyecto final en el editor debe ser publicado vía Archivo > Configuración de publicación > Publicar (Shift-Ctrl-F12 | Shift-Cmd-F12).
Al publicar un proyecto, seleccione una plantilla AdobeAnimate_Adfox_.html.
.cremallera
El código de este banner se puede utilizar como base para crear creatividades en el editor.
La plantilla contiene script adfox_HTML5.js y un conjunto de parámetros para el correcto funcionamiento de transiciones y conteo de eventos:
%referencia%, %usuario1%, %eventoN%, donde N es el número de evento del 1 al 30.
2. Haga clic en manejo.
Todos los eventos se asignan a elementos de animación específicos a través de la pestaña Eventos.
Para invocar acciones, utilice el componente "Área de clic".
Agrégalo y selecciona un evento. "Área visitable" - "Tocar/Hacer clic"(o "Área de toque > Tocar/Hacer clic" en la versión en inglés). 
En la pestaña "Código personalizado", especifique la llamada a la función de clic.
2.1
clic de llamada();
2.2
callclick(n);
Dónde norte
2.3 Si necesita desencadenar un evento desde una animación sin transición, use el siguiente código:
evento de llamada (n);
Dónde norte- número del evento a convocar.
Para hacer que el banner se extienda a lo ancho del contenedor en el que se ubicará en el sitio, en el panel Propiedades para la posición y las dimensiones, especifique porcentajes en lugar de píxeles.
Usa también las opciones "Alinear con el contenedor" Y "Diseño de goma" en la barra de herramientas superior.
Si habilita Diseño fluido antes de usar cualquiera de las herramientas de alineación, cuando se cambie el tamaño del contenedor principal, todos los elementos se alinearán entre sí y con las dimensiones del contenedor.
En este caso, puede usar simultáneamente los tamaños relativos de los elementos en porcentajes y los tamaños absolutos, en píxeles.
4. Publicación del proyecto.
Al agregar un banner a ADFOX, el administrador deberá conocer la correspondencia entre los botones y los números de evento. Para cada evento, el administrador prescribirá su propio enlace de transición, que luego se pasará al código de banner mediante una variable.
Después de publicar el proyecto, comprímalo en el formato .cremallera. Su creatividad está lista para cargarse en el banner de ADFOX.
Para comenzar, ejecute el archivo con la extensión .un del archivo
2. Haga clic en manejo.
Todos los eventos se asignan a elementos de animación específicos a través de la pestaña "Código".
Para navegar por el elemento seleccionado, debe seleccionar un evento hacer clic y registre una llamada a la función de clic.
A los botones se les debe asignar un nombre de instancia (Instance Name), por ejemplo: btnMain, btnRight.
2.1 Si se usa un botón de salto:
clic de llamada();
2.2 Si hay varios botones de navegación:
callclick(n);
Dónde norte- número del evento a convocar.
2.3 Si necesita desencadenar un evento desde una animación sin transición, use el siguiente código:
evento de llamada (n);
Dónde norte- número del evento a convocar.
Una característica de la implementación de un banner de estiramiento (goma).
Para que el banner se extienda a lo largo del ancho del contenedor en el que se ubicará en el sitio, al preparar el banner en el editor en el panel Propiedades, especifique porcentajes en lugar de píxeles para la posición y el tamaño.
También hay botones Tamaño de escala y Posición de escala para elementos en el panel Posición y tamaño
4. Publicación del proyecto.
El proyecto debe ser publicado con la siguiente configuración:
Después de publicar el proyecto, comprímalo en el formato .cremallera. Su creatividad está lista para cargarse en el banner de ADFOX.
Durante más de siete años he estado trabajando de forma remota con clientes extranjeros de EE. UU., Canadá, Australia, Alemania y otros países. Dibujo recursos gráficos y animación para juegos en Adobe AnimateCC. El editor solía llamarse Adobe Flash Profesional CC.
En un blog antiguo, comencé un ciclo de lecciones similar, pero en lugar de continuar allí, decidí volver a escribir todo para compartir nuevas experiencias.
¿Por qué necesitamos otro ciclo de lecciones sobre dibujo en Adobe Flash? Llevo muchos años haciendo esto y creo que mi experiencia puede ser útil para principiantes. Especialmente para aquellos que nunca antes han dibujado con una tableta gráfica. Si dibujas bien en papel, pero nunca has dibujado en una computadora, definitivamente tengo algo que decirte.
Y para aquellos que no saben dibujar en papel, intentaré explicar cómo pueden desarrollar esta habilidad en su conjunto, sin estar atados a un editor gráfico: construyendo perspectiva y composición, eligiendo colores, sombreados y otros temas.
No importa si sabes dibujar, necesitarás herramientas: dispositivos y programas. Comencemos con el hardware. Ya tiene una computadora, pero aún necesita conectarle una tableta gráfica, lo que nos dará la oportunidad de dibujar en un lienzo virtual que existe en la RAM. En otras palabras, este es otro dispositivo de entrada, como un mouse o trackball. Pero la tableta tiene ventajas que te permiten dibujar como si estuvieras en papel. Estos son sensibilidad a la presión y una forma similar a la de un bolígrafo del manipulador.
Hay muchos fabricantes de tabletas gráficas: Wacom, Genius, Huion. Solo me he encontrado con los dos primeros. En total, ya probé cuatro tabletas Wacom y una de Genius cuando empecé. Recomiendo encarecidamente Wacom: es de alta calidad a un precio razonable.
Si no tiene el dinero, no compre el Genius, obtenga el Wacom Bamboo Pen pequeño más económico y usado. Usé casi el mismo modelo Wacom Bamboo Pen&Touch S CTH-460. No hubo problemas críticos durante siete años de uso, un buen dispositivo para empezar. Si puede asignar más dinero, tome un modelo más grande. Estoy usando Wacom Bamboo Fun Pen&Touch M CTH-670.
Explicaré qué significan algunos números y letras en el nombre para facilitarle la navegación en el parque de modelos de la compañía.
Wacom Bamboo Fun Pen&Touch M CTH-6 70
Cuando dibuja, el área activa del espacio de trabajo es muy pequeña. En otras palabras, el lápiz óptico se desliza constantemente en un radio de un pequeño círculo. Este círculo puede moverse ligeramente. Con el tiempo, se forma una mancha, que es visible como una densa acumulación de microarañazos. Se nota que prácticamente no usas los periféricos del dispositivo, todo pasa en el centro.
Se puede suponer que no se necesita una tableta gráfica grande, ya que nunca usará toda su área de trabajo y el área de actividad será del mismo tamaño que en un modelo más pequeño. Pero no lo es.
Cuando trabaja en una tableta, su área activa se proyecta en todo el ancho del monitor. Por lo tanto, cuanto más grande sea la tableta, con mayor precisión podrá aplicar trazos. Por el contrario, cuanto más grande sea el monitor y más pequeña la tableta, más difícil e incómodo te resultará dibujar. Por experiencia, puedo decir que después de cambiar de tamaño S a M cuando trabajaba en un monitor ultra ancho de 29 pulgadas, comencé a trabajar con un 25-30% más de comodidad. Me cuesta menos esfuerzo dibujar un camino complejo y, en general, la interacción se siente más suave y agradable.
Las tabletas gráficas más grandes deberían proporcionar condiciones de trabajo aún más cómodas, pero no he tenido que trabajar en modelos L, solo puedo suponer.
Al comprar un modelo profesional, obtienes un dispositivo inalámbrico hecho de plástico de mayor calidad con 2048 niveles de sensibilidad a la presión frente a los 1024 de los modelos más económicos, un hermoso diseño, controles adicionales en forma de botones y un anillo táctil. Estoy completamente satisfecho con los modelos obsoletos más jóvenes de la serie Bamboo, que están descontinuados. La diferencia de costo entre las versiones amateur y pro será más del doble. La mesa pondrá todo en los estantes:
Antes de conectar el dispositivo, descargue los controladores del sitio web oficial de Wacom.
| Lista de modelos | Enlace a los controladores |
|---|---|
| Intuos CTL-4100/6100/4100WL/6100WL Intuos Pro PTH-451/651/660/851/860 Un CTL-471/671/472/672 Intuos CTL-480/490/680/690 Intuos CTH-480/490/680/690 Intuos 5 PTK-450/650 PTH-450/650/850 Intuos 4 PTK-440/640/840/1240/540WL |
ventanas Mac OS |
| Bolígrafo de bambú y táctil CTH-460/470/471/660/661/670 Bolígrafo Bambú CTL-460/471 |
ventanas Mac OS |
Después de conectar la tableta e instalar los controladores, inicie la aplicación Preferencias de Wacom, que se puede encontrar a través de la búsqueda de Windows (Win + S) o en el panel de control.
Las configuraciones principales de las tabletas de la compañía no difieren, tanto los modelos aficionados como los profesionales están configurados de manera similar.
en la pestaña Tableta puede personalizar la tableta para la mano derecha e izquierda, así como asignar acciones a las teclas. Primero instálelos en Desactivado, con el tiempo será posible asignar teclas de acceso rápido. 
En la siguiente pestaña bolígrafo parámetros importantes son:
En la misma pestaña en la sección seguimiento presiona el botón cartografía... para configurar cómo se proyecta el área de trabajo de la tableta en la pantalla del monitor. Se abrirá una ventana Detalles del modo de lápiz.
en el capitulo Área de la pantalla elegir Monitor, si tiene varios monitores y especifique el principal. Si solo hay un monitor, déjelo Todas las pantallas
.en el capitulo Escalada asegúrese de marcar la casilla Proporciones de fuerza para que el área del cliente no se estire al proyectarse en la pantalla. En este caso, no se utilizará parte del área de trabajo de la tableta, pero tendremos proporciones normales de 1 a 1. Y si dibuja un círculo, se mostrará en la pantalla como un círculo, no una elipse alargada.
Asegúrese de marcar la casilla junto a Usar tinta de Windows para la sensibilidad a la presión al trabajo.
En la siguiente pestaña Toque Opciones desmarque la casilla opuesta Habilitar entrada táctil para cambiar su tableta al modo normal.
En el resto de pestañas lo tengo todo desactivado, ya que no uso ni los gestos del modo Touch ni el menú desplegable de la marca. Esto completa la configuración de la tableta gráfica.
Adobe Animate CC es un cambio de marca de Adobe Flash Professional CC con varias funciones nuevas agregadas al programa. Incluso con el nombre antiguo, ha ganado una inmensa popularidad entre artistas, animadores y desarrolladores de juegos independientes. Los principios de construcción de vectores te permiten crear sprites para cualquier resolución. Cualquier versión que pueda tener en sus manos está bien para dibujar. Las herramientas de dibujo no han cambiado durante muchos años, solo han mejorado ligeramente. Usaré Adobe Animate CC, pero lo que he escrito también se aplicará a las versiones anteriores de Adobe Flash Professional. Por cierto, Adobe cambió recientemente a un modelo de suscripción mensual para obtener acceso a sus productos en lugar de una costosa licencia única. Actualmente, el precio por usar Adobe Animate CC es de $20 por mes.
Después de cargar, cree un nuevo archivo y seleccione el tipo Guión de acción 3.0. En la misma ventana, puede especificar los parámetros de la escena:
Esta configuración también se puede cambiar después de que se haya creado el documento. Para hacer esto, seleccione una herramienta Herramienta de selección(tecla de acceso rápido V), ventana abierta Propiedades y ampliar la sección Propiedades. Si no puede encontrar esta ventana, utilice el menú Ventana → Propiedades o presionando Ctrl + F3.
Para aumentar la eficiencia del trabajo, debe usar las teclas de acceso rápido al máximo. En las primeras etapas, es necesario acostumbrarse y aprender nuevas combinaciones de teclas, pero proporciona un salto sólido en su eficiencia a largo plazo. He redefinido la mayoría de las teclas de acceso rápido para que estén en el lado derecho del teclado. ¿Por qué exactamente a la derecha? El caso es que soy zurdo y, en consecuencia, me conviene más. Si eres diestro, tendrás que idear tu propio esquema. Además, uso Rapoo E9050 y Apple Wireless Keyboard, que son factores de forma de teclado de computadora portátil, por lo que si está usando uno de tamaño completo, entonces, de nuevo, trabaje duro y cree su propio esquema: valdrá la pena en un mucho tiempo ahorrado - y considere mi esquema, como ejemplo.
Hazte una idea: agrupa los comandos de teclas en el lado cómodo del teclado para un acceso rápido sin cambiar constantemente la posición de las manos. La mayoría de las veces debe estar en un solo lugar, solo los dedos "caminan" en un pequeño radio, presionando los botones. Por supuesto, habrá equipos que exijan un cambio de posición, pero son una gran minoría. Aquí está mi esquema:
| Equipo | Descripción | combinación antigua | Nueva combinación |
|---|---|---|---|
| Seleccionar todo | Elegir todos | Ctrl+A | Ctrl+A,O |
| Deseleccionar todo | Eliminar selección | Ctrl+Mayús+A | Ctrl+Mayús+A,P |
| Deshacer | Deshacer acción | Control + Z | Ctrl+Z, [, Z |
| rehacer | Repetir acción | ctrl+y | Ctrl+Y, ] |
| Zoom | Escalada | Mayús+Z, Z | Mayús+Z,\ |
| acercarse | Ampliar imagen | Ctrl+=, Ctrl+Núm= | Ctrl+=, Ctrl+Núm=,= |
| disminuir el zoom | Disminuir el zoom | Ctrl+=, Ctrl+Núm= | Ctrl + -, Ctrl + Núm -, - |
| enderezar | Enderezar las curvas seleccionadas | 9 | |
| Liso | Suavizar curvas seleccionadas | 0 | |
| Flip horizontal | Voltear horizontalmente | F | |
| Voltear vertical | Voltear vertical | Mayús+F | |
| Cortar | Cortar al portapapeles | Control + X | Ctrl + X, X |
| Símbolo duplicado... | símbolo de clon | ctrl+d | |
| Cambiar símbolo... | Cambiar símbolo | Ctrl+] |
En la mayoría de los casos, las nuevas combinaciones no reemplazan a las antiguas, sino que las complementan, se introducen varios comandos nuevos. Necesitas hacer ajustes a través del menú Editar → Atajos de teclado.... En el campo de búsqueda, ingrese el nombre del equipo, en la columna Atajo haga clic en un espacio vacío frente al comando deseado y presione un nuevo atajo de teclado.
No intente comprender los comandos dados en la tabla, todos ellos serán explicados en las siguientes lecciones. En el futuro, cuando empiece a usarlos activamente, lo más probable es que los redefina varias veces hasta encontrar la opción más conveniente.
Pincel(tecla de acceso rápido B) - la herramienta de pincel, la más utilizada al dibujar. Los ajustes se concentran en dos ventanas:
La configuración del pincel está terminada, pintemos algo.
Elija un color adecuado usando la ventana Color (Ctrl + Shift + F9), seleccione la herramienta de pincel (B) y comience con un trazo largo con un poco de esfuerzo para delinear la forma futura. Luego, encierre en un círculo el contorno resultante para suavizar todos los bultos: el pincel está listo.
Tenga en cuenta que solo se usaron tres trazos en el ejemplo anterior. Desea apuntar a trazos de longitud media para que su mano no se salga de la tableta. Intente hacer muchos trazos pequeños de forma incorrecta, ya que el contorno resultante no será suave y con muchos puntos extra.
Adobe Animate CC funciona con principios vectoriales. Todos los objetos se describen matemáticamente y se pueden escalar sin pérdida de calidad, en contraste con el enfoque de trama. Esto nos permite manipular objetos vectoriales, lo que nunca haremos con la misma facilidad en un editor raster. Podemos suavizar y simplificar trazados, enderezar líneas curvas, cambiar proporciones y deformar gráficos sin perder calidad. Cada trazo se convierte automáticamente en curvas matemáticas que podemos afinar y modificar.
Para verificar todo lo anterior, active la herramienta herramienta de subselección(tecla de acceso rápido A) y seleccione el pincel que acaba de pintar. Ahora puede ver los puntos de la ruta del vector e incluso cambiarlos.
Hoy hemos configurado Adobe Animate CC y estamos listos para comenzar a dibujar. Practica un poco antes de continuar. Aprenda a dibujar formas geométricas simples sin distorsión, pruebe diferentes colores y configuraciones de pincel (experimente con la opción Suavizado).
Contenido similar
