Share
Dans cette astuce, je vais vous montrer comment créer une animation très simple pour une annonce de coin sur votre site Web..
Ouvrez un nouveau fichier Flash ActionScript 3.0 et changez ses dimensions dans le panneau Propriétés en 250 x 250 pixels. Définissez la fréquence d'images sur 30fps.
Créez un rectangle (240px par 240px) et placez-le aux coordonnées (10, 0). Choisissez le coin en haut à droite et faites-le glisser jusqu'à ce que vous voyiez un triangle.
Accédez à la palette de couleurs et définissez les arrêts de dégradé extérieurs sur gris foncé (# A6A6A6). L’arrêt du gradient moyen est plus clair (#EEEEEE). Choisissez l'outil Pot de peinture et faites-le glisser sur le triangle en maintenant la touche Maj enfoncée..
Sélectionnez le triangle et appuyez sur F8. Nommez ce nouveau clip "curl" et changez le point d'alignement en haut à droite..
Modifier le boucle objet. Copiez le triangle dans le nouveau calque (renommez-le "bcg" pour Contexte) et faites-le pivoter de 180 degrés. Définissez la couleur de remplissage sur gris foncé (# 333333). Créez un calque dupliqué du calque "bcg" et renommez-le en "masque".
Accédez à la dixième image et créez des images clés dans toutes les couches. Cliquez avec le bouton droit de la souris sur les premières images clés et sélectionnez Créer une interpolation de mouvement. Allez au premier cadre et sélectionnez tous les objets (Ctrl + A). Choisissez l'outil de transformation libre (Q) et réduisez-le en maintenant la touche Maj enfoncée. Ce sera l'état initial. Définissez la valeur de facilité dans toutes les premières images clés sur 100.
Créez un nouveau calque et faites-le glisser entre les bcg et masque couches. Nommez-le "bouton". Créez le logo ou les graphiques de votre choix et convertissez-le en bouton (F8). Donnez-lui un nom d'occurrence "bouton". Laisser l'objet curl.
Double-cliquez sur le bouton Propriétés de la couche du masque couche et définissez le type sur "Masque". Définissez le type de couche de bouton sur "Masqué".
Créez un nouveau calque appelé actes. Accédez à la dixième image et créez une image clé. Allez dans le panneau d'actions (F9) et tapez Arrêtez();. Faites la même chose dans la première image clé.
Donnez à l'objet curl sur la scène un nom d'instance de boucle. dans le actes couche 1, ouvrez le panneau Actions (F9). Nous voulons maintenant que l'objet curl écoute lorsque la souris se déplace vers l'extérieur. Tapez le code suivant.
curl.addEventListener (MouseEvent.MOUSE_OVER, avant); curl.addEventListener (MouseEvent.MOUSE_OUT, en arrière); fonction forward (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, backAnim); stage.addEventListener (Event.ENTER_FRAME, fwdAnim); fonction en arrière (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, fwdAnim); stage.addEventListener (Event.ENTER_FRAME, backAnim);
le fwdAnim () et retourAnim () fonctions dit d'aller à l'image suivante / précédente à chaque fois que vous entrez dans une nouvelle image. Dans notre cas, c'est 30 fois par seconde. Ajoutez le code suivant.
fonction fwdAnim (e: Event): void curl.nextFrame (); function backAnim (e: Event): void curl.prevFrame ();
Ajouter le bouton écouteur et créer une fonction de clic simple.
Accentsconagua
curl.button.addEventListener (MouseEvent.CLICK, clickMe); function clickMe (e: MouseEvent): void var myURL: URLRequest = new URLRequest ("http://www.yourwebsite.com/"); browseToURL (myURL); Nous pouvons maintenant intégrer le fichier SWF à une page Web..
Dans la page HTML où vous souhaitez diffuser votre annonce, intégrez le fichier SWF dans un div avec l'identificateur pageCurl..
Associez les propriétés suivantes à l'objet pageCurl dans votre fichier CSS. Ils définissent les dimensions de votre porte-objet et fixent sa position en haut à droite de la page..
#pageCurl margin: 0; position: fixe; en haut: 0; à droite: 0; gauche: auto; largeur: 250px; hauteur: 250px;
C'est tout! Découvrez le résultat en survolant le coin supérieur droit de la page pour révéler votre publicité. J'espère que vous trouverez une utilisation pour cette astuce!
