Dans ce tuto Flash Catalyst CS5, nous allons réaliser un scrolling animé à partir d'un PSD Photoshop auparavant créé. Ce tuto est adapté aux novices comme aux webmasters désireux d'étendre leurs compétences.

Dans ce tuto, nous aborderons les points suivants:

  • Création du scrolling sous Photoshop
  • Gestion de la disposition dans l'espace sous photoshop (repères, calques...)
  • Importation d'un projet Photoshop sous Flash Catalyst
  • Animation d'états sous Flash Catalyst
  • Création de boutons Flash Catalyst

Jetez un oeil à ces autres tuto Flash Catalyst CS5, Photoshop CS5

Aller plus loin Aller plus loin
La création de votre projet touche à sa fin. Obtenez quelques…

Finalisation de l'applicationFinalisation de l'application…
Apportons les dernières finitions à notre application.

Mise en place du scénario et des transitions 1/2Mise en place du scénario…
Cette étape reste l'une des plus longues à mettre en oeuvre…

Mise en place du scénario et des transitions 2/2Mise en place du scénario…
Continuons à mettre en place notre scénario et nos transitions.…

Réaliser un Livre Virtuel (FlippingBook)Réaliser un Livre Virtuel…
Dans ce tuto Flash Catalyst CS5, je vous propose de réaliser…

Menu et navigation dans une page uniqueMenu et navigation dans une…
Dans ce Ttuto Flash Catalyst CS5, je vous propose de réaliser…

Hack Flash Catalyst: créer une Animation en BOUCLEHack Flash Catalyst: créer…
Je vous propose dans ce tuto Flash Catalyst CS5, de découvrir…

Galerie Photo DynamiqueGalerie Photo Dynamique
 Je vous propose de voir dans ce tuto Flash Catalyst CS5 comment…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Flash Catalyst CS5, Photoshop CS5 de 51 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

bpdesign , Formateur

Utilisateur adobe photoshop depuis plus de 10 ans, je suis très sensible au monde du Webdesign. Aujourd'hui auto-entrepreneur dans la création de site internet j'enseigne également en Technologie de l'information et de la communication à l'université Claude Bernard Lyon 1 en Licence Professionnelle.

En savoir plus sur bpdesign


Témoignage des clients de bpdesign

Très bon formateur ! Clair et précis c'est parfait

Formateur génial, un des meilleurs.

Un très bon formateur, des tuto vidéo de qualité et des explications claires, précises et simples ! Je suis désormais bpdesign sur twitter et attends avec impatience ses divers projets en cours de réalisation ! :) A recommander !

Très bon tuto!

Bravo très bon Tuto sur la création d'une page contact. A quand la suite pour l'intégrer sous Dreamweaver par ex. Jean Michel

Lire les autres témoignages

 

D'autres tuto de bpdesign

Image typo : remplir une image avec du texteImage typo : remplir une image avec du texte
Dans ce tuto Photoshop CS5 vous allez apprendre à réaliser un effet typographique,…

Créer une icône Web 2.0Créer une icône Web 2.0
Dans ce tuto Photoshop vous allez apprendre à réaliser une icône Web 2.0 glossy et…

Créer une maquette de slideshowCréer une maquette de slideshow
Dans ce tuto Photoshop CS5, vous allez pouvoir créer votre propre maquette Photoshop…

Créer une maquette de site internet web 2.0Créer une maquette de site internet web 2.0
Dans ce tuto Photoshop vous allez pourvoir apprendre et comprendre le fonctionnement…

voir tous les tuto de bpdesign

Notes attribuées par les utilisateurs (2 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (11)

par bpdesign
(auteur de ce tuto - 01 février 2011)

" Je vois ce que vous voulez dire mais très franchement je cale... "

par bibopà voté :
(a acheté ce tuto - 31 janvier 2011)

" Bonjour,

et bien de rien, quand on aime, on ne compte pas ;-).

Merci pour ce lien, mais en l'occurrence j'ai déjà trouvé comme mettre du son dans mon animation.
Ce que je n'arrive pas à faire, c'est exporter l'animation avec le son inclus dedans, et non pas une animation avec d'un côté l'image, et de l'autre le son si vous soyez ce que je veux dire ? "

par bpdesign
(auteur de ce tuto - 31 janvier 2011)

" Hello bibop! Merci de montrer autant d'intérêt au tuto!

voici un lien qui pourrait t'aider: http://www.wonderhowto.com/how-to-add-animation-audio-and-video-content-your-flash-catalyst-project-390760/

sinon, pour le moment d'autre tuto FC cs5 ne sont pas au programme mais pourquoi pas! "

par bibopà voté :
(a acheté ce tuto - 30 janvier 2011)

" Bonjour bonjour,

me voilà de retour pour une nouvelle colle !

Pour ma question précédente, je n'ai pas pu obtenir de résultat satisfaisant avec la transparence. Du coup j'ai mis comme fond de l'animation un bout du fond de mon site. De cette façon l'on a l'impression que l'animation y est parfaitement intégrée.

Et donc voici la colle du jour, car j'aime tellement ce tuto que je travaille beaucoup avec, et j'essaie d'y apporter ma touche si je puis dire ! Malheureusement, je ne trouve pas toujours la solution !
Alors voilà, j'ai paramétré mes boutons pour qu'un son se joue lorsqu'on clique dessus. Comment faire pour que ce son soit intégré à l'animation (quitte à la rendre plus lourde) sans qu'il faille uploader le son sur le serveur, ou sans que l'animation est besoin de fichiers externes pour se jouer quoi... ?

Merci :-)

P.S: à quand le prochain tuto sur les diverses possibilités offertes par catalyst ? "

par bpdesign
(auteur de ce tuto - 03 décembre 2010)

" OK tenez moi au courant de votre solution finale ;) "

par bibopà voté :
(a acheté ce tuto - 02 décembre 2010)

" Merci beaucoup de votre réponse !

A vrai dire, j'ai également cherché par ci par là avant de poster ma question ici, sans solution claire et simple.

En tout cas, vos astuces semblent intéressantes, donc je m'y met tout de suite !

Merci encore et à bientôt ! "

par bpdesign
(auteur de ce tuto - 02 décembre 2010)

" Alors là c'est une vraie colle que vous me posez. J'essaie de me renseigner dessus depuis 20 min mais les sujets sur FC et la transparence ne courent pas les rues. Ce que je peux vous conseillez c'est de réaliser auparavant sur Photoshop un fond transparent (0% opacité) et de voir si ça marche. Sinon essayez de voir en cliquant sur votre image de fond directement dans FC pour en modifier ses paramètres.

Enfin dernier recours, sur Photoshop réalisé un fond d'opacité de 1 à 10% cela réalisera un fond très légèrement opaque qui laissera voir votre fond de site sans problème. Je vous conseille de faire cela avec un fond blanc. "

par bibopà voté :
(a acheté ce tuto - 01 décembre 2010)

" Bonsoir,
très bon tutoriel, et très facile à suivre !

Par contre, j'aurai une question : en adaptant le tutoriel à un projet de même style mais de design différent, je suis tombé sur un os. Comment faire pour que le fond de l'animation swf finale soit transparent ? Et donc que le voit le fond du site à travers, sans que cela affecte les éléments visibles de l'animation bien sur ?

Auriez-vous une petite astuce ?

Merci ;-) "

par bpdesign
(auteur de ce tuto - 06 octobre 2010)

" Non du tout, vous pouvez bien évidement éditer le texte sous FC cs5. "

par sodapop38
(a acheté ce tuto - 01 octobre 2010)

" Bonjour,
le souci est que le texte des contenus est fixé dans photoshop... pas vraiment pratique pour les mises à jours. "

par nelly93à voté :
(a acheté ce tuto - 19 août 2010)

" Bravo encore une fois! Second tuto que je vous achète et je suis toujours autant satisfaite! Ce que j'aime dans ce tuto c'est que l'on confectionne aussi la maquette psd sous Photoshop avant de la modèliser sur Catalyst CS5! "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto Flash Catalyst CS5, Photoshop CS5 d’une durée de 51 minutes a été acheté 56 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 9 août 2010 par bpdesign, contributeur, ayant reçu une note moyenne de 4,3/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Flash Catalyst webdesign.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !