Disseny de les jugades

Per a dissenyar les jugades he après una mica de programació de l'”Adobe Flash” versió 8.0 i, tot i que ha estat un procés complex, ho he acabat entenent. Ara explicaré la base de les jugades:

L'ADOBE FLASH

Primer de tot, cal esmentar quatre trets bàsics del “Flash”:

El llenguatge que es fa servir per a la programació es diu Actionscript (en el meu cas, llenguatge Actionscrip versió 2.0 -n'hi ha versions més actuals i modernes, però jo només disposo de la 2.0-). La programació que utilitza el Flash -ho fa des de la versió 5, abans no hi havia programació- actua sobre el que s'anomena “objectes”, elements que estan posats a l'escenari (botons, i clips de pel·lícula, per exemple).
El Flash utilitza una línia de temps: un conjunt de fotogrames on s'ubica el que ha de succeir en cada moment:

Com es pot apreciar a la imatge, hi ha una escala amb uns numerets (25, 30, 35....). Es tracta del número de fotograma. El conjunt de fotogrames genera la línia del temps. L'escenari per a situar els “objectes” de la meva pissarra el vaig fer d'una mida suficientment gran perquè es pogués veure a la majoria de pantalles d'ordinador; la mida final ha estat de 1000 x 700 píxels, donat que la tauleta sobre la qual he pogut fer les proves tenia aquesta resolució.

En el Flash s'acostuma a treballar amb tres elements: botons, gràfics i clips de pel·lícula.
Els botons són elements que fan que succeeixi alguna cosa quan s'hi passa per sobre (acostuma ser només un canvi de color) i una altra quan s'hi clica al damunt. Això també ha condicionat el treball, ja que a les pantalles tàctils no hi ha la possibilitat de passar per sobre.
Els gràfics són simplement imatges que es vol importar a l'escenari.
Els clips de pel·lícula són elements que permeten rebre programació. Els botons també poden rebre programació, però és millor fer-ho sobre els clips.

Un cop s'ha acabat de fer qualsevol acció amb Flash, es pot desar de forma normal i corrent: “Fitxer” - “Anomena i desa”; l'arxiu es desarà en format “.FLA”

Però el programa Flash també permet guardar l'arxiu en diferents formats. És l'opció “Publicar” i ofereix aquestes possibilitats:

Quan es fa una feina amb Flash, l'arxiu resultant és d'extensió “.FLA”. Ara bé, si es 'publica' -és el terme que s'utilitza per dir que l'arxiu “.FLA” es comprimeix- passa a ser format “.SWF”; l'arxiu “.SWF” ocupa molt menys que el “.FLA:” i és el que s'incorporarà a una pàgina web (HTML).

El Flash també permet fer un arxiu executable. Aquí adjunto una captura d'un arxiu Flash en els seus diversos formats i mides.

Es pot comprovar la diferència entre un arxiu “.FLA” i un “.SWF”; així mateix, ja es veu que els arxius “.EXE” -que es poden posar en marxa en qualsevol ordinador sense haver de tenir l'Adobe Flash Player- ocupen moltíssim.

EL DISSENY DEL CAMP

Abans de començar a explicar com es dissenya una jugada, cal saber com està feta la base.

Primer de tot, vaig fer un dibuix amb Autocad (fonament de dibuix tècnic de primer de batxillerat) del camp de bàsquet. Després el vaig acotar.

En realitat, no vaig dissenyar un sinó 3 camps de bàsquet diferents, perquè les mides reglamentàries són diverses segons la categoria. Els vaig dibuixar segons les mides oficials de:

Mides categoria mini.
Mides ACB i LEB (primera divisió i segona espanyola, que han canviat mides aquest any).

Mides NBA
Un cop fet el dibuix, em vaig trobar amb un problema: l'Autocad no permet guardar l'arxiu en format “.jpg” (que és el que s'utilitza més). Llavors el vaig exportar a “.bmp” (mapa de bits) des de l' Autocad, que sí que ho permet. Un cop amb l'arxiu en format “.bmp”, el vaig passar a “.jpg” (format estàndard que no ocupa tant com el “.bmp” i es pot incorporar a les aplicacions de Flash) amb un programa que es diu XnView.
Aquí adjunto la captura de l'arxiu realitzat amb Autocad dels 3 camps:

Després d'haver fet el camp, el vaig haver de passar a unes dimensions determinades (928 x 600 pixels, una mida gran però alhora més petita que l'escenari). Havia de deixar espai per a posar botons.

ELS “CLIPS” DELS JUGADORS I LA PILOTA

El pas següent és crear “clips” dels jugadors i de la pilota: 5 de locals (numerats de l'1 al 5) i 5 de visitants (numerats de l'1 al 5 també), i posar cada jugador en una capa amb el seu nom. Per tal de dissenyar les imatges dels números, vaig optar pel format “.png”, que permet que tinguin parts transparents i, és clar, en ser un cercle, no volia pas que la part exterior fos blanca, ni tampoc un quadrat, ja que quedaria realment estrany i lleig.

Aquests clips havien de tenir unes determinades ordres:

Que portessin un cercle a dins que s'il·lumines -pampallugues- quan fos necessari per donar informacions concretes o captar l'atenció.

Que es poguessin arrossegar.
Que portessin un nom (el número 1-> J1) tant en el jugador com en el cercle de dins que és el que s'il·lumina (cercle del jugador 1-> c1). He adjuntat un exemple on, en lloc de carregar números, es carreguen imatges de la mateixa mida del botó; aquestes imatges corresponen a les cares dels jugadors d'un equip de bàsquet.
També vaig voler que aquests clips es poguessin situar a través de programació en unes coordenades, el que permet copsar un vessant matemàtic.

LES JUGADES

Un cop “fets” els jugadors i la pista a l'escenari -en les seves respectives capes- ja tenia la base. Ara s'havia de fer la jugada.

Per a fer la jugada, és necessari dibuixar totes les línies que s'hi puguin generar i que marcaran els desplaçaments dels jugadors, de la pilota, de les accions... en una capa que vaig anomenar “línies”:

–Una línia normal i corrent (ja pot ser corba o recta) amb una fletxa al final significa moviment del jugador en el sentit de la fletxa.

–Una línia discontínua amb una fletxa al final que va d'un jugador a un altre significa una passada cap al jugador que indica la fletxa.

–Una línia recta de color carabassa sense cap mena de fletxa al costat d'un jugador significa un bloqueig.

–Una creu de color diferent a les altres línies significa un tir a cistella.

Un cop es tenen totes les línies, les anomenarem per tal de poder incloure-les després a la programació (l1,l2,l3...).

Finalment, només s'ha de començar a programar. Tot seguit detallaré les ordres que m'han calgut en la programació de la meva aplicació. Per a programar s'acostuma a fer una capa que es digui “programació”, i allà és on es posen totes les ordres.

Per a posar un fotograma que canvii la programació s'ha de clickar el botó F6 i, un cop al fotograma, s'ha d'apretar F9. Llavors apareixerà un panell d'accions on es posaran les ordres.
Primer cal fer una mena de llistat del que es té, és a dir, jugadors i línies. Posem per cas que tenim els 3 jugadors locals -amb el seu respectiu cercle- i 5 línies. Llavors hi hauríem d'escriure una llista:

Si deixem la llista així, no passarà res de res, només es veurà el que tenim en pantalla. Però potser no ens interessa que es vegi, per exemple, alguna línia. Aleshores hem de seleccionar el que volem que s'il·lumini o no/ que es vegi o no. Per tal de fer-ho, farem servir l'ordre: _visible=false; / _visible=true;

Per exemple, volem que el jugador 1 estigui il·luminat i que es vegin les línies 2 i 3. La programació serà la següent:

Quan ja sabem fer que les coses siguin visibles o no, només cal:

Tenir clar l'ordre en què han de succeir les coses.
Saber moure els jugadors.

Pel que fa a l'ordre, el procediment és força senzill. La meva forma d'organitzar els fets és la següent (sabent que 12 fotogrames són 1 segon).
Il·luminació dels jugadors que participen a la jugada (25 fotogrames).
Mostrar les línies que calen sense de deixar d'il·luminar els jugadors que participen a la jugada (25 fotogrames).
Moviment dels jugador i de la pilota cap on indiquen les fletxes; les fletxes i la il·luminació desapareixen (25 fotogrames).

El moviment és el procés potser més costós i imprecís, s'ha d'executar amb la creació d'una interpolació de moviment. Ara ho explico més detalladament:

Un jugador s'ha de moure a partir del fotograma 50 fins el 75 (recordem que són 25 fotogrames) des d'una posicó X= 50 Y= 50 a una altra posició X=125 Y=250 (he posat coordenades per a tenir una referència però no calen). Per tal que aquest jugador es mogui, ens posem sobre el fotograma número 50 de la capa del jugador, pressionem el botó de la dreta del ratolí i cliquem sobre: “Crear Interpolación de Movimiento”. Llavors, sobre el fotograma 75 -que és quan ha de cessar el moviment-, apretem F6 i, el fotograma seguent, pressionem el botó de la dreta del ratolí i cliquem sobre “Quitar Interpolación de Movimiento”.

Quan ja tinguem el lapse que s'ha de moure, ens situem sobre l'últim fotograma amb interpolació i movem el jugador al lloc desitjat. Ara el jugador ja es mourà.

ALTRES ASPECTES

Per a acabar, m'agradaria esmentar un parell de complements que he afegit al treball:

He inclòs en les jugades uns clips que considero una de les parts més importants del treball. Són una sèrie de 5 botons alineats amb unes ordres diferents cadascun. Aquests botons estan situats al marge esquerre de la pantalla per a fer-los encara més útils: amb això vull dir que, si un entrenador està mostrant una jugada als jugadors amb una tauleta digital, ha de subjectar la tauleta amb les dues mans perquè si no pot caure; en tenir els botons al marge esquerre, no caldrà que deixi anar la tauleta, només caldrà un breu moviment amb el dit.
El primer botó és el botó de “Play” amb el qual:
- S'inicia la jugada.
- Es reprèn la jugada quan està en “Pause”.