Créez des conceptions d'animation et d'interaction Web en HTML 5 avec Adobe Edge

Les dernières normes Web, HTML5 et CSS3 en conjonction avec JavaScript ont vraiment réduit le temps et les efforts impliqués dans la création de sites Web riches en graphiques, textes et animations. En utilisant les pouvoirs de HTML5, vous n'avez plus besoin d'écrire manuellement du code pour incorporer du contenu multimédia tandis que CSS3 rend vos éléments d'interface utilisateur Web plus flexibles, robustes et surtout plus faciles à manipuler. Si vous recherchez un outil de conception Web qui vous permet de tirer le meilleur parti des dernières normes Web sans vous obliger à saisir manuellement le code de chaque élément de l'interface utilisateur, le tout récemment lancé Adobe Edge est probablement exactement ce dont vous avez besoin.

Adobe Edge a été spécialement conçu pour les concepteurs visuels, Web et d'interaction qui ont souvent du mal à créer des mouvements Web et du contenu animé à l'aide des normes Web HTML5, CSS3 et JavaScript. Il s'agit essentiellement d'un outil de conception de mouvement et d'interaction Web pour créer du contenu animé à l'aide de HTML5, CSS3 et JavaScript. Bien qu'il intègre tous les outils de base pour créer, modifier, modifier et concevoir les éléments de l'interface utilisateur Web, il offre un chorégraphe d'animation intuitif pour créer et ajuster facilement du contenu animé dans votre site Web page. De plus, cela ne vous oblige pas à démarrer un nouveau projet à partir de zéro, vous pouvez y importer votre fichier HTML pour inclure une nouvelle interface utilisateur compositions et bricoler avec des éléments d'interface utilisateur existants, tels que, tableau, styles de texte, nuances d'image, position, police, conteneur alignement et plus encore.

L'interface principale est divisée en 3 sections. La barre latérale gauche contient les outils de composition d'éléments d'interface utilisateur sélectionnés, la barre latérale droite contient toutes les listes principales d'éléments d'interface utilisateur Web, y compris, effets d'ombre, images, texte, tandis que la section inférieure contient l'éditeur de chronologie à chorégraphier animations.

Le volet Éléments vous permet d'afficher / masquer l'élément sélectionné et de le verrouiller pour empêcher toute modification ultérieure. Lorsque vous sélectionnez un élément dans l'écran principal, il le met immédiatement en surbrillance dans le volet Éléments, ce qui facilite son masquage ou son verrouillage. Lorsque vous passez le pointeur de la souris sur un élément répertorié dans Elements, il vous indique les initiales de la classe avec le nom, afin que vous puissiez facilement l'identifier dans le fichier CSS.

Le volet des propriétés sur le côté gauche affiche les outils de composition pour l'élément d'interface utilisateur sélectionné de votre page Web. Une fois sélectionné, vous pouvez modifier sa taille d'emplacement, son opacité, sa famille de polices de texte, sa taille et ses styles de texte, définir l'origine de la transformation, la rotation de l'image, etc.

L'éditeur de chronologie vous permet de visualiser la chronologie de chaque élément animé. Si vous avez affaire à un énorme fichier CSS, cliquez sur le bouton de filtre pour afficher uniquement les éléments animés dans le volet Éléments pour modifier rapidement leurs positions, couleurs, taille, etc. En bas à gauche du volet, vous disposez d'un bouton de zoom pour agrandir la chronologie afin de vérifier le temps alloué et l'effet de transition de tous les éléments animés.

Outre la création de contenu animé compatible avec tous les navigateurs pour tous les navigateurs Web très répandus, notamment Firefox, Chrome, Internet Explorer 9, le contenu Web créé grâce à cet outil fonctionnera de manière transparente sur les plates-formes iOS et Android aussi. Selon la communauté officielle, Edge Preview est en développement actif et sera bientôt mis à jour avec de nombreuses fonctionnalités. Adobe Edge fonctionne sur Windows Vista et Windows 7.

Télécharger Adobe Edge