Tra le caratteristiche più usate dell’ambiente di Flash c’è sicuramente la Scale 9 Grid.
Questo “ridimensionamento intelligente” ci permette di modificare le dimensioni di un MovieClip senza deformarne i contorni. Purtroppo esiste ancora un grosso limite all’utilizzo di questa tecnica: non funziona con le Bitmap.
Chi lavora con Flash da abbastanza tempo ricorderà che prima della versione 8 non esisteva uno Scale9, quindi era necessario dividere fisicamente un MovieClip in nove sezioni e ridimensionarle singolarmente, questa operazione è ancora necessaria quando abbiamo a che fare con delle Bitmap, così ho pensato di semplificare la vita ai miei pochi lettori condividendo una Classe che ho chiamato Scale9Bitmap (con uno sforzo di originalità).
Il filmato seguente mostra due istanze che utilizzano lo stesso file. A sinistra il file caricato è stato instanziato come Scale9Bitmap, a destra lo stesso file è stato instanziato utilizzando la Classe Bitmap (nativa di Flash):
[kml_flashembed publishmethod=”dynamic” fversion=”10.0.0″ useexpressinstall=”true” movie=”/wp-content/uploads/2010/08/testScale9Bitmap.swf” width=”480″ height=”240″ targetclass=”flashmovie”]
[/kml_flashembed]
Prima di decidere di scrivere questa Classe ho fatto delle ricerche per vedere se esisteva già una cosa simile ed effettivamente ho trovato moltissimi esempi in giro, ma nessuno di questi mi ha soddisfatto: la maggior parte degli esempi che ho reperito utilizzano uno Sprite contenitore con ben 9 elementi al suo interno, io ho pensato che una Bitmap con ridimensionamento intelligente dovesse rimanere Bitmap, con tutti i vantaggi che ne conseguono in termini di risorse impegnate e facilità di utilizzo.
La Classe funziona come una Bitmap, in più ha una sua Proprietà rectangle che definisce la porzione da ritagliare per il ridimensionamento. Visto che questa Classe estende la Classe Bitmap possiamo utilizzare tutti i Metodi e le Proprietà specifiche delle Bitmap, con la sola differenza che al mutare dei valori di width e height viene rigenerata completamente la BitmapData.
Se la proprietà rectangle viene lasciata null un’istanza di Scale9Bitmap si comporta esattamente come un’istanza di Bitmap.
Per ottenere la BitmapData ridimensionata possiamo richiamare la Proprietà Scale9Bitmap.bitmapData (come si fa per tutte le Bitmap).
Per ottenere o modificare la BitmapData originale (quella che viene usata come template) possiamo usare la Proprietà Scale9Bitmap.originalBitmapData.
L’archivio che potete scaricare in fondo all’articolo contiene questi file:
- assets (cartella)
- DemoBox.png (l’immagine utilizzata per l’esempio)
- com (cartella)
- danielealessandra (cartella)
- display (cartella)
- Scale9Bitmap.as (la Classe di cui stiamo parlando)
- display (cartella)
- danielealessandra (cartella)
- testScale9Bitmap.as (Codice per la Demo che vedete in alto)
- testScale9Bitmap.fla (Filmato per la Demo che vedete in alto)
Spero che questa Classe possa essere utile a molti, per scaricare il file potete utilizzare il form qui sotto.
Puoi leggere l'informativa completa cliccando sul link Privacy Policy che trovi dovunque su questa pagina, e comunque visitando in qualsiasi momento l'indirizzo https://www.danielealessandra.com/privacy-policy/
Buon ridimensionamento intelligente a tutti.
3 replies on “Scale 9 Bitmap”
Ciao, volevo sapere se possibile, come fare 4 bordi tipo cornice adattabili con l’on resize, grazie!
Ciao Emanuele,
se la tua “cornice” è un’immagine puoi utilizzare questa Classe, se invece stai utilizzando delle forme vettoriali va già bene lo Scale9 tradizionale.
In tutti e due i casi puoi inserire una funzione da richiamare all’Evento Resize del contenitore (che sia lo Stage o che sia un altro elemento) che ridimensioni la tua cornice utilizzando le proprietà width e height del target dell’Evento.
Se mi descrivi meglio le tue esigenze sarò lieto di darti una mano.
Credo di averti già risposto altrove, controlla sui Forum:
http://www.flepstudio.org/forum/flash-italiano/6546-bordi-pagina-e-ridimensionamento.html#post34426
http://www.001design.it/forum_italiano/thread.php?id=12071