Categoria ‘Sviluppo’
Grandi novità per gli sviluppatori AIR. È stata rilasciata finalmente la versione 1.0! Fine della beta quindi! Nuove SDK (vitali per la compilazione in ambienti come Aptana Studio, Eclipse, etc…) e aggiornamento delle estensioni per Dreamweawer e Flash CS3 Professional in italiano! Fino a ieri, infatti, non era possibile sviluppare un’applicazione AIR con Flash CS3 Professione in italiano. Ora il nuovo menu per la creazione di RIA AIR è disponibile e funzionante! Potete trovare tutte gli aggiornamenti (fix della sicurezza ed estensioni) direttamente sul sito.
Altra novità è il lancio ufficiale di Adobe Open Source, il nuovo sito che terrà traccia di tutte le novità nell’ambito dell’open source Adobe e non solo. Diventa questo, quindi, il punto di riferimento degli sviluppatori che potranno travare interessanti contributi con demo, codici sorgente e molto altro, come il supporto per i progetti open Tamarin e BlazeDS.
Prossimamente vedremo come sviluppare una semplice applicazione AIR con Flash e Dreamweaver!
Continua...
Mapstraction è una libreria Javascript che si pone come layer intermedio per utilizzare le Mappe dei più noti sistemi oggi disponibili. L’idea è quella di fornire un wrapper, un’interfaccia, in grado di unificare il codice a prescindere, quindi, dal tipo di motore di rendering mappe che si desidera utilizzare.
Sul sito sono disponibili demo e documentazione. La libreria è scaricabile in modo gratuito. In questa release vengono supportati i 9 motori più noti: OpenStreetMap, Yahoo, Google, Microsoft, Map24, MultiMap, MapQuest, FreeEarth e OpenLayers.
Supporta la creazione di Point, Line e Polygon. È possibile inserire proprie immmagini in sovraimpressione. Interessante il supporto per Geocoding degli indirizzi stradali e le direzioni di marca! Utile la compatibilità con i feed GeoRSS e KML.
Dagli esempi del codice si capisce subito quanto sia utile uno strumento di questo tipo. Ogni “interfaccia” (Google, Microsoft, Yahoo, etc…) ha infatti una sua serie di API. Tramite Mapstraction, invece, possiamo scrivere un unico blocco di codice e lasciare all’utente finale la scelta del tipo di provider da usare. Ad esempio, quando si inizializza la libreria, la riga di codice seguente:
1
2
| // initialise the map with your choice of API
var mapstraction = new Mapstraction('mapstraction','google'); |
Determina il motore Google! Viene da se che, sostituiendo la stringa ‘google’, cambiamo immediatamente motore di rendering delle mappe!
1
2
| // initialise the map with your choice of API
var mapstraction = new Mapstraction('mapstraction','microsoft'); |
Nonostante la libreria non sia davvero completa, permette di integrare in un unico framework tutte le features “sparse” delle singole librerie. Il motore di rendering Microsoft, ad esempio, permette la visualizzazione “a volo d’uccello”. OpenStreetMap e Google hanno un’ottima gestione delle mappe stradali, comprese quelle italiane. Insomma, per chi deve affrontare lo sviluppo di un’applicazione con l’uso di Mappe e non riesce – proprio - a decidere quale tecnologia utilizzare per lo sviluppo, Mapstraction permette – appunto – di astrarsi, di risolvere il dilemma introducendo, di fatto, un terzo attore e, in tale modo, fornirci la possibilità di cambiare motore di rendering in qualsiasi momento. Quindi bella idea da seguire e da usare!
Continua...
Appena rilasciata ecco l’ennesima libreria Unobtrusive Javascript per gallerie di immagini e non solo. Lightview, nella release 2.0.0_rc1, aggiunge anch’essa le funzioni per “aprire” delle Window con contenuti che vanno oltre la semplice immagine: filmati Flash, QuickTime, Form e IFRAME! Rispetto alla precedente versione (la 1.1.0 – che gestisce solo immagini), quindi, questa release candidate si arricchisce delle funzionalità presenti anche in altre librerie. Gli strumenti richiesti da Lighview per funzionare sono gli arcinoti Prototype 1.6.0.2 e Scriptaculous 1.8.1. Gliattributi usati per gestire la libreria sono class e rel.
Un’aspetto interessante di questa libreria è l’estrema cura della grafica con cui si presenta.
Voto: 9 – Home page di Lightview
Continua...
Ho pensato a quanti “bozzetti” e Case Study ho fatto per i clienti, così ho deciso di proporli, con una categoria propria (Case Study), invece di lasciarli “marcire” nel mio HD. Il cliente, infatti, sceglie una delle n proposte, spesso quella che non ti aspetti e le altre, alcune che ritenevi valide, rimangono sconosciute zippate nell’HD! Le proposte grafiche per un sito Web, ad esempio, o semplici studi su loghi o effetti.
PERSONALI: CASE STUDY E-LEMENTI.COM
Alcuni studi, realizzati da me e da =stid=, sul sito e-lementi.com
Per la galleria ho utilizzato Shadowbox.js: usa il tasto ESC per chiudere l’anteprima e i tasti cursore per andare avanti e indietro.
Continua...
Qualcuno potrebbe dire - e non a torto – basta! Di librerie Javascript (Unobtrusive – non intrusive, o parzialmente) per gestire immagini e gallerie ce ne sono davvero tante. Comunque sia ecco la lista, con pregi e difetti, delle migliori che ho provato.
SLIMBOX 1.41
Estremamente minimale, 7K (alla versione 1.41), richiede mootools per funzionare. Come indicato sulla Home page è un vero e proprio clone grafico di Lightbox, che vedremo più sotto. Sinceramente, a parte l’estrema compattezza della libreria, non possiede caratteristiche peculiari. Sullo stesso sito, comunque, è possibile trovare anche uno script per generare riflessioni runtime… al limite può essere utile questo 
Voto: –6 – Home Page Slimbox, Home Page Reflection.js for MooTools
LIGHTBOX2
Una delle più note e semplici. Gestisce in questa release sono immagini (quindi non funziona con QuickTime, Flash o altro). Per il suo funzionamento richiede Prototype e Scriptaculous. Usa l’attributo rel per identificare i link delle immagini da processare:
1
| <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1 </a> |
Come le altre librerie che vedremo, supporta la modalità slideshow, inserendo tra parentesi quadre un qualsiasi identificativo in una serie di link/image:
1
2
3
| <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1 </a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2 </a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3 </a> |
Voto: 6 – Home Page Lightbox2
LIGHTWINDOW 2.0
Anche questa è abbastanza diffusa! Dopo tutto come capire qual’è la più usata? . Comunque sia è estremamente completa e versatile. Sul sito campeggia la richiesta di donazioni per l’acquisto di un Mac… un tantino invasiva e pressante… Comunque sia, come la precedente, per il suo funzionamento, richiede la presenza di Prototype e Scriptaculous. A differenza della precedente, tuttavia, questa permette di visualizzare moltisiimi tipi di file: dalle immagini, filmati QuickTime, filmati Flash, pagine HTML esterne e PDF. Di contro, utilizza vari attributi, alcuni facoltativi (author,caption e title) altri obbligatori (class e params -per impostare il comportamento della libreria). Ad esempio, per visualizzare una gallery o slideshow usa l’attributo rel:
1
2
3
| <a href="gallery/0-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1 </a>
<a href="gallery/1-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown">image #2 </a>
<a href="gallery/2-sushi.jpg" class="lightwindow" rel="[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3 </a> |
Voto: 8 – Home Page LightWindow 2.0
SHADOWBOX 1.0B
Nonostante sia alla versione 1.0 beta, questa è forse la libreria più completa, sia dal punto di vista funzionale sia per le librerie supportate. Per il suo funzionamento, infatti, è possibile scegliere tra una serie di framework, grazie a dei file “adapter” appositamente realizzati e fornite dall’autore:
L’effetto visivo (configurabile tramite skin/css), poi, a differenza delle altre, è sicuramente più accattivante. Gli attributi usati sono solo il rel dove, al sue interno, trovano spazio tutti gli altri parametri di configurazione. Ad esempio, per realizzare una gallery, basta usare:
1
2
| <a href="beach.jpg" rel="shadowbox[Vacation]">The Beach </a>
<a href="pier.jpg" rel="shadowbox[Vacation]">The Pier </a> |
Se si desidera impostare qualche opzioni (vedi sito per la lista completa) basta usare la seguente sintassi:
1
| <a href="myimage.jpg" rel="shadowbox;options={overlayOpacity: 0.5, resize: false}">My Image </a> |
Su Internet se ne possono trovare anche altre, come ad esempio Highslide JS. Anzi, se volete segnalarmi qualche altra libreria… Comunque sia, personalmente, preferisco Shadowbox per semplicità, scalabilità e cross-framework.
Voto: 9 – Home Page Shadowbox 1.0B
Continua...
Ecco una dimostrazione di quanto è semplice sviluppare applicazioni in Flash CS3. Dopo le varie discussioni sullo sviluppo di uno strumento “erase”, propongo una semplice applicazione che implementa in modo completo alcune delle cose dette nei precedenti Post. In questo esempio ho inserito una ToolBar “draggabile”, la possibilità di scegliere il colore del pennello e quello di sfondo, la selezione dello strumento “erase” e un leggero effetto “blur” durante il disegno!
Scarica il sorgente per Adobe Flash CS3 Professional
Continua...
Lavorando con il testo statico ho scoperto un cuorioso difetto su Adobe Flash CS3 Professional. Inserendo un testo statico in un filmato e inclinandolo (skew), si ottengono risultati diversi, quando si manda in esecuzione il filmato, in base all’impostazione dell’antialiasing:
Nell’ambiente authoring di Flash, invece, l’anteprima è identica per entrambe le scelte di antialiasing. Nell’esempio mostrato qui sopra ho usato un Font Arial. Tuttavia il problema si presenta con qualsiasi Font, anche quelle Bitmap. Lo stesso difetto si presenta anche inserendo il testo statico all’interno di un MovieClip e inclinando quest’ultimo invece del testo vero e proprio. (??)
Continua...
Partendo dai codici forniti in Creare un’applicazione Paint in Flash CS3, ed eseguendo piccole modifiche, si può migliorare notevolmente lo strumento di “erase”. Aggiungendo una Shape non visibile, è possibile usarla come “piano” per eseguire il draw() in modalità di fusione “erase”. Come mostrato nell’esempio qui sotto, dopo aver disegnato qualcosa, tenete premuto il tasto Ctrl e l’effetto di “cancellazione” appare ora in tempo reale.
Il codice è il seguente – sorgente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| import flash.events.MouseEvent;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.display.GradientType;
//
import flash.geom.Matrix;
//
var md :Boolean = false;
//
var event_spr :Sprite = new Sprite();
addChild (event_spr );
//
var area_width :Number = event_spr .stage.stageWidth;
var area_height :Number = event_spr .stage.stageHeight -32;
//
var fillType :String = GradientType.LINEAR;
var colors:Array = [0xFF0000 , 0x00FF00 , 0x0000ff ];
var alphas:Array = [1, 1, 1];
var ratios:Array = [0, 128, 255];
var spreadMethod :String = SpreadMethod.PAD;
var matrix:Matrix = new Matrix();
matrix.createGradientBox (area_width , area_height , 1, 0, 0);
//
with (event_spr .graphics) {
beginGradientFill (fillType ,colors,alphas,ratios,matrix,spreadMethod );
drawRect (0,0,area_width , area_height );
endFill ();
}
// paint event
event_spr .addEventListener (MouseEvent.MOUSE_DOWN, _onMouseDown );
event_spr .addEventListener (MouseEvent.MOUSE_MOVE, _onMouseMove );
event_spr .addEventListener (MouseEvent.MOUSE_UP, _onMouseUp );
event_spr .addEventListener (MouseEvent.MOUSE_OUT, _onMouseUp );
//
var bmpd :BitmapData = new BitmapData(event_spr .width,event_spr .height,true,0);
var bmp :Bitmap = new Bitmap(bmpd );
addChild (bmp );
//
// shape temporanea
var draw_shape :Shape = new Shape();
addChild (draw_shape );
//
// shape, non visibile, usata per la "cancellazione"
var erase_shape :Shape = new Shape();
//
function _onMouseDown (e :MouseEvent):void {
debug ("_onMouseDown");
draw_shape .graphics.lineStyle (10, 0xffffff , 1);
erase_shape .graphics.lineStyle (20, 0xffffff , 1);
draw_shape .graphics.moveTo (e .localX,e .localY);
erase_shape .graphics.moveTo (e .localX,e .localY);
md = true;
}
//
function _onMouseUp (e :MouseEvent):void {
md = false;
bmp .bitmapData.draw (draw_shape );
draw_shape .graphics.clear ();
erase_shape .graphics.clear ();
}
//
function _onMouseMove (e :MouseEvent):void {
debug ("_onMouseMove");
if (md && !e .ctrlKey) {
draw_shape .graphics.lineTo (e .localX,e .localY);
} else if (md && e .ctrlKey) {
erase_shape .graphics.lineTo (e .localX,e .localY);
bmp .bitmapData.draw (erase_shape ,null,null,"erase");
}
}
//
function debug (v :String):void {
var d:Date = new Date();
trace (d.getMinutes()+":"+d.getSeconds()+":"+d.getMilliseconds()+": "+v );
} |
È stata aggiunta una nuova Shape, erase_shape, non visibile (non è stato effettuato nessun addChild()):
1
2
3
| ...
// shape, non visibile, usata per la "cancellazione"
var erase_shape :Shape = new Shape(); |
Nella parte di codice che si preoccupa di disegnare è stato introdotto il controllo per il tasto Ctrl e, se premuto, viene interessata proprio la Shape erase_shape e copiata sulla Bitmap:
1
2
3
| ....
erase_shape.graphics.lineTo (e.localX,e.localY);
bmp.bitmapData.draw (erase_shape,null,null,"erase"); |
Continua...
Come esposto in Actionscript Flash contest: erase tool non è possibile “cancellare” una particolare zona di uno Sprite, MovieClip o Shape su cui sono state tracciate linee o rettangoli tramite il puntatore graphics. Esiste, infatti, il solo metodo clear() che, tuttavia, ha effetto sull’intera area del nostro oggetto. La soluzione al problema risiede nella possibilità di usare gli oggetti Bitmap e BitmapData. Come vedremo possiamo accedere direttamente ai dati Bitmap e manipolarli in modo da “cancellare” i tratti con un vero e proprio strumento “cancellino”.
Presenterò due metodi diversi per realizzare il “cancellino”. Il primo “disegna” (cancella) i dati direttamente nella BitmapData, sfruttando il metodo fillRect() – si può usare anche setPixel() per esempio. Il secondo metodo, quello che preferisco, sfrutta i metodi di fusioni (blendMode).
Prima di tutto vediamo che tipo di organizzazione minimale è necessaria per realizzare un semplice Painter in Flash. Lo schema presentato qui sotto vale per entrambe le proposte del “cancellino”:
Ho creato tre layer: il primo, MovieClip o Sprite, funziona da sfondo e gestore eventi (MouseDown, MouseMove e MouseUp). Il secondo, la Bitmap, è il nostro layer principale, quello che conterrà effettivamente la grafica disegnata e su cui sarà applicata la funzione “cancellino”. Il terzo e ultimo layer, lo Shape, risolve due questioni: la prima è che permette di utilizzare direttamente le funzioni messe a disposizione dal puntatore graphics (come lineStyle, drawRect(), ecc…). Inoltre aumenta le performance durante il tracciamento grafico, come spiegato in dettaglio più sotto.
Continua...
Per completezza, in relazione a Painting Flash CS3: effetti con le matrici Matrix voglio sottolineare che le Matrix non sono necessarie per il comportamento indicato nel precedente post. Infatti vediamo nell’esempio qui sotto:
Il codice, leggermente diverso da quello precedente, è il seguente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| /*
** Actionscript 2.0 code
*/
import flash.events.MouseEvent;
import flash.geom.Matrix;
// flag per il detect del mousedown
var md :Boolean = false;
// creo una lavagna front
var lvg1 :Sprite = new Sprite();
lvg1 .graphics.lineStyle(0,0xffffff );
lvg1 .graphics.beginFill(0x666666 );
lvg1 .graphics.drawRect(0,0,199,199);
lvg1 .graphics.endFill();
addChild(lvg1 );
lvg1 .x = lvg1 .y = 30;
// creo la lavagna inclinata
var lvg2 :Sprite = new Sprite();
lvg2 .graphics.lineStyle(0,0xffffff );
lvg2 .graphics.beginFill(0x666666 );
lvg2 .graphics.drawRect(0,0,199,199);
lvg2 .graphics.endFill();
lvg2 .x = 400;
lvg2 .y = lvg1 .y;
lvg2 .rotation = 45;
lvg2 .scaleX = lvg2 .scaleY = .6 ;
addChild(lvg2 );
//
// paint event
lvg1 .addEventListener (MouseEvent.MOUSE_DOWN, _onMouseDown );
lvg1 .addEventListener (MouseEvent.MOUSE_MOVE, _onMouseMove );
lvg1 .addEventListener (MouseEvent.MOUSE_UP, _onMouseUp );
//
function _onMouseDown (e :MouseEvent):void {
trace("_onMouseDown");
var c:uint = 0xffffff ;
e .target.graphics.lineStyle (10,c,1);
lvg2 .graphics.lineStyle (10,c,1);
e .target.graphics.moveTo (e .localX,e .localY);
lvg2 .graphics.moveTo (e .localX,e .localY);
md = true;
}
//
function _onMouseUp (e :MouseEvent):void { md = false; }
//
function _onMouseMove (e :MouseEvent):void {
trace("_onMouseMove");
if (md ) {
e .target.graphics.lineTo (e .localX,e .localY);
lvg2 .graphics.lineTo (e .localX,e .localY);
}
} |
In questo caso le righe dalla 22 alla 25 dimostrano che anche con semplici rotazione e spostamenti l’effetto si ripete.
Continua...
Ultimi Commenti
Giovambattista Fazioli: @Nik: Sono contento! In bocca al lupo dunque!!
Nik: Lunedì ho l’esame di informatica su java, grazie mi sei stato utilissimo, il libro che ho era poco chiaro...
Marco: Ti ringrazio moltissimo, mi hai illuminato
ho risolto impostando [cc_objc] //OptionViewController.m -...
Giovambattista Fazioli: @Marco: Ti consiglio un approccio credo più corretto. Se hai eseguito il subclass del tab...
luigi: molto chiaro e semplice devo ammettere che anche scrivendo da un pà difficilmente uso delegati creati da...