Categoria:Tips
Da Flex-developers.
Le pagine presenti in questa sezione sono una raccolta di script che possono essere utili per risolvere alcuni tasks comuni nello sviluppo di applicazioni.
Modificare le impostazioni di default di Flex
Ecco un tips & tricks su come modificare le impostazioni di default del Flex Compiler.
Anche se non capita spesso di modificare le impostazioni di default di Flex, a volte vi è la necessità di farlo, a secondo delle esigenze che si hanno. Ecco come procedere:
1) Click di destro sulla cartella del progetto > Properties o vai su Project menu > Properties
2) Click Flex Compiler
3) Ci posizioniamo sul campo “Additional Compiler Arguments” e mettiamo le nostre impostazioni.
N.B. Ricordiamoci di effettuare gli opportuni settaggi relativi alle impostazioni che si vogliono dare anche nel tag dichiarativo <mx:Application>.
Es:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="850" height="250" styleName="plain"> </mx:Application>
RemoteClass
Il metadata RemoteClass serve per far registrare a flex il data type della classe;
Per esempio se vogliamo draggare un oggetto da una ListBase ad un altra,
se non abbiamo definito la classe di appartenenza del nostro oggetto come RemoteClass,
si verifica una perdita del data type.
RemoteClass Example
Static Variables e static Methods
L'attributo static è usato all'interno della definizione di una classe e serve a far capire al compilatore che la variabile è associata alla classe stessa e non ad una sua istanza.
In Actionscript 3 come in molti altri linguaggi OO abbiamo la possibilità di definere Static Variables e Static Methods
Fedele Marotti
Photoshop CS3 ita Export Flex Skins
Adobe mette a disposizione uno script per esportare le skins per i componenti Flex da Photoshop,
http://labs.adobe.com/downloads/flex_sdext.html
questo script è composto da due file - ExportFlexSkins.jsx,NewFlexSkins.jsx -
che devono essere salvati nella cartella Adobe Photoshop CS3\Predefiniti\Script
e da una serie di file .psd che devono essere salvati nella cartella Adobe Photoshop CS3\Predefiniti\Flex Skins
Purtroppo questo script funziona solo con la versione in inglese di Photoshop;
Per farlo funzionare con la versione in italiano basta sostituire all'interno del file NewFlexSkins.jsx
questa riga:
var strPresetsFolderDirectory = localize( "$$$/Windows/PresetsFolder/Directory=Presets" );
con questa:
var strPresetsFolderDirectory = localize( "$$$/Windows/PresetsFolder/Directory=Predefiniti" );
oppure potete scaricare il file direttamente da qui
http://www.flex-developers.org/tutorials/NewFlexSkins.zip
Flex tutti gli ShortCuts e loro personalizzazione
Per accedere alla lista di tutti gli shortcut di flex basta premere : CTRL + SHIFT + L e apparirà una list di tutti gli shortcut con la possibilità di configurarli ripremendo la stessa combinazione di tasti (testato su flex builder 2 e 3)
Flex Shortcut x Spostare/Duplicare Righe di codice
Forse non tutti sanno che è possibile selezionando il codice: Spostarlo di riga tenendo premuto ALT sx e direzioni SU o GIù (molto comodo per innestare contenitori dalla visuale codice visto che flex builder non supporta il drag and drop come flash :) oppure Duplicarle tenendo premuto ALT GR + tasti direzionali SU o GIù
Disabilitare tooltip in un'applicazione
La classe ToolTipManager permette di eseguire una customizzazione dell'aspetto e delle funzionalità del tooltip in una applicazione, tra le proprietà presenti vi è enabled, il settaggio di questa a false impedisce la visualizzazione dei tooltip definiti per tutti i componenents dall'applicazione su cui state lavorando.
Filtrare un ArrayCollection
Esempio di filtro per un arrayCollection.
http://www.creativesource.it/flex-dev/filterArrayCollection.rar
ActionScript 3.0 Bitmap Programming
File di esempio nel quale viene catturato il colore di un pixel di una JPG caricata in run time ed eseguita la copia di una porzione di questa.
http://flex.actionscript.it/tutorials/Bitmapper.zip Giorgio Natili
Data Binding custom Events
Per abilitare il data binding su una classe o sulle proprietà della stessa è sufficiente utilizzare il meta tag [Bindable], questo fa si che ogni volta che viene rilevato l'evento propertyChange tutti i listener definiti per le singole proprietà della classe vengono raggiunti dall'evento.
Nella maggior parte dei casi questo tipo di meccanismo funziona perfettamente ma può capitare che in applicazioni di larga scala si creino delle inefficienze dovute alla gestione di vari listners contemporaneamente.
Un modo per otimizzare le risorse utilizzate dalla nostra applicazione è quello di definire un evento specifico per una proprietà definita come bindable
[Bindable(event = 'customEvent')];
ActionScript 3.0 e Flash CS3 FullScreen
File di esempio per attivare il fullscreen in un file SWF creato con Flash CS3 utilizzando una piccola porzione di codice e le impostazioni di pubblicazione del file HTML. http://flex.actionscript.it/images/7/77/Fscreen.fla Giorgio Natili
Flash e tasto destro
Ecco un progetto da seguire che rende finalmente realtà il sogno di tanti sviluppatori che vogliono implmentare il tasto destro del mouse nelle loro applicazioni senza visualizzare il menu contestuale del Flash Player http://code.google.com/p/custom-context-menu/ Giorgio Natili
Flex Autocomplete
File di esempio per creare un sistema di completamento automatico di un campo di testo di input in Flex ed ActionScript 3.0 http://flex.actionscript.it/images/c/c8/Autocomplete.html Giorgio Natili
Richiamare JavaScript da Flex
In Flex è possibile richiare del JavaScript contenuto nella pagina HTML anche senza utilizzare framework più o meno complessi ma semplicemente attraverso il metodo navigateToURL o la classe ExternalInterface.
Il file allegato è un abale esempio attraverso il quale viene richiamata una funzione JavaScript contenuta nei tag <script> della pagina HTML attraverso la quale viene modificato il title della pagina e restituito un messaggio nel file SWF.
<script language="JavaScript" >
function changeTitle(str) {
window.document.title = str;
return "succes";
}
</script>
http://flex.actionscript.it/images/c/c8/JSflex.html Giorgio Natili
Motore di rierca basato sulle API di Yahoo
File di esempio per creare un motore di ricerca in flex basato slle API di Yahoo. Queste API sono disponbili per vari linguaggi e per Flash e Flex sono chiamate ASTRA e disponibili per il dpwnload qui http://developer.yahoo.com/flash/astra-webapis. Per usarle in flex è sufficiente aggiungere il folder Source\Actionscript3 al progetto e definire il namespace xmlns:yahoo="com.yahoo.webapis.search.*". http://flex.actionscript.it/images/c/c8/YahooSearch.html Giorgio Natili
Facciamo apparire la manina con la proprietà buttonMode
Per fare apparire la manina su un immagine che funge da pulsante abbiamo due modi:
1) tramite codice actionscript
2) settando la proprietà buttonMode all'interno del tag di riferimento
Soluzione via codice:
<mx:Script>
<![CDATA[
private function doHandHandler():void {
myImg.buttonMode = true;
}
]]>
</mx:Script>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="doHandHandler()">
Seconda soluzione:
<mx:Image x="10" y="10" scaleContent="true"
source="@Embed('flexGallery/assets/2_sm.jpg')"
id="myImg" click="this.currentState='expand'"
buttonMode="true"/>
N.B. La proprietà buttonMode non si può applicare ad <mx:Label> e a <mx:Text>
Azzeriamo le opzioni di default del tag <mx:Application>
Come sappiamo in Flex tutto il codice della nostra applicazione va all'interno del tag <mx:Application> .... </mx:Application>. Di default il tag <mx:Application> ha una serie di valori, come ad esempio: paddingTop settato su 24 pixel, paddingLeft settato su 24 pixel, fillColors su un colore che sfuma dal grigio leggero ad un grigio più marcato, etc.
Per azzerare tutte queste opzioni di default bisogna settare all'interno del tag <mx:Application> la proprietà styleName su plain
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" styleName="plain">
Il Linkage dei simboli della Libreria in Flash CS3 e AS 3.0
In questo tips&trcks vedremo in breve come effettuare il Linkge (o Concatenamento) dei simboli posti nella Libreria. Rispetto alla versione precedente di Flash abbiamo quache cambiamento, infatti quando si seleziona l'opzione Concatenamento si apre la finestra Proprietà del Concatenamento (Linkage Properties vedi Fig. 2), qui abbiamo due campi di testo Classe Base(Base Class) e Classe(Class). In Classe Base viene identificata la classe che il simbolo eredita, ad esempio se abbiamo un MovieClip esso appartiene alla Classe Base (flash.display.MovieClip). Nel campo Classe assegniamo il nome della classe che poi ci servirà per referenziarci al momento della creazione, in maniera dinamica, della nostra istanza.
Ecco qualche step:
Fig.1
Fig. 2
Un po di codice:
// creiamo un'istanza della bitmap situata nella Libreria // prendendo il nome della Classe assegnato al momento del Concatenamento // nella fattispecie il nome della Classe è "MyPic1" var imageFromLib:MyPic1 = new MyPic1(0,0); var myImage:Bitmap = new Bitmap (imageFromLib); addChild(myImage); myImage.x = 10; myImage.y = 20;
// Oppure si può richiamare con questa procedura abbreviata
//una clip filmato situato nella libreria:
addChild(new mcFlashPlayer()).name = "mcFlashPlayer";
getChildByName("mcFlashPlayer").x = 158;
getChildByName("mcFlashPlayer").y = 20;
http://flex.actionscript.it/tutorials/linkage_in%20AS3.zip
Soluzione al problema di aggiornamento dati con Internet Explorer
Internet Explorer sembra soffrire di un Bug che non permette l'aggiornamento dei dati tramite le chiamate HTTPService di Flex. Una soluzione per ovviare a questo problema è quello di aggiungere delle header ai nostri file xml generati. Ad esempio, se si generano con PHP basta inserire questo codice all'inizio del file:
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
Questo fa in modo che la pagina generata non venga mantenuta in cache e quindi il browser è costretto a leggerla.
ActionScript 3.0 effetto seppia
La nuova release del linguaggio offre molte possibilità in più per manipolare le immagini lato client.
Un esempio di come relaizzare l'effetto sepia lo potete trovare qui http://flex.actionscript.it/tutorials/BitmapperSepia.zip e vederne l'antprima in questa pagine dove è necessario cliccare sulla foto ed attendere per applicare l'effetto http://flex.actionscript.it/images/2/2c/BitmapperSepia.swf
Al di là della classe utilizzata in questo esempio per convertire i valori numerici dei colori in formato HSV che è simile a tante altre che si possono trovare sulla rete, il fulcro dell'esempio è su come sia facile ora recuperare le informazioni relative ad un pixel dell'immagine dopo averne memorizzati i dati in un'istanza della classe Bitmap
loadedImage.bitmapData.lock();
for(var i:int = 0; i < loadedImage.width; i++){
for(var j:int = 0; j < loadedImage.height; j++){
var colorConverter:ColorConverter = new ColorConverter();
colorConverter.argb = loadedImage.bitmapData.getPixel32(i, j);
colorConverter.hue = 50;
colorConverter.saturation = -(colorConverter.value - 100)*.7;
loadedImage.bitmapData.setPixel32(i, j, colorConverter.argb);
}
}
loadedImage.bitmapData.unlock();
E' attraverso i metodi setPixel32 e getPixel32 che avviene la manipolazione dell'immagine.
Con questo semplice script potete applicare quasliasi formula che alteri i valori HSV ad un'immagine.
ActionScript 3.0 recuperare dati da FlashVars o query string
La rigida sintassi della versione 3.0 del linguaggio impone alcuni piccoli cambiamenti come quando si vuole recupaerrare il valore di una variabile passata al Flash Player in query string o con le cosidette FlashVars.
Per accedere alle variabili, contrariamente alle versioni precedenti in cui era sufficiente usare il nome della variabile, è necessario eseguire un cast della proprietà root.loaderInfo ed accedere all'oggetto parameters che contiene tutte le variabili come proprietà
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters; trace(paramObj.nomeVariabile);
Recuperare il numero di versione di un'applicazione AIR con i Namespace
Una soluzione per recuperare i dati in un XML che ha al suo interno definito un namespace di default è la seguente:
var xdata:XML = XML(String(this.nativeApplication.applicationDescriptor).split('xmlns="http://ns.adobe.com/air/application/1.0"').join(""));
installed = xdata.version.text();
Una soluzione più consona e rigorosa è quella che utilizza i namespace tante volte trascurati dagli sviluppatori Flash è la seguente:
var descriptor:XML = NativeApplication.nativeApplication.applicationDescriptor; var ns:Namespace = descriptor.namespaceDeclarations()[0]; var currentVersion:String = descriptor.ns::version;
Preloader in AS3 del filmato principale
Il tips di cui parleremo sarà dedicato ad un preloader applicato al filmato principale. Il preload è stato realizzato in Actionscript 3.
Il filmato sarà composto da 10 fotogrammi e quattro livelli. Nel primo fotogramma del "Livello" actions metteremo tutte le azioni per gestire il preload. Mentre sul "Livello" preloader posizioneremo un campo di testo dinamico per visualizzare la percentuale di avanzamento. Sul "Livello" placeholder in corrispondenza del fotogramma 5 metteremo un istanza della clip mc_content fuori dallo stage infine sul "Livello" content mettiamo un istanza della clip mc_content al centro che sarà visualizzata quando tutto il contenuto del filmato sarà interamente caricato.
// Aggiungiamo un listener per l'evento ENTER_FRAME, e passiamo la funzione "loadingItems"
addEventListener(Event.ENTER_FRAME, loadingItems);
function loadingItems(e:Event):void {
// creiamo tre variabili per memorizzare e fare il calcolo dei Byte caricati e
// quelli totali
var bytes_loaded = Math.round(stage.loaderInfo.bytesLoaded);
var bytes_total = Math.round(stage.loaderInfo.bytesTotal);
var getPercent = bytes_loaded/bytes_total;
// Creiamo sullo stage un'istanza di campo di testo dinamico con lo strumento Testo
// ed assegniamo il nome di istanza "tf_txt"
tf_txt.text = "Caricamento in Corso... " + Math.round(getPercent*100)+"%"
// Formattiamo il testo
var format:TextFormat = new TextFormat();
format.font = "Courier";
format.color = "0xFF0000";
tf_txt.setTextFormat(format);
//trace(Math.round(getPercent*100)+"%");
// infine impostiamo una condizione per verificare lo stato del preload
// se i Byte caricati sono uguali a quelli Totali, rimuoviamo l'evento ENTER_FRAME
// ed andiamo al frame 10 del nostro filmato.
if (bytes_loaded == bytes_total) {
removeEventListener(Event.ENTER_FRAME, loadingItems);
gotoAndStop(10);
}
}
stop();
Files: [1]
Al momento la categoria non contiene alcuna pagina né file multimediale.
