Ridimesionamento dinamico intelligente delle immagini

Venerdì 31 Agosto, 2007

Due ricercatori della Adobe, Dr. Ariel Shamir e Dr. Shai Avidan, hanno sviluppato un’eccezionale algoritmo di ridimensionamento intelligente della immagini. Particolarmente impressionante (vedi video qui sotto) è la capacità di oscurare e modificare completamente un’immagine, grazie ad un “resize” estremamente evoluto e selettivo. In altre parole questa tecnica permette di ridimensionare un’immagine in modo non-lineare. Alcune zone dell’immagine, quindi, vengono mantenute in scala fornendo un’effetto davvero curioso.

Post correlati

Aptana IDE update: milestone 9

Giovedì 30 Agosto, 2007

È disponibile l’aggiornamento ad Aptana IDE, l’ambiente di sviluppo Web che supporta Adobe AIR e Apple iPhone. Tra le novità segnaliamo il miglioramento della sezione PHP con l’aggiornamento del Code Assist sia sulle funzioni che sui parametri. Migliorata anche la "colorazione" del codice. Aggiunto il supporto per gli ultimi framework Ajax tra cui Prototype.js e jQuery. Migliorata anche la gestione di Javascript.

image

Per la lista complete delle nuove funzionalità clicca qui.

Post correlati

Reflex 1.1: aggiungere effetto di riflessione alle immagini

Mercoledì 29 Agosto, 2007

image Nuova versione 1.1 della libreria Javascript Reflex con la quale è possibile aggiungere effetti di riflessione alle immagini. Il vantaggio di usare questa tecnica "non intrusiva" è la rapidità con cui è possibile aggiungere questi effetti senza dover spendere tempo nel realizzare effettivamente l'immagine di riflessione.
Questa versione è stata provata sui browser Mozilla Firefox 1.5+, Opera 9+, Safari e IE6. La minima dimensione supportata per un'immagine è 32x32. Una volta inclusa la libreiria:

HTML:
  1. <script type="text/javascript" src="reflex.js"></script>

Basta inserire class="reflex" sulle immagini dove desideriamo applicare tale effetto. Sfruttando la proprietà dell'attributo class è possibile manipolare gli effetti di riflessione, il chè rende questa libreria davvero particolare. È possibile, infatti, distorcere anche l'immagine aggiungendo effetti 3D. Ad esempio ecco come aggiungere varie caratteristiche alla rilfessione:

HTML:
  1. <img class="reflex idistance16 iborder2 iheight24" width="200" alt="" src="images/example.jpg"/>

Per i dettagli vedi la documentazione sul sito ufficiale.

Sullo stesso sito è possibile scaricare numerosi altri effetti come Edge, Corner, Glossy e molti altri, tutti dedicati alle immagini.

Post correlati

Proto.Menu: menu contestuali in Javascript con Prototype 1.6.0

Martedì 28 Agosto, 2007

Proto.Menu è una semplice e leggera (2Kb) soluzione Javascript  per aggiungere funzionalità di menu contestuali alle pagine HMTL. Questa libreria sfrutta il recente rilascio di prototype 1.6.0_rc0. Le sue caratteristiche essenziali sono:

  • Leggerezza: ~2 KB (~1.5 KB versione ridotta)
  • Unobtrusive: non intrusiva
  • Supporta tutti i browser 
  • Personalizzabile a livello di style-sheet
  • Estremamente veloce 

Per il suo uso è richiesto:

  • prototype.js 1.6.0_rc0
  • provata sui browser: Firefox 1.5+, Internet Explorer 6+, Safari 3+, Opera 9+, Netscape Navigator 9+

Per utilizzarla basta includere la libreria prototype e proto.menu:

Download Proto.Menu.js (o versione compressa)

HTML:
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/Proto.Menu.js"></script>

Si possono includere file CSS personalizzati

HTML:
  1. <link rel="stylesheet" href="Proto.Menu.css" type="text/css" media="screen" />

E il suo uso è davvero semplice, si crea un array con i link da mostrare:

JavaScript:
  1. var myLinks = [
  2.     {name: 'Back', callback: function(){alert('back function called')}},
  3.     {name: 'Forward', callback: function(){alert('Forward function called')}},
  4.     {separator: true},
  5.     {name: 'Reload', callback: function(){alert('Reload function called')}},
  6.     {name: 'Disabled option', disabled: true},
  7.     {name: 'Toggle previous option', callback: function(){
  8.         var item = oLinks.find(function(l){return l.name == 'Disabled option'});
  9.         item.disabled = item.disabled == false ? true : false;
  10.     }}
  11. ]

Si attivano i menu passando il riferimento all'array creato:

HTML:
  1. <script type="text/javascript">
  2. new Proto.Menu({
  3.     selector: '.contextmenu' // context menu will be shown when element with class name of "contextmenu" is clicked
  4.     className: 'myContextMenu', // this is a class which will be attached to menu container (used for css styling)
  5.     menuItems: myLinks // array of menu items
  6. })
  7. </script>

Notare la proprietà selector che indica l'elemento legato al click per questo menu contestuale.

Post correlati

Right Click in AS3: menu contestuali personalizzati

Lunedì 27 Agosto, 2007

Eliminare i menu contestuali o più semplicemente rispondere al "right click" del mouse del Flash Player è una possibilità non permessa direttamente da codice ActionScript anche nella versione CS3. Questa caratteristica sarebbe interessante sia per i giochi che per le Applicazioni RIA. Paulius Uza ha proposto una soluzione per ActionScript 3 (AS3) che lavora in accoppiata con Javascript. Questa "patch" è ancora in fase di testing in quanto dipende dal Flash Player installato e dal browser. Si può contribuire testando un'applicazione demo qui.
È stato apero anche un "progetto" su Google Code:

The idea is fairly simple:

1-Use Javascript in the HTML container page to disable the right-click on top of the SWF.

2-Capture the event and pass it to a function that communicates with Flash via the External Interface

3-In Actionscript the function called from Javascript does whatever you need to display your own custom context-menu.

Post correlati

Prototype 1.6.0 release candidate

Domenica 26 Agosto, 2007

È stata appena rilasciata la release candidate 1.6.0 di prototype con interessanti aggiornamenti all'intero sistema di API. In particolare il metodo observe dell'oggetto Event è stato migliorato e ora fornisce il contesto dell'oggetto che ha rilasciato l'evento. Questo "giusto" comportamento può tuttavia essere sovrascritto. Questo significa che per default this si riferisce all'oggetto che ha rilasciato l'evento. È stata introdotta anche la possibilità di creare eventi personalizzati. Altri miglioramenti riguardano la Function.prototype, le funzioni di DOM, Ajax, le funzioni delle classi e molto altro. Per una lista completa vedi il CHANGELOG.

Download

Post correlati

ActionScript: _parent e controllo dei contesti

Mercoledì 22 Agosto, 2007

Quando "scatta" un evento di un oggetto il contesto, ovvero l'oggetto madre che rappresenta l'area di validità di tutte le variabili, diventa l'oggetto stesso. Questa caratteristica, propria della programmazioni Object Oriented, può disorientare provocando errori e malfunzionamenti nel codice. Inoltre, in determinate situazioni, può impedire di accedere ad alcune variabili "prima" disponibili.

Prima di tutto vediamo una caratteristica di ActionScript legata alla gestione dei contesti che, se compresa, ci farà risparmiare alcune ore di inutili prove. Quando abbiamo a che fare con oggetti grafici o più semplicemente di MovieClip innestati uno all'interno dell'altro, la proprietà _parent risolve qualsiasi problema di contesto. Ad esempio se il MovieClip padre_mc contiente un altro MovieClip figlio_mc e si usa il seguente codice:

Actionscript:
  1. // codice all'interno di padre_mc
  2. figlio_mc.onRelease = function() {
  3.     trace(this); // figlio_mc
  4.     trace(this._parent); // padre_mc
  5. }

Risalisre al "padre", quindi, risulta chiaro ed immediato.

Con classi pure, di solo codice, o estensioni di MovieClip, la proprietà _parent non è disponibile e le cose si potrebbero complicare! Immaginiiamo di avere una Classe MyClass:

Actionscript:
  1. Class MyClass extends MovieClip {
  2.     function MyClass() {
  3.         // constructor
  4.     }
  5.     //
  6.     function myMethod() {
  7.          trace(this); // myClass
  8.          var num = 5;
  9.          var cp = this;
  10.          ....
  11.          var myObject = new [ un oggetto ];
  12.          myObject.onLoad = function() {
  13.               trace(this); // myObject
  14.               trace(cp); // myClass
  15.          }
  16.     }

Il contesto di MyMethod() è, ovviamente, this, ovvero il puntatore alla classe MyClass. La variabile num, ad esempio, ha un ciclo di vita racchiuso all'interno del metodo MyMethod(). È visibile quindi solo all'interno del metodo e verrà distrutta all'uscita. Stessa cosa per la variabile myObject che tuttavia inizializza un evento, in questo caso onLoad. Quando scatterà onLoad() il contesto diventerà myObject lasciandoci, apparentemente, senza il puntatore alla classe madre myClass. Analizzando attentamente il codice ci accorgiamo che la variabile cp, definita nel metodo myMethod(), ha lo stesso contesto della variabile myObject! Infatti la variabile cp (class pointer) sarà visibile all'interno del metodo onLoad dell'oggetto myObject in quanto condivide con esso lo stesso contesto. In realtà il metodo myMethod() non viene deallocato proprio perchè l'oggetto myObject ha necessità di "vivere" più al lungo del previsto visto che ha "allocato" un evento (di tutto questo se ne occupa Flash a nostra "insaputa").

 

Consiglio

Per gli eventi legati a bottoni o a MovieClip una buona abitudine sarebbe quella di usare la forma:

Actionscript:
  1. my_mc.onRelease = myOnRelease;
  2. function myOnRelease() {
  3.     trace(this); // _root
  4.     trace("Click me");
  5. }

Al posto della più rapida ed immediata:

Actionscript:
  1. my_mc.onRelease = function() {
  2.     trace(this); // my_mc
  3.     trace("Click me");
  4. }

Il vantaggio di usare un funzione esterna è quella di avere un contesto neutro e la possibilità di accedere alla funzione a prescindere dal MovieClip che la controlla. Nel secondo caso, ad esempio, se volessi forzare l'esecuzione del codice legato al "click" del MovieClip dovrei usare un codice di questo tipo:

Actionscript:
  1. my_mc.onRelease();

In pratica chiamo l'evento come fosse un metodo. Tuttavia devo - appunto - avere a disposizione il MovieClip my_mc. Nell'altro modo, invece, posso eseguire il codice chiamando direttamente myOnRelease(). Ovviamente, come mostrato negli esempi, occhio ai contesti. Nel primo caso il contesto di myOnRelease() è quello dell'oggetto madre dove è scritto, ad esempio _root. Nel secondo caso, invece, il contesto è sempre il MovieClip my_mc!

 

Forzare un diverso contesto

Concludiamo con un tricks utile in molte circostanze. Flash mette a disposizione una libreria, mx.utils, con un oggetto Delegate in grado di forzare un contesto di un metodo o funzione. Il suo uso è davvero semplice:

Actionscript:
  1. import mx.utils.Delegate;
  2. //
  3. var my_mc; // puntatore ad un MovieClip
  4. var my_btn; // un bottone
  5. function myFunction() {
  6.     trace(this);
  7. }
  8. my_btn.onPress = Delegate.create(my_mc, myFunction);

L'evento onPress del bottone my_btn punta ad un "nuova" funzione creata appunto con il contesto my_mc. Quando si clicca sul bottone my_btn, il codice eseguito in myFunction() avrà come contesto my_mc!

Post correlati