Tutoriales / Ayuda | el 09 de Marzo del 2011

[Premio a la calidad] - Tuto Macromedia Flash 8 [Edit]






Antes que nada!! si no pueden ver las imágenes por que les sale el famoso sapo congelado! tienen que estar registrado y logeado en http://imageshack.us/ y ahí  pueden ver toda las img bien! ! saludos



Bueno Gente de Cw! Les Traigo Un tutorial de las Herramientas mas Simples del Programa ! espero que les guste!!! Comenten Je!! rre largo el post!! ahora se los dejo!



Aqui Les Dejo el Programa! Es Portable!







pass: casitaweb.net





Al Abrir Macromedia Flash Nos Muestra esta pantalla para empezar a trabajar.





La pantalla se divide en tres columnas y dos filas:


1. Abrir un elemento reciente
Si hemos Trabajando Estado y Guardado document "antes" de la ONU, Este aparecera en this culumna.
2. Crear nuevo
* Documento de Flash - Documento de extensión de Flash Con fla..
* Presentación de diapositivas de Flash - Documento de diapositivas.
* Flash Formulario de Solicitud - Formulario de Aplicacion de las Naciones Unidas.
* Archivo ActionScript - Que Documento Código contiene ActionScript Con extensión como..
3. Crear desde Plantilla




Vamos a Empezar

Creamos primero un nuevo documento Flash, para esto nos dirigimos hacia la segunda columna y hacemos click:





Flash nos muestra sus barras, paletas, paneles, línea de tiempo, etc.






Descripción de las partes de Flash









No se preocupen que cada una de las partes será explicada al detalle más adelante.

Ventana de documentos

El escenario está compuesto de varios elementos que constituyen una película.

El escenario es el área donde se representa cómo aparecerá el contenido que se publique.

La línea de tiempo, situada por encima del escenario, organiza y controla el contenido de un documento a través del tiempo en capas y fotogramas

Los paneles de Flash le ayudarán a trabajar con atributos y asignarlos al documento o a los objetos del escenario

El inspector de propiedades le permite ver y cambiar losatributos de un objeto seleccionado. El inspector de propiedades cambiapara mostrar información sobre la herramienta o elelemento con el quetrabaja, lo que permite acceder rápidamente a las funciones másutilizadas





Escenario




El escenario es el lugar donde se compone o diagrama el contenidode cada uno de los fotogramas que constituyen la película. Dichocontenido se crea ya sea al incluir objetos sobre él con lasHerramientas (Tools) o importando imágenes o vídeo.






En El Escenario del heno Círculo  Creado Con la Herramienta de dibujo Circle (Círculo)

La cuadrícula, Las Guías y Reglas Las colocar el párrafo Sirven Con Precisión El Contenido En El Escenario.
La cuadrícula

En El Escenario Podemos HACER USO DE:

Menú> Ver> / Cuadrícula / Ver Cuadrícula



Se muestra con líneas cruzadas detrás del escenario, las cuales podemos modificar.



Para desactivar la cuadrícula del Escenario, Seguimos El Mismo Camino.

El Grid o Cuadrícula nos permitira Ubicar en forma Precisa losobjetos Que incluyamos al Escenario. Para Editar la Cuadrícula o Gridnos dirigimos HACIA:

Ver / Cuadrícula / Editar cuadrícula

O utilizamos Las TECLAS Rápidas:

[Ctrl + Alt + G]





Reglas Reglas o
Las Reglas nep permiten Medir El Tamaño de los Objetos. Also nep permite Arrastrar Guías Hacia el Escenario.

Ver / Reglas




Las Guías

Ver / Guías / Guías Mostrar

Ver / Guías / Mostrar guías [Ctrl + `]

Las Guías nos Sirven, pára dar alcalde Una exactitud de Ubicación anuestros Objetos En El Escenario. Hacer clic en Alguna de las Reglas yarrastrar Hacia el Escenario. Se Verá Las Líneas de Guías de colorverde.



ara editar las guías, presionamos las teclas rápidas:

[ Ctrl + Alt + Shift + G ]



Si deseamos Borrar Las Guías del Escenario.

Ver / Guías / Guías Borrar

Ver / Guías / Limpiar



Herramientas




Las Herramientas de Flash nos permitiran y manipular una Cambios Nuestros Objetos Dentro del Escenario.

Podemos encontrarlo en la barra de menú:

Ventana / Herramientas

Ventana / Herramientas

Las TECLAS Rápidas [Ctrl + F2] Visualizar Podemos u Ocultar Las Herramientas.



Las Herramientas o Tools se dividen en cuatro partes:

1. Herramientas (Tools)
Con las herramientas podremos seleccionar objetos, dibujarlos, cambiar sus colores, borrarlos e insertar textos.
2. Vista (View)
Movemos el escenario con el cursor, o incrementamos la vista al escenario.
3. Colores (Colors)
Cambiamos los colores del relleno o borde de los gráficos.
4. Opciones (Options)
Cada Herramienta tiene opciones de modificaciones.

Descripción de las Herramientas o Tools con sus Teclas rápidas



Para acceder a cualquiera de las herramientas se puede presionar las teclas rápidas. Por ejemplo, para comenzar a dibujar una línea presionamos la tecla N. Para seleccionar la línea presionamos la tecla V y seleccionamos haciendo click sobre él.

4.1 Herramienta Selección

Ubicamos en la caja de Herramientas (Tools) la herramienta Seleccióncon el mouse o presionamos la letra (V)



Podemos seleccionar un objeto de varias formas, la siguiente es una de ellas:

Nos ubicamos sobre uno de los extremos del objeto, tecleamos (V) ypresionando el click izquierdo del mouse (1) comenzamos a arrastrar (2)basta el extremo diametralmente opuesto (3) y soltamos el click delmouse (4)




Para agrupar el gráfico:

• Seleccionamos el gráfico, luego presionamos las teclas Ctrl + G, entonces se agrupará la línea de borde del objeto y el relleno del mismo.




Para desagrupar el objeto:

• Seleccionamos el gráfico, luego presiona­mos las teclas Ctrl + Shift + G, de esta forma se desagruparán la línea de borde y el relleno del objeto.



Al dibujar cualquier gráfico como un rectángulo, éste tiene líneade borde y relleno. Y si queremos moverlo tenemos que agruparlo antes.De lo contrario, resultaría de esta forma:

Se separan la línea de borde con el relleno, haciendo tal vez lo que no deseabamos




Y si movemos una vez mas después de seleccionar resulta otro gráfico que tal vez no queríamos que se produzca.



Seleccionando un gráfico con líneas conectadas o el borde de un objeto.

Presionamos la tecla (V) y luego doble click sobre el borde del gráfico.





Seleccionando un gráfico, relleno y borde.

Presionamos la tecla (V) y luego doble click sobre el relleno.



Nota: Si estamos trabajando con otra herramienta, ydeseamos utilizar de forma temporal la herramienta de selección,entonces presionamos la tecla Ctrl.




Herramienta Lazo




Seleccionamos en la caja de Herramientas (Tools) la herramienta Lazo o Lasso Toolcon el mouse o presionamos la letra (L)

Podemos seleccionar un sector del objeto en forma de mano alzada y realizamos por ejemplo el cambio de color, podemos borrar ese sector, girarlo, desplazarlo, etc.






Herramienta Linea

Seleccionamos en la caja de Herramientas (Tools) la herramienta Líneacon el mouse o tecleamos la letra (N)

Aparecerán en el panel de propiedades (Properties) opciones para modificar la forma, el grosor y el color.



Automáticamente al seleccionar la Herramienta Línea, aparece el Inspector Propiedades:



Al dibujar la línea el Inspector de propiedades cambia a esta forma:



Nota: Presionando la tecla [Shift] y arrastrando el cursor del mouse podemos hacer líneas rectas o 45º:



Nota: Al presionar la tecla [Alt] y arrastrando el cursor del mouse, se alargará la línea simétricamente:




Podemos hacer gráficos de acuerdo a nuestros requerimientos. Por ejemplo si queremos hacer un triángulo de forma rápida:

1. Presionamos la tecla (N) Escogemosde la barra de herramientas.
2 Manteniendo presionada la tecla [Shift] dibujamos la primera y segunda línea.
3 Dejamos de presionar la tecla [Shift], y cerramos el triángulo



Para cambiar de forma a una línea tenemos dos formas:
Sin seleccionar la línea, pasamos el cursor junto a la línea, hasta que nos muestre lo siguiente:




Y podemos darle curva:





Sin seleccionar la línea asamos el cursor por ésta y aparece:



Movemos el extremo de la línea.



Soltamos el botón del mouse.








Dibujar con la pluma




Seleccionamos en la caja de Herramientas (Tools) la Herramienta Pluma o Pen Toolcon el mouse o tecleamos la letra (P)

Nos permitirá dibujar punto por punto, haciendo click en elescenario, también podemos darle curva a nuestro dibujo. En la barra depropiedades podemos modificar las esquinas, el color de la línea quedibujemos con esta herramienta. La línea puede tener un grosor máximode 200 puntos.

El color de la línea puede ser fijo o degradado. Al estar dibujando podemos cambiar las propiedades según nuestro parecer.





Podemos dibujar libremente. La diferencia de la Herramienta Plumacon la Herramienta Línea es que tendremos puntos de conducción, que nospermitirá hacer curvas más pronunciadas, además de añadir más puntos deanclaje o nodos.






Dibujando objetos gráficos o símbolo gráfico.
Al seleccionar el ícono que ven a la derecha, lo que se dibuje enel escenario se convierte automáticamente en objeto...gráfico. (Ver abajo)






Dibujar circulos y óvalos

Seleccionamos en la caja de Herramientas (Tools) la herramienta Círculo o Circle(Imágen Herramienta de Círculos) con el mouse o tecleamos la letra (O)



Dibujamos la figura.



Al pasar el cursor cerca de la circunferencia se puede modificar la forma del círculo.




Aparecerá el Inspector de Propiedades (Properties) en el cualpodemos modificar el grosor del círculo, la forma de la línea y el color




Nota: Manteniendo presionada la tecla Shift podemos hacer círculos, además presionando la tecla Alt, podremos hacer óvalos alargando por un extremo. Manteniendo pulsadas las teclas Shift+Alt podremos hacerlos con el centro en donde esté situado el puntero en ese instante.



Creamos una circunferencia, pero utilizamos la opción Objeto Gráfico.



con esto ya no tendremos problemas de afectar a las demás figuras al desplazarlos.








Herramienta texto, filtros y efectos de texto




Seleccionamos en la caja de Herramientas (Tools) la Herramienta Texto con el mouse o presionamos la letra (T)



Aparecerá la Caja de Propiedades (Properties), en el cual podemos agregar características del texto que necesitamos.

Existen tres tipos de texto:

* Static Text (Texto estático):
Este tipo de dato es tradicional, se le asigna cualquier tipo deformato. Al ser seleccionado el texto estático se ve rodeado por uncontorno azul.
* Dynamic Text (texto dinámico):
Este tipo de dato cambia conforme se le asignen nuevos valores asu variable. Al no ser seleccionado el texto dinámico se nota uncontorno punteado.
* Input Text (Introducción de texto):
Se les conoce como cajas de texto, se introducen datos en él para que sean procesados después.

A los textos dinámicos e introducción de texto se les permite agregar nombres de instancia.

El panel Inspector de Propiedades de la Herramienta Texto.



Texto Estático o Static Text




Tipografía:

Cambiamos el Tipo de Fuente. Por jemplo: Times New Roman


Tamaño de Fuente:

Por ejemplo: 8 puntos

Color de Fuente:

 

Teclas rápidas:

* [Ctrl + Shift + P] Plain, plano o normal.
* [Ctrl + Shift + B] Bold o negrita.
* [Ctrl + Shift + I] Italic o cursiva.

Alineación:

Hay cuatro opciones: Alineación a la izquierda por defecto, centro, derecha y justificado.
Opciones de formato:


- Indent (sangría) - Line spacing (Espacio entre líneas)



Ejemplo:




Separación de caracteres:



Posición del caracter:


Posición del caracter: - Normal. - Superscript o superíndice. - Subscript o subíndic




Método de Renderización de Fuente:



Sobre FlashType:

FlashType es un nuevo texto renderizado que proporciona textoclaro, de calidad superior queda en la composición de Flash y en losarchivos de SWF publicados. FlashType mejora la legibilidad de textograndemente, particularmente cuando se da a los tamaños de la fuentemás pequeños. El anti-aliasing personalizado le permite especificar elespesor y agudeza de fuentes usadas en los campos del textoindividuales.

Usando FlashType pueden causar un retraso ligero cuando Flash cargalos archivos de SWF. Usted notará este retraso sobre todo si estáusando varios carácteres diferentes por ejemplo si pone (cuatro ocinco) dentro del primer fotograma de un documento de Flash. Hay queestar seguros del número de fuentes que usamos con este método. Lasfuentes FlashType también pueden causar un aumento en el uso de memoriadel Player de Flash. Por ejemplo, usando cuatro o cinco fuentes puedenaumentar el uso de memoria por aproximadamente 4 MB.


Use Device Fonts:

Usando las fuentes de dispositivo.



Bit Map (No Anti-alias): El Texto de Bitmap o mapa de bits apaga el Anti-Alias y noproporciona ningún alisamiento al texto. El texto que usa los bordesafilados se despliega, y los SWF resultantes aumenta de tamaño porquelos contornos de la fuente son incluidos en el SWF.




Anti-Alias:

Anti-aliasing es permitido para el Texto Estático, TextoDinámico y Texto de Entrada, si el usuario tiene Flash Player 7 ósuperior. Sólo se permite para el Texto estático si el usuario tieneuna versión más actual de Flash Player.

Anti-alias para la Animación o Anti-Alias for Animation creauna animación de texto más lisa. Esto es en parte posible porque Flashignora alineación e información del ajuste de espacio. EspecificandoAnti-alias para la Animación crea un archivo SWF más grande, porque loscontornos de la fuente son incluidos.

Fuentes dadas usando Anti-alias para la Animación están menoslegibles en los tamaños de la fuente más pequeños. por esta razón, serecomienda que usted use 10 punto o el tipo más grande al especificarAnti-alias para la Animación.




Anti-alias para la Legibilidad o Anti-Alias for Readabilityusa un nuevo artefacto del antialiasing que mejora la legibilidad defuentes, particularmente a los tamaños pequeños. EspecificandoAnti-alias para la Legibilidad crea un archivo SWF más grande, porquelos contornos de la fuente son incluidos. Para usar el Anti-alias parala Legibilidad se debe publicar
para Flash Player 8.

Anti-alias para la Legibilidad crea fuentes muy legibles para lostamaños pequeños. Sin embargo, anima pobremente, y puede causarproblemas de actuación. Si usted piensa animar el texto, use Anti-aliaspara la Animación.

Personalizado Anti-alias o Custom Anti-Aliasing (Sólo desdeFlash Professional 8) nos permite modificar las propiedades de lafuente. Las propiedades del anti-alias personalizadas son como sigue:
# La Agudeza o Sharpness determina la suavidad de la transición entre las esquinas del texto y el fondo.
# El espesor o Thickness determina cuan grueso es la fuenteanti-aliasing que aparece. Los valores más grandes de los caractereshará parecer más gruesos.

Especificando Personalizado Anti-alias o Custum Anti-Alias crea unarchivo SWF más grande, porque los contornos de la fuente sonincluidos.




Tamaño del objeto y coordenadas del texto en el escenario.

* an: Ancho
* al: Altura
* X: Posición con respecto a x en el escenario.
* Y: Posición con respecto a y en el escenario.



Hipervínculo:


En esta casilla escribimos un hipervínculo o URL. Es decir vincula el texto hacia una URL.

Además nos muestra opciones Destino o Target:

* _blank: Se muestra en una nueva página HTML.
* _parent: Se muestra la página principal HTML.
* _self: Se muestra en la misma página HTML.
* _root: Se muestra en la raíz de todo el HTML.


Seleccionable o Selectable:

Se puede seleccionar el texto estático en la película SWF o en Internet Explorer.

Filtros y efectos de texto

Estando en la Herramienta Texto, seleccionamos Texto Estático. Yvemos que existen los Paneles: Inspector Propiedades, Filtros yParámetros.



Estando seleccionado el texto "casitaweb" En el Panel Filtros oFilters hacemos click sobre el icono , y nos aparece un menú contextualcon varias opciones.

Sombra



Automáticamente nos muestra propiedades del filtro que podemos cambiar.



* Blur X, Y: Desvanecimiento de la sombra.
* Strength: Porcentaje de la sombra.
* Quality: Baja, Media y Alta.
* Color: Color de la sombra.
* Angle: Ángulo de la proyección de la sombra.
* Distance: Distancia de la sombra.
* Knockout: Nos muestra el texto en blanco con la sombra.
* Inner shadow: Sombra interior.
* Hide Object: Escondemos el objeto texto, sólo muestra la sombra.

Para dejar de ver el filtro por un momento podemos hacer clicksobre el símbolo de visto bueno. Aparecerá al lado del filtro el signode X.






Dibujar cuadros rectángulos y polígonos. Crear símbolos.







Aparecerá el Inspector de Propiedades (Properties) en el cualpodemos modificar el grosor del cuadrado, rectángulo o polígono, laforma de la la línea y los colores.



Cap:



Usamos para definir las esquinas del gráfico.



La unión de los extremos del gráfico.

Al seleccionarlo podremos darle un radio (en puntos) a las esquinas del rectángulo

Al seleccionarlo podremos darle un radio (en puntos) a las esquinas del rectángulo





Dibujar con el lápiz





Seleccionamos en la caja de Herramientas (Tools) la herramienta Lápiz con el mouse o tecleamos la letra (Y)





Aparecerá la Caja de Propiedades (Properties) en el cual podemos modificar el grosor del lápiz, la forma y el color.

* Opción Straighten (Enderezar) que nos permite convertir a figuras parecidas a los triángulos, óvalos, círculos, rectángulos, cuadrados
* Opción Smooth (Suavizar) para que suavice los trazos que hagamos
* Opción Ink (Tinta) es para dibujar libremente a manoalzada. Utilizando la tecla [Shift] nos permite hacer trazos verticalesy horizontales.




Ejemplo:






Transformación libre

Seleccionamos la caja de Herramientas (Tools) la herramienta Transformación Libre con el mouse o tecleamos la letra (Q)




Pasos:




Con las opciones de Transformación Libre encontramos los botones:

* Rotate o Screw: Rotar y atornillar, cambiar la forma del cuadrado por uno de sus extremos.
* Scale: Escala, cambiamos el tamaño en forma escalar, es igual que utilizar la tecla [Shift] y el mouse.
* Distort: Distorsionar la forma del cuadrado.
* Envelope: El sobre, cambia la forma en base a los nodos que se forman alrededor del cuadrado.



Utilizando la opción Envelope o Sobre, cambiamos la forma del cuadrado.






Herramienta Subselección






Seleccionamos la caja de herramientas, la herramienta subselección con el mouse o tecleamos la letra A.



Esto nos sirve para seleccionar y transformar los objetos a través de sus nodos.



Para verlo más facil, podemos hacer una línea. Seleccionamos la línea.



Escogemos uno de los extremos de la línea y lo arrastramos hacia abajo.



Con esta herramienta podemos variar la forma o corregir algunos detalles de nuestro diseño.






Bueno Gente Nada Mas!!! Espero que les encante el post!








Ejemplo de lo que se puede hacer con flash!! despeus les enseño como hacer juegos y eso!! gracias

[enlace]

Ejemplo de La Letras