Dinactiva.

com
1
es un programa de creacin en FLASH. es muy fcil de
manejarytremendamentepotente,capazdecrearanimacionesyefectosconimgenes,
textos,formas,grficosysonidos.Disponedecientosdeefectosyacreados,listospara
su uso. Adems posee un potente lenguaje de programacin interpretado llamado
SWiSHscript.
Las animaciones generadas con se exportan al formato SWF usado por
MacromediaFlash.
Suprincipal ventajaes la facilidaddeuso frenteaMacromedia Flash yconresultados
realmentesorprendentes.
Lafinalidaddelacreacindeanimacioneseslaincorporacindelasmismasenpginas
web,correoelectrnico,MicrosoftPowerpointoinclusoenundocumentodeWord.
Alabrirelprograma,nosencontramosconlasiguientepantalla:
Antes de nada, vamos a intentar usar las herramientas bsicas para crear un dibujo y
familiarizarnosconelprograma.
Enlapartecentralveremosuncuadroblanco,quellamamosventanadediseo.Allse
creartodalaanimacin.
Dinactiva.com
2
Enlaparteizquierdadelaanimacinnosencontramosconlacajadeherramientas.
Vamosaempezarprobandolasherramientasbsicasparacreardibujos.
stassonlasherramientasquenospermitirncrearformasbsicas:
Lnea
Lpiz
CurvadeBezier
Rectngulo
Elipse
Autoforma
Cmodibujarunalnea
Hazclicenlaherramientalnea.
Colocaelpunteroenelpuntodondequierasqueempiecelalnea.
Pulsaelbotnizquierdodelratnysinsoltarlomueveelratnhastaque
veaslalneadibujada.
Sueltaelbotn.
F
8
Cmodibujarconellpiz
Hazclicenlaherramientalpiz.
Colocaelpunteroenelpuntodondequierasempezaradibujar.
Pulsaelbotnizquierdodelratnysinsoltarlomueveelratnhastaque
consigaseldibujoquequierashacer.
Sueltaelbotn.
F
8
Siterminamoseldibujoenelmismolugarenelqueempezamosadibujar,
secrearunaformacerrada.
SimantenemospulsadalateclaSHIFT,conseguiremosqueelngulovaya
enpasosde15.
Intenta dibujar varias lneas en la ventana de animacin. Luego brralas
haciendoclicencadauna deellasypulsandolateclaSUPR.
Intentadibujarconellpiz.Luegoborraloquehashechohaciendoclicen
cadadibujoypulsandolateclaSUPR.
Dinactiva.com
3
CmocrearcurvasdeBezier opolgonos
HazclicenlaherramientacurvasdeBezier.
1. Creacindeunpolgono:
Colocaelpunteroenelpuntodondequierasempezaradibujar.
Pulsaelbotnizquierdodelratn paraindicarelpuntoinicial.
Dibujalalneayhazclicparaterminarla.
Siguedibujandoyhaciendoclicencadafinaldelnea.
HazdobleclicparaterminaropulsalateclaESC.
2. CreacindeunacurvadeBezier:
Colocaelpunteroenelpuntodondequierasempezaradibujar.
Pulsaelbotnizquierdodelratnparaindicarelpuntoinicial.
Dibuja la lnea y haz clic para terminarla pero no sueltes el botn del
ratn.
Arrastra el puntero en direccin de la tangente de la curva que deseas
dibujar.
Sueltael botndelratnydesplazaelratnparaajustarsucurva y haz
clicparacolocarelpuntodeanclaje.
HazdobleclicparaterminaropulsalateclaESC.
F
8
Cmocrearuncuadradoounrectngulo.
Hazclicenlaherramientarectngulo.
Coloca el puntero en el punto donde quieras poner una esquina del
rectngulo.
Pulsa el botn izquierdo del ratn y sin soltarlo mueve el ratn en
diagonalhastaajustareltamaodelrectngulo.
Sueltaelbotn.
Si quieres que las esquinas sean redondeadas, haz clic en el punto inicial y
sueltaelbotndelratn.Arrastraelpunteroyhazclicenelpuntofinalyno
sueltesel botn.Arrastraelpunterohaciael interiordelrectngulo ysuelta
elbotncuandoveasquelasesquinastengansuredondezdeseada.
Siterminamoseldibujoenelmismolugarenelqueempezamosadibujar,
se crear una forma cerrada. Si mantenemos pulsada la tecla SHIFT,
conseguiremos que el ngulo vaya en pasos de 15. Si pulsamos la tecla
SUPRconseguiremoseliminarelltimopuntocreado.
Intenta dibujar un polgono y practica con las curvas de Bezier. No te
preocupes si no te sale bien, es normal y adems se puede corregir muy
fcilmente.Loveremosmsadelante.
Dinactiva.com
4
F
8
Cmocrearunaelipseouncrculo.
Hazclicenlaherramientacrculo.
Colocaelpunteroenelpuntodondequierasempezaradibujarlaelipse.
Hazclicy sinsoltarmueveelratn hasta terminarlaelipse.
Sueltaelbotn.
F
Cmocrearunaautofor ma.
Lasautoformaspermitendibujarformasyacreadas.
Hazclicydejapulsadoelbotnenlaherramientaautoformahastaque
aparezcantodaslasformasdisponibles:
Luegohazclicenlaformadeseada.
ParadibujaruncuadradopulsaymantnapretadalateclaSHIFT
mientrasdibujas.
Intenta crear en la misma ventana un rectngulo, un cuadrado, un
rectngulo con esquinas redondeadas y un cuadrado con esquinas
redondeadas.Sitesalebien,brralo,sinollamaatuasesor.
ParadibujaruncrculopulsaymantnapretadalateclaSHIFTmientras
dibujas.
Dinactiva.com
5
Tenemoslassiguientesformasincorporadas:
Rectnguloredondeado
Corazn
Flecha
Flechaconmuesca
Flechaizquierdaderecha
Estrella
Polgono
Cubo
Botnbiselado
Botnredondeado
F
Recuerda el uso de la tecla SHIFT en el caso que quieras que las
proporcionesseanexactas.
Enelcasodelrectnguloredondeado,alterminardedibujarlonos
apareceunpuntitoverdequenospermiteredondearagustode
cadauno.
Elpuntoverde
permitemodificar
laforma.
Elpuntoverdecentralpermiteaumentarlacantidaddebrazoscon
elbotnizquierdodelratnydisminuyeconelbotnderecho.
Elpuntoverdeexternopermitegirarlaestrella.
Elpuntoverdemediopermiteajustarlaprofundidaddelosbrazos.
Elpuntocentralaumentaodisminuyelacantidaddeladosdel
polgonodelamismamaneraquelohacelaestrella.
Elpuntoexternopermitegirarelpolgono.
Losdospuntoscentralespermitenajustarlaperspectivadelcubo.
Elpuntoexternoajustalassombras.
Dinactiva.com
6
8
Bueno, ya hemos visto cmo se dibujan formas sencillas. Ahora vamos a ver cmo se
modificanunavezdibujadas.
Primerotenemos que saber cmo seleccionamos losobjetos que hemos dibujado.Para
ellotenemoslaherramientaseleccin.
Si tu ventana contiene elementos, brralos seleccionndolos previamente y suprmelos
conlateclaSUPR.
Dibujaunrectnguloquenoseagrande.
Mueveelratnporencimadelobjetodibujadohastaqueveas
Cuando aparece ste smbolo, el programa no indica que podemos mover el objeto
pulsandoelbotnizquierdodelratnysinsoltarloarrastrandoelobjeto.
Desplazaelrectngulohastaelcentrodelaventana.
Localizaenlaizquierdadelaventanadeanimacinlacajadeopciones
Escalar
Redimensionado
Rotacin/Inclinacin
Distorsionar
PulsaelbotnEscalaryseleccionaelrectnguloquedibujaste.
Versquealrededordelrectnguloaparecen8cuadraditos. (tiradores)
Arrastraeltiradordelaesquinasuperiorizquierdayobservasucomportamiento.
Arrastraeltiradorsuperiormedioyobservasucomportamiento.
Intentaqueelrectnguloocupetodalaventanadelaanimacin.
Elpuntocentralajustalaperspectivayelpuntoexternosusombra.
Practicacontodaslasautoformas.Sitienesdudasllamaatuasesor.
Dinactiva.com
7
F
AcabamosdeaprenderausarelbotnEscalar.
AhorapulsaelbotndeRedimensionaryvuelveaajustarelrectngulohastaqueocupe
elcentrodelaventanacomolotenasantes.
Versqueahoralostiradorestienenlasiguienteforma:
Notasalgodiferente?
AparentementelaherramientaEscalaryRedimensionarhacenlomismoperonoesas.
Veamoscmoprovocarquetengaunobjetivodistinto.
La diferencia radica en que cuando un objeto tiene un contorno, si usamos la
her ramienta escalar, el grosor del contorno variar mientras que con la
her ramientaRedimensionarnovariarsugrosor almodificar sesutamao.
Vamosaponeruncontornoalobjeto.
Enlapartederechadelaventananosencontramosconestepanel:
En concreto tenemos visible la pestaa Shape (forma) y nos permite cambiar ciertas
opcionesreferentesalobjetoseleccionado.
A laderechade lapalabraLinetenemosuncuadrodesplegable, brelo yselecciona la
primera lnea que aparece como ejemplo. Una vez seleccionado el tipo de lnea,
apareceraladerechaunacasillaparaindicarqugrosorqueremos.Ponelvalor5.
Observa cmo ahora el rectngulo que dibujaste tiene una lnea alrededor de color
negro.
Redimensionaelobjetoaumentandosutamao.Observaqueelcontornonegronovara
sugrosor.
Siempre que quieras volver a un estado anterior puedes usar la
combinacindeteclasCTRLZyencasocontrariousaCTRLY.
Dinactiva.com
8
PulsalacombinacindeteclasCTRLZparavolveradejarlocomolotenasantes.
Escoge la herramienta Escalar ahora y haz lo mismo, cambia su tamao y observa el
grosordelalneaquerodeaalrectngulo.
VamosaprobarahoralaherramientaRotacin/Inclinacin.Pnchala!
Pasaconelpunterodelratnporencimadecadaunodelostiradores.Versqueenlas
esquinas aparece el siguiente smbolo que indica que pinchando y arrastrando
podremos girar el rectngulo. En los dems tiradores aparece el smbolo que nos
permiteinclinarelobjetoenladireccinquearrastremos.
Pruebalasdosopcionesinclinandoligeramenteelrectnguloygirndolounpoco.
Observaqueelpuntodeanclajeestsituadoenelcentrodelobjeto.
Cmopodremoscambiarellugardelpuntodeanclaje?
Para ello debemos activar el panel Transform de la derecha y modificar la zona que
poneAnchorpoint.
Valoresrelativosalpuntode
anclaje.
Escalando
Redimensionando
Dinactiva.com
9
Pinchamoselbotnqueseencuentraallyseleccionamoselpuntodeanclajedeseado.
Si seleccionamos Custom podemos mover manualmente el punto de anclaje
situndonosencimadela yarrastrandoaunanuevaposicin.
8
YaquetenemoselpanelTransformactivadovamosaexplicarelrestodelasopciones
quecontiene.
Observalasexplicacionesdelcuadro:
LaXindicalaposicinabsolutadeX(horizontal)delpuntodeanclajedelobjeto.
LaYindicalaposicinabsolutadeY(vertical)delpuntodeanclajedelobjeto.
LaWindicaeltamaoenanchuradelobjeto.
LaHindicaeltamaoenalturadelobjeto.
Elprimervalorreflejaelporcentajeactualenanchuradelobjetodesdequesecre.
Elsegundovalorreflejaelporcentajeactualenalturadelobjetodesdequesecre.
CuandosemarcalacasillaX=Y,losvaloresenambascasillassernidnticas.
Elprimervalorreflejaelgradoderotacinhorizontalrelativoasuposicininicial.
Elsegundovalorreflejaelgradoderotacinverticalrelativoasuposicininicial.
CuandosemarcalacasillaX=Y,losvaloresenambascasillassernidnticas.
Origin...............................Predeterminado
Topleft.............................Arribaizquierda
Topright...........................Arribaderecha
Centerleft.........................Centroizquierda
Center ..............................Centro
Centerright......................Centroderecha
Bottomleft........................Abajoizquierda
Bottomcenter...................Abajocentro
Bottomright......................Abajoderecha
Custom.............................Personalizado
Practicaconlospuntosdeanclajeygiraelrectngulolasvecesquehaga
falta,hastaqueentiendaselfuncionamiento.
Dinactiva.com
10
ElmodoScaleactivalaherramientaescalayacomentada.
ElmodoResizeactivalaherramientaredimensionaryacomentada.
Copycopiaenmemorialosvaloresactuales.
Pastereemplazalosvaloresporlosquetieneenmemoria.
Resetdejalosvaloresoriginales.
Nosquedaporverlaherramientadistorsionar.
Vemosla:
Pinchalaherramientadistorsionar.
Activaunobjetoquetengasenlaventanaytiradesustiradores
Versquepuedesestirarcadatiradorydistorsionarelobjeto.
Buenoyasabemoscmodibujarunobjeto,escalarlo,redimensionarlo,ponerleun
contorno,rotarlo,inclinarloydistorsionarlo.
Vamosahoraapracticartodoloquehemosvisto, asquepulsalacombinacindeteclas
CTRLNparacrearunnuevodocumento, yhazclicen NOcuandotepregunteel
programasiquieresguardarlo.
8
Debersobtenerlossiguientesobjetos:
Muestraelresultadoatuasesor.
Practicaportucuentalosdistintosobjetosytransformacionesqueyaconoces.
Intentarealizarelsiguienteejercicio:
Unaestrellade8brazos
Un polgonode3lados.
Giraelpolgono45grados.
Ponuncontornoconvalorde3alaestrella.
Dinactiva.com
11
Nosquedaporverunaherramientaquenospermitircorregirlosanclajesdelos
dibujos.
Cmocor regirfor masdibujadasmanualmente
Hazclicenlaherramientacambiarforma.
Seleccionaunobjetodibujadomanualmente(nousesautoformas).
Versqueaparecenunosnuevostiradoresmspequeosquelosquehemosvistohasta
ahora.
Anclajedeuninentrelneasocurvas(Vertex puntosdemodificacinde
direccindelalneaperimtricadelobjeto)
Anclajedecontroldecurvas.
F
Cmoseusan?
Lostiradoresblancosfuncionandeunmodoparecidoalaherramientadistorsionar.
Losazulespermitenajustarconmsprecisinzonascontroladasportiradores.
Hagamosunaprueba:
Dibujauncrculoperfecto(recuerdausarlateclaSHIFTparaello)
Activalaherramientacambiarforma.
Elaspectotienequeserste.
Ahora vamos a arrastrar el tirador del centro de la derecha hasta llegar al centro del
crculo.Ojo!Nousesel tiradorexternomsgrande.
F
Sihemosseleccionadounobjetoconcurvas,aparecernlosdosmodelos.
Sinoexistencurvas,sloeltiradorblancoaparecer.
UsalateclaSHIFTparaquealarrastrareltiradornovaresualturaporel
movimientodelratn.
Dinactiva.com
12
Suaspectotienequeserste:
Intentemosquenuestrodibujoseparezcaaunatartacortada.
Hazclicconelbotn derechodelratnenelpuntocentral.
AparecenopcionesrelativasalVertex:
Nosinteresaeliminarlacurvaasqueseleccionamoslaopcin Sharpen
AhorapulsaCTRLZoelbotn (debajodelabarrademens)paradejarlocomolo
tenamosantesdehacerSharpen.
Activa el men de opciones en el mismo punto central y esta vez selecciona Remove
Vertex.
Cusp ....................formaunacspide.
Smooth ................uninsuave.
Symmetrical.........simtrico.
Sharpen................anguloso.
RemoveVertex....eliminael Vertex.
InsertVertex........insertaunVertexnuevo
Slice....................recorta
Dinactiva.com
13
AcabamosdeeliminarunVertexdeldibujo.
F
Practica ahora con los puntos azules e intenta conseguir que el resultado sea el
siguiente:
PulsaCTRLNsinguardarloscambios.
Intenta realizar los siguientes ejercicios partiendo siempre de un crculo. Guarda cada
ejercicioentucarpetadeprcticasconnmerosconsecutivos(del1al4).
Puedequealgunasvecesnotesquelascurvasnosonperfectasperonote
preocupes,enlaanimacinsaldrnperfectas.
ModificarVertex
Modificarlospuntosdecontroldeanclajes.
Rotacin
Lneas
Elipses
CurvadeBezier
EliminarVertex.
EliminarVertex.
Modificarpuntos
Dinactiva.com
14
AhoravamosaseguirprobandolasdemsopcionesquenosofrecenlosVertex.
Creaunahojanueva(CTRLN)
Dibujauncuadradoperfecto(recuerdausarlateclaSHIFTparaello).
Activalaherramientacambiarforma.
Seleccionalaopcin Smooth delVertexderechosuperior.
Vamosavercmopodemoshacerquecadabrazoseatotalmenteindependiente:
Practicaahoraconesos2puntosparaintentardejarquesuaparienciaseaotravezlade
uncuadrado.
Fjatequelaesquinapierdesunguloparaconvertirseenuna
curvasuave.
Ademsesepuntoahoratienedosbrazosdeestiramiento.
Cadabrazopuedetenersulongitudpropiaperosiempre
marcarnlosdoselmismogradodeinclinacin.
MueveunpuntoazuldelVertexmencionadoparaqueveassu
funcionamiento.Despusdehacerlaprueba,pulsaCTRLZ
paradejarlocomoestaba.
Vuelve a activar las opciones del Vertex y
escogelaopcin Cusp.
De momento no notars ninguna diferencia
pero internamente ese punto deja de curvarse
almoverlosbrazos.Hagamoslaprueba:
Vuelveamoverunpuntoazuldelmismo
Vertexyobservacomoahoraelotropunto
azulnosiguelainclinacindesuopuesto.
Dinactiva.com
15
Ahoravamosaprobarlaopcin Symmetrical:
SeleccionalaopcinSymmetricaldelmismoVertex.
Enaparienciaseparecealaopcin Smoothverdad?
Ahora estira y desplaza un punto azul y vers que el otro opuesto tiene la misma
inclinacinylamismalongitud.
Cmopodramosdejarelcuadradotalcomoseencontrabaalprincipio?
Quopcinseleccionamos?
Sharpen(anguloso),claro!Hazlo!
AhoraeliminaeseVertexcon Removevertex.
Obtenemosuntringulocomoeste:
Tanslonosquedan2opcionesporverdelVertex:Insertvertexy Slice.
Vamosaverlas.
Ponelpunteroencimadelacruzcentralyactivalaopcin Insertvertex.
AhoraaparecedenuevounpuntoVertex.
EstiraelVertexhaciaarribayaladerechaparavolverateneruncuadrado.
Recuerdaquesitienesproblemas,notemasenllamaratuasesor,estparaayudarte.
Laopcin Slicerecortacualquierobjetopordndenosotrosdigamos.
Vamosavercmoseutiliza:
Para no marearnos vamos a utilizar el mismo vertex con el que hemos hecho nuestras
prcticas(arribaderecha).
Seleccionalaopcin Sliceenesepunto.
Mueve el puntero del ratn y observa que ahora aparece una lnea negra que queda
ancladaalVortex.
Paracortarelobjetotenemosquellevarelextremodelalneaacualquiercontornodel
objetohastaqueaparezcaelsmbolo oencualquierotroVertexyvolverapulsarel
botnderechoyseleccionarSlicedenuevo.
Intentacortarelcuadradocomoenelejemplo.
Dinactiva.com
16
Partiendodelresultadofinalvamosaprobarmsdeformaciones.
Ponelpunteroenelmediodelalneadecortehastaqueveaselsmbolo yarrastra
hacia la derecha manteniendo pulsada la tecla SHIFT para facilitar su desplazamiento
horizontal.
VolvamosasuestadoanteriorpulsandoCTRLZ
Enelmismopuntodeantesvamosaversusopciones(botnderechosobrelalnea)
SiseleccionamoslaopcinQuadratic,conseguiremosquelosdosextremosdelalnea
estn atadosconunnicopuntoazuldeajustedecurvas.
SeleccionaQuadraticydesplazaelpuntoazulhacialaderecha.
VuelveasuestadoanteriorconCTRLZ(2veces)hastaquedesaparezcaelpuntoazul.
Yactivaahoralaopcin Cubicydesplazalos2puntosazulescomoenelejemplo.
Vemosqueestactivadalaopcin
Linearquenopermitecurvatura.
Dinactiva.com
17
Recuerda que Quadratic crea un nico punto de ajuste para ambos Vertex y Cubic lo
separaen2puntosdecontrol independientes.
Dejalaventanalimpiasinobjetos.
8
Intentarealizarlossiguientesejercicios:
Nota:Noinventes,trataderepasarlasleccionesanterioreseintentausarel
mnimodeopcionespararealizarcadaejercicio.
1) Dibujauncuadradoperfectoyusandoopcionesyavistas,modifica
el cuadrado hasta que se convierta en un crculo y guarda el
ejercicioconelnombre5.
2) Intentaconseguirqueesenuevocrculoseadenuevouncuadradoy
gurdaloconelnombre6.
3) Borra los objetos que tengas y dibuja un crculo perfecto. Crtalo
porsumitadverticalmenteconlaopcinadecuada.Gurdaloconel
nombre7.
4) Corrige el medio crculo hasta que consigas que se parezca a una
medialunaygurdaloconelnombre8.
5) Gira la media luna ligeramente hacia la izquierda y guarda con el
nombre9.
6) Crea un contorno al objeto con una lnea punteada de grosor 1 y
guardaelejercicioconelnombre10.
Dinactiva.com
18
Bueno,no tedesesperes,cuantomspractiques,mejorteirnsaliendolosejercicios.
Ahoravamosavercmocambiamoselcolordelosobjetos.
Dibuja un cuadrado en la ventana. Ya sabemos que por defecto, el programa te lo
mostrarencolorrojo.
Observaelpaneldeladerecha(pestaaShape).
Creauncontornoalcuadrado,sinimportartesugrosor(recordarelltimoutilizado).
Veamosprimeroel segundobotn(inferior)
Pnchaloyaparecerlaventanadepaletadecolores:
Aunquelaventanaparecealgocomplicada,noloes.Vamosaexplicarporpartes:
Enelapartado Filltenemosdosbotones:
Elprimerbotnnospermitedefinireltipode
rellenodelobjetoseleccionado.
Elsegundobotnnospermitedefinirelcolory
laopacidaddelobjetoseleccionado.
Dinactiva.com
19
Enlapartesuperiorveremosuncuadroquenosmuestraasuizquierdaelcoloractualy
asuderechaelcolorqueseleccionamos(paraverlo,mueveelpunteroporencimadelos
coloresquehayenlaparteinferior).
Esta herramienta nos permite seleccionar un color que se encuentra en cualquier
parte del programa y nos permite seleccionar el color que se encuentre por debajo del
puntero sin tener que averiguar los valores de sus componentes rojo, verde y azul
(RGB).
Este botn activa o desactiva una gama de colores compatible con todos los
navegadoresweb.
Este botn muestra el cuadro de colores propio de Windows con toda la gama de
coloresexistente.
Cadacuadroindicaelvalorentre0y255decadacomponente(rojo,verdeyazul).
Un valor bajo rebaja la intensidad del color seleccionado y un valor alto aumenta su
intensidad.
Porejemplo,siledamoselvalor0alos3componentes,elcolorresultanteserelnegro
(ausencia de color). Si indicamos el valor 255 para cada componente, obtendremos el
colorblanco(mezcladelos3componentes).
El cuadro Hex (Hexadecimal) representa el valor en hexadecimal, usado en muchos
programasdediseoweb.
Elsistemahexadecimalfrentealdecimalcuentadesde0hasta15.
0123456789ABCDEF
A=10B=11C=12D=13E=14F=15
Sincomplicarnosmucholavida,elprocedimientoparacalcularelvalorA5sera:
10x16+5=165asqueFFsera15x16+15=255
En el cuadro en cuestin tenemos 3 bloques de 2 dgitos para representar en
hexadecimalelcolorseleccionado.
En la parte superior nos encontramos con los valores del color actual y por debajo
podemosajustarmanualmentelosvaloresnuevos.
Dinactiva.com
20
Alphanospermiteindicarlaopacidaddelobjetoseleccionado.
Siponemosunvaloralto,elobjetoserms visible,encambiosi bajamossuvalor,el
colorsermstransparente.Elvalor0indicaunatransparenciatotal yelvalor100hace
queelobjetoseaopaco.
Con este panel puedes seleccionar el color que deseas
darlealobjeto.
Muestraloscoloresusadosrecientemente.
Apareceunarejillacuandoelcolornoesopaco.
Estebotnaceptaelcolorseleccionadoycierraelcuadro.
Nota: Si pulsamos la tecla SHIFT mientras seleccionemos el color, el cuadro no se
cierra.
Ve practicando con los colores, dibuja varios objetos con colores y transparencias
distintas.
Cuando ya hayas probado todas las opciones del panel de colores, elimina los objetos
quehayasdibujadoydejauncuadradoperfecto.
Veamosahoraelsegundobotnquenospermitecambiarlaformaderellenarelobjeto
seleccionado.
Pnchaloyaparecerunalistadeopciones.
None ................................Sinrelleno
Solid................................Rellenoslido
Lineargradient ..................Graduallineal
Radialgradient ..................Gradualradial
Tiledimage .......................Imagenrepetida
Clippedimage...................Imagenincrustada
Dinactiva.com
21
Veprobandomientrasexplicoacontinuacinlasopcionesqueiremosviendo.
SiactivamoslaopcinNone,desaparecerelcolorderellenodelobjetoconvirtindole
entransparente.Prubalo!
Solidrellenauniformementeelobjetoconuncolorespecfico(opcinpordefecto).
Lineagradientpermitecrearundegradadolineal.Usauncambioprogresivodelcolora
lolargodelobjeto.Elpaneldecontrolqueaparecealseleccionarlo,permitecambiarlos
coloreseneldegradado.
Antesdecontinuar,veamoscmofuncionaelpaneldecontroldedegradados.
Observamosquedebajodel rectngulotenemosdoscursores:
El primero de la izquierda tiene un color blanco opaco y el de la derecha es negro
transparente.RecuerdaloquecomentamosantessobrelosvaloresAlpha.
En este caso le estamos diciendo al programa que el objeto tendr un degradado que
empieza desde el blanco opaco hasta el negro transparente. En el rectngulo superior
podemosobservarunamuestradelefecto.
Hazclicenlaflechitaqueaparecealaderechadelpaneldecontrol
Se abre una ventana con muestras ya existentes dentro del programa y podemos
seleccionarunadeellas.Vamos aseleccionar la primeradetodas,asqueusa la barra
dedesplazamientoparasubirhastaarribayseleccionalasiguientecombinacin:
Alpincharenesacombinacin,elobjetotendrelsiguienteaspecto:
Dinactiva.com
22
Observa el panel de control ahora. Se entiende perfectamente que el color pasar de
negroablanco.
Para aadir un color, basta con hacer clic en la zona que queramos insertar un color y
aparecerelpaneldecolores.
8Intentaincrustarelcolorrojoenlapartecentraldeldegradado.
Ahoraaparecen3cursoresyloscolorespasandeunoaotrogradualmente.
8Arrastraelcursorcentralhaciaambosladosparaversuefecto.
Ahoravamosavercmoseeliminauncolor.
8Arrastraelcursorblancoysultalofueradelaregla.
Ahoranosquedaelnegroyelrojo.correcto?
8Intentaponerelcoloramarilloalldondeestabaelblanco(aladerechadeltodo)
8 Cambia el color del negro por verde pulsando simplemente encima del cursor y
seleccionandoelcolorverde.
Hemosaprendidoa:
Aadircolores
Eliminarcolores
Movercolores
Modificarcolor
Con el botn podemos acceder a los valores del posicionamiento del
degradado.
El botn har que cualquier transformacin del relleno, vuelva a su
origen.
Laopcin harqueelrellenoquedentegramentedentrodelobjeto.
8Hazprcticascontodoloreferentearellenosgraduales.
Dinactiva.com
23
Cmopodemosconseguirqueelrellenoestendiagonalcomoenestamuestra?
Debajodelaherramientaseleccionartenemoslaherramientatransformarrelleno
Estaherramientanospermitegirarelrellenoquecontieneelobjeto.
Vamosaintentarlo.
8Borratodoloquetengasenpantalla
8Creauncuadradoconrellenogradualmulticolor(lotienesenlalistaderellenos)
8Seleccionalaherramientatransformarrelleno
8Activasinoloestlaopcinrotacindeobjeto
8Giraelrellenohastaconseguirelefectoendiagonal
F
8
Radial gradient permite crear un degradado a partir del centro de forma concntrica
dentro del objeto. Dispone igualmente un panel de control de relleno y su
funcionamientoessimilaraldelinealgradient.
Tiled image permite crear una misma imagen repetidamente hasta rellenar todo el
objeto.
Para probar esta opcin, primero vamos a dibujar un rectngulo. Seleccionamos esta
opciny nosmostrarsulogocomoejemplo.
CuandoseseleccionalaherramientaTransformarobjetos.Alseleccionar
laopcinescalarorotar,latransformacinseaplicaralrelleno
exclusivamente.Lostiradoresfuncionandelmodo tradicionalaunquesu
aparienciaseadistintaprecisamenteparanoconfundirnos.
Intentadibujarlabanderaespaolausandorellenosgradualesyguardael
ejercicioconelnombre11.
Dinactiva.com
24
Vamos a meter una imagen externa que se encuentra en la carpeta de archivos
necesarios.
8Hazclicenelbotnabririmagen
En la ventana de carpetas, localiza la carpeta de archivos necesarios y abre el archivo
swishcolores.jpg
F
Ahoravemoslaimagenrepetidadentrodelrectngulo.
La imagen original la podemos ver en el cuadro de muestra del panel de control de
imagenrepetida.
El mismopaneltambinnosinformadesutamao:151deanchox147dealto.
Tambinnosdirlacantidaddecoloresquetiene:24bits
Yeltamaoqueocupaenmemoria:6Kb.
Paraentrarenelpaneldepropiedadesdelaimagenelegidatenemosquepulsarelbotn
Propertiesohacerdobleclicenlaimagendemuestra.
Losformatosdeimagenpermitidosysusvariantesson:
BMP,DIB
GIF
JPG,JIF,JPEG
PNG
Dinactiva.com
25
Enlapartesuperiorizquierdanosencontramosconelpaneldevaloresquerepresentasu
posicin,tamaodentrodelobjeto,nguloderotacin,etc.
Arribaaladerechatenemoslaposibilidaddeircambiandolosvaloresoriginalesquese
vayanausarenelprograma.
Tratardeexplicarestapartequeparanosotrosesnueva.
El apartado Preload no lo voy a explicar de momento hasta que no hagamos alguna
animacin.
La casilla Dont Smooth nos permite activar o desactiva el efecto Antialias. Plsalo
paraverelefecto. Teresultardifcilapreciarloasquemiraelejemplo:
Casilla
marcada
Casilla
desmarcada
Dinactiva.com
26
Estapartedelpanelnospermitedefinireltipodecompresinybitsdecoloresencada
punto(pxel)
F
Veprobando lasdistintasopcionesdecompresin yobservasuresultadoen la imagen
demuestra.
Cuando selecciones 24 bits/pxel JPEG, intenta variar su valor rebajando la calidad y
observandoelresultadoenlaimagendemuestra.
Aqupodemosverlaanchurayalturadelaimagen(izquierda)yaeltamaoqueocupa
enmemoria(derecha)antes(original)ydespusdecomprimir(Exported).
Porqucambiarlacompresindeunaimagensisucalidadesperfecta?
Porque lo que intentamos hacer es una animacin en flash que se visualizar en una
pginawebasquesidejamoslaimagentalcualsincomprimir,eltiempodecargadela
animacin puede tardar minutos o pocos segundos si aprendemos a comprimir
correctamentelaimagenytalvezsinqueseapreciesucompresin.
8
CuandohayasterminadoelejerciciopulsaelbotnOKyobservaelpanel
8bits....................mximo256colores.
16bits..................mximo65.536colores.
24bits..................mximo16.777.216colores.
32bits..................mximo4.294.967.296colores.
Bsicamenteexisten2tiposdecompresindeimgenes:
ZIP.......................comprimemenosqueelformatojpgsinperdercalidad
siempreycuandoloscolorescomprimidosnoseaninferioresaloriginal.
JPEG...................sucompresinesprogresivaperoamayorcompresin,
mayorprdidadecalidaddeimagen.
Intentacomprimirlaimagenhastaqueveasquenosenoteprdidade
calidadyquelacasillaquenosindicaeltamaofinaldeexportacinsea
unnmeromuyinferioraltamaooriginal.
Silohashechobien,eldibujotienequeverseigual
peroenvezde6Kb.,tendraqueocuparmenos.
Dinactiva.com
27
Vuelvealcuadrodepropiedadesdelaimagenporquenosquedaunacosaporver.
Elcuadroesbastantesignificativoperoporsiacasoexplicoacontinuacincmoseusa:
Arrastrandoeldeslizadordecontraste(Contrast)hacialaizquierda,conseguiremosque
laimagentengamenoscontrasteyviceversa.
Arrastrando el deslizador de brillo (Brightness) hacia la izquierda, conseguiremos que
laimagentengamenosbrilloyviceversa.
Arrastrando el deslizador de contraste (Saturation) hacia la izquierda, conseguiremos
quelaimagentengamenosfuerzadecoloryviceversa.
Arrastrandoeldeslizadordegama(Hue)podremosirvariandouncolorpor otro.
Rebajando la resolucin (Resolution) haremos que la imagen se vea cada vez ms
pixelada(comosiusramosunalupa).
Elbotn Resetvuelveadejarlosvaloresnormales.
LacasillaTransparencynospermitehacerqueuncolorseveatransparente.
8ActivalacasillaTransparency
Versqueahoraaparece:
El botn Transparent color nos abrir el panel de colores que ya conocemos y as
podremosindicarelcolorquenosinteresequeseveatransparente(serecomiendausar
elcuentagotas paraseleccionarelcolordirectamentesobrelaimagen).
Tolerancenosdalaopcindeindicarlatoleranciadecolorsemejante.Unvalor0slo
har transparente el color exacto y un valor mximo de 255 har que todo sea
transparente.
Dinactiva.com
28
Vamosahacerunapruebadetransparenciasparaqueentiendassuutilidad.
8BorratodoloquetengasenlaventanaopulsaCTRLNsinguardarparaempezarun
trabajonuevo.
8Creauncuadradograndequeocupecasitodalaventanadeanimacin.
8 Ahora inserta la imagen swish transparencia.jpg pero usando el botn sealado
abajo.Bscaloarriba,debajodelabarrademens.
Versquelaimagensecentraryestarporencimadelcuadradoquecreaste.
Nuestraintencineshacerquelaparteamarilladelaimagenseatransparenteparaque
sefundaconelcuadrado(noloconseguiremosdeltodoperosirvecomoejemplo).
8Seleccionalaimagenqueacabasdeinsertar.
8Entraenlaspropiedadesdeesaimagen.
8Activaelbotntransparencia.
8Eligeelcoloramarillocomocolortransparente.
8Ajustalatoleranciahastaqueelamarillodelfondodesaparezca.
Vers que no es muy fcil usar esta herramienta y tampoco siempre se consigue el
efectodeseadoperoesrecomendableque nolaolvides, yaqueenalgunas imgenesel
resultadoessorprendente.
Dinactiva.com
29
Bueno,dejemosyaeltemadelastransparenciasasqueborratodoycreadenuevoun
rectngulo.
Clippedimage harqueunaimagenajustesutamaoparaocupareltamaodelobjeto.
Sufuncineslamismaqueloqueacabamosdeverperosinrepetirlaimagen.
estaopcinfuerzalaimagenparaqueseajustealtamaodelobjeto.
Veamoslasopcionesquenosquedanporverdelpaneldeimagen.
Elbotndobleflechitahacequelaimagenvuelvaaleersedeldiscoporsi,porejemplo,
lahemosestropeado.
La flechita azul despliega una serie de imgenes de muestra recordando las ltimas
imgenesquehemosusado.
El botn Reset Transform deja la imagen con los valores predeterminados sin
transformar.
Opcionesdevisualizacin
En la parte inferior de la barra de herramientas nos encontramos con los botones que
nosvanafacilitardisearconmayorprecisin.
Sihacemosclicenlazonaaltadeeseapartado,apareceunmencomoste:
Dinactiva.com
30
8Selecciona25%Enestecasoveremoseltamaoreducido4vecesaloriginal.
8Selecciona500%Enesteotrocasolavisualizacines5vecesmayor.
8 Prueba los 4 botones que se refieren a la visualizacin y cuando veas que puedas
necesitarlos,nodudesenusarlos.
Vamosahaceralgunasprcticasconlasrejillas.
8 Pulsa el botn que ajusta el porcentaje de visualizacin para que se vea toda la
ventana.
8Activaelbotnqueactivalarejilla.
Apareceunarejillaquenoseverenlaanimacinperonosservirparacuadrarobjetos
dentrodelaventana.
Visualizatodalaventana
ajustandoel%
automticamenteparaquese
veatodoelcontenido.
Visualizacinal100%an
sinoseventodoslos
objetos.
Reduceelporcentajede
visualizacin.
Aumentaelporcentajede
visualizacin.
Activalavisualizacindeuna
rejilla.
Creaunarejillaconefecto
imn.
Dinactiva.com
31
8 Ahora crea un cuadrado que ocupe tres casillas en todos sus lados. Usa la rejilla
comoreferencia.
Anconlaayudadelarejillaesalgodifcilquenonossalgamosdelaslneas,asque
vamosaactivarelefectorejillaconimn.
8Activaelbotnrejillaconefectoimn.
8Eliminaelcuadradoyvuelveadibujarlo.
Lotienes?Fcil,no?
8Arrastraelcuadradoaotrazonayobservacmoelefectoimnharqueseadhieraa
larejilla.
Bueno,creoqueyaeshoraqueveamosunnuevopanel,eldelasguas.
8Activaelpanelyveamossusopciones.
Nosencontramoscon tresapartados,Guides (guas),Grids(rejillas)y Snap(imn).
Veamoselsegundodeellos(Grids)porqueyanostienequeresultarfamiliar.
Yavemosquelosbotonesqueaparecensonlosmismosqueacabamosdeaprender.
Adems del botn visualizar rejilla (show) y el botn imantar (snap) vemos que
tambinpodemoscambiarelcolordelarejillapulsandoelbotncorrespondiente.
8Cambiarelcolordelarejillaporelcolorverdeyluegovuelveadejarloconelcolor
previoquetenamos.
Debajopodemosverdoscasillasquenospermitenindicarladistanciaentrelasrejillas.
8Pon40enlacasilladeH(horizontal)y40enlacasillaV(vertical).
8Ahoraajustaelcuadradoparaquesigaocupando3casillas.
8Ahoradesactivalarejillaysuimn(lasdosopciones)
Dinactiva.com
32
Vamosaverahoraelapartadosuperior(Guides)
Lasguasvienenasercomorejillaspersonalizablesynotienenrelacinconlasrejillas.
8Cambiaelcolordelasguasporelcolornegro.
Para usar las guas, es recomendable que sean visibles las reglas verticales y
horizontales. En principio ya deberan de estar activadas pero para que sepas cmo
activarlasodesactivarlas,pulsaelbotn Ruler ydejaqueseveanlasreglas.
Simovemoselpunterodentrodelaventanadeanimacin,podemosobservarqueenlas
reglassepuedeverlaposicinactualdelmismopuntero.
Cmosecreanlneasguas?
Existen2maneras:
La primera consiste en hacer un clic en la regla (horizontal y/o vertical) en el lugar
exactoquequeramosqueaparezca.
Lasegundamaneraesparecidaperoenvezdehacerunclic,loqueharemosesarrastrar
elpunterodesdelareglahaciadentrodelaventanaysoltamos.
Loprobamos?
Primermtodo:
Calculamsomenoselvalormediodetureglahorizontalyhazunclicall.
Sitehasalidobienversunalneaverticalqueatraviesatodalaventana.
8Mueveelpunterohaciaesagua(dentrodelaventana)yarrstralahaciaotropunto.
Sepodrmovercuandoveasqueelpunterocambiaaunaflechadoble.Dependiendode
laguaqueintentesmover,verselpunteroas:
8Creaotraguaperoahoraqueseahorizontalasquehazclicenlareglavertical(enla
mitaddelaregla)
8Arrastralasdosguasparaquequedencruzadasenelcentrodelaventana.
F
SiusaslateclaSHIFT,tantoparacrearoparaarrastrarunagua,la
lneasealinearalaregla.
Dinactiva.com
33
Segundomtodo:
Para crear una gua, coloca el puntero sobre la regla y arrastra el puntero hacia el
interiordelaventana.
Pruebaestesegundomtodoparaenmarcartodoelcuadradohastaquetequedeas:
Si quieres ver u ocultar las guas, pulsa el botn pero de momento djalas
visibles.
8 Arrastraelcuadradohastaquequedemsomenoscomoaqu:
8Intentaarrastrarlodenuevocomoparadejarloenelmismositiodeantes.
Quherramientanosvendrabienparaejecutaresteltimopaso?
Dinactiva.com
34
Elimndeguas!
8 Pulsa la herramienta imn de guas y ajusta de nuevo la posicin del
cuadrado.
Bueninvento,verdad?
Paraquelasguasnosepuedanmoveraccidentalmente,tenemoselbotn que
bloquealasguasolasdesbloqueasilodesactivamos.
Elbotn eliminatodaslasguasquehemoscreado.Nolopulses!,quieroque
veascmoseeliminaunaguaantesdeeliminartodaslasguasdegolpe.
8Arrastraunaguacualquierahaciafueradelaventanaydesaparecer.
8Ahorayapuedeseliminarlastodasdegolpeconelbotnadecuadoparaello.
Vamosaverahoraelapartadoinferior(Snap)
8Creaotrocuadradoperoencolorazul.
8Intentajuntarlosbordesdelosdoscuadrados.
Versquenoesnadafcilperotenemosunaherramientaquenosfacilitaelproceso:
Primerodesplegamoslasopcionesdelaflechaazul Tolerance(tolerancia).Aparecen
lasopcionesquevemosacontinuacin:
Amayorvalormsgrandeserelsaltoalarrastrarlosobjetos.
Veryclosetieneelvalor1,close(3),normal(6),distant(12)yverydistant(24).
Activaverydistant(muylejano)yarrastraunodeloscuadrados.
Notamosalgo?No!
Paraqueelimndeobjetosfuncione,vamosaactivarelbotnimantaralobjeto
Dinactiva.com
35
Vuelveaprobarmoveruncuadradoyacrcatealosladosdelotrocuadradoparaverel
efectoimnfuncionando.
8Pruebacondistintosvaloresdetoleranciayversquecuantomenormsfinoserel
desplazamiento y observa que cuando llegues a tocar el borde del otro cuadrado, se
producecomounligerofrenazo.
Parausarelotrobotn imantaralpxel necesitaremosampliar lazonaal menosun
500%parapoderversuefecto.
8 Desactiva el botn imantar al objeto y activa el botn imantar al pxel. Aumenta el
factor de visualizacin al 500% o ms y trata de ver los colores de los dos cuadrados
juntos en la ventana. Puede que tengas que usar las barras de desplazamiento para
centrarte en la zona de trabajo. Ahora arrastra un cuadrado hacia el otro con la
herramientaactivadaysinella.
Como ejercicio final de guas, vamos a intentar dibujar otra vez la bandera de Espaa
peroestavezusando3objetos.
Borratodoloquetengasysiguemispasos:
Primero vamos a definir el tamao total de la ventana de la animacin. Aunque no
hayamosvistocmohacerlo,definireltamaonoesnadadifcil.
8ActivalapestaaMoviedelospanelesdeladerecha.
Ponestosvaloresenelcuadro:
300indicalaanchuray250laaltura.Dejaelfondoconelcolorblanco.
8Ponlavisualizacinal100%
8Dibujauncuadrado.
Ahoravamosamodificarsusparmetrosparaquesearectangularyloharemosusando
elpanel Transform
Introducelossiguientesvaloresenelsitiocorrespondiente.
250indicaqueelcuadradovaatenerunaanchurade250pxelesyunaalturade50.
Dinactiva.com
36
Yatenemoselrectngulocreado.Notepreocupessisesalefueradelaventana.
8SeleccionaelobjetoypulsaCTRLCparacopiarloenmemoria.
8AhorapulsaCTRLVparapegarloenlaventana.
Yatenemos2rectngulosidnticos.
8Creaunaguahorizontalenelpxel50yotraenelpxel200.
8Creaotraguaverticalenelpxel50.
Miintencinesdejarlaguaverticalenlaposicin25peroalnoverseclaramenteenla
regla,usaremoslabarradeestadoquenosindicardndenosencontramos.
Veamoscmohacerlo:
Porsinosabesdndeestlabarradeestado,tedirqueesloqueseveabajodeltodo
delaventanadelprograma.Miraabajoalaizquierdaysiponeselpunteroencimadela
guaverticalcreada,versqueapareceelvalor .
Arrastralaguahacialaizquierdaobservandoelvalorqueirapareciendoenlabarrade
estadoeintentadejarloen .
RecuerdaquelateclaSHIFTteayudaraconseguirlosituratnnoesmuybueno.
8Activaelpanel Guidesycompruebaqueestseleccionadaunatoleranciade6.
8 Activa el imn de guas y arrastra los rectngulos para que queden de la siguiente
manera:
Buenoyatenemoslosbordes,ahoranosquedaporcrearelcentroamarillo.
8Creaunrectnguloquequedeenlazonacentralyleponeselcoloramarillo.
Dinactiva.com
37
Vers que al intentar crear el cuadrado, no encontrars dificultad en la zona inferior
pero si no tenemos activada el imn de objetos, nos resultar difcil cuadrarlo por la
derechayabajo.Asquesinotienesactivadoelimndeobjetos,actvaloyterminael
dibujoparaquequedeperfecto.
Ahoraobservaelpaneldelaizquierdayverslosiguiente:
Estonosindicaquedentrodelaescenatenemos3formas(shapes)
Cuandoseleccionescualquieradelas3formasqueaparecenenesepanel,versqueen
laventanadeanimacinlaformaseseleccionatambin.Pruebairseleccionandounaa
unaycomprobarsufuncionamiento.
8Eliminalasguasusandoelbotnapropiado.
Miintencinahoraesdesplazarlabanderaydejarlaenelcentrodelaanimacin.
Nolointenteshastaqueteexpliquecmohacerlo.
Recuerdaquecadaobjetoesindependienteysiintentasarrastrarunoporuno,tecostar
volveradejarlospegados.
Demomentovamosaintentarseleccionarlos3objetosalmismotiempo.
Paraellovamosausarelpanelizquierdoeintentaremosquequedenseleccionadasas:
Cmosehace?
8HazclicenelprimerShapequeaparece.
AhorapresionalateclaSHIFTysinsoltarlahazcliceneltercerShape.
LateclaSHIFTen las seleccionespermite seleccionardesdeunpuntohastaelotrosin
tenerquemarcarunaporuna.
Yatieneslas3formasseleccionadas?Esperoques.
F
SiusaslateclaCTRLenvezdeSHIFT,podrsirseleccionandolos
objetosquequieras,marcndolosodesmarcndolos.
Dinactiva.com
38
Ahoraintentamovertodalabanderaperohazloslocuandoveasqueelpunterotienela
siguienteforma:
Puedesdejarlabanderaenelcentrodelaventanasinproblemas?
Si ves que no te resulta fcil centrarla es porque no tienes activado el botn
imantaralobjetoasqueactvaloytratadecentrarlabanderahastaquetequedeas:
Guardaelejercicioconelnombre12.
Creesquepodrashacerquelabanderaseamspequea?
Intntalo.
Supongoquenolohabrsconseguidoyaquealreducirlos3objetosalmismotiempo,
cadaunodeellossereducedemaneraindependienteynodeformaglobal.
Cmopodremossolucionarlo?
Agrupandolos3objetosen1solo.
Veamoscmohacerlo.
Unavezqueestnseleccionadoslos3objetospulsaremosCTRLG(grupo)yveremos
queenelpanelizquierdoapareceahora:
VersquedelantedeGroup tenemoselsigno+quenosindicaquedentrodelgrupohay
objetos.
Pulsaelsignomsqueapareceall.
Dinactiva.com
39
Versqueahoraestndentrode Grouplos3objetosquetenamosantes.
Ahoraparaconseguirreducireltamaodelabandera,tanslotenemosqueseleccionar
delpaneldelaizquierdaGroupyreducirsutamaoconlostiradores.
8ReduceeltamaodelabanderayrecuerdausarlateclaSHIFTalhacerloparaque
lasproporcionesnocambien.
F
Megustaramsquelosnombresdelosobjetosfuesenmsdescriptivosasquevamos
ahacerlo.
8Hazclicen GroupypulsalateclaF2.CambialapalabraGroupporbanderaypulsa
Intro.
Hazlomismoparaelrestodelosobjetos,poniendocomonombresucolor.
Guardaelejercicioconelnombre13.
Fusindeobjetos.
Apartedepodercrearungrupodeobjetos,tambinpodemosfusionarvariosobjetosen
unosolo.
Quventajatienefusionarobjetos?
Obtenerunaformanicaqueademsdesermsfcildemanipular,tambinreduceel
tamaofinaldelaanimacin.
Vamosapartirdeundocumentonuevoypracticarlafusindeobjetos.
8Creadosobjetosenlaventana.
8Seleccionalosdosobjetosdesdeelpanelizquierdoohazloenmarcandolosdos
objetos desdelamismaventana.
8AbreelmenModifyyseleccionaGroupingyluegoGroupasshape.
Siquieresseleccionarunobjetodelgrupo,seleccinalodirectamentedel
panelizquierdoyasegratequeelpunterotengaelaspecto
Cuandoquierastrabajarconelgrupoynoconsucontenido,recuerda
pulsarelsigno (contraergrupo)paraqueslotrabajeconelgrupoobien
asegratequeelpunterotengaelaspecto
Dinactiva.com
40
Teaparecerlasiguienteventana:
Loquenosestpreguntandoelprogramaes:
Deseasquelaszonasdelosobjetosqueestnporencimadeotrosobjetos,quetengan
elmismocolorderelleno,quedentransparentespordentro?
DemomentocontestaqueNO.
Enseguidaversqueahoratusdosobjetosformanunosolo.
SupongoqueestarsdeseandoverquocurrirasihubisemoscontestadoS.
Vamosaprobarlo.
Borratodoloquehayycreaun cuadrado
8CopiaelcuadradoconCTRLCypgaloconCTRLV
8Ponuncuadradoencimadelotropara quequedenmsomenoscomoaqu:
8Ahora fusiona losdosobjetos,contestandoqueSalapreguntaqueteformularel
programa.
Elresultadofinaldeberadeserelsiguiente:
Dinactiva.com
41
F
8
Ordendelosobjetos
Cadavezquecreemosunobjeto, steestardispuestoporencimadelosdems.
Veamosunejemplo:
8Dibujauncuadradoyuncrculo,cadaunoconuncolordiferente.
8Arrastraunodeellosporencimadelelotroyverselordendelosobjetos.
Sitefijasenelpaneldelaizquierda,verscomoelobjetoqueseencuentrearribaenla
lista,correspondealltimocreadoyseencuentraporencimadelosdemsobjetos.
8Cambiaelnombrealosobjetosponiendocuadradoycrculorespectivamente.
Paracambiarelorden,tanslotienesqueseleccionarelobjetoyhacerclicenlaflechita
quecorrespondaparahacerlosubirobajarunnivel.
Miraesteejemplo:
Estseleccionadoelobjeto2.
Notaimportante:
Paraquelosobjetosfundidospuedancrearzonastransparentes,hace
faltaquelosobjetostenganexactamenteelmismocolorderelleno.Sino
esas,nosecrearnzonastransparentes.
Intentadibujarunbotndecamisacon4agujerostransparentes.
Dinactiva.com
42
Enlapartesuperiorestnlosbotonesdeorden
Sipulsamoslaflechahaciaarriba,elobjeto2estararribadeltodo.
Sipulsamoslaflechahaciaabajo,elobjeto2estarabajodeltodo.
8Intentatmismocambiarelordendetusdosobjetos.
F
Silohacescorrectamente,elresultadodeberadeserste:
Ya que estamos trabajando con el panel de objetos, veamos para qu sirve el ojo que
saledelantedecadaobjeto.
Cuandoelojoestvisible,elobjetoservisibleenlapantalla,sihacemosclicenelojo,
elprogramaharqueeseobjetonoseveaenlapantalla.Ojo!Sloenlapantalla,enla
animacinterminadaseseguirviendoigualqueantes.
8Hazclicenelojodelcuadrado.
8Hazclicenelojoocultoahora.
Ahoraapareceuncandadoquenosindicaqueelobjetoesvisibleperoestarbloqueado
paraqueenningnmomentopodamosmoverlodesitioporaccidente.
8Hazclicenelcandado.
Vuelveaaparecerelojocomoalprincipio.
Quedaporcomentarunpardeherramientasquenospuedenayudaradibujar.
Cuando seleccionamos la herramienta mano , podremos mover el objeto
seleccionadoydesplazaralmismotiempolaescena.
Paraprobarestaherramienta,amplialazonadetrabajoa400%,luegointentadesplazar
unobjetoqueveas.Versquesloelobjetosedesplaza.Siahoraactivaslaherramienta
mano,podrsdesplazarelobjetoysufondoentero.
Tambinpuedescambiarelordendelosobjetosarrastrandohaciaarriba
ohaciaabajoelobjetoseleccionado.
Dinactiva.com
43
La otra herramienta que nos queda por ver es la lupa que nos permite ampliar la
zona que nosotros enmarquemos con el seleccionador y arrastrando la zona de
enmarcacin.
Site fijasan nosquedandosherramientas ms porverperoloharemos mstarde ya
quedemomentonotienenquevercondibujar.
Creoqueyaeslahoraqueempecemosacrearunapequeaanimacin.Nocrees?
Vayamosporpartes,primerotenemosqueentenderelfuncionamientodelprograma.
Antesdenada,creaundocumentonuevoconCTRLNynoguardesloscambios.
ActivalafichaMovieyusalossiguientesparmetros:
Anchura=400,Altura=300,Framerate=20
CasillaStopplaying(pararlaanimacinalterminarlapelcula)activada.
MstardeexplicarqueselFramerate.
Pulsaelbotndevisualizacincompletaajustandoel%automticamente.
Recordemos que vamos a crear una pelcula (Movie) y que dentro de la pelcula
podemostenerunaomsescenas(Scene).
Ahoraquieroquetefijesenlalneadetiempo(arribadeltodo)
En la parte superior vemos una regla que nos indica los cuadros (frames) de una
animacin.
Enestecasoestamosenlaposicin1delaescena1.Correcto?
8Dibujaun cuadradoquetengacada ladoel valor50ydjaloen laesquinasuperior
izquierdadelaventanadeanimacin.PuedesusarlaopcinImantaralobjetoparaque
teseamscmodoajustarloenlaesquina.
8Alobjetocreado,ponleelnombrecuadrado.
Ahoratendremosenlalneadetiempolosiguiente:
Dinactiva.com
44
Ponelpunteroencimadelcuadritoazul (cuadro1delalneaCuadrado)ypulsaelbotn
derechodelratnparaverelmencontextual.
SeleccionalaopcinMove(desplazar)
Compruebaqueelresultadoseaste:
Ahoraarrastraelcuadradohastalaesquinainferiorderecha.Procuradesplazarelcuadro
cuandotesalgaelsmbolo enelpuntero,sinomodificaraslaposicindelcentrodel
objeto.
Compruebaelresultado:
Ahoravamosaanalizarlalneadetiempo.
Dinactiva.com
45
Ponte encima del cuadro rojo superior y arrastra hacia la izquierda y derecha, por
encimadelaregladetiempo.
Observalospasosdelaanimacincreada.
El programa ha creado 10 cuadros que harn que el cuadrado parta del lado superior
izquierdoyvayaprogresivamentehacialaderechainferior.
Observa tambin que el cuadrado tiene los tiradores de color gris cuando no se
encuentra al inicio o al final de la animacin. Adems si intentsemos arrastrar el
cuadrado,nonoslopermitiraelprograma.
F
Ququieredecirnosesto?
Queslopodremos modificarobienelpuntodepartida(tiradoresblancos)oelpunto
final(keyframe)queaparececontiradoresrojos.
8Vealaposicin10yarrastraelobjetohacialaderechasuperior.
Observacmolaanimacinsecorrigeenfuncindelpuntofinal.
Ysiquisiramoscurvarlaanimacin?
Fcil!
Loqueharemosescrearenlaposicin5unnuevoKeyframe.
8 Coloca el puntero encima de la posicin 5 pero referente al objeto, no a la regla o
lneadetiempo.
UsaelbotnderechoyseleccionaInsertKeyframe
Sienalgnmomentopierdeselcontrol,pulsaenlalneadetiempoel
objetocuadrado.
Dinactiva.com
46
8Arrastraahoraelobjetohaciaelcentrodelaventana.
Hasobtenidoelsiguienteresultado?
8Arrastraahoralaanimacin(izquierdayderecha)desdelalneadetiempoyobserva
elcambioproducido.