Gaia Framework, Flash, Actionscript – Introduction à la publication d’un site flash sous Gaia

Pour peu que l’on s’intéresse au webdocumentaire et c’est notre cas dans la cadre de nos activités pour le compte de 3WDOC, on croise de plus en plus de de réalisations faites à l’aide sous Gaia Framework. Comme tout bon framework, cela permet des gains substantiels en terme de production et l’intégration d’un certain nombre de fonctionnalités qui facilite le processus de création.

Les avantages immédiats de Gaia

Ils sont nombreux à première vue :

Steven Sacks a notamment repris les concepts de Route and Scaffolding, présents dans le Ruby on Rails.
L’ensemble du projet est piloté par un xml
Le framework Gaia intègre de très nombreuses autres librairies complémentaires et indispensables à tout bon projet en Flash.

Liste des librairies complémentaires jointes à Gaia

GreenSock, http://www.greensock.com/
SWFAddress, http://www.asual.com/swfaddress/
SWFObject, http://code.google.com/p/swfobject/
flash-thunderbolt, http://code.google.com/p/flash-thunderbolt/wiki/ThunderBoltAS3
osflash-xray, http://code.google.com/p/osflash-xray/

Gaia is an open-source front-end Flash Framework for AS3 and AS2 designed to dramatically reduce development time.

Un problème d’installation

Le framework s’installe à l’aide de l’adobe extension manager, ensuite le panneau de Gaia sera disponible via le chemin Window > Other Panels > Gaia Framework.

Il est possible que vous rencontriez des problèmes à l’installation si votre poste est dans une langue autre que l’anglais.

Problème d’accès au panel sur le forum
Source : Forum gaia flash framework

Il faut déjà mettre à jour l’ Extension Manager CS4 2.1 Patch
Source : http://www.adobe.com/exchange/em_download/em20_download.html

A ce jour la solution semble de modifier manuellement les fichiers installés par l’Adobe Extension Manager, en tous les cas c’est ce que nous avons fait.

Le problème vient si vous possédez deux langues sur votre ordinateur par exemple votre ordinateur est en Français et le logiciel Flash est en anglais.
/Users/[your username]/Library/Application Support/Adobe/Flash CS4/en/Configuration/
/Users/[your username]/Library/Application Support/Adobe/Flash CS4/fr/Configuration

L’ensemble des fichiers et des répertoires GaiaFramework à déplacer sont les suivants :

/Users/[your username]/Library/Application Support/Adobe/Flash CS4/fr/Configuration/GaiaFramework/
/Users/[your username]/Library/Application Support/Adobe/Flash CS4/fr/Configuration/Extensions/
/Users/[your username]/Library/Application Support/Adobe/Flash CS4/fr/Configuration/Commands/Gaia Test Project.jsfl
/Users/[your username]/Library/Application Support/Adobe/Flash CS4/fr/Configuration/WindowSWFGaia Framework.swf

1. Créer son projet

Il s’agit de choisir les paramètres généraux du projet comme le nom, la taille, la version de flash et l’arborescence du projet.
En l’espèce, on va donner les propriétés suivantes à notre projet :

Nom du projet : Test hecube 1
Taille du projet : 1024 x 768

Le reste de notre projet reste sur les paramètres définis par défaut par Gaia Framework lui-même.

Il faut sélectionner un répertoire dans lequel vous allez gérer l’ensemble des fichiers de votre projet. Nous avons choisi de nommer notre répertoire testhecube1 dans lequel nous allons placer un répertoire qui contiendra notamment les medias que nous avons décidé d’utiliser. Une fois crée le répertoire, Gaia va se comporter un peu à la manière de Ruby On Rails et de la commande rails myapplication qui permet de générer tous les fichiers nécessaires à une application.

Au terme de cette première étape, vous avez tous les éléments indispensables au bon fonctionnement de votre projet sous Gaia. On va donc ensuite tirer profit de la fonction de “Scaffolding” qui a beaucoup impressionné en son temps dans les démonstrations RoR (Ruby On Rails).

2. Utiliser la fonction de “Scaffolding”

Cette action va créer pour vous, tous les .fla et .swf que vous souhaitez en se basant directement sur ce vous aurez modifier dans votre fichier. /bin/xml/site.xml

Notre intention est de créer un site avec les entrées suivantes : Home, Blog, Porfolio, Contact.

2.1 Tirer profit des classes du gaia framework
Premièrement, pour tirer profit des “classes” présentes dans le package com.gaiaframework.templates, il faut compléter, dans le volet “Scaffold”, le champs “Class Package”. Il faut entrer quelque chose de la forme com.Nom_du_Projet.pages. Dans notre cas, on opte pour la ligne suivante :

com.testhecube1.pages

2.1 Modifier le fichier site.xml
Deuxièmement, il vous reste à modifier le fichier site.xml qui décide de la topologie de votre site. Dans notre cas, le fichier va donc être de la forme suivante :

 
<?xml version="1.0" encoding="UTF-8"?>
<site title="Gaia Framework Site: %PAGE%" menu="true">
    <page id="index" src="index.swf">
        <page id="nav" src="nav.swf" depth="top">
		<page id="home" title="Home" src="home.swf" menu="true" />
		<page id="blog" title="Blog" src="blog.swf" menu="true" />
		<page id="porfolio" title="Porfolio" src="porfolio.swf" menu="true" />
		<page id="contact" title="Contact" src="contact.swf" menu="true" />
        </page>
    </page>
</site>

Une fois le fichier site.xml modifié, il faut cliquer à nouveau sur le bouton “Scaffold Project”. Cette action permet la création automatique de toutes les .fla et .swf supplémentaires.

3. Publication des `.fla` à nouveau

Vous pouvez ensuite modifier les fichiers .fla afin de les modifier graphiquement et après chaque modification publiée à nouveau tous les fichiers ou sélectionner uniquement les fichiers qui ont été modifiés.