Google Web Designer - Spritesheet Component Overview Google Web Designer Italian French

Google Web Designer - Spritesheet Component OverviewYouTube↗ IA↗(long shot)
Science & Technology 18.6K views 52 likes 4 dislikes 17 Nov 2015

Google Web Designer 76.8K subscribers United States YouTube↗

Click to Play Video

NICOLA: Salve a tutti.

Oggi illustrerò il componente Foglio sprite.

Aujourd'hui, je vais parler du composant "Sprite Sheet".

È uno degli ultimi componenti

C'est l'un des nouveaux composants

introdotti nella versione 1.5 di

de la version 1.5

Google Web Designer.

de Google Web Designer.

L'intento di questo componente

Le composant "Sprite Sheet"

è quello di mostrare e gestire una sequenza di immagini.

sert en réalité à afficher et à gérer une séquence d'images.

Se torno al riquadro Componenti in GWD,

Si je retourne dans le panneau "Composants" de GWD,

posso trascinare il componente Foglio sprite.

je peux glisser-déposer le composant "Sprite Sheet".

Nel riquadro Proprietà, posso specificare l'origine effettiva

Dans le panneau "Propriétés", je peux spécifier le fichier source

del file per il foglio sprite.

pour notre sprite.

Il nostro esempio è sprite.png.

Par exemple, je saisis "sprite.png".

Possiamo impostare le dimensioni, nonché l'altezza.

Nous pouvons définir la largeur et la hauteur.

Dopo aver selezionato il componente dal riquadro Proprietà,

Après avoir sélectionné mon composant sous "Propriétés",

posso definire alcuni parametri.

je peux définir plusieurs paramètres.

Posso specificare gli offset per x e y

"Décalage X" et "Décalage Y" permettent de définir le décalage

all'interno del foglio sprite.

dans notre grille de sprites,

Considera l'angolo in alto a sinistra

l'angle supérieur gauche étant le point de départ

come origine del foglio sprite.

pour notre grille.

I valori relativi ad altezza e larghezza inseriti qui

La largeur et la hauteur

definiscono le dimensioni di ogni frame.

définissent la taille de chaque image.

Ci sono anche le proprietà Allineamento e Ridimensionamento.

Nous avons aussi des propriétés d'alignement et d'échelle.

Sono utili nei casi in cui

Elles sont très utiles

si vuole intervenire sull'allineamento del frame

pour tester l'alignement de l'image

all'interno del componente o sul ridimensionamento dell'immagine

à l'intérieur du composant, ainsi que l'échelle de l'image

all'interno del componente.

dans ce même composant.

Per il momento, l'opzione Ritaglia immagine per riempire lo spazio

Pour l'instant, recadrons l'image pour remplir l'espace.

è adatta al nostro scopo.

Cette option suffit pour ce que nous tentons de faire.

Ora faccio clic su

En cliquant sur "Afficher les paramètres avancés",

Mostra impostazioni avanzate per impostare

je vais en fait activer la lecture automatique,

l'animazione su Riproduzione automatica, dato che voglio iniziare subito.

pour que cette animation se déclenche tout de suite.

Imposto anche il numero di frame

Je vais aussi définir le nombre d'images

che compongono l'animazione.

qui composent notre animation.

Nel nostro caso, sono 17.

Ici, nous en avons 17.

La durata per il momento è di 100 millisecondi

La durée, pour l'instant, est de 100 millisecondes,

e lasciamo 0 come valore relativo al numero di ripetizioni,

et nous allons laisser le nombre de boucles

perché vogliamo che si ripeta all'infinito.

à 0, car nous voulons une boucle infinie.

Ora premo OK e Anteprima.

Je vais cliquer sur "OK", puis sur "Aperçu".

Mi aspetto di vedere l'effetto luccicante

Je dois voir apparaître notre effet de brillance

sur notre bouton.

Ora voglio aumentare la velocità

À présent, je veux accélérer

dell'animazione.

Posso farlo impostando qui la durata.

Pour cela, je peux définir la durée ici.

50 millisecondi.

50 millisecondes.

Ora è più veloce.

Voilà, elle est plus rapide.

Ora voglio provare a inserire alcune interazioni.

Maintenant, je vais essayer de vous présenter des interactions.

Dal riquadro Eventi,

Dans le panneau "Événements",

aggiungo qualche interazione.

je vais ajouter quelques interactions.

Innanzitutto voglio creare un effetto mouse-out.

Première interaction : je veux créer un effet lors de la sortie du curseur.

Quindi vado in mousedown.

Je clique sur "mousedown".

Qui invece di fermare semplicemente l'animazione,

Au lieu de simplement arrêter l'animation,

voglio riprodurre nuovamente l'effetto luccicante.

je veux réutiliser l'effet de brillance.

Posso farlo definendo una nuova animazione.

Je définis pour cela une nouvelle animation.

Non modifico l'offset

Je vais laisser le décalage tel quel,

e imposto le dimensioni del frame a 151.

et la taille de l'image va être de 100 x 51.

Il numero di frame è 17 e la durata

Je définis le nombre d'images sur 17, et la durée

è ancora 50 millisecondi.

sur 50 millisecondes.

Questa volta, tuttavia, riproduco l'animazione

Cette fois, je vais lire l'animation une seule fois

solo una volta e seleziono Riproduzione automatica e Inverti.

en activant "Lecture automatique" et "Sens inverse".

Inverti è la funzione

La fonctionnalité "Sens inverse"

che consente di riprodurre i frame

va en fait se charger de reproduire les images

dans l'ordre inverse.

Pertanto, se ora visualizzo l'anteprima,

Ainsi, si je prévisualise le rendu,

quando eseguo il mouseout vedrò che

je dois voir, à la sortie du curseur,

l'effetto luccicante viene riprodotto

l'effet de brillance

nella direzione opposta.

qui va dans le sens opposé.

Un'altra cosa che voglio fare

Autre chose maintenant,

è spostare questo nella sezione mouseout, creando uno stato specifico

je sélectionne "mouseout" pour créer une image statique spéciale

per il mousedown.

pour le clic de souris.

Se torno per un secondo al Foglio sprite,

Si l'on retourne un instant dans notre grille de sprites,

in fondo noto che ci sono due stati

on constate qu'il y a deux images statiques

che possono essere

à la fin de notre grille de sprites

utilizzati a questo scopo.

que l'on peut utiliser.

Quindi, sposto il precedente su mouseout

Je vais sélectionner "mouseout" pour l'animation précédente

in modo che non ci siano conflitti tra

pour éviter un conflit entre les deux animations,

le due animazioni, e ne creo uno nuovo per il mousedown,

et en créer une pour le clic de souris en sélectionnant

selezionando il componente Foglio sprite.

le composant "Sprite Sheet",

Questa volta eseguo l'operazione dalla sezione Foglio sprite.

et cette fois, je vais le faire à partir de la grille de sprites.

Definisci nuova animazione.

Je clique sur "Définir une nouvelle animation".

Questa volta utilizzo l'offset.

Ici, je vais me servir du décalage.

Voglio iniziare dal diciottesimo frame.

Je veux commencer à la 18e image.

Pertanto qui devo inserire

Je vais donc avoir besoin d'ajouter

un offset del valore di 700.

un décalage de 700.

Questa è la distanza dal lato sinistro.

C'est la distance avec le côté gauche.

E qui 51 pixel,

Et là, j'indique 51 pixels.

ossia la distanza dal lato superiore.

C'est la distance avec le côté supérieur.

Le dimensioni sono le stesse per il frame

La taille va être la même que celle de l'image,

e ne utilizzeremo solo uno.

et nous allons utiliser une seule image.

Non è necessario modificare la ripetizione continua

Nous pouvons laisser la boucle et l'autre paramètre

e neanche l'altro parametro.

Se visualizzo l'anteprima, noto che

En prévisualisant le résultat, je vois, lorsque je clique avec la souris,

quando eseguo il mousedown lo stato è diverso.

que l'image statique est différente.

Quando eseguo il mouseout, inoltre, ho uno stato luccicante

À la sortie du curseur, j'ai l'effet de brillance

in direzione opposta.

dans le sens opposé.

Voglio illustrare velocemente un altro esempio

Je veux juste vous montrer rapidement un autre exemple

che abbiamo realizzato.

Ho appena mostrato l'interazione del componente stesso

Je viens de vous montrer l'interaction du composant

con la normale modalità per animarlo

avec la méthode d'animation classique

tramite la sequenza temporale.

via la timeline.

Abbiamo aggiunto un'immagine nella sequenza temporale,

Nous ajoutons une image à la timeline,

l'abbiamo animata in modalità infinita per creare

et nous l'animons avec l'option "Infinie" pour créer

l'effetto di movimento del terreno e abbiamo aggiunto

l'effet de déplacement du sol. Nous insérons aussi une zone cliquable

un'area tocco per coinvolgere l'utente.

pour inciter l'utilisateur à interagir avec le contenu.

Questo è il risultato finale.

Et voilà le résultat final.

Si tratta di un esempio veloce di videogioco platform.

C'est un aperçu rapide d'un jeu de plate-forme.

Facendo clic sullo stage,

Si vous cliquez sur l'espace de création,

puoi notare che l'animazione cambia nello stage.

vous voyez un changement d'animation dans votre grille de sprites.

Crediamo di aver migliorato notevolmente

Nous croyons qu'il s'agit d'une véritable amélioration

il modo in cui creare un'animazione in GWD.

pour la création d'animations dans GWD.

Pertanto, speriamo di vedere ottimi esempi di utilizzo

Nous pensons donc voir de belles réalisations grâce à l'utilisation

del componente Foglio sprite.

du composant "Sprite Sheet".

Grazie per l'attenzione.

Merci de votre attention.

Similar videos:

Google Web Designer - Animation Updates
Google Web Designer
53.6K views 136 likes 9 dislikes 17 Nov 2015100% match

Google Web Designer - Text Overview
Google Web Designer
13.1K views 25 likes 9 dislikes 17 Nov 2015100% match

An Overview of the updated Google Web Designer
Google Web Designer
89.8K views 346 likes 14 dislikes 04 Aug 2014100% match

Google Web Designer - Streetview Component Overview
Google Web Designer
7.3K views 24 likes 0 dislikes 17 Nov 2015100% match

A Google Web Designer Thought Experiment
Google Web Designer
330.9K views 345 likes 20 dislikes 04 Aug 2014100% match

Responsive Layout: Overview - Google Web Designer
Google Web Designer
106.5K views 444 likes 8 dislikes 03 May 201675% match

Responsive Layout: Advanced Techniques - Google Web Designer
Google Web Designer
54.7K views 200 likes 4 dislikes 03 May 201675% match

UI Overview - Google Web Designer
Google Web Designer
4.5K views 35 likes 1 dislikes 20 Aug 201867% match

Ad Validator - Google Web Designer
Google Web Designer
4.8K views 16 likes 1 dislikes 07 Sep 201860% match

Hiding and Locking Timeline Layers - Google Web Designer
Google Web Designer
5K views 10 likes 6 dislikes 16 Nov 201660% match

Text Overview - Google Web Designer
Google Web Designer
7.1K views 18 likes 3 dislikes 03 Jan 201857% match

Events Overview - Google Web Designer
Google Web Designer
5.3K views 39 likes 2 dislikes 01 Jun 201857% match

Groups Overview - Google Web Designer
Google Web Designer
2.6K views 11 likes 2 dislikes 03 Jan 201847% match

Outliner Overview - Google Web Designer
Google Web Designer
6K views 47 likes 1 dislikes 31 Mar 202047% match

2D & 3D Drawing Overview - Google Web Designer
Google Web Designer
6.3K views 34 likes 5 dislikes 03 Jan 201847% match

Responsive Overview - Google Web Designer
Google Web Designer
7.2K views 126 likes 2 dislikes 31 Aug 202047% match

Parallax Overview - Google Web Designer
Google Web Designer
31.9K views 285 likes 6 dislikes 28 Nov 201846% match

Motion Paths Overview - Google Web Designer
Google Web Designer
37.8K views 228 likes 5 dislikes 21 Jun 201742% match

Timeline Advanced Mode Overview - Google Web Designer
Google Web Designer
12.2K views 93 likes 3 dislikes 18 Jun 201842% match

Groups with Events Overview - Google Web Designer
Google Web Designer
3.4K views 15 likes 2 dislikes 03 Jan 201842% match

Image Effect component - Google Web Designer
Google Web Designer
2.7K views 60 likes 0 dislikes 31 Mar 202042% match

Google Web Designer - AdWords Dynamic Overview
Google Web Designer
55K views 64 likes 21 dislikes 31 Aug 201542% match

Image Processing Overview - Google Web Designer
Google Web Designer
4.3K views 65 likes 0 dislikes 31 Aug 202042% match

Responsive Ad Workflow - Google Web Designer
Google Web Designer
21.8K views 208 likes 5 dislikes 24 Aug 201841% match

Text Fitting - Google Web Designer
Google Web Designer
8.2K views 33 likes 6 dislikes 28 Nov 201839% match

Responsive Layout: Animation - Google Web Designer
Google Web Designer
27.6K views 82 likes 10 dislikes 03 May 201639% match

Code View - Google Web Designer
Google Web Designer
7.2K views 55 likes 4 dislikes 14 Oct 201939% match

Google Web Designer - DoubleClick Studio Dynamic Overview
Google Web Designer
11.5K views 20 likes 8 dislikes 17 Nov 201538% match

Dynamic in Studio - Google Web Designer
Google Web Designer
10.5K views 54 likes 1 dislikes 31 Aug 201838% match

Advanced Preview Configuration - Google Web Designer
Google Web Designer
14.3K views 68 likes 3 dislikes 28 Nov 201835% match

Settings Privacy About Contact Donate