Aujourd’hui, j’ai cherché une solution de pageflip open-source écrite en actionscript 3.0. Google renvoie de nombreux résultats, mais tous pointe vers des solutions ancestrales comme PageFlip ou FlipBook, avec du code dépassé et des techniques d’ajout de pages pas vraiment top. Je veux dire, qu’elle est l’utilité de créer chaque page dans Flash en tant que MovieClip ?! Imaginez une solution en xml, voir même lié à une base de données ! Le rêve .

Mais rien n’y fit. Mais voici que je tombe sur MegaZine. Une solution open-source de Florian Nücke, entièrement configurable en xml. Et avec une gestion native de différentes langues !

Quelques lignes de l’xml en question:

Pour ajouter des liens au sein d’une page (sommaire par exemple):

Ajouter du son:

Voici la page de téléchargement. Amusez-vous !

Note: pour en faire un usage commercial, il existe une licence payante ! Mais pour tester, ou un usage personnel, lachez-vous.

- Wouter

En faisant mes petites recherches pour un projet nécessitant Drupal, je suis tombé sur ce module. Ce module permet à Drupal de communiquer directement avec l’extérieur, en utilisant son API. Ce qui est plus “pro” que ce que je vous proposait jusqu’ici . Il faut passer par un objet NetConnect et installer un serveur AMFPHP (Actionscript Message Format – permet à PHP de renvoyer des objets Flash natifs). L’approche est différente: jusqu’ici, j’utilise Drupal comme un système de gestion de base de données et je connecte Flash directement à cette dernière (voir mes posts précédents), le module “Services” utilise Drupal comme une application web. Mais, je vais suivre de très près l’évolution de ce module “Services”. Il promet d’être incroyablement puissant. Pour l’instant il est en béta, mais voici comment il fonctionne.

Vous devez télécharger

• Module Services
• Module AMFPHP
• Puis le serveur AMFPHP et extraire le contenu du .zip dans sites/all/modules/amfphp/amfphp/

Installez ces modules tout simplement. Puis, vous devriez pouvoir aller à l’adresse suivante: votredomaine.com/drupal/services/amfphp

Un texte vous informera que tout fonctionne. Voilà pour Drupal . Facile non ? Maintenant Flash.

On se connecte à un service web. On utilise un objet NetConnection (Note: il y a des chances que la sécurité de Flash vous empêche de tester tout ceci en local pour vous connecter à un serveur distant) Edit: En fait, c’est le module Services qui bloque l’accès aux applications tentant de se connecter d’un autre serveur. Ceci peut être configuré par contre. C’est un grand plus pour la sécurité !

Puis, il vous faut vous connecter à Drupal. Pour ce faire:

Il faut créer un objet Responder qui gérera les réponses de Drupal. Et c’est là qu’intervient la puissance de AMF:

Vous appellez la méthode connect() de la classe system ! Le module Services va à présent vous connecter à Drupal et vous renvoyer un Session ID. Cet ID vous sera utile pour toutes les autres requêtes que vous allez effectuer. Le Responder a deux méthode: onResult et onError. Dès que Drupal va donner sa réponse pour la connexion et nous renvoyer notre ID:

Nous avons à présent un ID (note: l’ID est un String), nécessaire pour tout le reste. Maintenant, imaginez que vous désirez obtenir le contenu d’une page (rappelons le, un “node”), ici la page 1:

Puis, dans notre fonction onNode:

Il existe de nombreuses autres propriétés que la classe node nous renvoie (date du dernier commentaire, auteur de l’article, date de la dernière révision, etc).

Un des gros avantages de cette méthode est la possibilité de créer du contenu depuis Flash dans Drupal ! Imaginez un site à la YouTube, complétement en Flash. Tout le backend (upload des vidéos, système de tri (grâce à Taxonomy), système de vote (Voting API)) pourrait être géré par Drupal ! Et ce quasi nativement, sans aucune programmation côté serveur de votre part !

Services vous permet également de créer assez facilement vos propres services, par contre il faut connaitre l’API de Drupal, ne serait-ce qu’un minimum.

Résumé, de nouvelles perspectives en vue. Il pourrait devenir de plus en plus simple de créer des RIA très complexes en utilisant des outils performant et gratuits, disponibles pour tous !

- Wouter

Comme je l’avais mentionné dans mes posts précédents sur l’utilisation de drupal pour gérer le contenu de Flash, le fichier php fourni n’était pas très sécurisé et aurait permis à quelqu’un d’injecter du code malveillant. Je vous fournit ici un code plus sûr, dans le cas où vous désireriez utilisé tout ceci sur un site live.

Je me suis basé sur la classe Database que l’on peut trouver ici (également dans le zip à la fin de ce post). C’est un nouveau site lancé par un ami (et d’autres). Je leur fais un peu de pub par la même occasion . J’ai dû y ajouter une méthode par contre, appellée selectIn() pour la galerie d’images, donc utilisez celle dans le zip.

Cette classe essaye de filtrer les entrée “louches”, comme un utilisateur s’appelant “bob; DROP TABLE users;”  (d’où aussi l’utilité d’utiliser des prefixes, pour rendre nos tableaux un tout petit peu moins vulnérable).

- Wouter

Les sources: Sources

Licence: LGPL

Voici la deuxième partie de la série “Utiliser Drupal pour gérer le contenu de Flash”. Me basant sur un excellent article de raincitystudios.com pour créer une galerie d’images dans Drupal, il me semblait évident de l’implémenter dans Flash avec la classe Drupal. C’est tout simple, mais il faut d’abord faire quelques configurations dans Drupal.

Vous pouvez vous baser sur l’article en question, mais vous n’avez pas besoin d’aller jusqu’à la configuration de Views, puisque l’affichage se fait dans Flash. Voici l’exemple:

• Galerie Flash

Je vous explique la marche à suivre pour configurer Drupal.

1. Modules

Il faut installer les modules CCK, FileField, ImageField et il me semble qu’il faut activer le module Upload, fourni par défaut.

2. Créer un contenu de type Galerie

Allez sous “Administer > Content Management > Content Types” . Si vous avez correctement activé les modules, vous verrez en haut un lien “Add content type“. Cliquez ce lien.

Donnez lui un nom (un nom pour vous,  un nom pour Drupal), puis sauvegardez. Vous retombez sur la page “Content Types” et vous devriez voir votre nouveau type de contenu dans la liste.

A droite de votre type, cliquez sur “manage fields“. Vous verez un champ “New Field“. Entrez ce que vous voulez dans “Label” et “Field Name“. Dans “Type of data to store“, séléctionnez “File” et dans “Form element to edit the data“, séléctionnez “Image“. Cliquez sur “save“.

Vous tombez maintenant sur la page de configuration de votre type. Vous noterez un champ de text avec comme titre “Permitted upload file extensions:“. Ici, vous pouvez entrer les types de fichiers que vous ou votre client pouvez charger sur le serveur. Juste après (aha ! ), un champ “Maximum resolution for Images:” ! Entrez une résolution (genre 400×300), et Drupal va automatiquement redimensionner les images si nécessaire avant de les sauvegarder sur le serveur.

Maintenant, très important, sous “Global Settings“, vous voyez “Number of values“. C’est le nombre d’images que pourra contenir votre galerie. Moi, j’ai mis “Unlimited“. Voilà, choisissez “Save field settings“.

3. Créer une galerie

Maintenant, dans le menu principal de Drupal, allez sous “Create Content“, choisissez votre type de contenu. Donnez un titre, inutile de mettre du contenu dans le body. Si vous descendez, vous verrez un formulaire pour charger vos images. Tout en Ajax, avec redimensionnement à la clé ! Pour ajouter d’autres images, il suffit de cliquer sur “Add another item“. Merci qui ? Merci Drupal !

4. Le PHP

Pour le php, il suffit de rajouter ces quelques lignes de codes.

Note: Encore une fois, je tiens à préciser que le fichier PHP n’est pas très sécurisé et permettrait peut-être à quelqu’un d’injecter du code malveillant. Ceci n’est que pour l’exemple. Je posterai bientôt une version plus sûr.

5. Le Flash

La classe Drupal est toute simple à mettre à jour. Vers la ligne 38, ajoutez une constante:

Dans la méthode onComplete(), ajouter cette condition juste avant de lancer l’événement:

Vous noterez que j’ai mis un pop() à temp. Ceci est dû au fait que le php renvoie une chaine de caractères pour l’Array (”image1, image2, image3,”), avec une virgule à la fin. Ce qui fait une entrée vide dans l’Array, à tous les coups. Donc autant s’en débarasser . Je la rajouterais également dans la condition:

…puisque le même problème se pose. Par contre, en recevant le contenu d’une page (Drupal.NODE), on n’a pas d’entrée vide. On se gardera donc bien de mettre temp.pop() juste avant le return !

Pour:

…la classe Drupal fournira une Array tout bête avec les chemins pour chaque image. A moins que le .swf soit dans le même répertoire que le CMS, il faudra par contre adapter les chemins pour que Flash puissent télécharger les images. Ensuite, c’est à nous de créer un système de galerie d’images en actionscript en utilsant cette Array. Vous noterez qu’il faut donnez un ID. Ceci est dû au fait que pour Drupal, même la galerie d’images est une Node comme un autre, et le script php ne saura pas faire la différence entre une galerie et un node simple. Il faut donc fournir l’ID de la galerie.

- Wouter

Voici les sources: sources
Licence: LGPL

Même si les premiers chapitres traitent de choses basiques, pour ceux d’entre nous qui ont déjà certaines connaissances en actionscript 3.0, le fait de savoir comment Flash interprète notre code est vraiment très intéressant.

Le livre peut-être acheté ou téléchargé gratuitement en tant que e-book. Pour un ouvrage de 1096 pages, c’est vraiment très généreux !!

Au passage, je recommande de jeter un coup d’oeuil sur le site de Thibault, bytearray.org . Fascinant. Surtout, allez voir la page “projects” !!

-Wouter

Télécharger l’e-book

Je vous propose ici une solution basique pour connecter un .swf à Drupal.

Voici l’exemple:

• Drupal
• flash

Vous noterez que les quelques pages sont disponibles dans Flash. Voici comment ça se passe:

1. PHP

Note: Je tiens à préciser que le fichier PHP n’est pas très sécurisé et permettrait peut-être à quelqu’un d’injecter du code malveillant. Ceci n’est que pour l’exemple. Je posterai bientôt une version plus sûr.
Il faut créer un fichier php “portail” auquel Flash va se “connecter” pour demander des infos. (inclus dans .zip)

2. La Classe Drupal

En ActionScript, on crée une classe toute bête qui va se connecter au portail php et réclamer des infos comme un menu ou le contenu d’une page, appelé “node” dans la logique Drupal. Ce contenu, il va le rendre sous forme d’Arrays, que l’on pourra ensuite facilement manipuler dans Flash.

Exemple:

Ici on demande le menu “primary-links” (menu de base de Drupal). Le résultât de cette requête sera:

Vous remarquerez que c’est un tableau à deux niveaux, où e.data[n][1] est égal à l’id du node cible (voir plus bas pour l’utilité)

Si on voulait le contenu d’une page avec un node id de 2:

Ici, on reçoit un tableau dont la première entrée est le titre et la deuxième le contenu.

Tout ceci n’est que très basique, mais j’ai déjà quelques idées comment améliorer cette classe pour la rendre vraiment très utile . D’où le titre: “1ère partie”. Dès que j’ai le temps, je continue cette petite “série” sur Drupal.

- Wouter

Voici les sources, amusez vous: sources

License: LGPL