Applicativi per la produzione ipermediale(per il Web e non)Impegnati nella realizzazione ad experimentum di un prodotto

ipermediale interattivabile via browser sia dal Web che off-Iine

riversiamo in queste pagine lesperienza fatta presentando alcune

delle tecniche utilizzate e le novitagrave software che abbiamo inserito tra

gli applicativi di produzione

di Bruno Rosati )

Figura l -Prossima-mente su CampVwebuna favola iperme-diale con cui interat-tivare on the weboppure off-fine

Nellarticolo apparso sul numero diluglio-agosto abbiamo lanciato lidea ditentare la realizzazione un prodotto iper-media le Una favola interattiva (siamoancora indecisi tra Biancaneve e Il Gat-to con gli stivali ) che abbia il pregio diessere consulta bile tramite browser siadal Web che off-line

Dallidea alla prima fase di lavorazio-ne abbiamo poi scoperto che il proget-to a prescindere dalla sua qualitagrave com-merciale puograve avere un suo valore dalpunto di vista tecnico-realizzativo Lesoluzioni interattive che adotta possonodifatti rivelarsi interessanti per chi leg-gendoci egrave in cerca di spunti ed idee perle proprie realizzazioni ipermediali

Dallinserimento di particolari soluzio-ni animate ad una serie di livelli dinte-rattivitagrave cercati e trovati per mezzo del-lo JavaScript linsieme delle soluzioni(nella lista vanno inserite anche le fun-zioni di pageshow ed alcuni esperi-menti di manipolazione vocale) risultaessere uninteressante palestra iper-mediale

Mentre continua lo sviluppo del pro-getto (la pubblicazione della demo dellafavola interattiva egrave probabile che avven-ga sul numero di ottobre di CampVweb)ecco nel frattempo farsi largo la sceltadi scrivere questo articolo Un articolonel quale come detto nellintroduzioneprocederemo sia ad illustrare alcune so-luzioni tecniche che stiamo adottandonella realizzazione del prodotto che allapresentazione di un paio di novitagrave

258

softwareImpegnati nella realizzazione di GIF

animate (piugrave avanti vedremo una parti-colare tecnica di sviluppo) la bottonizza-zione in Web-style di vari c1ip la mappa-tura e leffettizzazione in genere delle fi-gure che correderanno le pagine dellafavola on the Web oltre ad applicativigiagrave noti abbiamo per loccasione prova-to il Weblmage Un prodotto che som-ma nei suoi menu dinamici le caratteri-stiche di un image processor un gene-ratore di mappe e di un animatore GIF

Sempre nello sviluppo della favola in-terattiva cegrave poi parso interessante rea-lizzare degli scenari sonori che introdu-cessero ogni capitolo del racconto Perprodurre queste audioscene oltre aduna tecnica mista che si avvale del CoolEdit e per chi ce lha dellAdobe Pre-miegravere abbiamo rivolto il nostro interes-se a SAW un applicativo particolarmen-te dedicato allediting multitraccia

Il terzo aspetto realizzativo affrontatoin fase di sviluppo del prodotto iperme-diale egrave infine quello puramente tecnicodella programmazione del codice Lad-dove lHTML non basta (la creazione diquestionari e quiz domandarisposta)non si egrave esitato ad imbracciare larmadello JavaScript Giagrave semplice comesviluppo sintattico egrave ora ancora piugrave alla

portata di tutti gra-zie alle applicazionidi tipo RAD (RapidApplication Deve-lopment) Un esem-pio egrave lo scaricatissi-mo (nel senso del download dal sito diNetscape) Visual JavaScript Un altro egravela demo 30-giorni dellAcadia Infuseche abbiamo accalappiato sul Web emesso subito alla prova

Riassumendo ciograve con cui abbiamo ache fare sono tre metodi creativi (svi-luppo grafico audioscene e program-mazione JavaScript delle page) ed al-trettanti applicativi Aspetti e program-mi da conoscere provare ed eventual-mente da integrare a quelli che si usanoabitualmente

Una tecnicaper le GIF animate

Per la nostra favola ipermediale nonci bastava disegnare semplici GIF dicontorno ma ci egrave parso subito eviden-te che ci serviva realizzare delle GIF ani-mate piugrave sofisticate Non ci sono logo oscritte ripetitive (come i banner deglispot pubblicitari) da far apparire bensigrave

MCmicrocomputer n 176 - settembre 1997

Figura 2 - Inizialmenteil consiglio egrave di utilizza-re uno screen da240x180 pixel dal qua-le dovendo sicuramen-te tagliare le linee privedi segnale (effettoshift) e quelle eventual-mente interessate dalrumore potremo tran-quillamente scendere(con un resize precedu-to dai tagli del controllocrop) al classico160x 120 (fig 2)

Figura 4 - La sequenza difreeze-frame che com-pongono una parte dellaGIF animata con accan-to il testo che riga doporiga (e quindi singola GIFdopo singola GIF) appa-riragrave gradatamente inschermo

mo svolgere nelPaintShop Pro 412richiamando ognisingolo freeze-fra-me acquisito edimponendogli il co-mando EnlargeCanvas presentenel menu ImageDovendo inserire

alla destra del frame il testo di riferi-mento nel pannello dellEnlarge Can-vas che appare in schermo dovremosetta re la nuova misura in larghezza(width) e quella in altezza (height) Po-nendo che i freeze-frame post-editingsi siano effettivamente ridotti al classi-co 160x120 potremo inserire comenuovo valore di width la misura di 360

Click and drag a boder bullbull ound atea lo CfOP lo and click Ote

K~Ilidth~

Y~lieighl~

~ Cancell

( fUI) VIlItmiddotU Et

lJfuI voIu unto tempo 18vwcv In UNI pOMIlont-nltgt

U voIU tto tanpo f bullbullvlYeYl PIWlNIonttno

UNlIteUII fnciutlt

I

~------GY bullbullbullbull In GY bullbullbullbull Oul

IEEJ IbullbullIbullbullI~I~I I 1~lcl)~iIo 51 - INS IK AutioNdeo

Figura 3 - Una volta chesi dispone dei freeze-frame entrati nellam-biente del PaintShopPro potremo agire tra-mite il controllo EnlargeCanvas allallargamentodel frame stesso in mo-do che sulla sua de-stra venga ricavato lospazio per inserire le ri-ghe di testo

15-~bullbullbullbull 1 )ClVl7GdocWodgttId I fG~P bullbullbullbullmiddotlI~Paint Shop 0-1_

del controllo crop) al classico 160x120(fig 2)

Una volta acquisiti tutti i freeze-fra-me che ci necessitano con unopera-zione da puro image-processor dovre-mo aggiungere ad ogni singolo framedei pixel in orizzontale per far posto allarelativa parte testuale di commento

Tale operazione la possiamo benissi-

momenti dinamici da immortalare inqualche modo per non lasciarli alla stati-citagrave del testo

Oltre alle audioscene (che piugrave avantivengono descritte) abbiamo allora pen-sato alla realizzazione delle GIF compo-ste Ovvero sequenze di GIF animatedove allinterno di ogni singola immagi-ne appare sia una componente (vi-deo)grafica che una testuale

La tecnica consiste nella realizzazio-ne di singole GIF composte ancor pri-ma di diventare GIF animate da due opiugrave parti interne Una grafica (il disegnodi riferimento ad una precisa scena) elaltra testuale che ovviamente lega alsignificato della parte grafica

Bencheacute scriva grafica e disegno(ricordatevi questo articolo egrave stato re-datto ancor prima che terminasse la fa-se di studio del prodotto) non egrave ancoradeciso se in effetti si useranno dei dise-gni oppure (anche o solo) dei freeze-fra-me Per questultimi provenienti dafilm o cartoon concessici dutilizzarenelloccasione stiamo ancora verifican-do la possibilitagrave legale di utilizzo

Disegni oppure frame quali che sia-no leffetto che si vuole creare e quidescrivere egrave quello della sincronizzazio-ne tra disegno (o freeze-frame) e testodi riferimento

In cosa consiste la tecnica messa apunto

Per semplicitagrave di trattazione poniamodi aver scelto la strada dei freeze-framee non quella dei disegni (che in effettisono ancora in lavorazione) e che la fa-vola ipermediale da realizzare sia quelladi Biancaneve (in alternativa egrave possibilelo sviluppo in grafica della fiaba de IlGatto con gli stivali)

Per prima cosa avendo scelto lusodei freeze-frame dovremo ovviamenteorganizzarci per acquisire questi dalsupporto analogico che contiene il filmoppure il cartoon in questione

Muniti perciograve del VidCap oppure del-lAdobeCap o di qual altro modulo dicattura si possegga (percheacute a propositonon fate un salto su CampVweb n1 e sca-ricate VidWatch un modulo di catturain grado di settare lacquisizione di unsingolo frame ogni x frame) dovremoanzitutto settare la grandezza del qua-dro video Inizialmente il consiglio egrave diutilizzare uno screen da 240x180 pixeldal quale dovendo sicuramente tagliarele linee prive di segnale (effetto shift) equelle eventualmente interessate dalrumore potremo tranquillamente scen-dere (con un resize preceduto dai tagli

MCmicrocomputer n 176 - settembre 1997 259

~1~ ~ ~

bullbull _ ilCM bullbullbullbull middotI9I __ middotG 19_U lIvJ-_kC

bullbullbull lOh or bullbullbullbullbullbullbullbullbull

bullbull_I JavbullbullbullbullmiddotmiddotIbullbullbullbullbullbullbullbullbullbullmiddotbullmiddotlg_u bullbullbullnfil_ emiddot bullbullbullbullbullmiddot-I

Figura 6 - Weblmage Mutando la modalitagrave operativa sempre attraverso laselezione del modo dal menu ViewToolbars unimmagine appena trattata inimage-processor puograve essere immediatamente mappata La lavorazione atela di ragno puograve essere effettuata con la massima precisione grazie alla di-sponibilitagrave di un potente zoom e ad un completo set di tracciatori (a manocircolari quadrati ecc)

Figura 5 Weblmage Nella lista delle opzioniStandard sono messi a nostra disposizione icon-trolli sul resize lequalizzazione cromatica lin-serzione di effetti (buttonize border e traspamiddotrencyi la conversione di formato delle immagininoncheacute limposizione di alcuni filtri

pixel (200 pixel in piugrave per inserire il te-sto) e conservare i 160 pixel come mi-sura di height Infine senza setta re ilcontrollo Center Image (e quindi la-sciando che il frame si posizioni alle-strema sinistra del nuovo quadro ci ri-troveremo con unimmagine simile aquella di figura 3

Questa di forma rettangolare risultaora composta da unarea sinistra dellamisura di 160x120 occupata dal freeze-frame e da una parte destra della misu-ra di 200x160 vuota ed a disposizionedella componente testuale

Idea nellidea la componente testua-le landremo ad inserire in modo che

ala lbullbull CW171 bullbull IrI0Id

260

r_

5~ Craquo aCaIM

~-middotG ~u bullbull ~ Pbullbullbull ShaftPlo

una volta realizzata la GIF animata com-paia riga dopo riga Per ottenere ciograve ba-steragrave seguire un semplice procedimen-to

Mettiamo di dover inserire il testo(su tre righe) allinterno del primo framegiagrave denominato file01gif

Caricato tale file in PSP ed inseritetutte e tre le righe del testo salveremola modifica in un nuovo file denominatofile03gif Di seguito cancelleremo laterza riga di testo e salveremo il risulta-to in un nuovo file denominatofile02gif Infine cancellata anche la se-conda riga di testo salveremo ancora inun nuovo file denominato file01gif (fig4)

Continuando adesso di frame in fra-me sempre contando le righe di testoche in esso dovranno essere inseriteprovvederemo a salvare prima il framecon tutte le righe (e quindi badando adassegnare un numero successivo piugrave al-

Figura 7 - Weblmagemodalitagrave Animate Cari-cata una GIF animatadal menu Animate abmiddotbiamo richiamato laview in modalitagrave thum-bnails e lapplicativo oraci mostra tutta la seriedelle singole immaginiche compongono la GIFanimata In primo pianoegrave il pannello ImageControl per mezzo delquale egrave possibile setta-re durata in schermo emodalitagrave di transizionein schermo di ogni sin-gola immagine

rgW bullbullbullbullbullbull E e 1150

to) e via via risalendo fino allultimo fileintermedio nel quale cegrave ununica riga ditesto

Fatto ciograve il lavoro in PSP egrave terminatoe possiamo quindi spostarci nel genera-tore di GIF animate che si preferiscePersonalmente utilizzo con buoni risul-tati il Microsoft GIF Animator ma orache ho provato Weblmage

WeblmageGIF animate mappe evarie bottonizzazioniin Web-style

A tuttoggi chi scrive ha usato e con-sigliato di usare il PaintShop Pro per li-mage-processor e leffettistica in gene-re il gratuito Microsoft GIF Animatorper animare le GIF e il MapThis permappare le immagini Senza buttare viatutto e ricominciare da capo egrave comun-que arrivato il momento di vedere allo-pera un applicativo che versatissimo egravein grado di fare tutto ciograve direttamentedai suoi menu

Stiamo parlando del Weblmage diGroup42 (httpwwwgroup42comlLapplicativo nei quattordici giorni diprova che ci concede prima di smetteredi funzionare si presenta come uno tragli applicativi piugrave duttili delle ultime ge-nerazioni Quasi una nuova frontiera nelsuo genere giaccheacute l ImageWeb puograveconsiderarsi la somma delle caratteristi-che (salienti) di tre diversi applicativi

Con un menu dinamico che cambia icomandi iconici a seconda che si scelgadi fare image-processing image-mapoppure costruire GIF animate Weblma-

MCmicrocomputer n 176 - settembre 1997

Figura 2 - Inizialmenteil consiglio egrave di utilizza-re uno screen da240x180 pixel dal qua-le dovendo sicuramen-te tagliare le linee privedi segnale (effettoshift) e quelle eventual-mente interessate dalrumore potremo tran-quillamente scendere(con un resize precedu-to dai tagli del controllocrop) al classico160x 120 (fig 2)

Figura 4 - La sequenza difreeze-frame che com-pongono una parte dellaGIF animata con accan-to il testo che riga doporiga (e quindi singola GIFdopo singola GIF) appa-riragrave gradatamente inschermo

mo svolgere nelPaintShop Pro 412richiamando ognisingolo freeze-fra-me acquisito edimponendogli il co-mando EnlargeCanvas presentenel menu ImageDovendo inserire

alla destra del frame il testo di riferi-mento nel pannello dellEnlarge Can-vas che appare in schermo dovremosetta re la nuova misura in larghezza(width) e quella in altezza (height) Po-nendo che i freeze-frame post-editingsi siano effettivamente ridotti al classi-co 160x120 potremo inserire comenuovo valore di width la misura di 360

Click and drag a boder bullbull ound atea lo CfOP lo and click Ote

K~Ilidth~

Y~lieighl~

~ Cancell

( fUI) VIlItmiddotU Et

lJfuI voIu unto tempo 18vwcv In UNI pOMIlont-nltgt

U voIU tto tanpo f bullbullvlYeYl PIWlNIonttno

UNlIteUII fnciutlt

I

~------GY bullbullbullbull In GY bullbullbullbull Oul

IEEJ IbullbullIbullbullI~I~I I 1~lcl)~iIo 51 - INS IK AutioNdeo

Figura 3 - Una volta chesi dispone dei freeze-frame entrati nellam-biente del PaintShopPro potremo agire tra-mite il controllo EnlargeCanvas allallargamentodel frame stesso in mo-do che sulla sua de-stra venga ricavato lospazio per inserire le ri-ghe di testo

15-~bullbullbullbull 1 )ClVl7GdocWodgttId I fG~P bullbullbullbullmiddotlI~Paint Shop 0-1_

del controllo crop) al classico 160x120(fig 2)

Una volta acquisiti tutti i freeze-fra-me che ci necessitano con unopera-zione da puro image-processor dovre-mo aggiungere ad ogni singolo framedei pixel in orizzontale per far posto allarelativa parte testuale di commento

Tale operazione la possiamo benissi-

momenti dinamici da immortalare inqualche modo per non lasciarli alla stati-citagrave del testo

Oltre alle audioscene (che piugrave avantivengono descritte) abbiamo allora pen-sato alla realizzazione delle GIF compo-ste Ovvero sequenze di GIF animatedove allinterno di ogni singola immagi-ne appare sia una componente (vi-deo)grafica che una testuale

La tecnica consiste nella realizzazio-ne di singole GIF composte ancor pri-ma di diventare GIF animate da due opiugrave parti interne Una grafica (il disegnodi riferimento ad una precisa scena) elaltra testuale che ovviamente lega alsignificato della parte grafica

Bencheacute scriva grafica e disegno(ricordatevi questo articolo egrave stato re-datto ancor prima che terminasse la fa-se di studio del prodotto) non egrave ancoradeciso se in effetti si useranno dei dise-gni oppure (anche o solo) dei freeze-fra-me Per questultimi provenienti dafilm o cartoon concessici dutilizzarenelloccasione stiamo ancora verifican-do la possibilitagrave legale di utilizzo

Disegni oppure frame quali che sia-no leffetto che si vuole creare e quidescrivere egrave quello della sincronizzazio-ne tra disegno (o freeze-frame) e testodi riferimento

In cosa consiste la tecnica messa apunto

Per semplicitagrave di trattazione poniamodi aver scelto la strada dei freeze-framee non quella dei disegni (che in effettisono ancora in lavorazione) e che la fa-vola ipermediale da realizzare sia quelladi Biancaneve (in alternativa egrave possibilelo sviluppo in grafica della fiaba de IlGatto con gli stivali)

Per prima cosa avendo scelto lusodei freeze-frame dovremo ovviamenteorganizzarci per acquisire questi dalsupporto analogico che contiene il filmoppure il cartoon in questione

Muniti perciograve del VidCap oppure del-lAdobeCap o di qual altro modulo dicattura si possegga (percheacute a propositonon fate un salto su CampVweb n1 e sca-ricate VidWatch un modulo di catturain grado di settare lacquisizione di unsingolo frame ogni x frame) dovremoanzitutto settare la grandezza del qua-dro video Inizialmente il consiglio egrave diutilizzare uno screen da 240x180 pixeldal quale dovendo sicuramente tagliarele linee prive di segnale (effetto shift) equelle eventualmente interessate dalrumore potremo tranquillamente scen-dere (con un resize preceduto dai tagli

MCmicrocomputer n 176 - settembre 1997 259

~1~ ~ ~

bullbull _ ilCM bullbullbullbull middotI9I __ middotG 19_U lIvJ-_kC

bullbullbull lOh or bullbullbullbullbullbullbullbullbull

bullbull_I JavbullbullbullbullmiddotmiddotIbullbullbullbullbullbullbullbullbullbullmiddotbullmiddotlg_u bullbullbullnfil_ emiddot bullbullbullbullbullmiddot-I

Figura 6 - Weblmage Mutando la modalitagrave operativa sempre attraverso laselezione del modo dal menu ViewToolbars unimmagine appena trattata inimage-processor puograve essere immediatamente mappata La lavorazione atela di ragno puograve essere effettuata con la massima precisione grazie alla di-sponibilitagrave di un potente zoom e ad un completo set di tracciatori (a manocircolari quadrati ecc)

Figura 5 Weblmage Nella lista delle opzioniStandard sono messi a nostra disposizione icon-trolli sul resize lequalizzazione cromatica lin-serzione di effetti (buttonize border e traspamiddotrencyi la conversione di formato delle immagininoncheacute limposizione di alcuni filtri

pixel (200 pixel in piugrave per inserire il te-sto) e conservare i 160 pixel come mi-sura di height Infine senza setta re ilcontrollo Center Image (e quindi la-sciando che il frame si posizioni alle-strema sinistra del nuovo quadro ci ri-troveremo con unimmagine simile aquella di figura 3

Questa di forma rettangolare risultaora composta da unarea sinistra dellamisura di 160x120 occupata dal freeze-frame e da una parte destra della misu-ra di 200x160 vuota ed a disposizionedella componente testuale

Idea nellidea la componente testua-le landremo ad inserire in modo che

ala lbullbull CW171 bullbull IrI0Id

260

r_

5~ Craquo aCaIM

~-middotG ~u bullbull ~ Pbullbullbull ShaftPlo

una volta realizzata la GIF animata com-paia riga dopo riga Per ottenere ciograve ba-steragrave seguire un semplice procedimen-to

Mettiamo di dover inserire il testo(su tre righe) allinterno del primo framegiagrave denominato file01gif

Caricato tale file in PSP ed inseritetutte e tre le righe del testo salveremola modifica in un nuovo file denominatofile03gif Di seguito cancelleremo laterza riga di testo e salveremo il risulta-to in un nuovo file denominatofile02gif Infine cancellata anche la se-conda riga di testo salveremo ancora inun nuovo file denominato file01gif (fig4)

Continuando adesso di frame in fra-me sempre contando le righe di testoche in esso dovranno essere inseriteprovvederemo a salvare prima il framecon tutte le righe (e quindi badando adassegnare un numero successivo piugrave al-

Figura 7 - Weblmagemodalitagrave Animate Cari-cata una GIF animatadal menu Animate abmiddotbiamo richiamato laview in modalitagrave thum-bnails e lapplicativo oraci mostra tutta la seriedelle singole immaginiche compongono la GIFanimata In primo pianoegrave il pannello ImageControl per mezzo delquale egrave possibile setta-re durata in schermo emodalitagrave di transizionein schermo di ogni sin-gola immagine

rgW bullbullbullbullbullbull E e 1150

to) e via via risalendo fino allultimo fileintermedio nel quale cegrave ununica riga ditesto

Fatto ciograve il lavoro in PSP egrave terminatoe possiamo quindi spostarci nel genera-tore di GIF animate che si preferiscePersonalmente utilizzo con buoni risul-tati il Microsoft GIF Animator ma orache ho provato Weblmage

WeblmageGIF animate mappe evarie bottonizzazioniin Web-style

A tuttoggi chi scrive ha usato e con-sigliato di usare il PaintShop Pro per li-mage-processor e leffettistica in gene-re il gratuito Microsoft GIF Animatorper animare le GIF e il MapThis permappare le immagini Senza buttare viatutto e ricominciare da capo egrave comun-que arrivato il momento di vedere allo-pera un applicativo che versatissimo egravein grado di fare tutto ciograve direttamentedai suoi menu

Stiamo parlando del Weblmage diGroup42 (httpwwwgroup42comlLapplicativo nei quattordici giorni diprova che ci concede prima di smetteredi funzionare si presenta come uno tragli applicativi piugrave duttili delle ultime ge-nerazioni Quasi una nuova frontiera nelsuo genere giaccheacute l ImageWeb puograveconsiderarsi la somma delle caratteristi-che (salienti) di tre diversi applicativi

Con un menu dinamico che cambia icomandi iconici a seconda che si scelgadi fare image-processing image-mapoppure costruire GIF animate Weblma-

MCmicrocomputer n 176 - settembre 1997

~1~ ~ ~

bullbull _ ilCM bullbullbullbull middotI9I __ middotG 19_U lIvJ-_kC

bullbullbull lOh or bullbullbullbullbullbullbullbullbull

bullbull_I JavbullbullbullbullmiddotmiddotIbullbullbullbullbullbullbullbullbullbullmiddotbullmiddotlg_u bullbullbullnfil_ emiddot bullbullbullbullbullmiddot-I

Figura 6 - Weblmage Mutando la modalitagrave operativa sempre attraverso laselezione del modo dal menu ViewToolbars unimmagine appena trattata inimage-processor puograve essere immediatamente mappata La lavorazione atela di ragno puograve essere effettuata con la massima precisione grazie alla di-sponibilitagrave di un potente zoom e ad un completo set di tracciatori (a manocircolari quadrati ecc)

Figura 5 Weblmage Nella lista delle opzioniStandard sono messi a nostra disposizione icon-trolli sul resize lequalizzazione cromatica lin-serzione di effetti (buttonize border e traspamiddotrencyi la conversione di formato delle immagininoncheacute limposizione di alcuni filtri

pixel (200 pixel in piugrave per inserire il te-sto) e conservare i 160 pixel come mi-sura di height Infine senza setta re ilcontrollo Center Image (e quindi la-sciando che il frame si posizioni alle-strema sinistra del nuovo quadro ci ri-troveremo con unimmagine simile aquella di figura 3

Questa di forma rettangolare risultaora composta da unarea sinistra dellamisura di 160x120 occupata dal freeze-frame e da una parte destra della misu-ra di 200x160 vuota ed a disposizionedella componente testuale

Idea nellidea la componente testua-le landremo ad inserire in modo che

ala lbullbull CW171 bullbull IrI0Id

260

r_

5~ Craquo aCaIM

~-middotG ~u bullbull ~ Pbullbullbull ShaftPlo

una volta realizzata la GIF animata com-paia riga dopo riga Per ottenere ciograve ba-steragrave seguire un semplice procedimen-to

Mettiamo di dover inserire il testo(su tre righe) allinterno del primo framegiagrave denominato file01gif

Caricato tale file in PSP ed inseritetutte e tre le righe del testo salveremola modifica in un nuovo file denominatofile03gif Di seguito cancelleremo laterza riga di testo e salveremo il risulta-to in un nuovo file denominatofile02gif Infine cancellata anche la se-conda riga di testo salveremo ancora inun nuovo file denominato file01gif (fig4)

Continuando adesso di frame in fra-me sempre contando le righe di testoche in esso dovranno essere inseriteprovvederemo a salvare prima il framecon tutte le righe (e quindi badando adassegnare un numero successivo piugrave al-

Figura 7 - Weblmagemodalitagrave Animate Cari-cata una GIF animatadal menu Animate abmiddotbiamo richiamato laview in modalitagrave thum-bnails e lapplicativo oraci mostra tutta la seriedelle singole immaginiche compongono la GIFanimata In primo pianoegrave il pannello ImageControl per mezzo delquale egrave possibile setta-re durata in schermo emodalitagrave di transizionein schermo di ogni sin-gola immagine

rgW bullbullbullbullbullbull E e 1150

to) e via via risalendo fino allultimo fileintermedio nel quale cegrave ununica riga ditesto

Fatto ciograve il lavoro in PSP egrave terminatoe possiamo quindi spostarci nel genera-tore di GIF animate che si preferiscePersonalmente utilizzo con buoni risul-tati il Microsoft GIF Animator ma orache ho provato Weblmage

WeblmageGIF animate mappe evarie bottonizzazioniin Web-style

A tuttoggi chi scrive ha usato e con-sigliato di usare il PaintShop Pro per li-mage-processor e leffettistica in gene-re il gratuito Microsoft GIF Animatorper animare le GIF e il MapThis permappare le immagini Senza buttare viatutto e ricominciare da capo egrave comun-que arrivato il momento di vedere allo-pera un applicativo che versatissimo egravein grado di fare tutto ciograve direttamentedai suoi menu

Stiamo parlando del Weblmage diGroup42 (httpwwwgroup42comlLapplicativo nei quattordici giorni diprova che ci concede prima di smetteredi funzionare si presenta come uno tragli applicativi piugrave duttili delle ultime ge-nerazioni Quasi una nuova frontiera nelsuo genere giaccheacute l ImageWeb puograveconsiderarsi la somma delle caratteristi-che (salienti) di tre diversi applicativi

Con un menu dinamico che cambia icomandi iconici a seconda che si scelgadi fare image-processing image-mapoppure costruire GIF animate Weblma-

MCmicrocomputer n 176 - settembre 1997

I)(j

Figura 9 - Laudio edi-ting multi traccia inambiente Adobe Pre-miere Una voltacompletato il lavorola sintesi rielaboratapuograve essere esportatain formato wav permezzo dellopzioneSave Waveform

questionari) o dipuro sostegno nar-rativo andava orga-nizzato ed inserito

Mentre per glihelp la cosa non hacomportato alcunproblema (acquisi-zione e editingpossono esseretranquillamente svolti da qualsiasi edi-tor) laltra idea quella di inserire dellescene audio introduttive ad ogni capito-lo della narrazione ci ha un po compli-cato la vita Due ma essenziali i per-cheacute

- lindisponibilitagrave di piugrave voci di attoriche si calano nei panni di ogni diversopersonaggio che entra in scena

- la necessitagrave di disporre di un appli-cativo per audio editing capace di lavo-rare in multitraccia

Non sappiamo ancora se brillanti omeno ma le soluzioni sono arrivate ra-

0000

dalla realizzazione delle singole immagi-ni che le corredano fino al confeziona-mento della sequenza finale Questulti-ma puograve essere montata assegnandotempi ed effetti sia alla singola immagi-ne che allinsieme

Figura lO - SoftwareAudio WorkShop Lapage (httpwwwiq50ft comSAWsawhtm) da cui egrave possibileraccogliere notizie efare il download dellademo-version di SA W(Software Audio Work-Shop) della InnovativeQuafity

Figura 8 - Cool Edit96 La sezione dei fil-tri a nostra disposi-zione

Editing multitraccia edIlaudioscene Il

(SA W Software AudioWorkshop)

Osservando il prendere forma delleprime pagine della favola interattiva cisiamo subito accorti che pure se qui elagrave appaiono GIF animate e si sentono fi-le MIDI che arricchiscono linsiemequalcosa mancava ancora Questo qual-cosa (nel corso della lavorazione po-tremmo accorgerci della mancanza diqualcosa ancora)era la colonna 50- Il=ft fuNiWnora Qualsiasi ltil IJ ~ ~ ~commento sonoro ~_~e-~~-==-==e-____ ~=~_fosse di sola guida(qualche help clic-cabile per quiz e

~ 1S151t IeAgIt eD

la bullbullJ fCIV116doe-WoIlPs J yGeMne_wmiddotP-o I EpShopPlo

ge egrave ad esempio in grado di lavorare co-me un (piccolo) PaintShop Il tutto sem-plicemente caricando unimmagine giagraveprecedentemente trattata oppure modi-ficando lorganizzazione dei comandiiconici attraverso le opzioni di visualizza-zione (Standard per limage-processingMapping per la mappatura dellimmagi-ne ed Animate per la resa di GIF anima-te) che sono selezionabili dal menuView(T oolbars

Scendendo un po piugrave nel dettaglionella lista delle opzioni Standard sonof)1essi a nostra disposizione i controllisul resize lequalizzazione cromaticalinserzione di effetti (buttonize bordere trasparency) la conversione di forma-to delle immagini noncheacute limposizionedi alcuni filtri (fig 5)

Mutando la modalitagrave operativa sem-pre attraverso la selezione del modo dalmenu View(Toolbars unimmagine ap-pena trattata in image-processor puograveessere immediatamente mappata Lalavorazione a tela di ragno puograve essereeffettuata con la massima precisionegrazie alla disponibilitagrave di un potentezoom e ad un completo set di tracciato-ri (a mano circolari quadrati ecc) Unavolta selezionata una precisa zona dischermo per mezzo dei tracciatori au-tomaticamente appare il pannello per ilsettaggio dellURL di collegamento Inquesto potremo inserirvi lindirizzo http(oppure il link con una determinata pagedel sito o con il file di un contributo me-dia le) ed eventuali commenti alternativi(fig 6)

Venendo da MapThis e successiva-mente dal MapEdit personalmente nonho potuto non rilevare la maggiore pre-cisione dei controlli proposti dal Webl-mage a partire dalleccellente zoomingcon il quale egrave possibile scendere nei mi-nimi particolari delle immagini sottomappatura

Altra apprezzabilissima caratteristicadi ImageWeb egrave poi quella del montag-gio delle GIF animate (fig 7) che lappli-cativo egrave in grado di produrre partendo

MCmicrocomputer n 176 - settembre 1997 261

pidamenteNel primo caso

la varietagrave di voci cisiamo affidati allanotevole sezione difiltri che meglio diun commerciale loshareware CoolEdit 96 mette a di-sposizione Tra ef-fetti di varispeedtagli in frequenzaeccetera siamo riu-sciti a far sembrarevecchia una vocegiovanile stento-rea la piugrave femmini-le delle speaker evia discorrendo

Per quanto con-cerne la resa di ve-re e proprie audioscene con il dialogoreale tra piugrave personaggi (giagrave curati con ifiltri di Cool Edit) un sottofondo musica-le e vari interventi in effettistica pura (ilgaloppo dei cavalli di una carrozza deipassi il vento lo scorrere dellacquaecc) invece di una sono due le soluzio-ni che stiamo attentamente vagliando

La prima porta alluso delle track a di-sposizione di Adobe Premiere ed alluti-lizzo per tutti i videomaker che puntanoa reinventarsi webmaster di un applica-tivo estremamente noto Un applicati-vo questo va detto chiaramente chesolo se giagrave si possiede egrave il caso di pren-dere in considerazione Premiegravere acqui-stato singolarmente costa piugrave di un mi-lione di lire al contrario molti di noilhanno gratuitamente trovato nella con-fezione della scheda di acquisizione vi-deo acquistata

La seconda (che prospettiamo pertutti coloro i quali non posseggono Pre-

262

x Figura Il -Software Au-dio WorkShop Come ilmixer digitale si presentain schermo appena cari-cato

Figura 12 - SoftwareAudio WorkShop Imoduli di registrazio-ne dellapplicativoUna volta effettuata laregistrazione (diretta-mente dai controllipresenti in ciascunadelle quattro track-bar) la sintesi acquisi-ta saragrave immediata-mente disponibile peressere editata mar-cata ed effettizzata

miere e piugrave in generale un editing audiomultitraccia) egrave il download e quindi lat-tenta valutazione di un applicativo comeil SAW Software Audio WorkShop dellaInnovative Quality Software (httpwwwiqsoftcom)

Per valutare le qualitagrave dellapplicativoin questione egrave sufficiente fare un saltoal sito della IQS e nel giro di una decinadi minuti entrare in possesso della ver-sione demo di SAW 63

Tale demo (scaricabile allindirizzohttpwwwiqsoftcomSAWsawhtm)ha la prerogativa di possedere attivetutte le caratteristiche del sistema e dilimitare la lavorazione delle sintesi Wavsolo nella durata massima di un minutoUna limitazione questa che non solonon ci impedisce di dare un giudizio at-tendibile sulle qualitagrave dellapplicativoma che tutto sommato neanche ci li-mita piugrave di tanto nella lavorazione dellenostre piccole creazioni digitali Tale

abuso lo sto perpetrando giagrave qualchegiorno proprio per la realizzazione delleaudioscene che correderanno la favolaipermediale

Andando ad una rapida overviewSAW egrave in grado di gestire fino a quattrotracce in contemporanea (sedici se sidecidesse di acquistare la versionePlus) sia in mono che in stereo

Ciascuna di queste tracce dispone dipropri controlli sul livello lesecuzionesolista (solomute) il pan-pot il pat-ching fading IO e tutti i parametri du-scita Ogni suono ancora prima di esse-re inserito in una delle track a disposi-zione puograve poi essere trattato per mez-zo di un sofisticato equalizzatore para-metrico a sette bande con un controllosul rumore limitatore e compressorenoncheacute effetti deco variabili

Cosigrave come egrave possibile rilevare osser-vando la figura 11 SAW egrave organizzatoin sei distinte aree di lavoro MultiTrackFull View Sequence View SoundFileRegions e in basso a destra la zona deicontrolli (stop play timer e marcatoriIO)

Per come egrave concepito il software ilcuore del sistema egrave situato nella Multi-Track View Uno spazio di lavoro que-sto nel quale egrave possibile combinaremusica e tracce vocali inseribili copiabi-li e riposizionabili alla ricerca della mi-gliore sincronizzazione In essa sonocompresi sotto forma di pulsanti virtua-li controlli come il pan-pot i fader per illivello di uscita lequalizzatore parame-trico eccetera

A seguire troviamo la finestra di FullView delegata alla definizione delle zo-ne (regions) di lavoro al preview allagenerazione dei riferimenti (points) perlediting per creare i loop ecceteraQuindi la finestra Regions View cheprovvede alla realizzazione alfabeticadel listing di tutte le zone marcate pre-cedentemente nella edit list della fine-stra SoundFile Le zone di editing pos-sono essere definite come dei blocchi aseacute stanti che come tali possono esse-re quindi editati in maniera differente ri-spetto ad altri blocchi come al resto del-la sintesi in fase di lavorazione Da talefinestra le varie zone create possonoessere dragate nella finestra principaleMultiTrack

In SAW le zone di editing possonoessere create in vari modi Uno adesempio egrave quello che si genera auto-maticamente allorcheacute si registra diretta-mente da una traccia della finestra di la-voro MultiTrack Un secondo metodo egravequello della definizione manuale a parti-re dalla traccia contenuta nella finestraSoundFile AI riguardo per prima cosa

MCmicrocomputer n 176 - settembre 1997

se del ciclo di forOsele-zionato via mouse

bullbullbullbull

Questo obbligatoriamente sinteticobencheacute articolato egrave il listing delle carat-teristiche principali di SAW Dal punto

E [ bullbull iltOdgt ~ _ l _ Ilolgt

liJ-I-l-I EIEl 1-1-1 131_j5j6I~ ~lHT1 ~i~~vo~ben 1_1 l- ltCondiiIocIoWsa-u bull l

CI bullbull ltnmlLgttlooo~)b

1-) bullbull) bullbull

4iIl0lllld bullbullbullbullbullbullbullbullbullbullbullbullbull

)bn1-jo)

- alt-nD)1

-00el_1~+~ -rmiddot=~

Cl ConiboNlI11D bullbullbullbullD bullbullbull-OO~III01dr

)_

)-

) bull

)-

)-~-

Figura 13 - SoftwareAudio WorkShop Unafase piugrave avanzata del la-voro di montaggio Ol-tre alle prime due trackoccupate dai segnalinidi riconoscimento diogni clip audio inseritosono visibili le selezionidi parti di sintesi marca-ti ed inseriti nella fine-stra Regions View

delle frequenzecontenute nellabanda-passante suCUI agisce

Particolare inte-ressante piugrave il PCdi produzione egrave po-tente (CPU di ran-go RAM a disposi-zione ecc) e piugraveaumentano le ban-de dintervento se-lettive a disposizio-ne del GraphicChannel Equalizer

- il filtro GateCompressorLimiteregrave infine capace digestire differenti bullbull bullbullbull 37funzioni di controllosul volume Imponendo limiti minimi emassimi di segnale per equilibrare ilflusso sonoro lungo tutta la traccia

Figura 14 - Acadia Infu-E tbullbull - ~ _ l _ Ilolgt ~l se Le tre finestre di la-~ 1Ig~ ~ jJ jJ IIliojro bullbull lllq-IgtI ~ voro dellapplicativoliJ-ImiddotI~I EIEl 1-1-1 1(2131_1511-- ltXnID J~~~ ltJlEWgt

ltTl11ZgtDyn_u lIgt]ecultfTTT1D

- ltSCJUPT LAaGUAGE~ gt- I Dynaau Ob1laquot C~et1on bMIIl-- I Glolla1 yalt-bJur-~OblfwU vlI[l bullbull 0

D-gt~ll_1 1 Cleatt Azcay oegrave)ecu

va 9pLigravest bull ne Jolf-rO

1I11lllIlIillllIlIlIlIlllI11

fccedillO1teOb]tet 1

I11111111111111111111111111

I rtloYlt ob)tct coruuwtcu

- tunct1onftIIl~ltlhu~ Lutll_ HoH- [Xt bulotoampkeJ1 (Figura 15 - Acadia Infubull ti thUF1Ud_ bullbull ludl_

UgravellllLutJI_ bullbull Liutll_ se finestra Language IUuSsctPboDtbull n-ePhoMUUSlJlt bullbull Dee listing (quasi completatlUba1UOkt bullbullbullbull balLAd4ttU

mente aperto) di tuttiuun-middot) comandi del JavaScript

tunctllHlm-O talettlthuPlutll_ + +

~Si noti nel foglio di la

1J voro linserzione auto[1111 PotO ToW~ - bullbull matica operata dalllnfu

va evidenziata unarea della forma don-da in lavorazione usando i marcatoriMRK BEG e MRK END (i due bottonisemplicemente denominati B e Epresenti nella finestra SAW)

Fatto ciograve si clicca sul Regions Menue si seleziona lopzione Create New Re-gion Assegnato un nome alla regioneappena marcata si preme OK e il nomestesso appariragrave nella lista alfabetica pre-sente nella finestra Regions

Continuando nella rapida elencazionedi finestre di lavoro e relative caratteri-stiche segue nella lista la finestra Se-quence delegata alla visualizzazione del-le informazioni relative alla singola trac-cia correntemente selezionata nellaMultiTrack View

Infine la Remote Transports Win-dow ultima delle finestre sempre attivein SAW e che egrave specificamente prepo-sta al controllo delle fasi di riproduzioneed alla visualizzazione delle informazionirelative alla posizione del cursore dellalunghezza delle regioni in riproduzioneai controlli del looping e lauto-repeat

SAW egrave ovviamente dotato di una ric-ca serie di effetti che essendo compa-tibili con la tecnologia plug-in possonoessere continuamente sostituiti eo in-tegrati da altri moduli aggiuntivi prodottida terze parti

In SAW tutti gli effetti vengono gesti-ti attraverso un pulldown ad apparizionedenominato Effects Patch Builder che egraverichiama bile dal bottone FX (quello dicolore giallo) presente su ogni tracciadella MultiTrack View Tra quelli rintrac-ciati nella versione demo troviamo

- il Vari-Pitch con il quale egrave possibilecambiare appunto il pitch che la velocitagravedi riproduzione di ogni singola regionemarcata

- il Reverse Audio che provvede (inmaniera comunque non distruttiva) allariproduzione al contrario di una regione

- il Reverse Phase con il quale egrave pos-sibile invertire la polaritagrave dellintera trac-cia audio

- il Center Channel Eliminator cheproduce linversione di polaritagrave di unatraccia e la combinazione dei canaliLeftRight in un segnale mono Tale ef-fetto ha limportante funzione di rimuo-vere tutte le informazioni mono o di ca-nale centrale da un file stereo

- il filtro Graphic Equalizer permette asua volta la possibilitagrave di alterare in varimodi la frequenza del segnale di sintesiregistrato Il filtro egrave progettato similar-mente ad un reale equalizzatore graficocon in piugrave le prerogative di un ottimopara metrico Ciascuna delle sette ban-de di frequenze su cui il filtro permettedi agire egrave ottimizzata rispetto alla media

MCmicrocomputer n 176 - settembre 1997 263

oMntffliifflNilifio M_o Yo Vii f1Jelli 1

ccedil ~ O ITl ~ ca ctlmiddot1_ Tbull~ cc Pl_

i 1_1bullbullbullbullIwww_comIJGamalan bullbullbullbullbulladiav_tltnIlS628

laquox

1704

------iffljwzaaum

Apptication Foundation Cfasses

Felltured ResourceRandom Walk SlmulanonFor the mathematically inclined this JavaScriptbullbull_ bullbull1_ A A~ bullbullbullbullbullbullbullbullAtA _A~_ bullbulllAbullbullbullbullbullbullbullbullbullbullbullbullbullbullbullbullbull_~ bullbullA

Figura 17 - Il sito wwwgamelancompages dal quale egrave possibile apprende-re novitagrave e tecniche su Java e Javascript noncheacute scaricare esempi librerieclassi e programmi giagrave sviluppati

iA bullbullbullbull I ~CornesOonoMC bullbull PPPiIIJJsciol- Wictbullbullol

J

I [-ployu ob]cC conlltllletO[funCtlon bullbull 1oytt(Nnt Lut) (

tJllsriUt- lUtthlsLUt - LUt

-I ltdon lbullbullbullbullbullI Tolt Tolt _

~ bullbullbullbull ---)ltJ1mIlgt

bullbull fu (YU i-l 1lt dttObtctlue_vttduOb)tctlaatOuvu-mu9ftTatl)OftT1ul)ftt4ttttltctlUotO lt+j (

I Illttc loop co(It hue

~ H~

- -bullbull--~--V_-DbullbullV_ bullbullbullbull-0bull~IIgtlHourtObull--I191lT~11 9lTirNlOlIOfhe(l u bullbull no11 NlOe(JIelHltU1(J MlMnAMObull-JlntS~)11 MlTirM(J 000~ ~MT~I bullbull

LnS 110I0 TaUl40

Figura 16 - Acadia Infuse finestra Object lliistinganche in questo caso parziale nella sua estensio-ne di tutti gli object di JavaScript In primo piano ilcomodo pannello delle preferenze nel quale tralaltro egrave anche possibile stabilire lassegnazionedi determinati colori alle stringhe i commenti iTAG HTML e le parole chiave

di vista della facilitagrave di utilizzo le moda-litagrave di lavorazione offerte dal program-ma non sono certo di immediata assimi-lazione Seguendo comunque il tutorialed esercitandosi per un po di tempo siriesce comunque ad afferrare il bandolodella matassa ed allora di SAW se neassapora la notevole potenza Scaricate-lo pure fiduciosi

Acadia InfuseNelle page della favola interattiva

proprio per costituire il fine dellinteratti-vitagrave chi ci si diletteragrave dovragrave trovare do-mande e bottoni tra cui scegliere e c1ic-care sulla risposta giusta

Se si sbaglia si finisce in una page dipenitenza e qui si trovano dei compiti-ni da svolgere Trovare e correggere glierrori grammaticali presenti in una fra-se-trabocchetto far di conto eccetera

Se si indovina si sale alla pagina suc-cessiva e la favola continua proponendorisposte rapide su come secondo il gio-catore la stessa continua E cosigrave si vaavanti Tra domande rapide (SI-NO) equestionari piugrave o meno articolati in cuibisogna digitare la parola giusta ed altrediavolerie Il tutto per rendere piugrave attivoil gioco farvi effettivamente partecipareil giocatore ed offrire alcuni momenti di-dattici sufficientemente interessanti

Per fare tutto ciograve lHTML non basta eil ricorso a JavaScript egrave automatico MaJavaScript bencheacute tutto sommato faci-

le dassimilare come linguaggio di pro-grammazione va comunque imparatonella sua sintassi e sfruttato nelle po-tenzialitagrave delle procedure che tra fun-zioni moduli ed oggetti egrave in grado disviluppare Tutto sommato e in pienanormalitagrave per acquisirne dimestichezzaJavaScript necessita dei suoi tempi diapprendimento Proprio per accorciaretali tempi egrave oggi possibile utilizzare alpari di altri linguaggi (Java compreso)degli applicativi di programmazione vi-suale specificamente dedicati al pro-grammer di Netscape

Uno di questi cosigrave come scritto nel-lintroduzione egrave lAcadia Infuse(wwwacadianscom)

Un RAD (Rapid Application Develop-ment) abile nella realizzazione facilitatae rapida di script sia JavaScript che Li-veWire i quali vengono realizzati sem-plicemente sfruttando la tecnica deldrag-and-drop

Dal punto di vista dellimpostazione avideo Infuse si presenta diviso in tre di-stinte zone (fig 14) Due di selezione (ilvero cuore di un sistema RAD) ed unaquella piugrave ampia sulla destra di compi-lazione

Per quanto riguarda le finestre di se-lezione quella piugrave in alto egrave lo Script Na-vigator il sistema RAD per la selezione(e limmediata copia nella finestra delfoglio di lavoro) dei controlli i form e glioggetti in genere Il suo funzionamentoegrave un po come quello con il quale sonostrutturate le directory del modulo diGestione Risorse di Win95

Da tale insieme ogni qualvolta che siseleziona un controllo un form oppureun altro oggetto il modulo preprogram-mato del codice relativo viene immedia-tamente copiato nella finestra di lavoroIn questa lo stesso modulo prepro-

grammato evidenzieragrave i punti del codicedove lutilizzatore dovragrave a sua volta in-serire i riferimenti (almeno questi) achiamate specifiche a funzioni pagine efile personalmente denominati in un de-terminato modo

Sotto alla finestra dello Script Naviga-tor appare il JavaScript Tree che permezzo di linguette di attivazione puograve divolta in volta visualizzare la lista dei co-mandi-iconici (gli oggetti visual) relativiallinsieme di funzioni oggetti e tag dapassare via drag-and-drop alla finestra dilavoro

La terza finestra appunto quella di la-voro altro non egrave che un semplice con-tenitore nel quale viene di volta in voltariversato il codice delle funzioni gli og-getti i TAG eccetera selezionate nelledue finestre visual

Il programma provvisto di 1O TipsWizard che riguardano alcune tra le piugraveimportanti capacitagrave applicative di Java-Scirpt nella sua versione trial (30 giornidi funzionamento) egrave privo del referenceJavaScript (che egrave in grado di rivelarci al-listante un eventuale errore che si stacommettendo nella scrittura) e dellapossibilitagrave di fare la Preview nel brow-ser settato per default

Piugrave semplice da utilizzarsi che a dirsiInfuse egrave davvero ottimo nellaiuto allaprogrammazione strutturata con Java-Script Il suo costo circa 155 dollarispese di spedizione escluse egrave decisa-mente abbordabile Personalmente giagravescaduto il tempo di prova (e quello cheegrave piugrave grave rimasto con la stragrandemaggioranza dei moduli di gioco dellafavola ancora da realizzare ) non possoormai far altro che spedire via e-mail unbellordine di acquisito

264 MCmicrocomputer n 176 - settembre 1997

oMntffliifflNilifio M_o Yo Vii f1Jelli 1

ccedil ~ O ITl ~ ca ctlmiddot1_ Tbull~ cc Pl_

i 1_1bullbullbullbullIwww_comIJGamalan bullbullbullbullbulladiav_tltnIlS628

laquox

1704

------iffljwzaaum

Apptication Foundation Cfasses

Felltured ResourceRandom Walk SlmulanonFor the mathematically inclined this JavaScriptbullbull_ bullbull1_ A A~ bullbullbullbullbullbullbullbullAtA _A~_ bullbulllAbullbullbullbullbullbullbullbullbullbullbullbullbullbullbullbullbull_~ bullbullA

Figura 17 - Il sito wwwgamelancompages dal quale egrave possibile apprende-re novitagrave e tecniche su Java e Javascript noncheacute scaricare esempi librerieclassi e programmi giagrave sviluppati

iA bullbullbullbull I ~CornesOonoMC bullbull PPPiIIJJsciol- Wictbullbullol

J

I [-ployu ob]cC conlltllletO[funCtlon bullbull 1oytt(Nnt Lut) (

tJllsriUt- lUtthlsLUt - LUt

-I ltdon lbullbullbullbullbullI Tolt Tolt _

~ bullbullbullbull ---)ltJ1mIlgt

bullbull fu (YU i-l 1lt dttObtctlue_vttduOb)tctlaatOuvu-mu9ftTatl)OftT1ul)ftt4ttttltctlUotO lt+j (

I Illttc loop co(It hue

~ H~

- -bullbull--~--V_-DbullbullV_ bullbullbullbull-0bull~IIgtlHourtObull--I191lT~11 9lTirNlOlIOfhe(l u bullbull no11 NlOe(JIelHltU1(J MlMnAMObull-JlntS~)11 MlTirM(J 000~ ~MT~I bullbull

LnS 110I0 TaUl40

Figura 16 - Acadia Infuse finestra Object lliistinganche in questo caso parziale nella sua estensio-ne di tutti gli object di JavaScript In primo piano ilcomodo pannello delle preferenze nel quale tralaltro egrave anche possibile stabilire lassegnazionedi determinati colori alle stringhe i commenti iTAG HTML e le parole chiave

di vista della facilitagrave di utilizzo le moda-litagrave di lavorazione offerte dal program-ma non sono certo di immediata assimi-lazione Seguendo comunque il tutorialed esercitandosi per un po di tempo siriesce comunque ad afferrare il bandolodella matassa ed allora di SAW se neassapora la notevole potenza Scaricate-lo pure fiduciosi

Acadia InfuseNelle page della favola interattiva

proprio per costituire il fine dellinteratti-vitagrave chi ci si diletteragrave dovragrave trovare do-mande e bottoni tra cui scegliere e c1ic-care sulla risposta giusta

Se si sbaglia si finisce in una page dipenitenza e qui si trovano dei compiti-ni da svolgere Trovare e correggere glierrori grammaticali presenti in una fra-se-trabocchetto far di conto eccetera

Se si indovina si sale alla pagina suc-cessiva e la favola continua proponendorisposte rapide su come secondo il gio-catore la stessa continua E cosigrave si vaavanti Tra domande rapide (SI-NO) equestionari piugrave o meno articolati in cuibisogna digitare la parola giusta ed altrediavolerie Il tutto per rendere piugrave attivoil gioco farvi effettivamente partecipareil giocatore ed offrire alcuni momenti di-dattici sufficientemente interessanti

Per fare tutto ciograve lHTML non basta eil ricorso a JavaScript egrave automatico MaJavaScript bencheacute tutto sommato faci-

le dassimilare come linguaggio di pro-grammazione va comunque imparatonella sua sintassi e sfruttato nelle po-tenzialitagrave delle procedure che tra fun-zioni moduli ed oggetti egrave in grado disviluppare Tutto sommato e in pienanormalitagrave per acquisirne dimestichezzaJavaScript necessita dei suoi tempi diapprendimento Proprio per accorciaretali tempi egrave oggi possibile utilizzare alpari di altri linguaggi (Java compreso)degli applicativi di programmazione vi-suale specificamente dedicati al pro-grammer di Netscape

Uno di questi cosigrave come scritto nel-lintroduzione egrave lAcadia Infuse(wwwacadianscom)

Un RAD (Rapid Application Develop-ment) abile nella realizzazione facilitatae rapida di script sia JavaScript che Li-veWire i quali vengono realizzati sem-plicemente sfruttando la tecnica deldrag-and-drop

Dal punto di vista dellimpostazione avideo Infuse si presenta diviso in tre di-stinte zone (fig 14) Due di selezione (ilvero cuore di un sistema RAD) ed unaquella piugrave ampia sulla destra di compi-lazione

Per quanto riguarda le finestre di se-lezione quella piugrave in alto egrave lo Script Na-vigator il sistema RAD per la selezione(e limmediata copia nella finestra delfoglio di lavoro) dei controlli i form e glioggetti in genere Il suo funzionamentoegrave un po come quello con il quale sonostrutturate le directory del modulo diGestione Risorse di Win95

Da tale insieme ogni qualvolta che siseleziona un controllo un form oppureun altro oggetto il modulo preprogram-mato del codice relativo viene immedia-tamente copiato nella finestra di lavoroIn questa lo stesso modulo prepro-

grammato evidenzieragrave i punti del codicedove lutilizzatore dovragrave a sua volta in-serire i riferimenti (almeno questi) achiamate specifiche a funzioni pagine efile personalmente denominati in un de-terminato modo

Sotto alla finestra dello Script Naviga-tor appare il JavaScript Tree che permezzo di linguette di attivazione puograve divolta in volta visualizzare la lista dei co-mandi-iconici (gli oggetti visual) relativiallinsieme di funzioni oggetti e tag dapassare via drag-and-drop alla finestra dilavoro

La terza finestra appunto quella di la-voro altro non egrave che un semplice con-tenitore nel quale viene di volta in voltariversato il codice delle funzioni gli og-getti i TAG eccetera selezionate nelledue finestre visual

Il programma provvisto di 1O TipsWizard che riguardano alcune tra le piugraveimportanti capacitagrave applicative di Java-Scirpt nella sua versione trial (30 giornidi funzionamento) egrave privo del referenceJavaScript (che egrave in grado di rivelarci al-listante un eventuale errore che si stacommettendo nella scrittura) e dellapossibilitagrave di fare la Preview nel brow-ser settato per default

Piugrave semplice da utilizzarsi che a dirsiInfuse egrave davvero ottimo nellaiuto allaprogrammazione strutturata con Java-Script Il suo costo circa 155 dollarispese di spedizione escluse egrave decisa-mente abbordabile Personalmente giagravescaduto il tempo di prova (e quello cheegrave piugrave grave rimasto con la stragrandemaggioranza dei moduli di gioco dellafavola ancora da realizzare ) non possoormai far altro che spedire via e-mail unbellordine di acquisito

264 MCmicrocomputer n 176 - settembre 1997

CREATIVE LABS

Vi presentiamo Sound Blaster AWE64 Standard e AWE64 Goldle schede sonore che sognavano gli appassionatidi audio e i musicisti sono finalmente a portata di manoE di portafoglio

Nel 1989 Creative Labs ha creato lo standard di riferimento nelmondo delle schede audio per PC Fin da allora Sound Siasteregrave stato sinonimo della tecnologia piugrave avanzataLa nostra ultima nata la straordinaria Sound Siaster AWE64 Goldvi offre audio realistico a 64 voci contemporanee e incredibilisonoritagrave strumentali finora disponibili solo nei migliori sistemiprofessionali E tutto attraverso una singola porta MIDIAWE64 Gold vi dagrave una riproduzione sonora impareggiabile evi permette di sfruttare le piugrave avanzate tecnologie audio comeSoundFon~ 20 e E-mu 3D Positional Audio Per un periodolimitato la AWE64 Gold includeragrave Cubasis Audio dellaSteinberg software per lediting musicale in tempo reale e perla registrazione di audio digitaleSe invece siete un musicista in boccio o se per voi il gioco egraveuna cosa seria Sound Siaster AWE64 Standard vi daragrave il piugraveincredibile realismo superando la barriera delle 32 voci E in piugravepotrete godere di stupefacenti effetti sonoriSia la AWE64 Gold che la AWE64 Standard sono pienamentecompatibili con gli altri prodotti Sound Siaster

AWE64GoldSiSiSi

(rapporto segnalerumore middot120 db)

Si(rapporto segnalerumore -90 db)

4MBlespandibili a 28MB)

di nuovo

No

AWE64 StendereiSiSiNo

512KBlespandibili a 24MB)

RAM onboard

Sintetizzatore EMU8000Creative WaveSynthlWGUscita digitale SPIDIF

Uscite RCA placcate in oro

Per saperne di piugrave visitate il nostro sito World Wide WebCreative Zone su Internet (wwwcreativelabscom64it1

bull bullla barriera delsuono