Aprendre Flash CS5 amb 100 exercicis pràctics

LLES INSTÀNCIES DELS MAPES DE BITS no poden ser editades amb les eines de dibuix de Flash, a menys que siguin transformades en formes. Hi ha dos mètodes per convertir instàncies de mapes de bits en objectes editables: convertir-les en gràfics vectorials amb àrees de color diferenciades o separar la instància.

IMPORTANT

Si converteix una instància d’un mapa de bits en un gràfic vectorial, aquest ja no apareixerà vinculat a la imatge importada. Aquesta última podrà ser eliminada del panell Biblioteca sense que el gràfic vectorial pateixi cap tipus d’alteració.

1 Canviï el zoom a l’opció ajustar a finestra i seleccioni una de les instàncies d’imatge situades en el document a l’exercici anterior.

2 Utilitzarem amb aquesta instància un mètode de conversió que ens doni com a resultat un gràfic vectorial independent que presenti clarament l’aspecte d’un dibuix. Per a això, obri el menú Modificar, polsi sobre l’opció Mapa de bits i faci clic sobre l’opció Trazar mapa de bits. El camp Área mínima estableix el nombre de píxels circumdants que han de ser considerats a l’assignació d’un color.

3 El quadre de diàleg Trazar mapa de bits presenta una sèrie de paràmetres modificables, en funció de l’aspecte que volem que presenti el gràfic vectorial producte de la conversió. Al camp Umbral de color, introdueixi el valor 80. El valor del quadre Umbral de color, que pot estar comprès entre 1 i 500, és el paràmetre que utilitza el programa per comparar el color de dos píxels

4 Al camp Área mínima, insereixi el valor 5 perquè el programa assigni un mateix color a un nombre més gran de pixels.

5 Faci clic al botó de punta de fletxa del camp Umbral de esquina, seleccioni l’opció Pocas esquinas.

6 El quadre desplegable Ajustar curva serveix per indicar com han de ser els contorns del gràfic generat. Polsi el botó de fletxa d’aquest quadre i seleccioni l’opció redondeado i polsi el botó Aceptar per donar inici al procés de conversió de la imatge. El quadre desplegable Ajustar curva serveix per indicar com han de ser els contorns del gràfic generat. Com més suaus siguin les corbes menys s’ajustarà el contorn del gràfic al de la imatge original. El quadre desplegable Umbral de esquina permet determinar si es mantenen les vores afilades de la imatge original o se suavitzen.

7 Després d’aquest procés la instància queda convertida en una forma de Flash. En contenir menor informació, el gràfic vectorial generat presenta una grandària menor, però ha perdut gran part de la definició de l’arxiu original. Per observar millor el seu aspecte, faci clic a l’instància de la imatge situada a la seva dreta.

8 La nova conversió ha distorsionat la imatge i ha reduït el nombre de colors que presentava. El nou gràfic vectorial queda desvinculat de la imatge que conté la Biblioteca, i pot ser editat com un farciment creat amb les eines de dibuix de Flash. Amb la segona instància de la imatge, obri el menú Modificar i seleccioni el comando Separar per convertir la instància en un farciment. L’ús del comandament Separar no és exclusiu dels mapes de bits, per la qual cosa no es troba disponible en el submenú que conté aquesta opció.

L’opció Separar s’executa immediatament i la imatge queda convertida en un farciment de Flash amb la particularitat que conserva encara el vincle amb la imatge de què procedeix, el mapa de bits emmagatzemat a la Biblioteca. Aquest vincle permet que el farciment en què s’ha convertit la instància conservi els atributs de color de la imatge original.

IMPORTANT

Per comprovar si una imatge s’ha convertit en farcit i, per tant, pot ser manipulada com a tal, dirigeixi’s al panell Propiedades, concretament a la secció Relleno y trazo.

UNA FORMA TRAÇADA O SEPARADA d’un mapa de bits passa a ser considerada com un farciment per part de Flash. El programa presenta una sèrie d’opcions que faciliten el suavitzat del contorn del farciment creat i l’optimització de les corbes presents en els seus diferents fragments, diferenciats pel color dels mateixos.

IMPORTANT

L’aplicació del comandament Suavizar bordes de relleno permet la creació d’escenaris, fragments de farciment amb contorns corbs diferenciats, a partir d’una forma. El seu ús en gràfics amb molts detalls pot augmentar la grandària de l’arxiu d’un document de Flash.

1 Amb la segona imatge seleccionada, la que, com recordarà, vam convertir en farciment, desplegui el menú Modificar, polsi sobre l’opció Forma i seleccioni el comandament Suavizar bordes de relleno. El camp Distancia, el primer dels paràmetres definibles, indica la quantitat de píxels als quals afectarà l’aplicació del suavitzat

2 Automàticament es visualitza el quadre de diàleg del mateix nom. Al camp Distancia, introdueixi la xifra 20.

3 El camp Número de escenarios controla la quantitat de corbes utilitzades per a l’aplicació de l’efecte. En aquest camp, insereixi el valor 1. Les opcions disponibles en el camp Dirección són idèntiques a les que presenta el quadre de diàleg Expandir relleno: Expandir i Hundir.

4 Es pot seleccionar la direcció en què s’aplicarà l’efecte. En aquest cas volem que la forma seleccionada s’expandeixi el nombre de píxels indicats al quadre Distancia. Comprovi que l’opció Expandir està seleccionada i polsi Aceptar.

5 La imatge s’expandeix. Els nous píxels conserven els atributs de color del mapa de bits original i les cantonades de la imatge s’arrodoneixen. L’aplicació d’aquest modificador sobre formes amb molts detalls pot ocasionar l’augment de la grandària del document. Per esmenar aquest problema, Flash permet ajustar el nombre de corbes de les formes a fi d’optimitzar-les. Vegem què succeeix en intentar optimitzar una imatge separada d’un mapa de bits. Obri el menú Modificar, seleccioni l’opció Forma i, en el submenú desplegat, polsi sobre el comandament Optimizar.

6 Aquesta acció ens condueix al quadre de diàleg Optimizar curvas. La Intensidad de optimización pot definir-se introduint el valor adequat o lliscant el ratolí polsat en aquest camp. Introdueixi el valor 70 i polsi el botó Aceptar.

7 Atès que al quadre de diàleg Optimizar curvas es trobava marcada l’opció Mostrar mensaje con totales, apareix una finestra d’advertència en què s’informa del grau d’optimització que es va a aplicar. Faci clic també a Aceptar. Com més gran és el valor d’intensitat d’optimització, més dràstica és l’eliminació de corbes sobrants.

L’optimització només s’aplica a les cantonades de la forma i no altera el contingut del farciment, ja que aquest no té corbes. En seguir aquesta forma vinculada als atributs de color del mapa de bits de la Biblioteca, el seu farciment es considera una forma unitària.

IMPORTANT

Els tres primers comandaments del submenú Forma permeten millorar el resultat dels dibuixos en els quals apareixen corbes. L’opció Suavizado avanzado modera les corbes, reduint les seves imperfeccions. L’opció Enderezado avanzado efectua una sèrie de petits ajustos a les línies i les corbes ja dibuixades (no actua sobre els segments rectes), de manera que les línies resultants proporcionen una sensació més estilitzada. Finalment, l’opció Optimizar afina les línies corbes i els contorns de farcit reduint el nombre de corbes utilitzades per definir-los

FLASH DISPOSA D’UNA EINA que permet incloure text, el contingut i del qual aparença poden ser modificats durant la seva introducció o després de la mateixa. En crear un text nou, Flash empra els atributs del text predeterminats pel programa.

IMPORTANT

Quan crea un text nou, Flash utilitza els atributs del text predeterminats pel programa. Per canviar els atributs de font o paràgraf del text existent, cal haver-lo seleccionat abans. Quan tinguem text seleccionat, els atributs es modificaran mitjançant el panell Propiedades.

1 Començarem aquest exercici dibuixant una figura per comprovar el comportament dels textos. Faci clic sobre l’eina Rectángulo del panell Eines i traci aquesta figura en algun punt del document.

2 Una lletra T majúscula identifica l’eina Texto al panell Eines. Activi aquesta eina i faci clic al centre del rectangle dibuixat.

3 Automàticament apareix una caixa de text amb el corresponent cursor d’edició. Escrigui directament la paraula disseny i activi l’eina Selecció per comprovar l’aspecte.

4 La paraula introduïda es mostra dins un marc rectangular blau, que representa la selecció del bloc de text que la conté. Cada bloc de text d’un document funciona de manera independent i els seus atributs poden ser modificats des de l’apartat Carácter del panell Propiedades. Polsi el botó de fletxa del quadre Familia i elegeixi la font que vostè prefereixi. Flash predetermina que els textos introduïts siguin de tipus estàtic. El quadre desplegable Tipo de texto, en la part superior del panell Propiedades permet canviar aquesta disposició.

5 El camp Estilo permet elegir a partir d’un desplegable un atribut de text, com a negreta o cursiva. Desplegui el camp Estilo i elegeixi l’opció Bold Italic, per exemple.

6 Cada font presenta uns caràcters diferenciats, tant en estil com en grandària. La grandària dels textos, igual que el grossor dels traços, ve indicat en punts (independentment de les unitats de regle que presenti l’arxiu). Faci clic al camp Tamaño de fuente i introdueixi el valor 16.

7 Per canviar el color del text, polsi sobre la mostra del quadre Color i seleccioni amb un clic el color que prefereixi de la paleta emergent.

8 Tingui en compte que els atributs seleccionats s’aplicaran a tots els textos introduïts a partir d’aquest moment. Activi l’eina Texto polsant sobre ella al panell Eines i faci clic fora del rectangle per crear un nou bloc de text.

9 Escrigui novament la paraula disseny i activi l’eina Selecció.

10 La paraula introduïda presenta els atributs de font seleccionats per al bloc anterior. Per acabar aquest exercici, polsi la punta de fletxa del quadre Color del text i, en la paleta emergent, faci clic sobre la mostra de color negre de la primera columna.

IMPORTANT

No és necessari seleccionar el bloc de text per canviar els seus atributs. Durant la introducció del text, com en tots els programes destinats a l’edició d’aquest tipus d’elements, és possible alterar les característiques del mateix.

TLF RESPON A LES SIGLES DE TEXT LAYOUT FRAMEWORK, el nou tipus de text predeterminat en Flash CS5. Aquest tipus de text permet editar textos i manipular-los com si treballés amb un programa de maquetació, de fet és el mateix motor de text utilitzat per InDesign

1 Abans de començar descarregui l’arxiu Text.fla i obri’l amb Flash CS5

2 Veurà que aquest arxiu conté un text que utilitzarem per conèixer el nou motor de text. Si utilitza l’eina Texto per editar-lo haurà de seleccionar la part del text que li interessa, al contrari si utilitza l’eina Selección els canvis s’aplicaran a tot el text. Seleccioni el quadre de text amb l’eina Selección. Per defecte els textos s’alineen a l’esquerra del bloc en el qual es troben inclosos. El botó Alinear a la izquierda es mostra actiu, per tant, al panell de propietats.

3 Com ja coneixem les eines de grup Carácter passarem a treballar el paràgraf. Desplegui el menú Párrafo i a la categoria Alinear seleccioni l’opció Centre.

4 Ara veurem com s’organitza el text al quadre de text. Desplegui el menú Contenedor y flujo i a la categoria Caracteres máx seleccioni l’última opció Justificar.

5 Observi que el text ara ocupa la totalitat del quadre. A continuació modificarem els Efectos de color del text. Desplegui aquest menú i a la categoria Estilo seleccioni l’opció Tinta.

6 Augmenti el valor Tinta fins al 50% utilitzant el botó lliscant i modifiqui els valors dels colors Rojo, Verde i Azul fins que aconsegueixi el to més adequat.

7 Finalment modificarem algunes de les característiques bàsiques del text com la font, la grandària i el color. Aquesta vegada activi l’eina Texto i seleccioni el text complet.

8 Desplegui el menú Familia i seleccioni la font que més li convingui.

9 A continuació augmenti la grandària del text fent clic sobre el número 12 del camp Tamaño i, sense soltar-ho, desplaçant el ratolí cap a la dreta. Solti el botó quan el text hagi adquirit un grandària considerable i sobrepassi una mica la grandària del text.

10 Fixi’s que a la part inferior del quadre de text apareix ara una quadre amb una creu vermella. Aquest quadre indica que el text sobrepassa el quadre. Solucionarem aquest inconvenient al pròxim exercici. Ara per acabar modifiqui el color del text. Seleccioni el quadre de text amb l’eina Selección.

11 Faci clic al menú Color i de la paleta de colors que es desplega seleccioni la que més li agradi.

FLASH SITUA EN BLOCS INDEPENDENTS els diferents textos estàtics d’un document, però gràcies al motor de text TLF es pot dividir un text en dos quadres mantenint la continuïtat del text. El programa, per defecte, adapta automàticament les caixes de text al seu contingut i presenta el text amb una orientació horitzontal.

IMPORTANT

És possible modificar la direcció de text amb el comandament dirección de texto del panell Propiedades. Els textos horitzontals sempre presenten un flux d’esquerra a dreta, i el selector que apareix en el bloc quan està en mode d’edició possibilita fixar una amplària determinada per al mateix. Els textos verticals, per la seva banda, poden presentar un flux d’esquerra a dreta o en la direcció oposada, i el selector dels seus blocs permet fixar, aquesta vegada, una altura determinada per als mateixos.

1 Seleccioni l’eina Texto i faci clic sobre l’indicador de text desbordat.

2 Fixi’s que després d’haver fet clic sobre aquest quadre el punter del ratolí ha canviat d’aspecte. S’ha convertit en una fletxa amb un text incrustat, la qual cosa significa que el text que sobresurt del quadre anterior s’inserirà en un nou quadre. Faci clic en algun punt buit del document i creï un nou quadre de text.

3 Fixi’s que efectivament el text restant ha passat al següent quadre. Pot ocórrer que al nou quadre torni a aparèixer l’indicador de quadre desbordat. En aquest cas canviarem la dimensió del nou quadre. Seleccioni l’eina Selección i arrossegui un dels punts d’ancoratge del quadre de text per augmentar la seva grandària.

4 Solti el ratolí quan el quadre hagi adquirit la dimensió adequada. A continuació modificarem la posició i orientació d’aquest quadre. Amb l’eina Selección seleccioni el segon quadre i desplegui el panell Posición y tamaño.

5 Faci clic sobre el valor del camp X i sense soltar el botó desplaci el ratolí cap a esquerra i dreta fins que el quadre se situï en la posició mes convenient.

6 Faci el mateix amb el camp Y.

7 Comprovem ara que efectivament es tracta d’un text enllaçat, tal com indica la línia que connecta els dos quadres. Seleccioni l’eina Texto i faci clic a l’inici del text del primer quadre. En aquesta posició escrigui unes paraules o una frase i comprovi com el text es desplaça al següent quadre.

8 En ser el text més llarg ara és probable que el segon text torni a mostrar un indicador de text desbordat. Torni a augmentar la grandària del quadre utilitzant l’eina Selección.

 

9 Finalment comprovarem que malgrat tractar-se d’un únic text l’estil de cada quadre pot ser modificat independentment. Amb el segon quadre seleccionat desplegui el menú Caràcter i desplegui el camp Color.

10 Observi que el color s’ha aplicat únicament sobre el text d’aquest segon quadre.

IMPORTANT

Recordi que al quadre de diàleg Preferencias del programa, concretament en la categoria Texto, es pot establir l’orientació, el flux i l’ajust aplicable als blocs de text vertical.

PARA REPRESENTAR ELS TEXTOS ESTÀTICS continguts en un document, Flash crea contorns als caràcters. Aquests contorns són utilitzats durant la reproducció de l’arxiu, un vegada aquest ha estat exportat o publicat.

IMPORTANT

Només al text horitzontal estàtic, l’usuari pot utilitzar fonts especials denominades fonts de dispositiu. D’aquesta manera, el reproductor de Flash, Flash Player, utilitzarà la informació de font dels sistemes dels usuaris que reprodueixin l’arxiu, obviant per tant els contorns.

1 En aquest exercici, coneixerem el mode d’assegurar la correcta visualització dels textos estàtics durant la reproducció dels arxius de Flash. Per a això utilitzarem un nou text menys extens. Creï un nou rectangle i amb l’eina Text escrigui el seu nom. A continuació amb l’eina Selección faci clic sobre el seu nom. És possible assignar una font a un text tant des del quadre Fuente del panell Propiedades com des de l’opció Fuente del menú Texto

2 Desplegui el menú Texto, seleccioni l’opció Fuente i polsi sobre l’opció Algerian. (Si no disposa d’aquesta font, elegeixi qualsevol altra.) Si el llistat de fonts no es mostra al complet, per accedir a les opcions ocultes del submenú que apareix s’ha de prémer el botó de fletxa de la part inferior del mateix.

3 Ha de tenir en compte que en funció de la font seleccionada i la grandària del text és possible que aquest no es visualitzi correctament en el document final, publicat o exportat, de Flash. Això és degut al fet que el programa crea contorns en els textos estàtics i els utilitza per reproduir l’arxiu. Possibilita seleccionar fonts de dispositiu, únicament al text horitzontal estàtic, com a alternativa a l’exportació d’informació de contorn de font. Desplegui novament el menú Texto, polsi sobre l’opció Fuente i seleccioni l’opció sans.

4 Els textos amb grandàries petites (per sota dels 10 punts) que utilitzin les fonts de dispositiu poden ser més nítids i llegibles que els que presenten contorns de font exportats. El panell Propiedades permet assignar de manera directe una font de dispositiu als blocs de text seleccionats.

5 Obri el menú Modificar i seleccioni amb un clic l’opció Separar. Gràcies a les fonts de dispositiu, Flash Player, el reproductor dels arxius exportats o publicats, utilitza la font disponible en l’equip local més semblant a la font de dispositiu seleccionada.

6 Automàticament el programa genera un bloc de text independent per a cadascuna de les lletres que componien la paraula. Faci clic sobre una de les lletres del seu nomCom la informació de la font de dispositiu no està inclosa en el document, la utilització d’aquest tipus de fonts redueix la grandària de l’arxiu final.

7 Cada nou bloc de text pot ser ara editat independentment. Al panell Eines, polsi sobre la icona de l’eina Selección, desplegui el menú Modificar i polsi sobre l’opció Separar per transformar en una forma independent el caràcter seleccionat.

8 A partir d’aquest moment, aquesta lletra passa a ser considerada pel programa com un farciment independent, que pot ser editat amb les eines de dibuix de Flash destinades a l’efecte. Polsi en la punta de fletxa del quadre Color del relleno del panell Propiedades i seleccioni amb un clic la mostra de color que desitgi de la paleta emergent.

IMPORTANT

En lloc de separar els caràcters d’un text per corregir els problemes de visualització de les fonts, també es pot optar per acudir a les opcions del submenú Modo de vista previa del menú Ver i seleccionar l’opció Suavizar texto. Aquesta opció facilita la lectura dels textos més petits, ja que alinea els contorns de text amb els límits dels pixels.