Votre formateur Jean-Luc Delon vous présente le codage de l'animation en ActionScript 3 dans Adobe Flash CS5.

Préparation des images, importation des images dans Adobe Flash CS5, création des MovieClip et organisation de la bibliothèque : tout ce que votre formateur Jean-Luc Delon vous propose de découvrir dans cette séquence !

Découvrez avec le formateur Jean-Luc Delon comment réaliser une animation, sur le principe de la caméra multiplan dans Adobe Flash CS5.

Que contient mon dossier Edge quand je le sauvegarde ? Réponse de Franck Payen dans cette vidéo.

La création de texte dans Edge est on ne peut plus simple. Démonstration dans cette vidéo.

Jean-Luc Delon vous apprend à cibler précisément un MovieClip dans un fichier SWF téléchargé dans Adobe Flash CS5.

Div ? Balises ? Les textes et les images pourront être traités différemment dans Edge de façon à optimiser le code pour l'accessibilité et les moteurs de recherche.

Qu'est-ce qu'Adobe Edge ? Dans quelles circonstances va-t-il nous servir ?

Dreamweaver CS5.5 intègre le framework PhoneGap et permet de ce fait de compiler des sites web créés en HTML, CSS et JavaScript en de véritables applications natives pour mobiles.

Cette classe améliore la gestion des fichiers externes SWF, PNG, JPG, etc. Elle corrige certains problèmes avec les textes TLF externes.

Une fois les composants paramétrés et configurés, il devient très simple d'échanger ces informations par importation / exportation avec des collaborateurs. Il est même possible d'en exporter une version d'aperçu pour valider auprès des clients.

Dans l'éditeur de code, l'outil d'aide à l'écriture a été complété par des librairies CSS3, HTML, et jQuery. Le DOM non plus n'a été épargné... Ce qui fait qu'avec les améliorations apportées à la gestion PHP de la version antérieure de Dreamweaver, l'éditeur de code devient réellement performant.

Apprenez à réaliser les transitions régulières sur plusieurs éléments en même temps.

Cette vidéo est consacrée aux boutons. Nous allons préparer les boutons, gérer des états haut/dessus/bas/désactivé via les calques nommés et utiliser l'étiquette des boutons en tant que libellé dans la bibliothèque pour les dupliquer avec les différents éléments.

Cette vidéo traite du réglage des marges et du retrait de première ligne. La gestion des tabulations sur une zone TLF est également abordée.

Découvrez les propriétés visibles accessibles jusqu'à maintenant par le code et qui sont désormais disponibles dans le panneau Propriétés.

Aujourd'hui, utiliser de la vidéo sur le web reste une affaire de format. Le .FLV, le format vidéo utilisé par Flash, a su s'imposer sur le marché. De Dailymotion à YouTube, ce format est devenu incontournable ! Nous allons voir comment le générer et comment l'utiliser en toute transparence au sein de nos pages HTML.

Souvent confondues avec la configuration du site, les principales propriétés de la boîte des préférences générales de Dreamweaver sont très importantes. Nous allons les explorer dans cette vidéo.

Le corollaire au copier-coller et bien évidemment le couper-coller de calque. Prenons donc maintenant le temps d'utiliser le couper-coller.

Suite et fin des vidéos consacrées au code de base pour télécharger des fichiers MP3. Retrouvez la première partie de ce tutoriel ici : http://tv.adobe.com/fr/watch/formations-vidéo-pour-développeurs/adobe-flash-cs55-code-de-base-pour-le-tlchargement-des-mp3-22-

Cette vidéo est consacrée au code de base pour télécharger des fichiers MP3. Retrouvez la seconde partie de ce tutoriel ici : http://tv.adobe.com/fr/watch/formations-vidéo-pour-développeurs/adobe-flash-cs55-code-de-base-pour-le-tlchargement-des-mp3-22-

Apprenez à utiliser le système de transition proposé par Flash sur une image téléchargée.

La version CS5.5 apporte de nombreux extraits de code pour mobiles à écran tactile et pour AIR. Découvrez-les dans cette vidéo.

La nouvelle option Mettre à l'échelle le contenu permet de gagner un temps précieux dans le processus de création.

Sur des sites comme asnippet.com, il est possible de trouver des fragments de code prêts à être réutilisés et insérés dans votre Flash Pro via les options du panneau de Fragments de code.

Cette vidéo s'intéresse aux contraintes de placement qui vous permettent de définir la manière dont les éléments et les composants vont se déplacer lors du redimensionnement des fenêtres. Découvrez également la bibliothèque commune avec les composants Spark/Flex et les espaces réservés pour les éléments de placement.

Dans cette vidéo, nous allons découvrir Flash Catalyst, créer un nouveau projet de wireframing et effectuer une présentation rapide de l'interface.

L'intégration native de l'affichage multi-écrans permet de visualiser directement le rendu qu'obtiendrait les principaux supports tels que les téléphones, les tablettes ou encore les moniteurs.

Dreamweaver CS5.5 met à jour son moteur de rendu interne. La nouvelle version de webkit permet d'obtenir un rendu équivalent à un Safari 4.0.2, 4.0.3.

Dreamweaver CS5.5 est loin d'être une version intermédiaire corrigeant des bugs. Bien au contraire, des améliorations majeures ont été apportées à l'application.

Apprenez à utiliser les styles en-ligne, les feuilles de styles embarquées et les feuilles de styles externes.

Dans cette partie, nous allons mettre en place l'ensemble des actions rendant notre menu interactif. Nous gérerons par exemple les actions au survol, à l'éloignement et au clic.

Ajouter des métadonnées aide les moteurs de recherche à trouver votre animation sur le web grâce à un titre, une description et des mots-clés.

A partir d'un objet simple, vous allez créer votre première articulation.

Une technique non officielle permet de forcer le passage du ramasse-miette. Nous allons utiliser cette possibilité pour démontrer par l'exemple le principe de reference counting.

Grâce à ce tutoriel, nous allons découvrir ce qu'est le ramasse-miette et comment il fonctionne.

Voyez comment convertir une animation en un fichier vidéo.

Dans de nombreux site, vous pouvez voir une bannière qui défile en boucle sans raccord apparent. Comment réaliser cela en AS3 ?

Poursuivons la création du design de notre horloge.

Nous allons préparer notre design et utiliser les différents outils de dessin pour mettre en valeur notre horloge.

Découvrez ici comment convertir les styles appliqués à un composant dans le mode Création en une feuille de style externe.

Cette vidéo montre comment charger une feuille de style CSS compilée à l'exécution.

Animations autonomes ou animations liées - il faut faire un choix en fonction du type de support de diffusion final.

Eléments de division en bloc ou en ligne, les balises

Nous allons explorer les fonctionnalités du client FTP de Dreamweaver et nous verrons comment gérer un affichage indirect et une navigation avancée. Dans cette vidéo, nous ferons également nos premiers pas avec l’aide en ligne : InContext Editing.

Le gestionnaire de fenêtre de Flex permet de créer, centrer et détruire des fenêtres que celles-ci soient modales ou non modales.

Dans cette partie, vous ferez connaissance de l'interface de Flash Builder 4, Console et Player de debug, puis Perspectives et Panneau Project.

Le formateur vous initie au premier projet Flex dans Flash Builder 4.

Apprenez dans cette vidéo à tirer parti des fonctionnalités du glisser-déposer. Nous développerons une application permettant de faire glisser une image depuis le bureau de l'ordinateur et faire afficher cette image par l'application AIR.

Vous apprendrez ici à créer et à enregistrer une application auprès de FMS, à vous y connecter et à monitorer l'état de la connexion.

Les déplacements peuvent aussi être gérer avec la classe Timer. Cette technique permet de garder la maitrise de la fréquence à laquelle l'animation s'effectue.

Il est possible de faire varier la vitesse de déplacement d'un objet en agissant dynamiquement par le code sur la vitesse. Nous pouvons ainsi obtenir un effet d'accélération ou de ralentissement.

Le bruit de l'eau qui coule est apaisant. Cette animation permet non seulement d'être Zen mais aussi de voir comment animer de l'eau avec le bruit de Perlin.

Nous allons voir comment il est possible d'utiliser des transitions d'état dans Adobe Flash Catalyst.

Vous verrez qu'il est possible de créer un composant ScrollBar 100% personnalisé depuis Adobe Flash Catalyst et ceci sans la moindre ligne de code. Apprenez à créer le vôtre en quelques minutes.

Imaginons que Dreamweaver ne propose pas un outil ou une particularité dont vous avez besoin. Vous pouvez alors faire un tour du côté d'Adobe.com/exchange où un grand nombre d'extensions qui permettent d'étendre les capacités de Dreamweaver sont disponibles. Dans cette vidéo, nous allons, par exemple, installer un générateur de faux texte.

Commençons dans ce premier chapitre par découvrir l’interface de Dreamweaver. Cette interface est conviviale et adaptable aux besoins de chacun. Les environnements de travail offrent confort et souplesse pour gérer aux mieux les pages HTML et optimiser au maximum le flux de production avec Dreamweaver.

Nous allons tester les différentes méthodes d'accrochage, c'est-à-dire la capacité de créer des objets alignés sur des repères ou par rapport à un autre objet.

Nous allons configurer et afficher une grille pour nous aider dans la mise en pages de notre animation. Une grille est comparable à une feuille à carreaux.

Les fonctionnalités de suppression peuvent surprendre car la suppression est directe et sans appel. Il va falloir intégrer cette particularité à notre flux de travail et ainsi mettre en place une page de validation intermédiaire. Nous en profiterons pour présenter une alternative sous forme d'extension.

Dans cette vidéo, nous allons rapidement présenter le principe de fonctionnement d’InContext Editing : les diverses étapes qui constituent sa mise en place et son déploiement sur un site existant.

Programmation en AS3 de l'animation. Ajustement de dernière minute et ajout d'un effet de brume.

Travail préparatoire en amont sous Photoshop. Importation des images dans Flash et organisation des MovieClip.

Dreamweaver n'intègre pas la gestion d'envoi de fichiers binaires côté serveur (images, documents PDF, documents Word…). Pour gérer cela, il faut avoir recours à des extensions tierces. Il est facile d'en trouver sur le site d’exchange et nous verrons pourquoi une telle fonctionnalité ne peut être prise à la légère.

Le dégradé de couleurs est une composante essentielle de la mise en couleur de certains éléments. Il offre des possibilités qui peuvent donner de la subtilité au moindre aplat. Nous allons découvrir son mode de fonctionnement et son paramétrage au sein de Fireworks.

Fireworks propose divers paramétrages qui permettent d'interagir sur la mise en forme du texte. Dans cette vidéo, nous allons détailler les principales fonctionnalités.

Dans cette vidéo sur Flash CS5, en plus de la notion d'écouteur, vous verrez, avec le formateur Jean-Luc Delon, comment savoir si le Movieclip que nous déplaçons est toujours sur la scène et si ce n'est pas le cas comment le repositionner à son point de départ.

Hormis la véracité, l'intérêt et la valeur ajoutée aux informations contenues dans nos sites web, un des principaux points négatifs qui ressort des retours utilisateurs concerne les fautes d'orthographe. Si le contenu du site a été rédigé dans Dreamweaver, il est important de lancer une mécanique d'aide à la correction.

Dans cette vidéo, nous allons utiliser et révéler une vieille fonctionnalité parfois sous-exploitée dans Dreamweaver. Cependant, bien que nous ne l'utilisions pas, c'est grâce à elle que l'ensemble de nos sites se synchronisent ou encore que Dreamweaver utilise les outils externes pour modifier les images avec les fichiers source : les design notes.

Cette technique permet de créer des zones transparentes sur une carte ou sur une bannière publicitaire, et d'y insérer une action.

Mettez en relief un texte dans son bloc avec les filtres. Si votre bloc est semi-transparent, une ombre portée s'appliquera également sur le texte.

Autres éléments incontournables de nos interfaces web, les menus accordéons permettent de jouer avec l'affichage et le masquage de certains contenus. Nous définirons diverses manières d'intervenir sur les CSS qui mettent en forme les menus accordéons.

Un autre aspect de l'utilisation d'images reste l'utilisation d'images interactives ou d’images de survol. Nous allons voir que Dreamweaver propose trois alternatives pour cette manipulation.

Illustrator contient une grande bibliothèque de symboles prédéfinis, il est très simple de les coller dans Flash afin que vous n'ayez pas à les dessiner.

Utile si vous avez créé un fichier Photoshop contenant beaucoup de calques ! Vous pourrez transformer le fichier en symbole clip et conserver les calques Photoshop.

Ces outils servent à appliquer une déformation 3D sur tous les axes X, Y, et Z, sur des symboles, et à déplacer un objet sur l'axe X et Y en rapport avec la position de point de fuite de votre animation.

L'image numérique de type bitmap est composée de pixels. On parle aussi de résolution. Quelles sont ces diverses notions ? Quelles sont leurs interactions ? Comment interfèrent-elles dans la qualité et les paramétrages d'une image ? Nous répondrons à ces questions dans cette vidéo.

En quelques minutes, apprenez à dessiner avec tous les outils de création de Flash : création de formes géométriques simples, utilisation des outils de dessin, création d'effets et d'animations, utilisation de l'outil Déco, etc. En un clin d'oeil vous aurez réalisé le décor de Central Park.

Il existe d’autres balises HTML importantes : les éléments de liste. Il y a les listes ordonnées, les listes désordonnées et les listes de définitions. Pour chaque liste, nous allons explorer sa mise en place, son intérêt et son utilisation.

En regardant cette vidéo, vous allez vous familiariser avec la manipulation des palettes, des panneaux et des autres onglets. Nous allons explorer l'ensemble des menus contextuels et mettre en place un espace de travail personnalisé.

Flash Media Server est la technologie la plus riche et la plus fiable pour construire des applications de vidéo à la demande et des applications temps réel pour le lecteur Flash. Vous verrez ici la lecture de vidéo en streaming.

Dans Flash Media Server, il est facile de synchroniser les images de la vidéo et le système de chapitrage grâce à la méthode de rappel onCuePoint.

Cette navigation permet de réaliser des sites de type tableau de bord. Cela évite à l'utilisateur d'utiliser l'ascenseur pour atteindre l'information.

Il s'agit du composant idéal si vous n'avez pas de base de données et que vous souhaitez afficher dans une page HTML le contenu d'une autre page HTML. Cela permet par exemple d'afficher des fiches produit à partir d'une liste de produits.

Etablir une connexion à une application Flash Media Server, se déconnecter et monitorer l'état de la connexion.

Flash Remoting permet à un client Flash de communiquer avec une technologie de serveur telle que PHP, Java, .Net, etc.

Tony Broyez vous présente ici un exemple minimal d'utilisation du pattern MVC.

En ActionScript 3, le pattern d'architecture Modèle-Vue-Contrôleur permet de structurer des applications complexes et de les rendre plus compréhensibles et plus robustes.

Vous verrez ici un petit bout de code qui va vous permettre d'explorer par vous-même l'envoi d'e-mails depuis le serveur. Qu'il s'agisse d'un envoi de contact ou d'une newsletter, le principe en reste le même.

Lorsque vous commencez à récupérer des bouts de code réutilisables, utilisez la palette des fragments de code présente dans Dreamweaver. Cette palette va vous permettre par simple clic ou glisser-déposer de pouvoir exploiter au mieux l'ensemble des codes qui d'un coup seront organisés.

Le contrôleur est la classe qui modifie les données du modèle. La vue est la classe qui affiche les données du modèle en souscrivant aux évènements que celui-ci diffuse.

Votre formateur Tony Broyez va vous montrer ici comment implémenter le modèle en utilisant le pattern de création Singleton.

Les animations Flash sont devenues des classiques présents sur presque tous les sites sous la forme de bannière publicitaire par exemple.

Si votre site est organisé autour de frames, cette technique vous permet d'ouvrir tel ou tel lien dans un cadre précis de votre page.

Les feuilles de style sont au centre de cette version de Dreamweaver. Des nouveaux outils sont disponibles pour faciliter le travail.

Vous pouvez être amené à travailler sur un langage qui n'est pas natif et intégré à Dreamweaver : alors installons-le !

L'éditeur de code propose une aide à l'écriture et permet d'accéder à divers éléments comme la palette de couleurs, les styles en cours.

Au cours de cette vidéo, nous allons voir pourquoi il est bon d'avoir recours à une telle feuille de style.

Si la palette Rechercher / Remplacer ne propose pas les options de recherche dont vous avez besoin, utilisez les expressions régulières !

Pour un référencement naturel de votre site, chaque page HTML doit contenir des balises particulières permettant au moteur de recherche de trouver et d'indexer vos pages.

Les images aussi peuvent servir à faire des liens vers d'autres pages ou d'autres sites.

Lors de la création de contenu, des visuels trop riches peuvent faire défaut aux contributeurs. Pour cela, Dreamweaver propose des feuilles de style à la conception.

Nous allons rapidement mettre en application la librairie JavaScript d'Adobe "Adobe Spry" et voir avec quelle simplicité il est facile de la personnaliser.

il s'agit ici d'un composant utile pour, par exemple, afficher une définition au survol d'un mot technique