Animaties met Adobe Edge Animate

Gebruikers op internet verwachten spectaculaire ontwerpen te vinden en waarderen animaties die bijdragen aan deze ontwerpen, zolang ze geen tijd verspillen of de paginanavigatie negatief beïnvloeden.
Goed uitgevoerde animaties vestigen de aandacht op belangrijke details, kunnen laten zien hoe een applicatie werkt en helpen bij het navigeren als ze voldoen aan de vorige vereiste, waar veel van deze animaties zijn gemaakt met Flash en als ze de nodige kwaliteit hadden, werden ze goed ontvangen door de gebruiker.
Maar de tijden zijn veranderd en net zoals technologieën ook de manier hebben ontwikkeld om animaties te maken, daar komt het om de hoek kijken Adobe Edge Animate, een tool waarmee we animaties kunnen maken met HTML5, CSS3 en JavaScript zonder programmeerkennis.
Het bovenstaande klinkt misschien een beetje ingewikkeld, hoe is het mogelijk om een ​​tool te hebben waarmee ik animaties kan maken in die technologieën, zonder programmeerkennis? Het is niet zo ingewikkeld als het lijkt, maar eerst moeten we de tool kennen en dat we ermee moeten werken, hiervoor gaan we het uitvoeren en we zullen worden ontvangen door het startscherm dat er als volgt uit zou moeten zien:

VERGROTEN

Aan de rechterkant kunnen we enkele links zien om te leren hoe je enkele animaties kunt maken met de tool en aan de rechterkant links om een ​​bestand te openen of te maken. Laten we op de link klikken Maak nieuw en we zullen naar de werkruimte van de tool worden gebracht, voorlopig maken we ons daar geen zorgen over, maar we gaan ons project opslaan om de structuur die door de tool is gemaakt te kunnen onderzoeken, laten we eens kijken hoe onze structuur eruit ziet:

VERGROTEN

Als we bekend zijn met de ontwikkeling van webapplicaties, kunnen we enkele bestanden zien met bekende extensies, laten we eens kijken naar de functie van elk van deze binnen een project van Randanimatie:
.Een bestandDit bestand wordt door de tool gebruikt om ons project bij te houden.
.Html-bestandDit bestand beschrijft een webpagina die code gebruikt HTML, evenals de rest van de pagina's op internet.
.Js-bestandDeze bestanden bevatten code JavaScript voor ons project, dat een lege fase voor onze animatie definieert en andere noodzakelijke taken uitvoert in de projecten van Randanimatie.
Naast deze bestanden, in de map edge_includes we hebben twee bestanden JavaScript extra, die bibliotheken zijn voor ons project en waarnaar wordt verwezen in onze HTML en zijn functie is om de bewegingsactie als zodanig uit te voeren.
Als we eenmaal hebben gezien hoe ons project is gestructureerd, is het tijd om de gebieden van onze werkruimte te kennen, laten we eerst eens kijken hoe het eruit ziet:

VERGROTEN

Elk paneel wordt op naam geïdentificeerd, waarbij de elementen, Eigenschappen (bewerken) en de Tijdlijn Ze hebben tools en widgets om animaties te maken. Het grootste paneel staat bekend als het podium van Fase en daar bouwen we de animatie, laten we elk van de elementen in onze werkruimte eens nader bekijken:
FaseDit is waar de afbeeldingen en tekst van het project worden weergegeven en geanimeerd, het heeft limieten in zijn rangschikking en stelt ons in staat om elementen te verbergen of ze erin te plaatsen. Bovendien wanneer we ons project opslaan animeren zorgt voor het opslaan van de tekst en afbeeldingen als een HTML-pagina.
elementenDe elementen zijn objecten die we aan ons podium toevoegen en als resultaat verschijnen ze op onze uiteindelijke webpagina, waar deze elementen illustraties, foto's of zelfs tekst kunnen zijn.
Eigenschappen (bewerken)De elementen hebben eigenschappen die hun positie en zelfs uiterlijk op het podium kunnen beïnvloeden en we kunnen ze beheren met behulp van het paneel van Eigenschappen (bewerken).
TijdlijnHet stelt ons in staat om de elementen en hun eigenschappen in de loop van ons project bij te houden.
BibliotheekHier kunnen we de bronnen bijhouden die we in het project importeren en gemakkelijke toegang bieden tot de symbolen waarin we geloven animeren.
HulpmiddelenZe verschijnen bovenaan de werkruimte. We gebruiken ze om elementen op het podium te creëren, selecteren en wijzigen, er zijn er niet veel, maar het zou ons verbazen hoeveel we ermee kunnen doen.
Omdat we weten hoe onze tool wordt gedistribueerd en we bekend zijn met de concepten erin, kunnen we het wagen om onze eerste animatie te maken.
Om onze eerste animatie te maken, gaan we een beetje experimenteren met de overgangen in een bepaalde afbeelding, laten we de te volgen stappen bekijken:
1- We gaan een nieuw project maken met de optie nieuw bestand in het geval dat we hebben gesloten waarin we werken om de structuur en de elementen binnen de tool te begrijpen. Wanneer we een project starten, is onze fase leeg, we kunnen dit wijzigen in de eigenschappen van fase aan de linkerkant van het scherm, hiervoor drukken we op het witte vak en kiezen we een kleur van onze voorkeur of in het geval dat we een kleur in hexadecimale notatie hebben, kunnen we deze opnemen zoals we zien in de volgende afbeelding:

VERGROTEN

2- In het geval van deze tutorial hebben we een donkere kleur gekozen, zodat de afbeelding die we zullen opnemen in de fase hoogtepunt. Om nu een afbeelding op te nemen, gaan we naar: Archief en wij selecteren importeren, wordt de bestandsverkenner weergegeven en selecteren we de afbeelding om op te nemen:

VERGROTEN

Het is belangrijk dat we in de eigenschappen van ons scenario de overloop u . hebben overloop in verborgen sinds onze fase het presenteert een klein deel van al onze HTML, dus als we geen elementen buiten het werkgebied willen zien, is het belangrijk om deze waarde voor die eigenschap te hebben. We kunnen ook de naam van onze elementen wijzigen in de sectie van Eigenschappen (bewerken), op deze manier kunnen we ze beter identificeren in ons project.
3- Nu gaan we naar onze Tijdlijn en we controleren of de afspeelteller op staat 0:00 om te beginnen met onze animatie. Dit is waar het interessante deel binnenkomt en dit is waar we maximale aandacht aan moeten besteden, eerst moeten we verifiëren dat de keyframe-modus drukt evenals de automatische overgangsmodus, die we kunnen zien in de volgende afbeelding:

Om onze animaties te maken, moeten we de functionaliteit van Toggle Pin die is geactiveerd in de knop naast de automatische overgangsmodusBij het activeren van deze knop activeren we de frames of de overgang en deze moet vergezeld gaan van de gele teller, omdat we op deze manier een overgang van zoveel seconden kunnen maken totdat we onze pin naar hetzelfde niveau verplaatsen als de tweede teller.
4- Om onze . uit te voeren eerste overgang laten we op de knop drukken Toggle Pin en we gaan de tweede teller pakken en we gaan hem verplaatsen 200 seconden, hierna verplaatsen we onze afbeelding naar de onderkant van ons scherm, laten we eens kijken hoe het eruit ziet:

VERGROTEN

Zoals we kunnen zien in het blauw gemarkeerde gedeelte in de Tijdlijn vertegenwoordigt de overgang die we kunnen bekijken als we op de spatiebalk drukken. We zien dan dat het vrij eenvoudig is om een ​​transitie te maken, maar wat als we een tweede transitie of meer van deze willen maken? Hiervoor moeten we onze Pin richting de tweede balie, op deze manier geven we aan dat animeren dat we het proces van de eerste transitie afsluiten en een nieuwe kunnen starten.
5- We gaan een doen tweede overgang waar we deze keer de dekking van onze afbeelding gaan verminderen, hiervoor selecteren we onze afbeelding door de dekking te verlagen tot 46% en zoals we al zeiden, verplaatsen we de Pin op de tweede teller en herhaal de stappen van punt 4, laten we eens kijken:

VERGROTEN

6- Eindelijk gaan we een maken derde overgang om onze animatie te voltooien. Zoals we al weten, verplaatsen we onze tweede teller een paar seconden, slepen we onze afbeelding diagonaal naar links en sluiten we de overgang door de Pin over de tweede teller:

VERGROTEN

7- We slaan ons werk op en drukken op de spatiebalk om onze animatie te bekijken. Als we nog steeds niet tevreden zijn, kunnen we door de overgangen gaan die worden weergegeven door de blauwe kleur in onze Tijdlijn en we wijzigen de waarden of als we het type overgang willen.
Aangezien we tevreden zijn met ons werk, is het tijd om de laatste stap uit te voeren, en dat is om het weer te geven voor weergave in een browser, het doel waarvoor we werken.
Er zijn twee manieren om ons werk te bekijken, de eerste en de eenvoudigste kan vanuit de tool, hiervoor gaan we naar het tabblad Archief en wij selecteren Voorbeeld in browser, waarmee de animatie onmiddellijk wordt geopend in onze standaardwebbrowser:

De tweede is een beetje ingewikkelder als we geen ervaring hebben met webontwikkeling, namelijk om de bestanden te nemen en een integratie met onze webapplicatie te maken. Het is belangrijk om hier heel voorzichtig mee om te gaan en alle bestanden op te nemen die zijn gegenereerd door animeren anders werkt de animatie niet.
Hiermee hebben we deze tutorial afgerond, waar we konden weten hoe het werkt Adobe Edge Animate, de belangrijkste kenmerken ervan zien en onze eerste animatie maken in een kwestie van minuten zonder de noodzaak van een enkele regel code, genereren met HTML5 Y JavaScript voor implementatie in elke webapplicatie.