Administrateur Systèmes d'Information mais aussi Développeur Web.
Passionné de tennis et de plein d’autres choses.
J’ai créé mon premier site internet en 2000, à l’âge de 13 ans, ça ne m'a pas quitté depuis.

Arnaud Bosquet

Administrateur Systèmes d'Information / Dev Web / Tennis
“Le risque est acceptable”

Un lecteur MP3 en AS3 (avec classes)

Même si nous avons eu que très peu de cours de Flash cette année, nous devions rendre à la fin du trimestre un lecteur MP3 codé en AS3 avec des classes.

Celui-ci devait prendre en compte une playlist gérée par à un fichier xml et pleins d’option que l’on trouve sur un tas de player identique. Je mets mes sources à disposition car j’ai bien commenté le code et je me dis que ça pourra peut être servir à quelqu’un.

Si vous voulez tester mon lecteur, c’est par là

Pour télécharger mes sources, (fichiers .as, .fla,…) c’est par ici
Les sources sont aussi dispo dans la suite…
Lire la suite…

Vol d’un papillon avec After Effects

Pour nos fameux cours de Post-Production, nous avons appris l’utilisation des scripts sous After Effects afin de répéter une action facilement. Cela a abouti sur un projet : faire volé un papillon en 3D. On entend par 3D l’utilisation de l’axe Z sous After Effects et non l’utilisation d’un logiciel de modélisation.

Pour le papillon, nous sommes parti de cette image :

Après quelques réglages, scripts et minutes de rendu voici les résultats :

1. Premier rendu :

(Avec un joli bug à la fin, la texture n’était pas assez grande)

2. Deuxième rendu :

Pour le dernier rendu, j’ai photographié l’herbe de mon jardin puis j’ai assemblé les images afin d’obtenir une grande texture ;)

Vous pouvez la voir et l’utiliser, c’est par là : http://www.flickr.com/photos/30341140@N07/3689237163/

EDIT : Suite à une demande dans les commentaires, vous pouvez télécharger le fichier source ici : http://www.arnaudbosquet.fr/tutos/vol-papillon-ae/vol-papillon-ae.zip

Modélisation et Animation 3D sous Blender

Durant cette année de Licence, un des cours qui nous a surement plus à tous était la Post-Production. On a pu mettre les mains dans After Effects, Encore DVD et pour finir Blender. On a eu quelques cours sur ce logiciel 3D Open Source et on avait pour but de rendre un projet comprenant la modélisation et l’animation d’une montre.

Voilà mon animation, avec pratiquement 10 heures de calcul pour le rendu… :D

2/2 #Rollover – Comment faire un menu rollover en CSS

C’est à la suite d’une visite sur le site d’Apple que je suis tombé sur leur barre de menu (très réussi, au passage). Par curiosité, j’ai affiché l’image de fond et je suis tombé sur ça :

Menu Rollover Apple

Menu Rollover Apple

Une image qui réunit les différents « états » (classique, survol, clic) du menu. Ca ma donné une idée de tuto pour créer des menus rollover en CSS. L’intérêt de celui-ci, c’est qu’il ne fait pas appel au javascript et qu’il sera donc affiché sur tous les navigateurs.

¤ Etape 1 : Préparer le terrain

On commence par lier notre feuille de style avec notre page HTML grâce à la balise :

<link rel="stylesheet" type="text/css" href="./style.css">

Ensuite, on va ajouter un conteneur pour notre menu. Celui-ci sera tous simplement un div :

	<!--Début du conteneur menu -->
<div class="menu">
</div>
<!--Fin du conteneur menu-->

Dans notre feuille de style, on va initialiser les marges et centrer notre conteneur :

BODY{
margin:10px;
padding:10px;
}
p,ul,a{
margin:0px;
padding:0px;
}
.menu{
width:982px;
margin:0 auto 0 auto; /* Pour centrer horizontalement notre menu */
height:36px;
border:1px solid black; /* Pour vérifier le centrage */
}

Avec tous cela, on a maintenant une page avec un div centré et à la bonne dimension.
¤ Live démo de l’étape 1 là : http://www.arnaudbosquet.fr/tutos/css/etape1/

¤ Etape 2 : Mettre en place le menu

On va maintenant placer les différentes catégories du menu à l’aide de la balise <a>et leur attribuer une classe css. Notre code HTML ressemble à ça :

<div class="menu">
	<a class="m_accueil"></a>
	<a class="m_store"></a>
	<a class="m_mac"></a>
	<a class="m_ipod"></a>
	<a class="m_iphone"></a>
	<a class="m_telec"></a>
	<a class="m_support"></a>
	<a class="m_search"></a>
</div>

Tout le travail va être fait dans notre feuille de style. Pour chaque élément, on va placer l’image en background. L’attribut float:left, va quant à lui, nous permettre d’avoir les div sur une seule ligne. On simplifiera notre feuille de style plus tard. Et voici le travail :

.menu{
width:982px;
margin:0 auto 0 auto;
height:36px;
/*border:1px solid black;*/
}
.m_accueil{
background:url('./menu.png') no-repeat 0px 0px;
width:118px;
height:37px;
float:left;
}
.m_store{
background:url('./menu.png') no-repeat -118px 0px;
width:117px;
height:37px;
float:left;
}
.m_mac{
background:url('./menu.png') no-repeat -235px 0px;
width:117px;
height:37px;
float:left;
}
.m_ipod{
background:url('./menu.png') no-repeat -352px 0px;
width:117px;
height:37px;
float:left;
}
.m_iphone{
background:url('./menu.png') no-repeat -469px 0px;
width:117px;
height:37px;
float:left;
}
.m_telec{
background:url('./menu.png') no-repeat -586px 0px;
width:117px;
height:37px;
float:left;
}
.m_support{
background:url('./menu.png') no-repeat -703px 0px;
width:117px;
height:37px;
float:left;
}
.m_search{
background:url('./menu.png') no-repeat -820px 0px;
width:161px;
height:37px;
float:left;
}

Nos catégories sont placées, le menu est presque prêt, sauf qu’il est statique :D
¤ Live démo de l’étape 2 là : http://www.arnaudbosquet.fr/tutos/css/etape2/

¤ Etape 3 : Animation du menu

Ajoutons un peu de vie à ce menu. Pour cela, tout va se passer dans notre css. Grâce aux propriétés :hover et :active, on va pouvoir définir un style pour le survol ou le clique. Dans notre cas, le style sera le même mis à part le décalage sur la hauteur du background.
On va aussi simplifier notre css grâce à l’héritage. En effet, toutes nos catégories sont définies par des balises <a> et celles-ci sont à l’intérieur du div qui a la classe menu.

.menu a{
height:37px;
float:left;
}

Le bout de code ci-dessus va permettre d’attribuer ces mêmes propriétés pour toutes les balises <a> contenu dans le div qui a la classe menu.

Notre feuille de style complète et finie :

.menu{
width:982px;
margin:0 auto 0 auto;
height:36px;
/*border:1px solid black;*/
}
.menu a{
height:37px;
float:left;
}
.m_accueil{
background:url('./menu.png') no-repeat 0px 0px;
width:118px;
}
.m_accueil:hover{
background:url('./menu.png') no-repeat 0px -38px;
}
.m_accueil:active{
background:url('./menu.png') no-repeat 0px -76px;
}
.m_store{
background:url('./menu.png') no-repeat -118px 0px;
width:117px;
}
.m_store:hover{
background:url('./menu.png') no-repeat -118px -38px;
}
.m_store:active{
background:url('./menu.png') no-repeat -118px -76px;
}
.m_mac{
background:url('./menu.png') no-repeat -235px 0px;
width:117px;
}
.m_mac:hover{
background:url('./menu.png') no-repeat -235px -38px;
}
.m_mac:active{
background:url('./menu.png') no-repeat -235px -76px;
}
.m_ipod{
background:url('./menu.png') no-repeat -352px 0px;
width:117px;
}
.m_ipod:hover{
background:url('./menu.png') no-repeat -352px -38px;
}
.m_ipod:active{
background:url('./menu.png') no-repeat -352px -76px;
}
.m_iphone{
background:url('./menu.png') no-repeat -469px 0px;
width:117px;
}
.m_iphone:hover{
background:url('./menu.png') no-repeat -469px -38px;
}
.m_iphone:active{
background:url('./menu.png') no-repeat -469px -76px;
}
.m_telec{
background:url('./menu.png') no-repeat -586px 0px;
width:117px;
}
.m_telec:hover{
background:url('./menu.png') no-repeat -586px -38px;
}
.m_telec:active{
background:url('./menu.png') no-repeat -586px -76px;
}
.m_support{
background:url('./menu.png') no-repeat -703px 0px;
width:117px;
}
.m_support:hover{
background:url('./menu.png') no-repeat -703px -38px;
}
.m_support:active{
background:url('./menu.png') no-repeat -703px -76px;
}
.m_search{
background:url('./menu.png') no-repeat -820px 0px;
width:161px;
}

Pour ajouter des liens sur nos catégories, il suffit d’utiliser la propriété href comme ci-dessous :

	<a class="m_accueil" href="#"></a>

¤ Live démo du menu rollover en css c’est là : http://www.arnaudbosquet.fr/tutos/css/etape3/

A vous de jouer :D

Cours de Post Production

Cette année, je retrouve des cours de Post Production vidéo. Comme j’avais déjà travaillé sur After Effects j’ai pu m’amuser un peu pour la création d’un DVD (qui sera notre note de l’année).

Il fallait trouver un thème et comme j’ai récupéré les bandes annonces HD de Batman, je me suis lancé.

Lire la suite…

La Fac de Cinéma… Qu’en reste-t-il ?

A la sortie de mon bac (ça commence à dater maintenant…) je m’étais orienté vers une fac de Cinéma, Audiovisuelle et Multimédia. La partie Multimédia, je n’en ai pas vu une miette. J’ai tenu un semestre puis après je suis parti vers de nouvelles aventures.

Durant cette période, j’ai quand même réalisé un court métrage que je garde précieusement…

Lire la suite…