Scacci, Flex, Flash e ActionScript

Ecco un thema da usare con Flex4 o Flash Builder, interamente creato con Flash Catalyst Beta. Questo thema è stato interamente creato con FC, infatti le grafiche usate per creare i componenti sono state create con gli strumenti di disegno che porta in dotazione Flash Catalyst. Qui vedremo i componenti skinnati, non entreremo nel dettaglio della creazione dei componenti. Ecco una lista dei componenti usati in questo file:

• Scroll Panel
• Data List
• Vertical Slider
• Button
• Text Input
• Radio Button
• Check Box
• Horizontal Slider
• Toggle Button
• Vertical ScrollBar

Per alcune informazioni su Flash Catalyst Beta potete anche consultare questo articolo.

Ecco una preview dei componenti

File sorgente FXP

In questo breve tutorial vedremo alcuni workaround e filtri per creare dichiarazioni specifiche per i browser.

Il primo esempio mostra come creare una regola specifica solo per IE7 (internet explorer 7):

*:first-child+html .textformt {font-size: 20px;}

Nel secondo esempio vedremo come creare una regola specifica solo per IE6(internet explorer 6):

* html .textformt {font-size: 15px;}

Nel terzo esempio vedremo come creare una regola specifica solo per IE5(internet explorer 5):

.textformt {font-size /**/: 12px;}

Nell’ultimo esempio vedremo come creare una regola che escluda IE e che venga applicata invece a tutti gli altri browser (Safari, Firefox, Opera):

*|html .textformt {font-size: 10px;}

Alcuni link:

• Tabella - CSS Filters/Hacks
• CSS e Hacks

Installando le estensioni di Flash CS3 su Flash CS4 ho notato che i componenti installati con l’Extension Manager di Adobe non si avviano e non appaino nel pannello Components, questo succede sia con le versioni di Flash CS4 in inglese sia con quello non-English.

Per aggirare il bug dobbiamo procedere nel seguente modo:

• Installare l’estensione con Extension Manager
• Chiudere Extension Manager
• Aprire Flash CS4
• Creare un nuovo file Actionscript 3.0  (New–>Actionscript 3.0) (Nuovo–>Actionscript 3.0)
• Andare su Help–>Manage Extensions… (Help–>Gestione Estensioni)
• Fare il check dell’estensione che si vuole far apparire
• Riavviare Flash CS4
• Andare sul Pannello Componenti e verificare che sia tutto apposto

Questo bug lo riscontrato sulla versione di Flash CS4 per Mac OSX

Appuntamento per il 5 settembre per una giornata gratuita di formazione sulla flash platform. Il meeting organizzato dall’Adobe User Group flex-developers.org, propone una serie di seminari mirati sulle varie tecnologie Adobe e sui nuovi prodotti come Flex 4  e Flash Catalyst. Il meeting si svolgerà presso:

Hotel Sporting
Viale Vespucci, 20
Rimini, Emilia Romagna 47900
Italy

è possibile registrarsi da qui, per maggiori dettagli sul programma si possono avere da qui.

Gli speaker:

• Jaco Pixeldump (pixeldump.org)
• John Lindquist (http://pv3d.org, http://flex4.org)
• Joost Nuijten
• Eros Marcon (actionscript.it)
• Simon Slooten (www.simonslooten.com)
• Matteo Lanzi (aka Gallo_Teo flex-developers.org)
• Adam Flater (http://adamflater.blogspot.com/)
• Michael Labriola (http://blogs.digitalprimates.net/codeSlinger/)
• Gabriele Farina
• Alessandro Crugnola (http://www.sephiroth.it)
• Michael Plank (http://www.powerflasher.de)
• Rich Tretola (http://blog.everythingflex.com/)
• Matt Chotin (http://blogs.adobe.com/mchotin/)
• Giorgio Natili (flex-developers.org)

Il supporto del Threshold è stato introdotto con la versione 8 del Flash Player.

Il metodo threshold( ) è uno dei metodi più complessi nel panorama delle BitmapData API, ma abbastanza potente una volta che abbiamo capito come lavora. Il metodo usa due BitmapData:

• destBitmap, che rappresenta la bitmap che sarà alterata.
• sourceBitmap , che è l’altra bitmap che riceve dei parametri che sono gli sono stati passati. Questo metodo usa i pixel di questa bitmap per fare i suoi calcoli.

Il metodo confronta ogni pixel nel sourceBitmap contro un valore specificato, usando uno dei sei operatori confrontati. Per ulteriori approfondimenti si può consultare il LiveDocs di Adobe.

Ecco in breve la sintassi del metodo:
destBitmap.threshold(sourceBitmap,

sourceRect,
destPoint,
operation,
threshold,
color,
mask,
copySource)

Il parametro, sourceRect , è u’istanza della classe flash.geom.Rectangle. Esso definisce quale porzione del sourceBitmap vogliamo usare per il confronto. Se vogliamo usare l’intera, possiamo passare in sourceBitmap.rect come un valore di questo parametro.

Il parametro destPoint specifica il punto nel destBitmap nel quale i pixels iniziano ad essere affetti dall’alterazione, l’immagine sourceBitmap e sovrappoosta sulla destBitmap. Se vogliamo usare come punto di destinazione 0, 0 basta passarli come parametri al new Point( )  es.: (new Point(0, 0 )).

Il parametro operation è una delle sei stringhe che rappresentano gli operatori di confronto in Actionscript, esse sono: < , <= , > , >= , == , e !=

Il parametro successivo è threshold, ogni pixel viene confrontato con questo valore.

Il parametro mask serve per isolare un particolare canale di colore.

Adesso facciamo un esempio pratico sull’uso del threshold:

import caurina.transitions.*;
 
var url:String = "images/foto7_b.jpg";
var image1:Bitmap;
var destimage2:Bitmap;
var perc:Number;
var loader:Loader;
var image:Bitmap;
 
var holder:MovieClip;
holder = new MovieClip();
addChild(holder);
 
configureAssets();
 
function configureAssets():void {
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
loader.contentLoaderInfo.addEventListener(Event.INIT, initHandler);
loader.contentLoaderInfo.addEventListener(Event.OPEN, openHandler);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
 
var request:URLRequest = new URLRequest(url);
loader.load(request);
holder.addChild(loader);
}
function completeHandler(e:Event):void {
//trace("Caricamento Completato");
 
tf.text = "Caricamento Completato";
}
function initHandler(e:Event):void {
 
var loaderHgt = e.currentTarget.height;
var loaderWdt = e.currentTarget.width;
 
var src_bmpd1:BitmapData = new BitmapData(loaderWdt, loaderHgt);
src_bmpd1.draw(this);
 
var dest_bmpd2:BitmapData = new BitmapData(loaderWdt, loaderHgt, false);
destimage2 = new Bitmap(dest_bmpd2);
holder.addChild(destimage2);
 
var j:Number = 0;
 
function onTransitions():void {
 
j++;
//trace(j)
dest_bmpd2.threshold(src_bmpd1, new Rectangle(0, 0, src_bmpd1.width, src_bmpd1.height), new Point(0, 0), ">=", (j/55) * 0xFFFFFF, 0xFFFFFFFF, 0xFFFFFF, true);
}
Tweener.addCaller(this, {onUpdate:onTransitions, time:1, count:55, transition:"linear"});
 
function onRepeatEffect():void {
 
Tweener.addCaller(this, {onUpdate:onTransitions, time:1, count:55, transition:"linear"});
 
}
 
repeat_btn.addEventListener(MouseEvent.CLICK, onRepeatEffect);
}
 
function openHandler(e:Event):void {
 
//trace("Caricamento inizializzato, attendere il completamento!");
 
}
 
var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.textColor = 0xFF0000;
tf.x = 30;
tf.y = 366;
addChild(tf);
 
function progressHandler(e:ProgressEvent) {
 
perc = Math.round((e.bytesLoaded/e.bytesTotal)*100);
//trace("Caricamento in corso: "+perc+"%");
tf.text = String("Loading: " + perc + "%");
}
 
function ioErrorHandler(e:IOErrorEvent):void {
trace("Impossibile caricare l'immagine: " + url);
 
}
 
/////////////////////////
 
repeat_btn.label = "Repeat";

Download source file

Guarda esempio

Con Flash Player 10 è stato aggiunto un nuovo metodo “Loader.unloadAndStop()“, questa nuova feature automatizza i processi di scaricamento che precedentemente veniva fatto manualmente con il metodo “Loader.unload()“. Questo metodo tenta di scaricare file SWF caricati utilizzando Loader.load() o Loader.loadBytes() mediante la rimozione dei riferimenti agli oggetti EventDispatcher, NetConnection, Timer, Sound o Video del file SWF secondario. Di conseguenza, per il file SWF secondario e il relativo elenco di visualizzazione si verifica quanto segue:

1. i suoni vengono interrotti;
2. listener di eventi dello stage vengono rimossi;
3. i listener di eventi per enterFrame, frameConstructed, exitFrame, activate e deactivate vengono rimossi;
4. i timer vengono interrotti;
5. le istanze Camera e Microphone vengono scollegate;
6. i clip filmato vengono interrotti.

Il metodo unloadAndStop() accetta pure un parametro gc (garbage collector) che di default è impostato su true, esso suggerisce al garbage collector di eseguire gli oggetti secondari SWF (true) o non eseguirli (false).

Adesso vediamo un esempio su come usare il metodo unloadAndStop():

var file:String = "external.swf";
var ldr:Loader;
var mcload:MovieClip;
var urlReq:URLRequest;
 
ldr = new Loader();
addChild(ldr);
urlReq = new URLRequest(file);
ldr.load(urlReq);
 
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onSWFloaded);
 
function onSWFloaded(e:Event):void {
 
ldr.x = 10;
ldr.y = 50;
 
ldr.contentLoaderInfo.removeEventListener(Event.COMPLETE, onSWFloaded);
 
mcload = ldr.content as MovieClip;	
 
}
 
btnUnload.addEventListener(MouseEvent.CLICK, onSWFunload);
 
function onSWFunload(e:MouseEvent):void {
 
	ldr.unloadAndStop();
}

Ecco qualche link:
TechNote Adobe
Grant Skinner

In questo esempio vedremo come fare l’embed del font in Flash. Creiamo un file  embedfont.fla e lo salviamo. Adesso facciamo l’embed del font, c’è da dire che qualora si vogliono utilizzare ad esempio tre versioni diverse dello stesso font (ovvero normale, bold e corsivo) bisogna embeddare il font tre volte con tre nomi diversi, adesso vediamo la procedura per embeddare un font in Flash.

1) Selezioniamo Window > Library (Finestra > Libreria)se la libreira di flash non è aperta,
2) Dal menu pop-up Options (Opzioni) selezioniamo New Font (Nuovo Font), quindi apparirà la finestra di dialogo del simbolo,
3) Sotto Font, selezioniamo Adobe Caslon Pro,
4) Quindi digitiamo sopra il nome che desideriamo attribuire al nostro font di libreria, nella fattispecie assegniamo AdobeCaslon, quiindi clicchiamo su OK. A questo punto nella Libreria (Library) dovrebbe apparire un font con il nome AdobeCaslon.
5) Selezioniamo nella Libreria (Library) AdobeCaslon e su di esso facciamo click di destro, apparirà il menu pop-up di scelta qui selezioniamo l’opzione Linkage (Concatenamento). Nella finestra di dialogo Linkage (Concatenamento) selezioniamo Export For ActionScript. A questo punto apparirà una finestra dove dirà che la classe è stata creata quindi facciamo click su OK.

Adesso operiamo col codice, creiamoci una Classe FontEmbed, quindi in Flash facciamo File > New(Nuovo) e selezioniamo dalla finestra di dialogo ActionScript File. Fatto questo salviamo il file nella stessa directory dove risiede il file FLA, lo salviamo assegnando il nome FontEmbed.

N.B. nella Library (Libreria) creiamo altri due simboli del font Adobe Caslon Pro uno con Bold e l’altro con Italic, in questo esempio abbiamo assegnato i seguenti nomi AdobeCaslon per la versione normale del font, AdobeCaslonBold per quella Bold e AdobeCaslonItalic per quella Italic.

Adesso siamo pronti per scrivere il codice:

package {
 
	import flash.display.*;
	import flash.text.*;
 
	public class FontEmbed extends Sprite {
 
		private var msg:String = "Lorem ipsum dolor sit amet";
		//
		private var fmt:TextFormat;
		private var tf:TextField;
		private var adobecaslon:AdobeCaslon = new AdobeCaslon();
 
		private var format:TextFormat;
		private var tf_bold:TextField;
		private var adobecaslon_bold:AdobeCaslonBold = new AdobeCaslonBold();
 
		private var text_fmt:TextFormat;
		private var tf_italic:TextField;
		private var adobecaslon_italic:AdobeCaslonItalic = new AdobeCaslonItalic();
 
		public function FontEmbed() {
 
			fmt = new TextFormat();
			fmt.font = adobecaslon.fontName;
			fmt.color = 0x333333;
			fmt.size = 20;
 
			tf = new TextField();
			tf.embedFonts = true;
			tf.defaultTextFormat = fmt;
			tf.text = msg;
			tf.autoSize = TextFieldAutoSize.LEFT;
			tf.x = 10;
			tf.y = 10;
			addChild(tf);
 
			//Adobe Caslon Bold
			format = new TextFormat();
			format.font = adobecaslon_bold.fontName;
			format.color = 0x333333;
			format.size = 20;
 
			tf_bold = new TextField();
			tf_bold.embedFonts = true;
			tf_bold.defaultTextFormat = format;
			tf_bold.text = msg;
			tf_bold.autoSize = TextFieldAutoSize.LEFT;
			tf_bold.x = 10;
			tf_bold.y = 45;
			addChild(tf_bold);
 
			//Adobe Caslon Italic
			text_fmt = new TextFormat();
			text_fmt.font = adobecaslon_italic.fontName;
			text_fmt.color = 0x333333;
			text_fmt.size = 20;
 
			tf_italic = new TextField();
			tf_italic.embedFonts = true;
			tf_italic.defaultTextFormat = text_fmt;
			tf_italic.text = msg;
			tf_italic.autoSize = TextFieldAutoSize.LEFT;
			tf_italic.x = 10;
			tf_italic.y = 80;
			addChild(tf_italic);
		}
		//
	}
}

A questo punto andiamo sul FLA embedfont e nella Document Class facciamo l’import della nostra Classe FontEmbed.

Download source file

Guarda esempio

Il 6 Marzo 2009 a Roma si svolgerà l’evento Mobile Dev Day, la sede dell’evento è l’Hotel Ritz sito in Piazza Euclide. Durante l’evento si parlerà delle nuove feature di Flash Lite 3.1.

La partecipazione al meetings è totalmente gratuita, per partecipare basta registrarsi (link).

Altre info sull’evento si possono ottenere consultando questo link.

CSS Animation permette di ottenere vere e proprie animazioni all’interno di pagine web, senza ricorrere a tecnologie come JavaScript o Flash. C’è da dire che il supporto delle animazioni non avviene su tutti gli browser, infatti il supporto di queste specifiche sono state introdotte nelle ultime build di Safari il cui cuore è basato su WebKit (un motore di rendering opensource).

Le Transitions specificate usano le seguenti proprietà:

• transition-property
• transition-duration
• transition-timing-function
• transition

Ecco un semplice esempio di codice:

div {
  opacity: 1;
  -webkit-transition: opacity 1s linear;
}
 
div:hover {
  opacity: 0;
}

questa semplice transition permette di effettuare un fade-out all’hover sulla div.

Clicca su CSS Animation per altri esempi. Si raccomanda di usare Safari di Apple per una corretta visualizzazione delle animazioni.

Un piccolo Tips su un bug di IE6 sulla duplicazione dei caratteri, dovuta al fatto che IE6 non digerisce bene i commenti <!– End of the body pagina –>, da qui il problema della duplicazione dei caratteri.

Attraverso delle porzioni di codice vedremo la soluzione e il problema.

Problema:

<!-- End of the body pagina -->
<p id="footer">
<p id="right_clm">
 
Lorem impsum amet 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit
 
<!-- CLEAR -->
 
<div class="clear_left"></div>

Con questa porzione di codice si dovrebbe verificare l’effetto indesiderato della duplicazione dei caratteri.

Adesso vediamo le strade percorribili per la soluzione:

• La prima soluzione ed è quella più semplice è quella dei commenti condizioniali, es: <!–[if !IE]> End of the body pagina <![endif]–> in questo modo si dovrebbe risolvere il bug;
• La seconda soluzione è quella di dare -3px di margin-right sull’ultimo float:left;

Soluzione:

Commento condizionale:

<!–[if !IE]> End of the body pagina <![endif]–>
<div id=”footer”>
<div id=”right_clm”>
<p>P.IVA.: </p>
<p>Copyright Pronto Mutui © 2008 - All rights reserved</p>
</div>
</div>
<!– CLEAR –>
<div class=”clear_left”></div>
 
Seconda soluzione -3px:
 
#footer
{
background-image: url(../images/bg_footer.jpg);
background-repeat: no-repeat;
float: left;
height: 69px;
width: 750px;
margin-bottom: 2px;
margin-top: 9px;
margin-right: -3px;
}
… altre regole
 
#right_clm
{
float: right;
margin-right: 18px;
margin-top: 23px;
}
#right_clm p
{
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
color: #111;
margin: 0px;
padding: 0px;
line-height: 19px;
text-align: right;
}
 
Codice (X)HTML:
 
<!– End of the body pagina –>
<div id=”footer”>
<div id=”right_clm”>
<p>P.IVA.: </p>
<p>Copyright Pronto Mutui © 2008 - All rights reserved</p>
</div>
</div>
<!– CLEAR –>
<div class=”clear_left”></div>