RAPPEL DES CONDITIONS D'UTILISATIONS :

Nous constatons un grand nombre d'utilisations de nos outils de manière illégale. Nous rappelons que nous proposons des contenus gratuits sur lesquels sont présents des liens vers notre site internet, ceci afin de promouvoir nos solutions et améliorer le trafic de notre site. Vous n'êtes pas autorisé à proposer nos outils en téléchargement direct depuis votre site. Aussi toute utilisation de décompileur Flash est formellement interdite et en violation des droits d'auteurs. Tout délit de contrefaçon est passible de 3 ans d'emprisonnement et 300 000 euros d'amende.

Logo_37fr

Aide 37FR 3D BOX FLASH

INTÉGRER RAPIDEMENT 37FR 3D BOX FLASH SUR VOTRE SITE :

◘ 1. Télécharger le fichier .Zip en cliquant ici.
Décompresser le dans un dossier de votre choix sur votre poste de travail.

◘ 2. Sur votre hébergement, grâce à un logiciel client FTP,
créer un nouveau dossier et placez les fichiers du dossier "Classique" à l'intérieur.

Le dossier doit normalement se composer de la manière suivante :

faces : [dossier] pour vos textures.
swfObject : [dossier] pour l'intégration de Flash.
37FR_3D-Box-FLASH.swf : l'animation Flash principal.
37FR_3D-Box-FLASH_Config.xml : fichier XML qui vous permettra de personnaliser l'animation Flash.
index.html : fichier principal du dossier pour jouer votre animation Flash.

◘ 3. Transférez vos fichiers sur votre site internet grâce à un client FTP.

◘ 4. Modifiez directement les fichiers images du dossier faces au format 200x200 pixels (par defaut).

INTÉGRER PAS À PAS 37FR 3D BOX FLASH SUR VOTRE SITE :

◘ 1. Télécharger le fichier .zip en cliquant ici.
Décompresser le dans un dossier de votre choix sur votre poste de travail.

◘ 2. Sur votre ordinateur ou directement sur votre hébergement (grâce à un logiciel client FTP),
créer un nouveau dossier ou vous placerez vos fichiers.

◘ 3. Depuis votre ordinateur, créez un nouveau fichier HTML grâce à un éditeur texte comme notepad ou simple text (mac).
(Chemin par défaut de notepad sous Windows XP et Windows 7 : C:\WINDOWS\notepad.exe)

Et créez la syntaxe suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<body>

</body>

</html>

Enregistrez ce fichier en l'appelant "index.html". ".html" doit être l'extension.
Vérifiez bien que l'affichage des extensions est activé sur votre ordinateur :

Ouvrez une fenêtre quelconque (poste de travail, ordinateur ou autre).
Dans le menu en haut (touche ALT sous Windows 7) et selectionnez :
OUTILS > OPTIONS DES DOSSIERS
Cliquez sur l'onglet "Affichage".
Dans le menu "Paramètres Avancés" :
recherchez la case "Masquer les extensions des fichiers dont le type est connu"et déchochez là.
Cliquez sur APPLIQUER et fermer la fenêtre.

◘ 4. Entre les balises "Title", remplacez "Nom de votre page" (cf. ci-dessous) par un titre de votre choix.
C'est le nom de votre page qui apparaitra dans les moteurs de recherche.

<title>Nom de votre page</title>

◘ 5. Récupérer le dossier "swfobject" dans le dossier "Classique" (ou "Samples") du .Zip que vous avez téléchargé et placez le dans votre dossier de travail sur votre serveur (sur votre hébergement).
Vous pouvez aussi téléchargez directement swfobject depuis l'adresse : http://code.google.com/p/swfobject/.

◘ 6. Afin de lier les scripts du dossier swfobject nous allons rajouter
le code "javascript" suivant entre les balises Head (et juste avant </head>) :

En toute logique le code de votre page html devrait ressembler à ça (pensez à bien enregistrer votre travail) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Nom de votre page</title>

</head>

<body>

</body>

</html>

◘ 7. Nous allons maintenant rajouter les fichiers propre à l'animation Flash :
Copier le fichier .swf "37FR_3D-Box-FLASH.swf" du dossier "Classique" (ou "Samples") du .Zip dans votre dossier de travail.

◘ 8. Les Faces de votre boîte :
Il faut maintenant définir si vous allez travailler avec des textures ou non.
Par défaut nous partirons sur un exemple avec textures
(si vous souhaitez des couleurs unies pour votre boîte vous pouvez sautez cette étape) :

Dans votre dossier de travail, créez un dossier "faces".
Vous placerez ici les textures de votre boîte au format .jpg, .gif ou .png.

Dans un premier temps créez 6 fichiers images de 200x200 pixels que vous placerez dans ce dossier.
Nommez respectivement vos fichiers de la manière suivante :

Back.jpg
Front.jpg
Left.jpg
Right.jpg
Top.jpg
Bottom.jpg

Vous pouvez également copier-coller les fichiers d'un dossier "faces" présent dans le document .zip

◘ 9. Rajoutez le fichier de configuration XML :
Créer un nouveau fichier (comme vous l'avez fait pour la page html) avec l'extension .xml
et nommez le "37FR_3D-Box-FLASH_Config.xml".

Vous pouvez aussi copier-coller le fichier .xml présent dans le dossier "Classique" (ou "Samples") du .Zip dans votre dossier de travail.

◘ 10. Editez maintenant le fichier .xml :
Toujours avec un éditeur de texte ouvrez le fichier .xml et entrez le code suivant :

<?xml version="1.0" encoding="utf-8"?>

<37FR3dCube>

    <config height="200" width="200" deep="200">
        <bgColor>FFFFFF</bgColor>
        <defaultFacesColor>CC0000</defaultFacesColor>
        <enabledControlers>true</enabledControlers>
        <controlerPosition>top</controlerPosition>
        <autoRotation>true</autoRotation>
    </config>

    <faces>
        <face imgFile="faces/Back.jpg" />
        <face imgFile="faces/Front.jpg" />
        <face imgFile="faces/Left.jpg" />
        <face imgFile="faces/Right.jpg" />
        <face imgFile="faces/Top.jpg" />
        <face imgFile="faces/Bottom.jpg" />
    </faces>

</37FR3dCube>

Pensez bien à enregistrer vos fichiers.

◘ 11. Si tout s'est bien passé votre dossier de travail devrait ressembler à ça :

faces : [dossier] pour vos textures.
swfObject : [dossier] pour l'intégration de Flash.
37FR_3D-Box-FLASH.swf : l'animation Flash principal.
37FR_3D-Box-FLASH_Config.xml : fichier XML qui vous permettra de personnaliser l'animation Flash.
index.html : fichier principal du dossier pour jouer votre animation Flash.

◘ 12. Revenez maintenant au fichier index.html :
il ne reste plus qu'à placer le code pour l'intégration final du fichier Flash.

Entre les balises <body> de votre fichier html rajoutez le code ci-dessous :

<div id="Box3D01">
<h2>ma boîte</h2>
<p>Vous devez installer Flash Player pour visualiser cette animation : <br /><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" style="border:none" /></a></p>
</div>

<script type="text/javascript">
var flashvars = { xml3DBox:"37FR_3D-Box-FLASH_Config.xml" };
var params = { allowScriptAccess: "sameDomain", allowFullScreen: "true", scale: "noscale", quality:"high"};
var attributes = {};
swfobject.embedSWF("37FR_3D-Box-FLASH.swf", "Box3D01", "300", "300", "10.0.2", "./swfobject/expressInstall.swf", flashvars, params, attributes);
</script>

◘ 13. Placez le fichier index.html dans votre navigateur pour visualisez l'animation.

Grâce à un client FTP, vous pouvez désormais placez vos fichiers chez votre hébergeur :
Depuis votre hébergeur, placez l'ensemble de votre dossier de travail sur votre serveur.
Connectez vous ensuite à votre site internet avec votre navigateur et entrez l'adresse du type :
http://www.votre-site-internet.com/votre-Dossier-De-Travail/votre-Fichier-Index.html

◘ 14. Vous pouvez maintenant configurer votre boîte grâce au fichier xml en suivant les indications plus bas ou modifiez directement vos fichiers images. Si vous souhaitez utilisez des couleurs unies reportez vous à la section "< FACE > ATTRIBUTS ET PROPRIÉTÉS :"

◘ 15. Quelque chose ne fonctionne pas bien ? Essayez de recommencez chaque étape...
Si vous avez encore des difficultés reportez-vous directement au dossier "Classique" du .Zip dans un premier temps, tester l'animation
et essayez de visualiser le contenu et le code source de la page html et du fichier xml.

COMMENT MODIFIER ET CONFIGURER 37FR 3D BOX FLASH ?

Vous pouvez facilement modifier et configurer les paramètres de votre animation grâce à un simple petit fichier XML.

Vous pouvez éditer votre fichier de configuration XML grâce à un éditeur de texte comme notepad ou simple text (mac).
(Chemin par défaut de notepad sous Windows XP et Windows 7 : C:\WINDOWS\notepad.exe)

CARACTÉRISTIQUES PRINCIPALES DU FICHIER XML :

Le fichier XML se compose de la manière suivante :

<?xml version="1.0" encoding="utf-8"?>

<37FR3dCube>

    <config height="200" width="200" deep="200">
        <bgColor>ff9933</bgColor>
        <defaultFacesColor>CC0000</defaultFacesColor>
        <enabledControlers>true</enabledControlers>
        <controlerPosition>top</controlerPosition>
        <autoRotation>true</autoRotation>
    </config>

    <faces>
        <face imgFile="faces/Back.jpg" />
        <face imgFile="faces/Front.jpg" />
        <face imgFile="faces/Left.jpg" />
        <face imgFile="faces/Right.jpg" />
        <face imgFile="faces/Top.jpg" />
        <face imgFile="faces/Bottom.jpg" />
    </faces>

</37FR3dCube>

Si c'est la première fois que vous découvrez un fichier XML,
voici quelques notions afin de mieux comprendre le principe et d'éviter les erreurs courrantes :

Un fichier XML commence toujours par une ligne qui précise le langage (l'encodage) utilisé ici il s'agit de la ligne suivante :
<?xml version="1.0" encoding="utf-8"?>
(ici c'est donc l'utf-8 qui est le mieux pour FLASH)
Le fichier XML se compose de balises (la première de notre fichier est "config").
Chaque balise est définie entre crochets : <config>

- Une balise qui s'ouvre (<config>) doit toujours se fermer : </config> (notez la présence du slash : / )
- Vous pouvez ouvrir et fermer directement une balise en une seule fois : <config /> (c'est le cas des lignes "face").
- Une balise contient des informations qui apparaissent de 2 manières :
<config> ICI </config> (ici on parlera de contenu).
ou <config parametre="ICI" /> (ici on parlera d'attribut).
Attention à toujours bien respecter les guillemets !
Attention à utiliser des noms de fichiers sans accent ni espace !

PROPRIÉTÉS ET BALISES DU FICHIER XML :

- Balise <config> : contient les paramètres propre à la configuration de l'environnement et du cube (ou de la boîte).
- Balise <faces> : agira directement sur les propriétés des faces du cube en lui même.

< CONFIG > ATTRIBUTS :

◘ Attributs <config> height, width et deep :

height : hauteur de la boîte en pixels.
width : largeur de la boîte en pixels.
deep : profondeur de la boîte en pixels.

ex : <config height="200" width="200" deep="200">

Vous pourrez donc en configurant ces valeurs donner un aspect plus ou moins rectangulaire ou cubique à votre boîte.
Les valeurs renseignées ici definiront également la taille des fichiers images de textures à intégrer avec votre boîte.

< CONFIG > PROPRIÉTÉS / PARAMÈTRES :

Les propriétés de la balise < config > sont à placer entre les lignes <config> et </config>

◘ bgColor :
Permet de définir une couleur par défaut d'arrière plan au format WEB (#) ou FLASH (0x).
Attention à bien respecter 6 caractères pour la définition de la couleur (et pas 3, pour les habitués des CSS...).

ex : <bgColor>ff9933</bgColor>

◘ defaultFacesColor : true ou false [Boolean] .
Permet de définir une couleur par défaut de votre boîte au format WEB (#) ou FLASH (0x).
Attention à bien respecter 6 caractères pour la définition de la couleur (et pas 3, pour les habitués des CSS...).

ex : <defaultFacesColor>CC0000</defaultFacesColor>

◘ enabledControlers : true ou false [Boolean] .
Permet d'afficher ou non les flèches pour permettre le contrôle manuel du cube.

ex : <enabledControlers>false</enabledControlers>

true : actif.
false : inactif.

◘ controlerPosition :
Permet de définir la position des flèches de contrôle manuel du cube.
Cette propriété n'a d'effet que si enabledControlers est actif (true).
ex : <controlerPosition>top</controlerPosition>

Vous pouvez configurer controlerPosition avec les variables suivantes afin de déterminer sa position :

topleft : en haut à gauche.
left : à gauche.
bottomleft : en bas à gauche.
top : en haut (au milieu).
middle : milieu absolu (vous pouvez écrire aussi "center" à la place de "middle").
bottom : en bas (au milieu).
right : à droite.
bottomright : en bas à droite.
topright : [désactivé] utilisé pour les mentions de DEV.37FR.COM

◘ autoRotation : true ou false [Boolean] .
Permet d'activer (true) ou de désactiver (false) la rotation automatique de votre boîte.

ex : <autoRotation>false</autoRotation>

< FACE > ATTRIBUTS ET PROPRIÉTÉS :

Les balises <face> vous permettent de configurer chaque face de votre cube ou de votre boîte.
Par défaut le nombre de faces est de 6. Vous pouvez définir moins de face. Les faces non renseignée prendront la couleur par défaut spécifié par l'attribut "defautColor" de la balise <faces>

Le respect de l'ordre des faces est important et suit la syntaxe suivante :

Back / face arrière.
Front / face avant.
Left / Gauche.
Right / Droite.
Top / Dessus.
Bottom / Dessous.

◘ imgFile :
L'attribut "imgFile" permet de définir la couleur ou l'image de la face de votre boîte.

Par défaut les couleurs sont à reinseigner au format WEB (#) ou FLASH (0x).
Attention à bien respecter 6 caractères pour la définition de la couleur (et pas 3, pour les habitués des CSS...).
ex : <face imgFile="0x333333">
ex : <face imgFile="333333">

Vous pouvez également préciser le lien vers une image
(attention aux tailles de l'images renseignés grâce aux attributs height, width et deep de la balise config).
Les formats compatibles sont les suivants : .jpg, .png ou .gif (non animé).

La syntaxe ci-dessous met en avant le lien d'une face sur laquelle une image
du nom de "votreImage.jpg" et située dans un dossier "faces" va s'appliquer sur l'une des faces :
ex : <face imgFile="faces/votreImage.jpg" />

Voici un exemple de syntaxe complète d'une boîte utilisant uniquement des couleurs :

Voici un exemple de syntaxe complète d'images situées dans un dossier "faces" :

<faces>

COMMENT MODIFIER LA TAILLE D'AFFICHAGE DU FLASH ?

Dans votre page html au niveau du code javascript vous devez précisez le format en pixels (cf. code ci-dessous)
À notez que le format d'affichage minimum est de 300x300 pixels.

QUELS EST LA VERSION DE FLASH POUR L'ANIMATION ?

La version de Flash minimum pour lire l'animation est la 10.0.2

QUELS SONT LES FORMATS (EXTENSIONS) QUE JE PEUX UTILISER ?

Flash vous permet d'utilisez des fichiers en .jpg, .png ou .gif (non animé).

NORMES W3C ?

Les exemples qui sont fourni qui respectent les normes W3C.
Celui-ci se base sur une intégration avec javascript de Flash avec "SwfObject".
Les scripts "SwfObject" sont disponibles sur GOOGLE-CODE directement à l'adresse suivante :
http://code.google.com/p/swfobject/

COMMENT TRANSFÉRER LES FICHIERS SUR UN SITE INTERNET ?

Utilisez un logiciel FTP client pour transférer vos dossier sur votre site.
Vous n'avez plus qu'à vous connecter à votre site internet et visualiser la page html du type :
http://www.votre-site-internet.com/votre-Dossier-Avec-Les-Fichiers/votre-Fichier.html

OÙ PUIS-JE TROUVER UN LOGICIEL CLIENT FTP ?

Un logiciel de client FTP est indispensable pour transférer vos fichiers sur votre hébergement.
Vous pouvez utiliser internet explorer sous Windows XP Pro par exemple en rentrant directement l'adresse FTP à la place de l'adresse internet (puis en vous connectant avec l'utilisateur et le mot de passe : FICHIER > SE CONNECTER EN TANT QUE). Vous transférer ensuite vos fichiers de votre disque dur par un simple glisser diposer dans la fenêtre ou par un copier-coller.

Vous pouvez aussi utiliser des logiciels client FTP gratuit comme FILEZILLA.

J'AI MIS EN LIGNE LES FICHIERS, MAIS MA PAGE HTML NE S'AFFICHE PAS :

Pour afficher une page html d'un dossier par défaut il vous faut la renommer par "index.htm" ou "index.html".
Par défaut la racine de votre site fonctionne sur le même principe : vérifier qu'un fichier index y est donc présent.
À noter que la racine d'un site internet chez certains hébergeurs peut-être dans un dossier nommé "www" ou "httpdocs".
Vérifier bien aussi que le dossier où vous avez placez vos fichiers correspondent bien avec l'adresse internet que vous êtes en train de visualiser. Veillez à ne pas utiliser d'espace ou d'accent dans le nom de vos fichiers.

Pour visualiser la page html vous devez entrer une adresse internet du type :
http://www.votre-site-internet.com/votre-Dossier-Avec-Les-Fichiers/votre-Fichier.html

JE N'AI PAS D'HÉBERGEUR ET JE CHERCHE UNE SOLUTION GRATUITE :

Les fournisseurs d'accès internet comme Orange ou Free proposent souvent des solutions gratuites d'hébergement.
Renseignez vous sur le site de votre fournisseur d'accès internet actuel, vous devriez trouvez rapidement ces informations.
Si vous devez utiliser votre site internet à titre professionnel, pensez toutefois que ces solutions deviendront vite osbolètes et présentent souvents des désavantages (comme des contraîntes au niveau technique, des temps d'accès parfois lents ou des difficultés en terme de référencement du à l'adresse du site)...

Retour