Els cartells que mancaven

Finalment.

Moltes gràcies.

Ara a comentar-los.




yasmin





borja


Publicar
cèlia

El dissenyador web

Un dissenyador web en tant en quant és dissenyador ha de cercar la manera de comunicar visualment i en quant a dissenyador web ha de trobar la combinació de recursos tècnics adient per poder muntar la web. Sempre haurà de tenir una actitud d'investigador. Per tant no es pot tenir una actitud passiva.

APRENDRE A APRENDRE

Aprendre sense pensar és feina perduda; pensar sense aprendre és perillós.

Confuci

Per optimitzar el vostre aprenentatge, saber com funcioneu.

1. Què és l'aprenentatge? Possible definició: és la integració de noves informacions, nous coneixements, noves habilitats, ... a la estructura cognitiva preexistent.
2. Què és una "estructura cognitiva"? És un conjunt de pensaments, coneixements adquirits i habilitats desenvolupades que es troben connectats entre sí al llarg de l'experiència.
3. Quan més gran és l'estructura cognitiva més capacititat té d'adquirir i integrar nous coneixements ja que els coneixements disposaràn de més conexions amb que enllaçar. Analogia: Xarxa de pesca; quan més gran i quan més fina estigui teixida més capacitat de pescar. [Ara a la introducció heu estat ampliant aquesta estructura i esteu començant a adquirir un nou vocabulari. Aquest vocabulari ens servirà per connectar amb les coses que veurem pròximament].
4. "Acumular" informacions a la "estructura cognitiva" no és aprendre sino que és memoritzar a curt termini ja que no s'estableixen connexions sòlides amb la estructura cognitiva preexistent. Aprendre requereix integració i connexió. [Us demano que no acumuleu sino que integreu, no deixeu mai de preguntar si veieu que no acabeu de connectar].
5. A tot procés d'aprenentatge es donen les següents etapes: incompetència inconscient(no saber que no se sap una cosa), incompetència conscient(saber que no se sap una cosa) , competència conscient(saber que saps una cosa), competència inconscient(saber una cosa sense requerir un esforç d'haver de pensar en això). Aquesta darrera etapa a la que hem de procurar aconseguir quan volem aprendre una cosa. Us asseguro que passareu cadascuna de les etapes. Això implica que si us costa és normal, no us espanteu i no us deprimiu. (Diuen que si pica la ferida és que s'està curant). Serà bon senyal si trobeu resistència. El sentiment que heu de tenir no ha de ser derrotista i pesimista sino que us ho heu de prendre amb esportivitat i us heu de plantejar com un repte.
6. Què passa si integrem un coneixement de forma errònia? Resposta: Arribem a contradiccions. És un efecte no desitjat ja que requereix doble esforç: el de desaprendre lo que haviem cregut que era correcte i el d'aprendre de forma correcta. [La meva missió és evitar que integreu malament].
7. Com es pot evitar integracions errònies de coneixements? Resposta: Amb mecanismes de seguretat com: controls periòdics de seguiment als alumnes o preguntant als professors les possibles contradiccions que es vagin trobant.
8. Tot i que lo ideal seria fer un seguiment personalitzat individual heu de ser conscients que en un curs amb vàrios alumnes el profe ha de treballar en conjunt i la velocitat de creuer serà la de conjunt. Per sort en el vostre cas sou un grup força homogeni si ho comparem amb altres que l'atzar no m'ha evitat de conèixer. Malgrat "l'inconvenient" de l'ensenyament de grup i les dinàmiques de grup també desitjaré amb molt de gust tenir un tracte personal individual per solucionar els dubtes i tractar les particularitats. Les necessitats dels individus són diferents i requereixen un tractament no estàndard.
9. Aprendre és adaptar-se a conviure amb circumstàncies noves.
10. La suma de la capacitat d'aprenentatge + l'experiència prèvia determina la velocitat d'aprenentatge. Com que sou diferents la velocitat òptima serà diferent per a cadascú. Heu de comptar amb això. Per tant una mica de paciència si ets ràpid i una mica de premura si ets menys ràpid.

Encantat de la vida si puc ser un bon catalitzador per vosaltres per fer-vos guanyar velocitat.

[Continuarà...]

EL BLOG DEFINITIU - APUNTSWEB.ALOXA.COM

Des de fa ja cursos he estat buscant la manera d'articular els apunts d'una forma més estructurada. Fins i tot tinc un portal en marxa, que pretén ser de l'estil de http://desarrolloweb.com Aquest portal té, entre d'altres coses, un fòro, un Wiki, un motor de cerca, etc...

El meu domini ALOXA el tinc pensat per la divulgació i l'ensenyament.


Mentrestant, com a mesura ràpida el sistema de Blogs em continua agradant tot i que Blogger el trobo una mica limitadet ja que encara no permet categoritzar. Té altres aventatges però.

O sigui que estic posant ordre i passant articles i creant de nous al següent BLOG http://apuntsweb.aloxa.com que m'he instal·lat al meu servidor. Un dels avantatges d'aquest blog, fet amb el motor WordPress, és que admet categories i es pot estructurar, cosa que de moment amb blogger no és possible.

Apunteu l'adreça:
http://apuntsweb.aloxa.com


Per cert, s'admeten suggerències de continguts. Si voleu que amplïi algun contingut només m'ho heu de dir. De moment mitjançant aquest blog en el que llegiu això.

ACTIONSCRIPT, fotogrames, botons i instàncies de clip

Podem posar accions d'ActionScript bàsicament a tres llocs:

FOTOGRAMES:

Cal tenir seleccionat un fotograma clau abans.

---

BOTONS:

Cal tenir seleccionat un botó. [Cal tenir seleccionat el botó però no estar a dins del botó]. La sintaxi de ActionScript que cal posar als botons és:

on(event de botó){ accions; }

Els events que admeten els botons poden ser entre d'altres els següents: release(alliberar), press(pressionar), rollOver(lliscar per sobre, rollOut(sortir), ...

---

INSTÀNCIES DE CLIP

Cal tenir seleccionat una instància de clip.[Però no estar a dins del clip]

onClipEvent(event de instància de clip){ accions; }

Els events que admenten els clips poden ser entre d'altres: mouseDown(tenir apretat el botó del ratolí), enterFrame(quan es reprodueix un frame d'aquesta instància, mouseMove(quan es mou el ratolí),...

* PNGs amb graus de transparència també per Internet Explorer, mitjançant filtres

PNG amb transparència també per Internet Explorer. Com ja sabeu a Internet Explorer tenim el problema que els PNG-24 amb fons transparents no es veuen correctament mentre que a Firefox sí.

"Sense Embarg", que diria aquell..., els de Cristalab expliquen com fer-ho mitjançant l'ajuda d'uns estils CSS, que per cert només funcionen a Internet Explorer, que són uns filtres. En el llibre que us vaig recomenar de CSS i DHTML que us vaig posar a la bibliografia també parlen d'alguns CSS que només funcionen en un dels dos navegadors. Per internet hi ha una sèrie de estils CSS que se'ls hi diu filtres. Jo no us els vaig comentar llavors per que interessava que veiessiu els que funcionen sempre. Però en aquell llibre surten reflexats i a la internet també en trobareu.

Aquí us poso l'adreça del tutorial de Cristalab per aconseguir que els PNG, que com ja sabeu admeten graus de transparència, es visionin correctament a Internet Explorer també.

HTML (4a part) - Etiquetes META

Les etiquetes meta serveixen sobretot per indexar les pàgines web als cercadors. També tenen poden servir per emmagatzemar altres informacions. Anem a fer un recompte, tot i que us recomano que continueu investigant vosaltres a internet per averiguar quines etiquetes META hi ha.

Per altra banda cal que us digui que a les plantilles de Dreamweaver, ara que ja en sabeu fer, el programa Dreamweaver genera una regió editable al HEAD de totes les pàgines "filles", cosa que ens permetrà donar-li a cada pàgina creada a partir d'una plantilla les etiquetes META que s'escaiguin per cada una de les pàgines de forma individualitzada.

Cal dir també que les etiquetes META són etiquetes solteres, com altres que coneixeu: BR, IMG, HR, etc...

ETIQUETES META PER INDEXAR LES WEBS ALS CERCADORS

• Keywords. [ <meta name="keywords" content="restaurant, barcelona, restauració, dinar, sopar, dinars, sopars, categoria, sortir"> ]


• Description. [ <meta name="description" content="El restaurant Cal Trago a prop del mercat de Sant Antoni, al Poble Sec, és tradicional i acollidor oferint tota mena de plats de la cuina popular catalana."> ].

ETIQUETES META PER INDICAR ALFABETS

• Charset. [ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> ]

ETIQUETES META PER REFRESCAR LA PÀGINA

• Refresh.. Redireccionant a un altre document [ <meta http-equiv="refresh" content="120;URL=http://cal-trago.com/menu.html" > ]
  


• Refresh.. Refrescant el mateix document [ <meta http-equiv="refresh" content="120" > ]

Link d'una web d'un restaurant feta en Flash

esta página me parece estupenda para un restaurante.

http://www.sumoll.com/web.html
per Guadalupe Cervilla

Guadalupe, una alumna anterior va trobar aquesta web feta en Flash. Això pot servir per inspirar-vos.

Gràcies Guadalupe. Et desitjo sort.

RECURSOS para FLASH

Pagina con muchas ANIMACIONES para ESTUDIAR

Efectos en FLASH

Gràcies Fede, jo també, a poc que pogui us en posaré més links.

DREAMWEAVER - FLASH AMB FONS TRANSPARENT A UNA WEB

A dreamweaver podem donar-li la ordre que un flash tingui fons transparent, de tal manera que es pot arribar a integrar millor un flash amb la pàgina web en la que es troba. Per fer-ho ho hem de fer seguint els següents pasos.

1) Sel·leccionar el flash i apretar el botó que posa "paràmetres".


2) A la finestra que surt posar el paràmetre "wmode" i com a valor "transparent".

Càrrega de text extern i variables amb FlashVars

Hem vist en una explicació anterior com carregar text des d'un arxiu extern mitjançant LoadVars. Per altra banda a l'article de incloure MULTIMÈDIA a un arxiu HTML heu vist ja les etiquetes EMBED i OBJECT(Cliqueu aquí). Quan nosaltres col·loquem Flash a una pàgina web el codi que li posa és té aquest aspecte.

Fixeu-vos que hi ha una variable tant a la etiqueta PARAM corresponent al grup d'etiquetes lligats a la etiqueta OBJECT que interpreta InternetExplorer i a la etiqueta EMBED que es diu flashvars a dins del codi HTML de la pàgina. Doncs bé, aquesta és una altra forma de carregar tant text extern com variables a un arxiu de Flash és mitjançant "FlashVars" que hi haurà en el codi HTML de la pàgina on col·loquem el FLASH.

Això és fantàstic de cara a les pàgines creades dinàmicament amb llenguatges de servidor com PHP o ASP, aquells llenguatges que actuen al servidor i que generen pàgines web dinàmiques, és a dir que re-escriuen el codi HTML. Quan sapigueu PHP li veureu una aplicació.

HTML A DINS DE FLASH? (3a part), Estils CSS admessos a dins de FLASH

INTRODUCCIÓ: Hem dit en POSTS anteriors que dintre del FLASH podem posar HTML. També hem dit que a partir del FlashMX2004 podiem incorporar estils CSS. A l'igual que passava amb HTML(en que les etiquetes que admet són un subconjunt de HTML) Flash admet un subconjunt d'estils dins de les espcificacions de CSS1.A continuació us relatarem quins són:

ESTILS CSS ADMESSOS A FLASH

HTML A DINS DE FLASH? (2a part), Carregant el text des d'un arxiu de text extern.

OPCIÓ B(TEXT HTML CARREGAT DES D'UN ARXIU EXTERN mitjançant la funció LoadVars.):

TUTORIAL

1. En un arxiu de text escrivim el següent:
   

   myText=<B>HOLA</B><BR>Això és un text
    que es troba
    en un arxiu extern
   i que es carrega en aquesta pel·lícula FLASH.

2. Al flash creem un camp de text dinàmic i li posem com a nom de la variable(cosa que ja hem fet en altres ocasions com per exemple en el PRELOADER) myText.
3. En un fotograma o a un botó hem de posar l'ActionScript següent:

• loadVariablesNum("arxiu.txt", 0);

  
  
  
  NOTA:
  

  • Us recomano que feu servir l'assistent d'Script i busqueu la funció LoadVariables on podreu posar els paràmetres d'una forma més WYSIWYG de tal manera que veureu un camp de text per posar la URL. Aquesta URL si fos relativa ha de ser relativa respecte a l'arxiu SWF.
  • I si aquesta ordre la col·loqueu associada a un botó heu de posar naturalment

    On(release) {
    loadVariablesNum("arxiu.txt", 0);
    }

  
  

Descarregeu l'exemple aquí.

---

HTML A DINS DE FLASH? (1a Part)

Anem a veure. Posar un Flash a dins d'una pàgina web amb el Dreamweaver és senzill, és com col·locar una imatge però amb un altre botó. Però, posar HTML a dins d'una pel·lícula flash?

Flash admet la inclussió a dintre de camps de text dinàmics d'algunes etiquetes HTML. Amb la qual cosa, no només ens serveix HTML per fer pàgines web amb el bloc de notes o amb el Dreamweaver. A partir del FlashMX ja podiem incorporar HTML i a partir del FLASH MX2004 podiem incloure HTML i fins i tot CSS a dintre dels arxius SWF.

Ara no només els navegadors sabenn interpretar HTML i CSS. Flash també en sap. Una altra raó més per saber HTML. Però aquest cop amb els aventatges de FLASH i dels documents HTML.

ETIQUETES HTML ADMESES A FLASH.
De tota manera heu de saber que les etiquetes d'HTML que admet són un subconjunt de les etiquetes HTML, no totes, que us relato a continuació:

• A, que ja sabeu que serveix per posar links amb el seu atribut href, el qual admet com a possibles valors URLs relatives o absolutes. Si posem URLs relatives han de ser relatives al document SWF. També inclou l'atribut target.
  
• B, per fer negreta.
• BR, per fer salt de línia.
• FONT, amb el seus atributs FACE, SIZE, COLOR.
• IMG amb el seus atributs SRC, WIDTH, HEIGHT, ALIGN(amb valors: left i right), HSPACE i VSPACE i l'atribut ID que especifica el nom de la instància de clip de pel·lícula(creada per Flash Player) que conté l'arxiu d'imatge, SWF o el clip de pel·lícula incorporat.
• I, per fer cursives.
• LI, per fer elements de llista. Cal dir que Flash no reconeix OL i UL.
• P, per fer paràgrafs, amb els atributs; ALIGN(amb valors: left, center, right i justify), CLASS(per definir el nom de l'estil de cascada que volem aplicar-li a aquest paràgraf).
• TEXTFORMAT, que permet utilitzar un conjunt d'atributs que controlen entre d'altres coses, l'interliniat, la sangria, els marges i les tabulacions. Pot combinar les etiquietes <TEXTFORMAT> amb les etiquetes HTML incorporades. Els atributs que ens posar aquesta etiqueta són:
  

• BLOCKINDENT, per especificar la sangria del bloc en punts.
• INDENT, per especificar la sangría esquerra fins el primer caràcter del paràgraf i que també admet números sencers negatius.
• LEADING, interliniat.
• LEFTMARGIN
• RIGHTMARGIN
• TABSTOPS, que especifica el número de tabulacions personalitzades com una matriu de sencers no noegatius.
• U, per subratllar.

CARÀCTERS ESPECIALS QUE ADMET FLASH

• & lt; (NOTA: sense espais), per fer el signe <
• & gt; , per fer el signe >
• & amp; per fer &
• & quot; per fer cometes "
• & apos; per fer apòstrofes o cometes simples '
• FLASH també admet codis de caràcters explícits com & #39 (ampersand - ASCII) i &amp;amp;amp;amp;amp;amp;amp; #x0026; (ampersand - Unicode)

---

COM INCLOURE HTML A FLASH

OPCIÓ A(A UN CAMP DE TEXT DINÀMIC O UN CAMP D'INTRODUCCIÓ DE TEXT):
Si tenim un camp de text dinàmic o un camp d'introducció de text se'ns habilita el botó següent:
. Llavors el podem apretar per indicar que volem que a aquest camp de text incorporarem HTML.

OPCIÓ B(TEXT IMPORTAT D'UN ARXIU EXTERN):
Per a això caldrà ActionScript. En el següent POST us ho explico.

HTML (2a part) - MULTIMÈDIA (+ Etiquetes i + Atributs)

Amb lo que sabeu fins ara d'HTML i lo que fem a continuació tindreu més punts d'ancoratge per saber en què fixar-vos en el Dreamweaver. Potser amb aquestes etiquetes, a diferència de amb les anteriors no aplicarem tant els estils CSS per millorar l'aspecte però sí podrem controlar dinàmicament mitjançant les funcions javascript que incorpora el mateix dreamweaver aquests elements multimèdia.

Introducció de sons a les pàgines web.

BGSOUND

• BGSOUND. És la etiqueta que serveix per posar un só de fons a una pàgina web. Aquesta etiqueta és propietat de Microsoft amb la qual cosa només serveix per InternetExplorer.
• La seva sintàxi és:
  < BGSOUND src="URL d'un arxiu de música" loop="1" balance="0" volume="0" > </BGSOUND>
• Els seus atributs principals són:
  
• SRC, que igual que passa a la etiqueta IMG serveix per indicar la URL on està el recurs sonor que volem que s'escolti. Els formats d'arxius que admetia al començament eren arxius midi i WAV. Però en versions més recents del navegador Iexplorer també admet altres formats com AU i MP3
• LOOP, que ens serveix per indicar les vegades que volem que se senti aquest só. Si posem com a valor: "infinite" aquest so es reproduirà indefinidament.
• VOLUME, serveix per indicar el volum que volem que tingui on 0 és el valor màxim i -10.000 és el valor mínim.
• BALANCE, amb valors entre -10.000 i 10.000 estableix la força que ha de tenir el só en un altaveu o en l'altre. 0 és el valor central.
  
• Aquesta etiqueta té més atributs que els podeu veure aquí, com disabled, delay, id, class, controls, etc... Fins i tot a Internet Explorer mitjançant Javascript es pot controlar de forma interactiva aquests paràmetres.
• Més informació aquí.
  
• BGSOUND és

Lo que vé a continuació tant serveix per só com per incorporar vídeos.

---

Introducció de sons i vídeos a les pàgines web.

EMBED

• EMBED. Etiqueta originària de Netscape per incorporar sons i que després Internet Explorer va assumir i perfeccionar. Aquesta etiqueta serveix per incloure a la web arxius que no són reproduibles amb les funcions bàsiques dels navegadors i que requereixen de la presència d'un plug-in (complement que no pertany a un programa i que augmenta les prestacions d'un programa).


• Quan incorporem un objecte EMBED el navegador inclourà botons de play i stop i regulador de volum.


• La sintàxi de la etiqueta EMBED és la següent:
  <EMBED atribut1="n" atribut2="o" > </EMBED>


• ATRIBUTS DE LA ETIQUETA EMBED:
• SRC, que serveix per indicar la URL del recurs multimèdia.
• LOOP, que admet com a valors possibles un número natural, true(es reprodueix indefinidament) i false(per indicar que es reprodueix només un cop). Només serveix per NETSCAPE.
  
• PLAYCOUNT, Equivalent de LOOP per Internet Explorer. Valors possibles: números naturals per indicar el número de vegades que volem que es reprodueixi.
  
• TYPE, serveix per que el navegador sàpigue amb quin plugin s'ha de reproduir. Com a valors podria prendre: audio/midi, audio/wav,...
  
• AUTOSTART, Amb valors true/false indica si volem que comenci reproduint-se o no.
  
• PLUGINSPAGE, Per indicar la URL de la pàgina on es pot descarregar l'usuari el plugin en cas que el navegador no sàpigue reproduir el tipus d'arxiu.
  
• NAME, que indica un nom per poder referir-nos a l'objecte embed mitjançant javascript.
  
• VOLUME, serveix per indicar el volum amb que volem que es reprodueixi. Els valors que accepta van de 0-100, sent per defecte 50 a PC i 75 a Mac.
  
• ATRIBUTS DE LA ETIQUETA EMBED QUE FAN REFERÈNCIA A LA CONSOLA
• HIDDEN, amb valors TRUE/FALSE indica si volem que es vegi o no la consola que li permet a l'usuari regular el volum i la reproducció.
  
• WIDTH, que indica en píxels o % l'amplada de l'objecte embebit.
  
• ALIGN, que té com a valors top/bottom/center/baseline/left/right/
  texttop/middle/absmiddle/absbotom, a l'igual que la etiqueta IMG.
  
• HSPACE, que serveix per indicar un marge horitzontal a banda i banda.
  

---

OBJECT

• La etiqueta OBJECT es va implementar a HTML 4.0 amb la funció de l'anterior però sembla que en Netscape no es va implementar(cosa que haurem de tenir en compte amb les pel·lícules flash, sense anar més lluny) quedant restringit pràcticament a Internet Explorer.


• La sintàxi de la etiqueta OBJECT és una mica més complexe ja que requereix d'etiquetes PARAM on es defineixen alguns paràmetres de l'objecte que incorporem:
  <object atributo1="valor1" atributo2="valor2" ... atributoN="valorN">
  <param name="nombre" value="valor">
  <param name="nombre" value="valor">
  
  ...
  
  </object>


• ATRIBUTS: A la pàgina web aquesta us ho explica molt bé. Desarrolloweb és una pàgina molt recomenable i que us recomano per que aprengueu bé això.
  

ActionScript - Càrrega externa de variables

Hem vist en una explicació anterior com carregar text des d'un arxiu extern mitjançant LoadVars. Per altra banda a l'article de incloure MULTIMÈDIA a un arxiu HTML heu vist ja les etiquetes EMBED i OBJECT(Cliqueu aquí). Quan nosaltres col·loquem Flash a una pàgina web el codi que li posa és té aquest aspecte.

Fixeu-vos que hi ha una variable tant a la etiqueta PARAM corresponent al grup d'etiquetes lligats a la etiqueta OBJECT que interpreta InternetExplorer i a la etiqueta EMBED que es diu flashvars a dins del codi HTML de la pàgina. Doncs bé, aquesta és una altra forma de carregar tant text extern com variables a un arxiu de Flash és mitjançant "FlashVars" que hi haurà en el codi HTML de la pàgina on col·loquem el FLASH.

Això és fantàstic de cara a les pàgines creades dinàmicament amb llenguatges de servidor com PHP o ASP, aquells llenguatges que actuen al servidor i que generen pàgines web dinàmiques, és a dir que re-escriuen el codi HTML. Quan sapigueu PHP li veureu una aplicació.

Cap on va l'HTML -- - - -- - - ----> XHTML

http://www.w3c.es/Divulgacion/Guiasbreves/XHTML

Curs de Flash - mini

A Webexperto teniu molta info per continuar aprenent. Teniu un petit curs sencer.

Més recursos interessants d'ActionScript

As-Tolkit

MacTween

Tutorials de Cristalab recomenats de ActionScript

Ara que ja hem fet alguns exercicis d'ActionScript a classe, que ja coneixeu més bé com és la seva sintaxi, com es defineixen variables, etc... aniria bé que també fèssiu els de Cristalab, per exemple. Us recomano els següents:


MENU AMB EASING PER "NEÒFITS"

Botons amb Fade-In i Fade-Out

Menu en Flash con slider Hem fet una cosa per l'estil en l'exercici de menus amb inèrcies.

De moment això. Ja us en posaré més.

Cristalab _ controlando la aceleración con ActionScript

Aquí us expliquen molt bé de quines equacions matemàtiques depenen les acceleracions. El món físic es pot imitar molt bé amb aquestes equacions quan volem animar programant.

Equacions de easing(acceleracions)

Dintre d'aquesta pàgina hi ha un enllaç que porta cap un constructor de funcions polinòmiques. Està "teta marinera" si coneixeu una mica de mates i física per definir, entre d'altres coses, moviments programats amb ActionScript.

Constructor de funcions polinòmiques


Més fisica en Flash:

Simulació de sistemes complexos

COS RÍGID


REBOTS GRAVITACIONALS

PASSANT EL MOTXO!!!! Què passada!!!

http://yugop.com/

Cartell Roger

Cartell Protesta László

Recopilant adreces de webs en Flash

http://www.masquepremios.com/
http://www.eatcinema.com/
http://yugop.com/index.asp
http://www.digitlondon.com/
http://www.digitlondon.com/archive/fabris/



http://www.glassbooks.co.uk
http://www.ideavia.com/
http://www.httpcomunicacio.com
htttp://www.panrico.com
http://www.puig.com/selectLan.asp (esta es muy sencilla)
htttp://www.carat.com (práctica i simple però efectiva)
http://www.kiven.es (curiosa però poc intuitiva)
htttp://www.montaner.com
http://www.mirallestagliabue.com/

gràcies Cèlia

BOTONS INVISIBLES - EXERCICI DE MOTORS (6a part) ACTIONSCRIPT-ALEX

Variació de l'exercici anterior:

En comptes de fer servir dos botons triangulars fer servir dos botons invisibles
col·locats a sobre del clip(a 'extrem superior i inferior respectivament) per que l'usuari pogui desplaçar-lo cap amunt o cap avall quan passi per sobre del text.

LIMITAR MOVIMENTS 1 - EXERCICI DE MOTORS (5a part) ACTIONSCRIPT-ALEX

Introducció:
Amb lo que sabeu de motors i de condicionals podem limitar moviments. Això ens pot anar bé per fer scrolls de maquetacions de text amb imatges però que voldrem que tinguin límits per que no s'escapin.


Objectiu de l'exercici: Heu de fer que un clip amb text maquetat es desplaci cap amunt fent el que anomenem un "scroll". Observeu el croquis.



Fixeu-vos que posarem una màscara. La raó és estètica, per deixar marges a dalt i abaix. Amb la màscara la instància "maq1" no es veurà per fora de la màscara. Es veurà com segueix:




Pasos a seguir:

1) Crear el clip de película maqueta i posar-li com a nom d'instància "maq1". Heu de fer que la creu del clip estiqui a dalt de tot.

2) Crear els botons que ens serviràn per controlar si pujen o si baixen.

3) Distribuïr aquests objectes en capes i fer la capa màscara. Veieu la figura:


4) Programar clip maqueta. Tal i com vam fer a l'article anterior "TUTORIAL DE MOTORS (3a part) ACTIONSCRIPT-ALEX", el concepte de motor el definirem en el mateix clip. Per tant per dins del clip programarem dos bucles. Veieu com és la línia de temps del clip maqueta:

Veieu a continuació el codi que ha d'anar a cada un dels fotogrames de la capa accions:

FOTOGRAMA 1

//per evitar que es posi en marxa
stop();



//per definir la posició final
ymaxim=16;

//per definir la posició inicial
yminim=-126;


//Aquests valors els he obtingut colocant el
//clip manualment i mirant la seva coordenada y

FOTOGRAMA 2

// Per que puji la instància "maq1"
// noteu que disminueix en una unitat
// ja que l'eix de les Y creix cap avall


this._y=this._y-.25;

//he posat com a increment _0.25 per
//que no vagi tant depressa com
//aniria amb valor 1

FOTOGRAMA 3

gotoAndPlay(2);

FOTOGRAMA 4

// Per que baixi la instància "maq1"
// noteu que disminueix en una unitat
// ja que l'eix de les Y creix cap avall


this._y=this._y+.25;

FOTOGRAMA 5

gotoAndPlay(4);

5) Programar els botons per controlar el clip.

Veieu a continuació el codi que ha d'anar als botons:

BOTÓ PUJAR

//per que es posi en marxa
//el primer bucle
on(press){
this.maq1.gotoAndPlay(2);
}

on(release){
this.maq1.stop();
}

BOTÓ BAIXAR

//per que es posi en marxa
//el segon bucle
on(press){
this.maq1.gotoAndPlay(4);
}

on(release){
this.maq1.stop();
}

OBSERVACIÓ: FINS ARA NO HEM POSAT LIMITACIONS. COMPROVEU QUE AMB LO QUE TENIM FINS ARA LA INSTÀNCIA "maq1" encara pot sortir-se. En el pas següent s'explica com posar limitacions.

6) Limitar el moviment de la instància "maq1". Per fer això tenim dues opcions que relatem a continuació:

Posar la limitació als botons.

Veie-m'ho amb el BOTÓ BAIXAR com a exemple:

//per que es posi en marxa
//el segon bucle

on(press){

if(this.maq1.yminim<=this.maq1._y<=this.maq1.ymaxim) { this.maq1.gotoAndPlay(4); } else { this.maq1.stop(); }

}



//per que s'aturi quan deixem anar el dit del ratolí

on(release){

this.maq1.stop();

}

Posar la limitació als bucles.
Veiem com a exemple el codi que hauriem de posar llavors al primer bucle(fotograma 2) del clip maqueta com a exemple:

// Per que puji la instància "maq1"
// noteu que disminueix en una unitat
// ja que l'eix de les Y creix cap avall.

if(this._y<=ymaxim){
this._y=this._y+.25;
}
else
{
this.stop();
}

Teniu aquest exemple a la carpeta de l'FTP lesClasses/2007-12-09/ el seu nom és:
scroll_maqueta.fla

ACTIONSCRIPT -ESTRUCTURES DE CONTROL - Condicionials

Les estructures de control són una de les característiques principals dels llenguatges de programació. Amb aquests tipus d'estructura otorguem als programes que fem el poder de "decidir".

Heu fet HTML i CSS i heu vist que aquests llenguatges no tenen estructures de de control. No són per tant llenguatges de programació. Simplement són instruccions per que els navegadors sàpiguen com representar les pàgines.

D'estructures de control tenim les condicionals(IF-THEN-ELSE, les de cas(SWITH-CASE) i d'altres.

A continuació us explico una mica la estructura condicional.

ESTRUCTURA CONDICIONAL(IF-THEN-ELSE):
La més famosa de les estructures de control dels llenguatges de programació segurament és
la condicional.

La sintàxi d'una condicional és:

if(condició){
accions;
}

Això traduït al nostre llenguatge natural vól dir el següent: "Si s'acompleix la condició llavors realitza les accions que tenim definides entre els claudators".


Opcionalment aquesta estructura condicional porta una cua, un afegitó, a continuació. Afegim un "else". Veiem-ho a continuació:

if(condició){

accions;

}

else {

altres accions;

}

Això traduït al nostre llenguatge vól dir el següent: "Si es verifica la condició fes les accions. I si no es verifica llavors fes les altres accions".

NOTA:
1) Una observació. Ningú no ens impedeix que poguem anidar estructures de control dintre d'altres.

if(condició) {

accions;

if(condicióB) {

accionsb;

}

}


else {

if(condicióC) {

accionsC;

}

més accionsD;

}

2)I per altra banda també és possible anidar una estructura de control dintre de les claus dels events dels botons. Per exemple:

on(release) {

if(condició) { accions; }

}

També podem fer servir la estructura IF-ELSEIF.

if(condició) {

accions;

}
elseif(condició B){

accions2;

}

Traduït a llenguatge natural la part ELSEIF podriem dir: "si no es compleix la condició A però es compleix la condició B..."


OPERADORS LÒGICS
També podem utilitzar operadors lògics per definir condicionals més complexes. Per a això fem servir operadors lògics boleans del tipus conjuntiu o AND i disjuntius o OR, que en ActionScript s'escriuen respectivament && i ||.

//Conjuncions boleanes AND:

if(condició) {

accions;

}


//Disjuncions boleanes OR:

if(condició A || condició B) {

accions;

}

Convé que us guieu per les taules de veritat de lògica amb aquests operadors boleans de conjunció o disjunció.

CONTROLAR BRAÇ ROBÒTIC - EXERCICI DE MOTORS (4a part) ACTIONSCRIPT-ALEX

Feu un mecanisme per controlar l'angle de rotació de cada una de les peces d'un braç robòtic.

Aquest exercici serveix per controlar l'enrutament.

Feu servir camps de text dinàmics com a depuradors per saber quin valor tenen les diferents variables.

TUTORIAL DE MOTORS (3a part) ACTIONSCRIPT-ALEX

Quan només volem controlar una sola propietat ( per exemple desplaçar una cosa en una direcció només ) llavors es podria simplificar el motor força. També teniu l'exemple al FTP.

La simplificació consisteix en fer els següents canvis:

A. Eliminació de la instància "motor1" puig que no la necessitem ja.
Volem que el clip q(del qual la instància es diu "q1") es comporti com el motor que teniem en l'exemple anterior. Per la qual cosa programarem ara la línia de temps de q de forma similar a la que teniem al motor amb bucles per avençar o retrocedir.

B. Ús de la propietat _y o _x en contes de la variable i, que teniem al motor.

C. Eliminació de les accions que teniem a la línia de temps principal. Fins i tot amb un sól de fotograma a la línia de temps principal en tindriem prou.

A continuació veieu els elements que farem servir.

---

Fixeu-vos en que la línia de temps principal no assignarem cap acció.

---

I en canvi a la línia de temps del clip de película q hem posat ara els fotogrames amb les accions que en l'exemple anterior teniem al clip motor. Aquí tenim cinc fotogrames que compleixen la mateixa funció havent-hi també dos bucles.

---

A continuació el codi que hi ha a cada fotograma de la capa accions:

FOTOGRAMA1

//per evitar que es posi en
//marxa el motor.

stop();

FOTOGRAMA2

//Per fer que creixi la _x en una unitat

this._x=this._x+1;

FOTOGRAMA3

// per evitar que la peli passi
//al fotograma 4
// i vagi fent així bucles entre els
// fotogrames 2 i 3

gotoAndPlay(2);

FOTOGRAMA4

// per fer que el valor de
// la variable _x disminueixi
// en una unitat.

this._x=this._x-1;

FOTOGRAMA5

// per evitar que la peli torni al
// fotograma 1 i a més també per
// que faci un bucle entre els 3-4

gotoAndPlay(4);

---

A continuació el codi que hi ha als botons:

BOTÓ DRET

// Quan apretem "press" en aquest botó
// enviem a reproduir-se el
// segon fotograma del q



on(press){
this.q1.gotoAndPlay(2);

}


// Quan deixem anar el dit del ratolí
// "release" el q s'atura estigui
// on estigui.

on(release){
this.q1.stop();

}

BOTÓ ESQUERRE

// Quan apretem "press" en aquest botó
// enviem a reproduir-se el
// quart fotograma del q


on(press){
this.q1.gotoAndPlay(4);

}


// Quan deixem anar el dit del ratolí
// "release" el q s'atura estigui
// on estigui.

on(release){
this.q1.stop();

}

TUTORIAL DE MOTORS (2a part)-(ACTIONSCRIPT-ALEX)

Afegits a l'exercici anterior.

En l'article anterior vam definir un clip anomenat motor, del qual a la seva instància li vam posar com a nom d'instància "motor1". La raó per la qual vaig posar-li aquest nom: "motor1" és simplement que vull duplicar aquesta instància i a la còpia posar-li de nom "motor2". Així amb dos motors independents podrem controlar també moviments i propietats independents. Per exemple: entre d'altres coses podriem controlar tant la posició vertical com la horitzontal.

ALTRES PROPIETATS(de moment):
_x
_y
_alpha(amb valors de 0-100)
_rotation(angle)
_currentframe (informa o defineix el fotograma en el que està la instància)
_width (informa o defineix la amplada de la instància)
_height (informa o defineix de la alçada de la instància)
_xscale (informa o defineix de la escala horitzontal de la instància)
_yscale (informa o defineix de la escala vertical de la instància)

[Això s'ampliarà amb les noves propietats que incorpora Flash8]

EXERCICI:

Dupliqueu la instància "motor1", canviant-li el nom a "motor2", "motor3",... per cada propietat que volgeu controlar. També cal que dupliqueu cada parell de botons per controlar cadascún d'aquests altres motors.

Cada parell nou de botons que feu haurà de controlar un motor diferent per tant fixeu-vos d'assegurar-vos que us esteu referint a la instància adequada. Fixeu-vos en els enrutaments.

Haureu d'afegir línies al fotograma 1 de la línia de temps principal per poder controlar aquelles altres propietats. Per exemple:

this.q1._y=this.motor2.i;
this.q1._rotation=this.motor3.i;
etc...

[ A veure que s'us acut per controlar aquestes altres propietats. ]

TUTORIAL DE MOTORS (ACTIONSCRIPT - ALEX )

Recapitulació

1. Ja heu conegut la finestra "Acciones".
2. Heu fet control de línies de temps de películes.
1. Heu fet canvi d'escenes a la línia de temps principal.
   
2. Heu activat la línia de temps d'un clip de película en que hi havia una oscilació. Recordeu que calia posar noms a les instàncies per poder referir-nos a ella.
   
3. Heu anidat un clip de película a dins de l'estat sobre d'un botó.
   
4. Heu fet una botonera per poder simular altres estats que no estàn previstos als botons reals de flash. Aquest exercici és continuació del que es va fer el divendres però en una aplicació pràctica diferent.


3. Hem fet servir el punt de mira per enrutar correctament el cap a la instància que volem, això sí: prèviament les hem nomenades.

Introducció
L'exercici que farem a continuació és la base per poder entendre altres d'exercicis importants que vindràn més endavant. Amb aquest exercici a més de utilitzar lo que heu fet fins ara com a novetat:

1. Coneixereu les variables i la seva utilitat.
   
2. Veureu entre d'altres les propietats: _x i _y i la seva sintàxi.
   
3. Com que les variables seràn locals caldrà saber fer correctament els enrutaments per poder referir-nos, no tan sols a la instància concretas sino també a la variable d'aquella instància concreta.

NOTA: La manera amb que s'explica aquest exercici no és la única forma de fer-ho. Amb lo que sabeu fins ara s'ha de fer així. Es podria simplificar i fer variacions a partir d'aquest. Està presentat així per que us fixeu en coses com els enrutaments i variables i també per que separeu conceptes.

---

Objectiu d'aquest exercici.
Desplaçar el quadrat del mig que té com a nom d'instància "q1" a voluntat de l'usuari que ho controlarà amb els botons.


Mireu el croquis.

Quan els botons els apretem posen en marxa el motor1 i la instància q1 es desplaça.

[ "Això són faves comptades!". ;) ]

Etapes a seguir:

1. CREAR ELS BOTONS I ELS CLIPS motor i q i posar com a noms d'instància respectivament "motor1" i "q1". Hem de procurar que la creu d'aquest clip de película estigui a la cantonada esquerre superior del clip ja que la creu serà el que prendrà com a referència el flash per desplaçar-lo.

---

2. PROGRAMAR LA LÍNIA DE TEMPS DEL CLIP motor.
El clip de película motor el farem servir per generar una variable que anirà creixent o decreixent. El valor d'aquesta variable l'aprofitarem des de fora. Serà una variable de la qual el seu valor serà llegit des de la línia de temps principal.

A) Al clip motor1 han d'haver aquests fotogrames:




CODI DEL FOTOGRAMA 1

//per iniciar la variable i
// i per declarar-la numèrica.

i=0;



//per evitar que es posi en
//marxa el motor quan es reprodueixi la //pelicula.

stop();

CODI DEL FOTOGRAMA 2

//Per fer que creixi la i en una unitat

i=i+1;

CODI DEL FOTOGRAMA 3

// per evitar que la peli passi al fotograma 4
// i vagi fent així bucles entre els
// fotogrames 2 i 3 de tal manera que
// cada volta que passi pel 2
// revaloritzi la variable i

gotoAndPlay(2);

CODI DEL FOTOGRAMA 4

// per fer que el valor de
// la variable i disminueixi
// en una unitat.

i=i-1;

CODI DEL FOTOGRAMA 5

// per evitar que la peli torni al
// fotograma 1 i a més també per
// que faci un bucle entre els f3 i f4
//per que redueixi el valor de
//la variable i...

gotoAndPlay(4);

---

3. PROGRAMAR LA LÍNIA DE TEMPS PRINCIPAL. A la línia de temps principal definirem la propietat _x de la instància "q1" en funció del que valgui la variable i de la instància "motor1". Dit en altres paraules: a la línia de temps principal definirem una mena de correa de transmissió que transmetrà el creixement o decreixementde la variable i del motor a la coordenada x de q1.

FOTOGRAMA 1

//x0 es la posición horizontal
// inicial de q1.

x0=250;



// this..q1._x es la
// coordenada x de q1.

this.q1._x=_root.motor1.i+250;

FOTOGRAMA 2

// para que vuelva al fotograma 1
// para reevaluar el valor de la
// coordenada x de q1

gotoAndPlay(1);

---

4. PROGRAMAR ELS BOTONS per a que l'usuari pogui donar la ordre de posar en marxa el motor i amb això faci que q1 es desplaci cap a la dreta o l'esquerra.


BOTÓ DRET

// Quan apretem "press" en aquest botó
// enviem a reproduir-se el
// segon fotograma del motor1
//
// Recordeu que el segon fotograma
// del motor és aquell que i=i+1;
// és a dir que és el que creix.

on(press){
this.motor1.gotoAndPlay(2);

}


// Quan deixem anar el dit del ratolí
// "release" el motor s'atura estigui
// on estigui.

on(release){
this.motor1.stop();

}

BOTÓ ESQUERRE

// Quan apretem "press" en aquest botó
// enviem a reproduir-se el
// quart fotograma del motor1
//
// Recordeu que el quart fotograma
// del motor és el que la i=i-1;
// es a dir que és el que decreix.

on(press){
this.motor1.gotoAndPlay(4);

}


// Quan deixem anar el dit del ratolí
// "release" el motor s'atura estigui
// on estigui.

on(release){
this.motor1.stop();

}

---

CONCLUSSIONS:
[Ja que aquests exemples no es poden explicar de forma linial... i al principi costa... Fixeu-vos en les connexions].

1. Amb els botons controlem la línia de temps de motor1 enviant a un primer bucle(2-3) o a un segon bucle(4-5). [BOTONS connecten amb MOTOR1]. També amb els butons, quan es deixa anar el dit del ratolí, ordenem que s'aturi el motor1.

2. A la línia de temps principal, al fotograma 1, definim la propietat _x de la instància q1 en funció del que llegeixi que val la variable i del motor1. [BOTONS connecten amb MOTOR1].

En resum. Amb els botons controlem el motor1. I amb els fotogrames de la línia principal de temps controlem el que val el clip de película en funció del que valgui la variable i del motor.

---

COMENTARIS:

ESTUDIEU AQUEST EXEMPLE I TRACTEU D'ANALITZAR EL PERQUÈ DE CADA COSA. TRACTEU DE PREGUNTAR-ME TOTS ELS DUBTES. SI POT SER EN AQUEST BLOG MILLOR AIXÍ PODRÉ AMPLIAR AQUEST ARTICLE.





Teniu un exemple a la carpeta Apunts/Declasse/ en la data d'avui del FTP vostre

Anunci animat

TREBALL D'EQUIP. ANUNCI DE XOCOLATINA.

Formeu equips de 3 persones màxim. Heu de planificar una películeta breu de dibuixos animats amb personatges de la següent manera:

1. Feu un guió.
2. Feu un storyoboard.
3. El personatge principal ha de fer sports d'aventura.



Briefing:
Ha de tenir format 780x200.
Feu servir vàries escenes. 5 escenes màxim.
Ha de reflexar que és el que més agrada als nens. Que els hi dona energia.
Ha d'acabar amb la frase "Xocolata d'acció".

Pes d'una peli Flash

"Com era per coneixer el "pes" d'una animació flash?"
Roger


Gràcies Roger.

Resposta:
Per poder veure el pes d'una peli, des del mateix flash, has de fer el següent:

1. Reproduim la peli. [Ctrol + Enter]


2. Menú Ver > Visor de Ancho de banda.

A la carpeta APUNTS del FTP us poso coses

Benvolguts alumnes

Us faig saber que us poso materials didàctics diversos al FTP a la carpeta APUNTS. Tanmateix, si voleu podeu penjar vosaltres manuals i PDFs.

Composició de moviments

Els símbols tenen la seva pròpia línia de temps. Gràcies a això podem composar moviments. Fins i tot d'aquesta manera és possible combinar interpol·lació de forma i de moviment cosa que abans no podiem.

Però per a això cal que domineu l'anidament de símbols uns a dintre dels altres. Amb els diferents exemples que veieu aquests dies amb els exercicis de composició de moviment esteu començant a entendre a on animar les coses. Recordeu que anidar és sinònim de ficar(= en castellano meter). Veieu l'article que explica com anidar per tant.

Per composar moviment cal anidar símbols uns a dintre dels altres. D'aquesta manera estem ficant línies de temps unes a dintre de les altres.

Anidament de símbols

Anidar vól dir ficar. Anidar símbols vól dir ficar uns a dintre dels altres.
MÈTODE A _ Des de lo global fins a lo local.

1. Crear un nou símbol. Diguem-li GLOBAL.
2. A dins del símbol GLOBAL, editant(o sigui ficant-nos a dins de GLOBAL), crear un altre símbol, diguem-li LOCAL. (o sigui que dintre de GLOBAL fabriqueu el LOCAL).

[NOTA: Aquest mètode seria l'equivalent a crear una carpeta A i dintre de la carpeta A crear una altra carpeta B]

MÈTODE B _ Des de lo local fins a lo global _ embolcallant

1. Crear un nou símbol.
2. [Opcional] Dibuixar i/o afegir altres símbols.
3. Ho sel·leccionem tot i ho convertim en símbol.

[NOTA: A Windows no tenim equivalent. Seria com crear una carpeta i embolcallar-la amb una altra].
MÈTODE C _ Crear per separat i ficar un a dintre de l'altre.

1. Crear dos símbols per separat.
2. Extreure(cortar) un dels dos símbols i enganxar(pegar) a l'interior de l'altre.

[NOTA: A Windows seria com crear dos carpetes per separat i després ficar arrossegant la carpeta B dins de la A].

UTILITAT DE L'ANIDAMENT DE SÍMBOLS

• Empaquetar símbols junts de tal manera que quedin lligats i que poguem otorgar-li un moviment al paquet sencer(com per exemple traslacions d'un cotxe).
• Anidar instàncies per programar amb Action Script.
• Composar moviments.

Editar Símbols

Podem accedir a la línia de temps de cada símbol i editar-lo per dins i us en indico 5 formes possibles per accedir-hi a l'interior:

• Doble click sobre el símbol a l'àrea de treball(que podria ser l'escenari si estigués allà mateix).
• Botó dret sobre el símbol a l'àrea de treball > Edició a l'àrea de treball.
• Botó dret > sobre el símbol a l'àrea de treball Edició en context a l'àrea de treball.
• Botó dret sobre el símbol a la biblioteca > Edició a la biblioteca.
• Doble click sobre el símbol a la biblioteca.

Per què cal accedir-hi a l'interior dels símbols per editar-lo?
Doncs per que, entre d'altres coses, els símbols estàn agrupats i no ens permeten deformar-los.

Observacions i consideracions:

Si estem a dins de la línia de temps d'un símbol i volem tornar a l'escenari o a un símbol més global cliquem a on posa el nom de l'escena o al símbol que englobava a aquest. En el cas de l'exemple si volguèssim sortir del clip "quadres" cap al clip "CAP DE PLOMA" hauria de clickar a "CAP DE PLOMA".

Creació de símbols

MÈTODE A (A partir d'un objecte dibuixat)

1. Dibuixem l'objecte i el sel·leccionem.
2. INSERTAR > CONVERTIR EN SÍMBOLO.
3. Escollim el tipus de símbol i el nomeneu.
4. Col·loquem l'objecte respecte de la creu en cas que volguem que pivoti respecte a on està la creu.
5. Si s'ha d'animar la línia del símbol l'editem i l'animem per dins.

MÈTODE B (Des de zero)

1. INSERTAR > Nuevo Símbolo
2. Escollim el tipus de símbol
3. Dibuixem per dins del símbol
4. Col·loquem l'objecte respecte de la creu per que faci de pivot més tard.

Els símbols

A Flash podem crear uns elements que es guarden a una biblioteca que ens poden fer servir per poder reutilitzar cada vegada que volguem a baix cost d'informació ja que tots els elements de biblioteca que col·loquem sobre l'escenari són representants de la mateixa definició a la biblioteca.

Alguns d'aquests elements de biblioteca que podem crear a Flash es diuen símbols i n'hi ha de tres tipus:

1. Clips de pel·lícula(MovieClips). Els quals "tenen vida pròpia".
   
2. Símbols gràfics. Es sincronitzen amb la línia de temps en la que es troben.
   
3. Botons.

Aquests símbols es poden anidar els uns a dintre dels altres. A més, com que tenen una línia de temps pròpia podem així definir moviments uns a dintre dels altres; és a dir:

podem fer composició de moviments.

D'aquesta manera és possible combinar interpol·lacions de moviment(amb guia o sense) amb interpol·lació de forma.

INTERPOL·LACIÓ DE FORMA

Amb flash a més de les interpol·lacions de moviment podem també fer interpol·lacions de forma, és a dir:"morphings vectorials". El reproductor de flash "sabrà" modificar els vectors que no deixen de ser informació matemàtica. Una altra cosa ben diferent és que nosaltres sapiguem donar-li les instruccions a Flash adequadament i correctament per tal que faci la interpol·lació de forma.
Exemple:

Per fer interpol·lacions de forma es pot fer, de forma similar al que passava amb les interpol·lacions de moviment, mitjançant dos mètodes.

---

MÈTODE A:

1. Dibuixar un objecte a un fotograma.
2. Sel·leccionar el fotograma clau on està el dibuix
3. Anar a la finestra Propietats, desplegar la persiana Animar i escollir la opció "forma".
   
4. Més a la dreta insertar un fotograma clau.

---

MÈTODE B:

1. Dibuixar un objecte a un fotograma clau.
2. Insertar un fotograma clau més a la dreta.
3. Sel·leccionar tots els fotogrames des del primer fotograma clau fins el darrer.
4. Anar a la finestra propietats, desplegar la persiana Animar i escollir la opció "forma".

---

Què es pot fer amb interpol·lacions de forma:

1. Canviar de forma
2. Canviar de posició
3. Redimensionar
4. Girar
5. Canviar de color
6. Animar degradats

---

Què no es pot fer amb interpol·lacions de forma:

1. No es pot agrupar el farcit. Quan es fa això es trenca la interpol·lació de forma i no funciona correctament.
   

   

Màscares

Les màscares en Flash serveixen per deixar veure a través d'elles. Fan la funció de "forats".



Quan hi ha màscares al Flash han d'haver-hi també coses enmascarades, és a dir: coses que es vegin a través d'elles. Dit d'una altra manera, hi haurà capes màscares i capes enmascarades.




Per fer una màscara:

1. Es dibuixa a una capa un farcit amb la forma del forat desitjat. Aquesta forma serà la que farà de màscara. Li posarem com a nom "MASQUI"
2. Creem una capa buida i la posem a sota d'aquesta capa. L'anomenarem "enmascarada".
3. La capa de la màscara, "MASQUI" la convertirem en màscara fent: botó dret i a continuació sel·leccionant la opció "màscara".
4. [Observar que la capa "enmascarada s'ha subordinat a la capa MASQUI i les dues s'han bloquejat amb candaus."]

[ADVERTÈNCIES]

• Les màscares s'han de fer de "farcits". Si hi ha traçats a les capes màscara no s'enmascararà res.
• Les màscares, a diferència de les guies, sí es poden agrupar. Fins i tot es poden animar.

GUIES DE MOVIMENT: INTERPOL·LACIÓ DE MOVIMENT SEGUINT UNA TRAJECTÒRIA DEFINIDA

1. A una capa dibuixar un objecte.
2. Afegir una capa guia i dibuixar un traçat en aquesta capa
3. A la capa de l'objecte "Crear interpol·lació de moviment", crear fotogrames clau i col·locar l'objecte allà on volguem per a cada fotograma clau.
4. Si voleu que l'objecte s'orienti segons traçat sel·leccioneu els fotogrames clau i a PROPIETATS sel·leccioneu la casella ORIENTAR SEGONS TRAÇAT

[ADVERTÈNCIES]

• A la capa guia que només hi hagi traçat. Que no hi hagi cap farcit.
• No agrupeu el traçat a la capa guia.
• No feu cap interpol·lació de moviment a la capa guia(que no deixa de ser una forma d'agrupar).

Exemple:

CANVIS QUE ES PODEN FER A UNA INTERPOL·LACIÓ DE MOVIMENT

Haviem dit el que no podiem fer en l'article anterior. Ara diguem el podem fer.

CANVIS QUE ES PODEN FER A INTERPOL·LACIONS DE MOVIMENT. (Recordeu que heu d'estar a fotogrames clau per a poder efectuar aquests tipus de canvis)

Tocant l'objecte [Modificant paràmetres de la finestra propietats]

1. Canvis de posició
2. Redimensions [Eina transformació lliure]
3. Canvis d'orientació [Eina transformació lliure]
4. Canvis d'opacitat(alpha)
5. Canvis de brillantor.
6. Canvi de "tint"

Tocant el fotograma [Modificant paràmetres de la finestra propietats]

1. Acceleracions
2. Rotacions
3. Orientar segons traçat[Sempre i quan hagueu fet una capa guia amb un traçat que fes de trajectòria]

ADVERTÈNCIES SOBRE INTERPOL·LACIÓ DE MOVIMENT

1. Quan fem una interpol·lació de moviment els objectes, si és que no ho estaven, s'AGRUPEN. Per tant:
• No es poden colorejar
• No podem editar els nodes, "usea" no podem deformar els objectes.
• Un cop fet un objecte, en principi, ja no el podem canviar. L'heu de dibuixar bé abans de crear la interpol·lació.
2. Si intentem fer canvis a un objecte en un "fotograma no clau" accidentalment se'ns pot crear un fotograma clau. Per tant. NOMÉS FEU CANVIS ALS FOTOGRAMES CLAU.
3. Si desagrupem un objecte que estigui a una interpol·lació de moviment LA INTERPOL·LACIÓ ES TRENCA.
4. Si afegim un objecte a un fotograma clau d'una interpol·lació de moviment LA INTERPOL·LACIÓ ES TRENCA.

FOTOGRAMES CLAU, ELS DEL PUNTET

SERVEIXEN PER INDICAR(ESPECIFICAR) CANVIS

REGLA NEMOTÈCNICA. NO OBLIDAR.

MOVIMENTS INDEPENDENTS EN CAPES DIFERENTS.

INTERPOLACIÓ DE MOVIMENT

PROCEDIMENTS PER FER INTERPOLACIÓ DE MOVIMENT

MÈTODE A:

1. Dibuixar l'objecte que volguem animar amb interpol·lació de moviment.
2. Sobre l'únic fotograma clau(el primer) fer botó dret -> Crear Interpol·lació de moviment.
3. En un fotograma més a la dreta de la mateixa capa fer botó dret ->Insertar Fotograma Clau.
4. Amb el dial (aquella agulla de color vermell) colocat en aquest fotograma clau que acabem de crear desplaçarem l'objecte per l'escenari.

MÈTODE B:

1. Dibuixar l'objecte que volguem animar amb interpol·lació de moviment.
2. En un fotograma més a la dreta de la mateixa capa fer botó dret ->Insertar Fotograma Clau.
3. Seleccionar tots els fotogrames inclosos els fotogrames clau i fer botó dret -> Crear Interpolació de moviment.
4. Amb el dial (aquella agulla de color vermell) colocat en aquest fotograma clau que acabem de crear desplaçarem l'objecte per l'escenari.

EXERCICI FERRARI

Calca i converteix en vectorial aquest Ferrari. Més endavant l'animarem.



http://www.new-dream.de/image/wallpaper/auto/ferrari/ferrari-02.jpg

Farem un exercici amb aquesta foto.

Més exercicis de dibuix vectorial en Flash

1. CONTROL DE LA GEOMETRIA NUMÈRICAMENT. POLIGONS, TRIANGLES,...
2. COMPOSICIÓ DE PUNTS DE LLUM I OMBRES. L'exercici de la bola.
3. CONTROL DE LES CAPES: Exercici de la broxeta i de les anelles olímpiques.
4. CONTROL DE L'ALINIAMENT I LA DISTRIBUCIÓ: Exercicis de foradaments concentrics d'objectes geomètrics. Exercici de construcció del monestir de Ripoll. Exercicis de logotips.
5. TEXTURITZACIÓ. Fabricació d'una textura matxembrada per aplicar al Monestir de Ripoll.
6. MODELATGE D'OBJECTES PER CALC. Exercici de modelatge de Ferrari. [Tècniques de contacte, tall i de ploma]
7. SIMULACIÓ DE VOLUMS: Exercici de composició de degradats al Ferrari.
8. [Continuarà amb lo que farem d'elements de biblioteca].

Exercicis per pràticar dibuix vectorial en Flash

Tècniques fonamentals de dibuix vectorial en Flash

1. Tècnica de connectar(gràcies al magnetisme amb flash).
2. Tècnica de tallar.
3. Tècnica de foradar.
4. Tècnica de fusionar.
5. Tècnica de deformar. La ploma de bèzier i editant nodes. Amb fletxa negra(eina de sel·lecció) i fletxa blanca(eina de subsel·lecció).
   
6. Tècnica del pivot extern.

La resta de recursos de modelatge depenen d'aquestes.

ROLLOVERS DIRECTES I INDIRECTES AMB PHOTOSHOP( I IMAGE READY) ARRISANT EL RÍNXO

Alex, perquè quan faig l'exercici de les fotos superposades amb 2 parts de la imatge únicament, no se m'obre la imatge del damunt dues vegades com quan ho faig amb 4 parts, que se m'obre quatre vegades?. Sinó m'he explicat bé ho tornaré a repetir.
Mercès

Intro
A classe hem fet dos exercicis de Rollovers. El segon que vam fer del quadrat amb els quatre sectors us el poso en aquest post i us afegiré la part que queda de rollovers indirectes que a versions anteriors de Image Ready ja es podia fer.

Recordeu que la paraula Rollover vól dir en anglés "lliscar per sobre"("deslizar por encima"). És una de les formes de generar interactivitat en funció de on posa el ratolí l'usuari i què fa amb ell.

---

ROLLOVERS DIRECTES

1. Creem un document nou[Archivo > Nuevo] de 700x350 amb fons transparent. [És una bona mida per que càpigue en el forat estàndard dels navegadors, ja sabeu que és millor que no sobrepassi les mides: 780x430]. Podem començar al photoshop i passar-lo després a l'ImageReady o començar directament amb ImageReady.
   
   
2. Pintem la única capa que tenim amb el bot de pintura a fí que s'ompli d'un color de fons i que tota la capa sigui plena de píxels.
3. Posem guies als centres vertical i horitzontal i als costats aprofitant que aquesta capa està ocupada ja que hi ha magnetisme.
   
4. Amb la calculadora trobarem la tercera part de l'amplada, o sigui que fem 700/3 i obtenim: 233.
   
5. Creem una altra capa per sobre de la que teniem inicialment.
6. Fem una sel·lecció quadrada de 233px per 233px
   
   i l'arroseguem fins que s'enganxin els seus centres vertical i horitzontal amb les guies aprofitant-nos del magnetisme que hi ha a photoshop. I també aprofitant-nos del magnetisme de les guies amb les sel·leccions posarem una guia horitzontal amb l'extrem superior del quadrat i una guia inferior amb l'extrem inferior.
   
7. Aquesta sel·lecció la guardarem per si la necessitem més endavant. La podem guardar com a quadret. [Sel·lecció > Guardar Sel·lecció].
   
8. A continuació obro dues fotos que siguin més grans de 233px tant d'ample com d'alçada.
   
9. Amb la eina de sel·lecció quadrada farem una sel·lecció quadrada tot mantenint les proporcions i enquadrem la zona que volem.
   
   Quan ja sabem quin troç de la imatge volem fem Imagen > Recortar.
   
   
   
10. Amb la eina "mover" arroseguem les dues imatges fins al llençol de la imatge en la que estem treballant, la de les guies.
    
11. Anirem a la capa d'una de les dues imatges i farem Edición > Transformación libre. Col·locarem cada imatge enganxada a les guies i redimensionarem fins que encaixin dins les guies. (En el cas d'aquest exemple poseu a la Marilyn en una capa damunt d'Einstein).
12. Un cop col·locades les imatges passarem a dividir la imatge de la Marilyn en 4 peces, que col·locarem en capes diferents. Per poder separar aquests 4 troçets haurem de fer sel·leccions aprofitant-nos del magnetisme. Fixa't a la figura següent com faig la sel·lecció.
    
    Fixeu-vos que ho faig començo a sel·leccionar des de fora i m'aprofito del magnetisme amb les guies.
    
13. Anant tota la estona a la capa de la Marilyn farem la operació de sel·leccionar i extreure cada quart de la següent manera: Capa > Nueva > Capa Vía Cortar. Observeu que cada cop que feu això es crea una capa nova que contindrà un quart de la Marilyn. Si ho feu 3 cops ja es suficient ja que la quedarà ja tindrà precísament un 4t de Marilyn.
14. A continuació amb la eina sectors aprofitant-nos de nou del magnetisme de les guies farem 4 sectors, un per cada quart.
    [Assegureu-vos que els sectors estàn ben alineats amb les guies. Us recomano que us apropeu amb la lupa i si no encaixen perfectament amb la eina de sel·leccionar sectors sel·leccioneu sectors i amb els agafadors acabeu de posar ben alineats tots els sectors i que no s'hagin creat "mini-sectors" que de llun no es veuen.]
    
15. Si no estiguessim encara treballant amb ImageReady li donem al botó de passar a Image Ready, que és on farem lo dels Rollovers.
    
16. A continuació heu de tenir a mà els panells Capes i Contenido de web.
    
    Fixeu-vos que jo he canviat els noms a les capes i als sectors de la paleta contenido de web per aclarar-me millor, per una banda i per a que ImageReady no generi arxius d'imatge amb accents, cosa que faria que ens surtíssim de ASCII.
    
17. Amb el botó de la finestra Contenido de web afegirem un estat de rollover per cada sector fins a obtenir
    
    [Apretar per veure millor els detalls]
    Observeu que se'ns han creat estats "Sobre" a cada sector.
    
18. A continuació anirem per cada un dels estats "sobre" de cada sector i ocultarem o mostrarem la capa del quart que li correspón al sector on estem.
19. Un cop fet això ja podem fer Guardar Optimizada Como i generarem així l'HTML i les imatges. Us recomano fer-ho en una carpeta nova.
20. Guardeu també l'axiu de projecte PSD d'aquesta imatge des de ImageReady.
    

NOTA: A l'ImageReady del Photoshop 7 es podia també mostrar i ocultar capes que no fossin del mateix sector sense haver de fer res. A la versió CS2 això ho han canviat. A continuació aprofitant aquest exercici explicarem com fer per aconseguir a la versió CS2 "ROLLOVERS INDIRECTES", és a dir, de sectors que no són els que l'usuari estigui passat per sobre amb el ratolí, sinó uns altres.
És a dir: lo que posaré a continuació no es va arribar a fer a classe el divendres passat. És nou a partir d'aquest punt.

ROLLOVERS INDIRECTES
(Rollovers que afecten a sectors que no són els que l'usuari activa).
Si volem activar altres sectors al mateix temps que el que estem tocant hem de fer lo següent.

21. Ens posem a l'estat "Sobre" de la finestra Contenido de Web. I ens fixem en una petita espiraleta que hi ha
    
    Fixeu-vos que si us poseu uns segons a sobre us surt un cartellet que diu...
    
22. Doncs feu lo que diu. Convertirem en sectors remots els altres sectors, o els desitjats, arrosegant aquesta espiraleta a cada un d'aquests sectors, com si fós un "metre enrotllable".
23. Un cop hem convertit els altres sectors, o els que hem volgut, en sectors remots podem mostrar u ocultar capes que afectin a aquests sectors. De tal manera que podriem fer que si l'usuari passa per sobre de la cantonada dreta inferior de la Marilyn podriem ocultar les 4 capes de la Marilyn deixant veure sencer a l'Einstein.
24. Per últim per evitar que ImageReady ens fabriqui les imatges de les cel·les-sectors, de la part del fons anirem al panell sector i direm sense imatge i a l'apartat Fondo posarem el color frontal si és que és del mateix color que el que tenim com a fons de la imatge o si no ho averiguem i ho posem nosaltres manualment, sabent el valor hexadecimal del color. Això ho farem sector per sector.
    

Aquesta seria una entre d'altres possibles utilitats dels Rollovers indirectes amb Image Ready. Veureu que en Dreamweaver també ho podrem fer. Aquí ha intervingut lo que en ImageReady es coneix com a sectors remots que són aquests que hem associat a un estat "sobre" d'un dels sectors tot estirant de la espiraleta.


Baixeu-vos els arxius de l'exemple aquí.