• 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

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

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

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 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

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

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

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

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

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.

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>