APUNTS DE PROGRAMACIÓ WEB: 2009

Javascript - Clonar camps de text d'un formulari

<HTML>
<HEAD>
<TITLE>Alert i formulari</TITLE>

<script type="text/javascript" language="javascript">

function mensaje() {

texto=document.formulina.campillo.value;

document.formulina.clonico.value=texto;

}

</script>
</HEAD>

<BODY onload="document.formulina.campillo.focus();">

<FORM name="formulina">

<INPUT TYPE="text" name="campillo">

<INPUT TYPE="button" value="clonar" onclick="mensaje();" >

<INPUT TYPE="text" name="clonico">

</FORM>

</BODY>
</HTML>

Javascript - Formularis i enrutament pel DOM - Part(I)

L'exemple consisteix en fer que un missatge que escribíssim a un camp de formulari salti com a missatge emergent. És la excusa per posar en pràctica la definició de funcions i variables, posem events de ratolí i enrutem per l'arbre DOM del document.

<HTML>
<HEAD>
<TITLE>Alert i formulari</TITLE>

<script type="text/javascript" language="javascript">

function mensaje() {

texto=document.formulina.campillo.value;

alert(texto);
}

</script>
</HEAD>

<BODY>
<FORM name="formulina">

<INPUT TYPE="text" name="campillo">

<INPUT TYPE="button" value="mensaje" onclick="mensaje();" >

</FORM>

</BODY>
</HTML>

AS3 - Preloader en ActionScript 3 - Videotutorial de Batatastudio

Batatastudio ens brinda aquest molt bon videotutorial sobre com fer preloaders amb ActionScript. Està en castellà de mèxic. Quan l'autor diu "jalar" vól dir agafar. Més endavant us faré la meva versió de preloader amb les meves pròpies conclussions. Però de moment us serveix això i el llibre que us vaig recomanar sobre ActionScript3.

No deixeu de visitar el canal de Batata al youtube. Cliqueu aquí. Té molt bones explicacions.

Batatastudio - Preloader en AS3(1a Part)

Batatastudio - Preloader en AS3(2a Part)

Batatastudio - Preloader en AS3(3a Part)

Action Script - Preloader, cómo se hizo

1. Fem dues escenes per fer l'exemple com per exemple:

2. A la escena preloader ha d'haver el següent:

La barra vermella és un clip de pel·lícula i com a nom d'instància li direm "barrita". I també creem un camp de text dinàmic que li direm "".

3. Al fotograma 2 de la cap d'accions posem:

gotoAndPlay(1);

//Amb això fem un bucle per dues raons.
//La primera raó és evitar que salti a la
//escena següent i la segona forçar a que recalculi contínuament l'estat de càrrega

4. I al primer fotograma de la escena Preloader posarem:

//El següent vól dir: "quan la peli s'hagi carregat"...
if (_root.getBytesLoaded()>=_root.getBytesTotal())
{

//...trenquem el bucle i enviem al fotograma 1 de la escena "principio"
gotoAndPlay("principio", 1);
}

//Definim la variable porciento que em
//calcularà el valor carregat de la pel·lícula amb:
porciento=(_root.getBytesLoaded()/_root.getBytesTotal())*100;

//Fem que representi la barreta amb una amplada proporcional
//a la mida original de la instància "barrita" en funció del que
//valgui la variable porciento
_root.barrita._xscale=porciento;

//També fem que s'esbaeixi en funció del que
//valgui porciento.
_root.barrita._alpha=100 - porciento;
//100 - porciento per que conti a l'inrevés
//és a dir, d'opac a transparent

texto=Math.floor(porciento) + " % Cargado";
//Math.floor em treu la part entera de la variable porciento
//de tal manera que queda més estètic. I li concatenem la cadena de caràcters "% Cargado".

ActionScript - Tutorial de motors 2a Part

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. ]

ActionScript - Tutorial de motors

Recapitulació

Ja heu conegut la finestra "Acciones".
Heu fet control de línies de temps de películes.

Heu fet canvi d'escenes a la línia de temps principal.
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.
Heu anidat un clip de película a dins de l'estat sobre d'un botó.
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.

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:

Coneixereu les variables i la seva utilitat.
Veureu entre d'altres les propietats: _x i _y i la seva sintàxi.
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

ActionScript - Estructures de control

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ó.

Action Script - AS3 - Com programar botons

Quan programem botons a AS2 seleccionem el botó i posem el codi
on(release) {accions;}

En canvi en AS3 per programar els botons ho hem de fer en mode de "classes" de manera molt similar al llenguatge CSS. Us poso dos enllaços que us poden anar bé:

Action Script - Fotogrames

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í),...

Action Script - Guia ràpida d'introducció

Coses que s'han de saber sobre ActionScript:

ActionScript és un llenguatge de programació orientat a objectes[POO].
És el llenguatge que ens serveix per programar interactivitat dins del flash. La interactivitat és la activitat que es produeix quan un programa o màquina reacciona davant d'un estímul nostre.
La interactivitat que podem definir amb ActionScript amb el flash succeeix al costat client(navegador).
Per posar accions ens cal fer servir la finestra "Acciones". Per treure-la podem anar al menú Ventana > Acciones. Això ens mostra la finestra "Acciones", la qual conté al costat esquerre una col·lecció d'accions distribuïts en llibres i subllibres.
Quan vulguem posar una acció d'ActionScript ho podem fer escrivint o fent doble click sobre l'acció que veiem al costat esquerre de la finestra Acciones.
Amb la finestra Acciones podem treballar en Mode Expert o amb l'Assistent d'Script.
Si treballem amb l'Asssistent d'Script premut ens apareixen camps per farcir amb paràmetres. L'assistent d'Script ens ajudarà fins que sapiguem la sintàxi del llenguatge ActionScript. Però quan ens limiti per treballar és millor sortir d'aquest mode de treball.
Podem posar accions d'ActionScript[A l'ActionScript 2.0] a tres llocs possibles: Clips de pel·lícula, botons i fotogrames.
Abans de posar accions a un fotograma ens cal seleccionar el fotograma.
Abans de posar accions a un clip de pel·lícula ens cal seleccionar el clip de pel·lícula.[No ho hem fet, no ens donarà temps probablement].
Abans de posar una acció a un botó cal seleccionar el botó.
Quan vulguem posar una acció a un botó cal fer servir la sintaxi:
on (release) {
accions; }
Entre els parèntesi posem "events de ratolí"(maneres d'activar el botó. Com a valors possibles tenim: press, release, releaseOutside, rollOver, rollOut,...). Entre les claus posem accions. Entre les claus podem posar tantes accions com calgui.
A vegades ens cal aplicar accions que fan referència a instàncies concretes, així que el primer que necessiten aquestes instàncies és tenir nom.
Els clips de pel·lícula ens donen la opció de posar-los un nom d'instància mentre que els símbols gràfics no.
Quan vulguem aplicar una acció a una instància en concret que té nom cal que enrutem correctament fins arribar a la instància desitjada. Per això ens cal conèixer una mica d ela terminologia de prefixes:
a. this [Per referir-nos a la línia de temps en la que ens trobem]
b . _root [per referir-nos a la línia de temps principal]
c. _parent [per referir-nos a la línia de temps que hi ha per sobre.]

Javascript - Tutorial en anglès - W3SCHOOLS

A la pàgina de w3schools.com en anglès tenim uns quants tutorials, dels quals està força bé el de Javascript. Clica aquí per visitar-lo.

JAVASCRIPT - PNGs amb fons transparent a Internet Explorer 6 i 5.5

Els nous navegadors fa temps que representen PNGs amb fons transparent. Però per representar PNGs transparents a Internet Explorer 5.5 i 6 s'havia de recòrrer a javascript. Aquí us poso el link que us donarà la solució.

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)

TUTORIAL DE MOTORS (ACTIONSCRIPT - ALEX )

Recapitulació

Ja heu conegut la finestra "Acciones".
Heu fet control de línies de temps de películes.

Heu fet canvi d'escenes a la línia de temps principal.
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.
Heu anidat un clip de película a dins de l'estat sobre d'un botó.
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.

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.

Coneixereu les variables i la seva utilitat.
Veureu entre d'altres les propietats: _x i _y i la seva sintàxi.
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.

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.

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);

//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

BOTÓ ESQUERRE

Links

APUNTS DE PROGRAMACIÓ WEB

Javascript - Clonar camps de text d'un formulari

Javascript - Formularis i enrutament pel DOM - Part(I)

AS3 - Preloader en ActionScript 3 - Videotutorial de Batatastudio

Action Script - Preloader, cómo se hizo

ActionScript - Tutorial de motors 2a Part

ActionScript - Tutorial de motors

ActionScript - Estructures de control

Action Script - AS3 - Com programar botons

Action Script - Fotogrames

Action Script - Guia ràpida d'introducció

Javascript - Tutorial en anglès - W3SCHOOLS

JAVASCRIPT - PNGs amb fons transparent a Internet Explorer 6 i 5.5

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

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

TUTORIAL DE MOTORS (ACTIONSCRIPT - ALEX )

TEMES

NOTA

Arxiu del blog

Links

TEMES

NOTA

Arxiu del blog

Subscriu-te a