Home Page

6 Marzo 2008

File Upload con Flash e PHP

Già da diverso tempo è stata introdotta la classe actionscript flash.net.FileReference che permette la gestione degli upload/download da Flash Player.
Abbiamo già usato in Webgriffe questa classe per diversi progetti web, in particolare per backoffice e web applications, ma recentemente ci siamo scontrati con un malfunzionamento di questo tipo di implementazione su un sito in Flash ospitato su TopHost al quale dovevamo permettere l’upload di curricula tramite form.
Accadeva che all’atto dell’upload il file non veniva scritto sul server ma veniva restituito un HTTPError 406.
Il problema si presentava solo sul server di TopHost e consultando le FAQ e la guida tecnica fornita dal mantainer abbiamo concluso che era causato da impostazioni di sicurezza. In pratica TopHost blocca l’attribuzione di permessi a file e cartelle superiori al chmod 0750.

Per completezza di informazione riporto il code actionscript utilizzato:

import flash.net.FileReference;var fileTypes:Array = new Array();
var allowedTypes:Object = new Object();
allowedTypes.description = "Documenti (*.pdf, *.doc, *.rtf, *.txt)";
allowedTypes.extension = "*.pdf; *.doc; *.rtf; *.txt";
fileTypes.push(allowedTypes);
var fileRef:FileReference = new FileReference();
var listener:Object = new Object();
listener.onComplete = function() {
trace("CURRICULUM FILE UPLOADED!");
};

listener.onHTTPError = function(file:FileReference, error:Number):Void {
trace("onHTTPError: " + file.name + " Error: " + error);
}

fileRef.addListener(listener);
curriculaForm.btn_browse.btn.onRelease = function() {
fileRef.browse(fileTypes);
};

e il codice PHP invece

if ($_FILES['Filedata']['name']) {$uploadDir = "/uploadedfiles/curricula/";
$uploadFile = $uploadDir.$_FILES['Filedata']['name'];
move_uploaded_file($_FILES['Filedata']['tmp_name'], $uploadFile);
}

Per aggirare il problema ci sono sostanzialmente due soluzioni da provare.

  1. Dal pannello di controllo di TopHost cliccare il pulsante “Ripristina spazio web” che reimposta i permessi corretti alle cartelle e ai file del sito.
  2. Modificare il codice PHP precedente aggiungendo il comando chmod($uploadFile, 0644) subito dopo move_uploaded_file(...)

Pubblicato in Flash, Actionscript | 2 Commenti »

7 Febbraio 2008

Dynamic textField kerning in Flash8

Stiamo lavorando alla nuova versione del sito web aziendale (tempo permettendo) e come è giusto ci si pone sempre degli obiettivo complessi, delle soluzioni nuove e complicate.
All’atto del progetto grafico in Photoshop alcuni campi di testo sono stati pensati con il font Adobe Garamond Pro con un corpo molto grande e un kerning di -50 che in Flash si traduce in -3.

Andando a realizzare il codice Flash si è verificato il seguente problema: create un textField sullo stage con font e kerning impostati a piacere e dategli come instance name my_text
.
Poi via actionscipt settate:

my_text.text = "Hello world!"

Come noterete non viene visualizzato il kerning settato nel pannello delle proprietà del textField (vedi prima riga della figura sottostante).

Dynamic textField kerning in Flash8

Leggendo la guida di Flash (F1) ci viene consigliato di incorporare il font in libreria e utilizzare TextFormat… ma assolutamente non ne vuole sapere di funzionare.
Una soluzione (ridicola) c’è ed è stata frutto di prove e, diciamolo, fortuna. Si tratta di creare un textField dinamico identico a quello che ci servirà nella nostra applicazione, in una zona non visibile dello stage (ad esempio a x:-2000 y:-2000) con qualcosa scritto dentro (ad esempio “Test”) e gli diamo con instance name tf_test. A questo punto scriviamo la seguente riga di codice:

var fmt:TextFormat = tf_test.getTextFormat();

Poi sullo stage mettiamo un textField con instance name my_text con le stesse proprietà di quello di test e scriviamo:

my_text.setTextFormat(fmt);

my_text.setNewTextFormat(fmt);

my_text.text = "Hallo World!";

Il risultato è quello che vedete nella seconda riga della figura precedente.
Se scoprite altre soluzioni interessanti fatemi sapere.

Pubblicato in Flash, Actionscript | 1 Commento »

26 Ottobre 2007

Actionscript BitmapData per la gestione di immagini come in libreria

La classe BitmapData (flash.display.BitmapData) ci permette di creare e manipolare in piena libertà le immagini tramite Actionscript per la creazione di effetti altrimenti irrealizzabili con i filtri messi a disposizione nell’apposito pannello di Flash.
Un oggetto BitmapData contiene tutte le informazioni sui pixel dell’immagine e può essere assegnato a un MovieClip utilizzando il metodo MovieClip.attachBitmap().
Gli usi possibili della classe BitmapData sono tantissimi e per una trattazione più specifica vi rimando alla guida ufficiale. Io invece mi vorrei soffermare su un uso molto utile di BitmapData nella gestione delle immagini (JPEG, GIF, PNG) caricate esternamente in quei casi in cui si ha il bisogno di riutilizzare più volte le immagini caricate.
Immagino abbiate presente l’utilizzo del metodo MovieClip.attachMovie() per “attaccare” un elemento in libreria a un MovieClip presente sullo stage. Il MovieClip in libreria dovrà essere stato identificato per il Linkage.
In un modo simile possiamo sfruttare il metodo MovieClip.attachBitmap() per gestire, come se le avessimo il libreria pronte all’uso, delle immagini caricate dall’esterno in un determinato momento del nostro movie Flash: vediamo come è possibile ricreare una situazione di questo genere in ActionScript.

Supponiamo che ad un certo istante del nostro movie venga chiamata una funzione che carica N immagini, che per comodità definiremo in un array ma che potrebbero anche essere definite in una struttura XML o altro.
Quindi prendiamo in esame il seguente codice incaricato del caricamento sequenziale delle immagini contenute nella cartella img in un MovieClip temporaneo temp che verrà rimosso al termine di ogni caricamento:

var imgPath = new Array("img/photo1.jpg","img/photo2.jpg");
var count:Number = 0;
function loadImage():Void{
	_root.createEmptyMovieClip("temp", _root.getNextHighestDepth());
	var mcl = new MovieClipLoader();
	var myListener = new Object();
	myListener.onLoadInit = function(target_mc) {
		target_mc.removeMovieClip();
		if(_root.count<_root.imgPath.length-1){
			_root.count++;
			_root.loadImage();
		} else {
			trace("Finito");
		}
	}
	mcl.addListener(myListener);
	mcl.loadClip(imgPath[count], temp);
}
loadImage();

Penso che la fattura di questa funzione sia comune a molti soprattutto per quanto riguarda l’utilizzo del metodo MovieClipLoader.loadClip() associato all’Event Listener onLoadInit. In pratica la funzione loadImage() viene richiamata da se stessa tante volte quante sono le immagini definite nell’array imgPath. Questa funzione non fa altro che posizionare un MovieClip temporaneo sullo stage e caricarci dentro l’immagine, controllare che sia caricata e poi rimuovere il MovieClip temporaneo. In effetti in questo modo non serve a niente tranne che a mettere in cache le immagini.
Vediamo ora come usare BitmapData per memorizzare le informazioni sulle immagini. Per fare questo dobbiamo importare la classe e per ogni immagine caricata creare un nuovo oggetto BitmapData e poi utilizzare il metodo BitmapData.draw() per “disegnare” una nuova immagine BitmapData a partire da ogni MovieClip temporaneo che nel nostro caso è identificato con target_mc.

import flash.display.BitmapData;
var bData:BitmapData = new BitmapData(target_mc._width, target_mc._height);
bData.draw(target_mc);

Inseriamo questo codice nella funzione e ad ogni ciclo memorizziamo l’oggetto bData in un nuovo array che chiamiamo bmp:

import flash.display.BitmapData;
var imgPath = new Array("img/photo1.jpg","img/photo2.jpg");
var count:Number = 0;
var bmp:Array = new Array();

function loadImage():Void{
	_root.createEmptyMovieClip("temp", _root.getNextHighestDepth());
	var mcl = new MovieClipLoader();
	var myListener = new Object();
	myListener.onLoadInit = function(target_mc) {
		var bData:BitmapData = new BitmapData(target_mc._width, target_mc._height);
		bData.draw(target_mc);
		bmp.push(bData);
		target_mc.removeMovieClip();
		if(_root.count<_root.imgPath.length-1){
			_root.count++;
			_root.loadImage();
		} else {
			trace("Finito");
		}
	}
	mcl.addListener(myListener);
	mcl.loadClip(imgPath[count], temp);
}

loadImage();

In questo modo le immagini vengono caricate nel MovieClip temporaneo, immagazzinate in un BitmapData ed eliminato il MovieClip temporaneo. Al termine del ciclo di caricamento ora chiamiamo una funzione che visualizzerà le immagini facendo il procedimento inverso: verranno creati dei MovieClip sullo stage tanti quanti i BitmapData registrati e attaccati ad essi le informazioni di ogni BitmapData come se le immagini fossero in libreria con Linkage specificato.

Lo script finale diventa quindi:

import flash.display.BitmapData;
var imgPath = new Array("img/photo1.jpg","img/photo2.jpg");
var count:Number = 0;
var bmp:Array = new Array();

function loadImage():Void{
	_root.createEmptyMovieClip("temp", _root.getNextHighestDepth());
	var mcl = new MovieClipLoader();
	var myListener = new Object();
	myListener.onLoadInit = function(target_mc) {
		var bData:BitmapData = new BitmapData(target_mc._width, target_mc._height);
		bData.draw(target_mc);
		bmp.push(bData);
		target_mc.removeMovieClip();
		if(_root.count<_root.imgPath.length-1){
			_root.count++;
			_root.loadImage();
		} else {
			showImages();
		}
	}
	mcl.addListener(myListener);
	mcl.loadClip(imgPath[count], temp);
}

loadImage();

function showImages():Void{
	for(var i=0; i<bmp.length; i++){
		_root.createEmptyMovieClip("copy"+i, _root.getNextHighestDepth())
		_root["copy"+i]._x = 200*i;
		_root["copy"+i]._y = 200*i;
		_root["copy"+i].attachBitmap(bmp[i], 1);
	}
}

In qualsiasi momento potrete richiamare e visualizzare i BitmapData semplicemente usando il metodo MovieClip.attachBitmap() come se fosse MovieClip.attachMovie(). Ci sono molti altri aspetti interessanti di questo utilizzo sia legati alle possibilità di smoothing offerte dall’attachBitmap() che dalle innumerevoli possibilità di modifica sulle immagini dal momento che sono dei BitmapData… a voi continuare lo studio.
Spero vi sia stato utile.

Pubblicato in Flash, Actionscript | 2 Commenti »

12 Giugno 2007

Moxie ed AIR

Dopo il rilascio della Beta 1 di Flex 3 (nome in codice Moxie Moxie) e della Beta 1 di Adobe Integrated Runtime (AIR, nome in codice Apollo) penso possa essere utile una collezione di documentazione utile per non perdersi in questa orda di release e di novità Adobe a dir poco travolgenti.

Prima di tutto…
L’Help online di Flex Builder non è ancora del tutto aggiornato. La Reference è già aggiornata a Flex 3 ma la restante documentazione (Developer’s Guide, Building, etc.) sono ancora riferite alla versione 2. Se siete alla ricerca di documentazione aggiornata allora seguite nella lettura di questo post. Vi consiglio poi questo articolo di Matt Chotin per velocizzare l’apprendimento delle nuove feature di Flex 3.

Flex 3Risorse per Flex 3 Beta 1
Ecco di seguito una lista di risorse utili per Flex 3 Beta 1:

AIRRisorse per AIR Beta 1
Quella che segue invece la lista di docuementazione utile per l’apprendimento di AIR:

Come sempre ogni nuova release e a maggior ragione queste versioni Beta sono accompagnate da bug e malfunzionamenti che possiamo segnalare o monitorare su http://bugs.adobe.com/flex/.

Buono studio!

Pubblicato in Flash, Creatività, Flex, AIR/Apollo, Adobe, Actionscript | Nessun Commento »

31 Gennaio 2007

Flash e gli screenreaders: accessibilità in Flash?

La documentazione di Flash descrive il funzionamento del comando: System.capabilities.hasAccessibility come segue: “Un valore Booleano (true/false) che è true se Flash Player è in funzione all’interno di un “ambiente” che supporta la comunicazione tra Flash Player e le periferiche di accessibilità. Falso in tutti gli altri casi.”
Il problema sorge dall’interpretazione di questa descrizione che personalmente non ho mai inteso nel suo vero significato… fortunatamente non ne ho avuto mai una reale necessita all’interno dei progetti di *webgriffe, ma mi ci sono scontrato facendo un piccolo test negli spazi che il team si concede per la sperimentazione.

L’ambiente è lo spazio in cui Flash Player è contenuto. Può quindi essere un Browser o l’applicazione standalone. L’unico ambiente che restituisce True al comando System.capabilities.hasAccessibility è Internet Explorer in Windows. Il comando Actionscript controlla se l’ambiente supporta il metodo di comunicazione Microsoft Active Accessibility (MSAA), che è lo standard di comunicazione tra tecnologie per l’accessibilità (screenreader e periferiche varie) e le applicazioni su piattaforma Windows. Quindi è uno standard in Windows e attualmente non significa che se MSAA è supportato esista realmente una periferica/tecnologia per l’accessibilit à collegata al PC e/o che questa sia attiva. Cosa vuol dire questo quindi? Che dobbiamo guardare un po’ più avanti di questo comando quando vogliamo addentrarci nel campo dell’accessibilità e del controllo dell’esistenza di tecnologie collegate al sistema. Ci viene in aiuto la proprietà Accessibility.isActive() che rappresenta la miglior soluzione. Questo metodo restituisce true se Flash Player sta comunicando con MSAA.

Se volete fare il seguente test - http://www.webgriffe.com/demo/accessibility/ - otterrete per il primo comando un true se siete in IE su Windows e false in tutti gli altri casi… ad oggi: fateci sapere se trovate altri casi in cui viene visualizzato il valore true. Per la seconda proprietà otterrete un true solo nel caso abbiate una tecnologia per l’accessibilità collegata e attiva.

Pubblicato in Flash, Browser, Actionscript | Nessun Commento »

TROVA:

Abbonati ai Feed RSS di questo Blog Abbonati ai Feed RSS di questo Blog Informazioni su questo blog Informazioni su questo blog Scarica lo screen saver di shines Scarica lo screen saver di shines