Voortgang week 5 - SublimeText, audio en JS

Dit is een voortgang op het artikel: artikel: http://sennacreativetechnologies.blogspot.nl/2016/09/voortgang-week-4-geluid-toevoegen-en.html 

Hierbij had ik een probleem met Sublime Text waardoor het lukte lukte op de codes te testen. Sommige codes werkten wel en ander niet. Ik moest dus eerst dit probleem oplossen voordat ik verder kon met het beantwoorden van de vraag.

Aanpak

Het probleem was voor mij onduidelijk. Eerst heb ik gecontroleerd of alle links klopten. Ik zette een 'alert' in mijn javascript waaruit bleek dat JS goed gekoppeld was. Daarna controleerde ik op spelling- en typefouten in mijn code, maar die kon ik niet vinden. Vervolgens heb ik gekeken of er misschien errors in de code zaten door 'inspect element' te gebruiken. 

Ik kreeg een tip van Carine om een code vanuit Codepen te exporteren. Hierdoor zouden alle links meteen kloppen. Dit hielp erg bij het ontdekken van de fout. 

Ik exporteerde een werkende code vanuit CodePen. Deze vergeleek ik met mijn niet werkende code's in Sublime Text. 

Toen de code weer werkte ben ik verder gegaan met onderzoeken hoe de audio in een timeline gezet kan worden. Hiervoor gebruikte ik verschillende voorbeelden, twee post met uitleg op twee verschillende forums. 

Leerervaring

Het stap voor stap doornemen van de code is erg leerzaam. Hierdoor ontdek je sneller fouten. 

Ook heb ik geleerd hoe je een 'alert' in je JS zet om te checken of de code goed gekoppeld is. 

Voor het toevoegen van audio aan je timeline moet je eerst een variabele aanmaken. 

var audio = $("#pling")[0];

Ik heb opgezocht wat het verschil is tussen

var audio = $("#pling")[0]; en var audio = document.getElementById(".pling")

Waar het op neer komt is dat $(“element”)[0] een iQuery code is en document.getElementById is een JavaScript code.

De jQuery code zorgt ervoor dat alle elementen in een object worden verpakt.

De JavaScript code zorgt ervoor dat de functies van een DOM-element in ophaalt met diens eigenschappen. 

Je zet de audio in een 'function PlaySound'. Deze functie kan worden opgeroepen door in je timeline de 'call' functie te gebruiken. Hiermee worden de gegevens van de functie opgehaald, in dit geval de audio. 

Resultaat

Ik kan nu in de timeline een audiofragment zetten. De audio speelt dan tijdens de animatie af. 

JavaScript

Vorige week heb ik mij verdiept in JavaScript. Deze week kon ik dit goed toepassen in mijn codes. Enkele voorbeelden hiervan zijn:

- het gebruik van variabelen in vrijwel alle codes

- Het gebruik van $(document) aan het begin van een code, zodat de pagina goed geladen wordt en elementen uit HTML kan halen: http://codepen.io/codesen/pen/LRLEYZ

- het gebruik van het 'this' element, waarmee verwezen kan worden naar div's in HTML en elementen daaruit opgehaald kunnen worden: http://codepen.io/codesen/pen/ORjBzr 

- Het gebruik van each(function() om elementen één voor één op te halen: http://codepen.io/codesen/pen/ORjBzr 

- het gebruik van functions, zoals in de code voor de audio gebruikt om de audio af te spelen

Bronnen

http://greensock.com/forums/topic/8094-how-to-addcontrol-musicmp3-to-timeline/

http://codepen.io/GreenSock/pen/3132b3582a21533e8e2d53318e9d522d

http://stackoverflow.com/questions/26843566/document-getelementbyidid-vs-id

http://www.w3schools.com/js/js_popup.asp 
http://www.quirksmode.org/js/this.html

http://stackoverflow.com/questions/9075943/what-is-this-element-in-a-jquery-function

http://stackoverflow.com/questions/37109870/fade-in-each-li-one-by-one

To do - week 5

To do

• GreenSock laten werken in Sublime Text (6 uur)
• Audio toevoegen aan animatie (4 uur)
• ScrollMagic laten werken en een nieuwe scroll techniek uitproberen (8 uur)
• Voortgang schrijven op blog
• Retrospective schrijven
• Laptop repareren 

Het laatste punt hoort natuurlijk niet perse bij dit project, maar heeft er wel een grote invloed op. Dit betekend namelijk dat, naast dat het tijd kost, ik mijn laptop waarschijnlijk enkele dagen kwijt ben waardoor ik afhankelijk ben van de computer op school. 

Retrospective week 4

Wat ging goed?

Ik ben erg ver gekomen met het animeren van SVG bestanden. Ik begrijp de ingewikkelde code vrij goed en kan dit gebruiken om met GreenSock een animatie te maken. 

Ook heb ik veel geleerd over JavaScript wat mij helpt bij het begrijpen van en werken met GreenSock. 

Bij verbeteringen van vorige week stond het bijhouden van de uren die ik besteed aan het project. Dit heb ik deze week erg goed gedaan. 

Wat kan beter?

Ik heb nu alle blogs van deze week (met uitzondering van de to do) in één dag geschreven. Ik zou dit beter over de week kunnen verspreiden over de week. Dit kan ik doen door wanneer ik één van de ontwikkelingsstappen heb afgerond, direct een blog te schrijven over de voortgang. 

Wat moet beter

1. Afgelopen week ik mijn laptop vastgelopen en werkte deze niet meer. Inmiddels heb werkt het grotendeels weer, maar ik ondervind nog steeds problemen als een hele trage laptop en programma's die niet werken zoals ze moeten werken. Ik ga dit oplossen door eerst een back-up te maken en vervolgens mijn laptop te laten onderzoeken/repareren. 

2. Het lukt mij niet om nieuwe GreenSock codes te laten werken met Sublime Text. Ik moet uitzoeken of dit ligt aan mijn laptop, Sublime Text, de code, Chrome of iets anders. Dit ga ik doen door een student of docent die hier meer over weet om hulp te vragen. 

Tijdsbesteding

Ik heb per onderdeel het aantal uren bijgehouden: 

In totaal heb ik deze week 22,5 uur besteed aan het project

Voortgang week 4 - geluid toevoegen en scrollMagic

Deze week heb ik mij ook verdiept in het toevoegen van geluid aan een animatie en de mogelijkheden van scroll-effecten.

Aanpak

Voor het toevoegen van geluid heb ik eerst uitgezocht hoe je audio in HTML kunt afspelen. Vorig jaar had ik dit al eens gedaan, maar ik wist niet meer precies hoe het moest. Dit zocht ik op en ik ging ook op zoek naar een website waarmee je mp3 en ogg bestanden kunt maken. 

Vervolgens wilde ik de audio toevoegen aan een timeline, zodat deze tegelijk met de animatie zou worden afgespeeld. Hier was echter niet veel uitleg over te vinden. Uiteindelijk vond ik wel wat nuttige informatie. Vervolgens heb ik geprobeerd om dit zelf toe te passen. Echter kreeg ik problemen met GreenSock en Sublime Text. De GreenSock animaties wilde niet meer afspelen. Dit moest ik dus eerst op gaan lossen. Hier ben ik lang mee bezig geweest, maar het is niet gelukt om het probleem op te lossen. Ik heb nog op het GreenSock forum om hulp gevraagd, maar daar heb ik voor alsnog geen reactie op gehad. Omdat je de audiobestanden niet in CodePen kunt gebruiken kan ik dus niet verder met deze ontwikkelstap. 

Voor de mogelijkheden van scroll-effecten op een webpagina ben ik eerst naar wat voorbeelden gaan zoeken. Vervolgens heb ik gegoogled en kwam ik uit op een website met een veelgebruikte plugin. Ik ging uitzoeken hoe dit werkte. Ook vond ik nog een andere website. Op die website stond de vernieuwde versie van de plugin. 

Vervolgens ben ik verschillende tutorials gaan volgen. Tot slot heb ik zelf een code geschreven. Helaas had ik deze week veel problemen met mijn laptop, wat ervoor zorgde dat ik niet goed kon werken aan de laatste ontwikkelingsstappen. 

Leerervaring

Ik kwam erachter dat GreenSock niet altijd werkt met Sublime Text. Deze week lukte het niet om een nieuwe code te laten werken. De codes werkten wel in Codepen. Ik heb wel geleerd hoe ik een <allert> kan toevoegen zodat ik weet dat mijn JS goed gekoppeld is aan mijn pagina. 

Het toevoegen van audio aan je HTML kan met de <audio> tag. Hierin zet je een mp3 bestand en een ogg bestand. Via deze site kun je die bestanden maken: http://media.io/ 

Je kunt de algemene atributes gebruiken voor audio. 

De plugin voor scoll-effecten heeft ScrollMagic. Dit is een jQuery plugin voor scroll animaties met GreenSock. 

Hoe werkt het:

1.      Je plaatst de <script> in je code. Zowel jQuery als de ScrollMagic code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script>

<script src="jquery.scrollmagic.min.js"></script>

<script src="jquery.scrollmagic.debug.js"></script>

2.      Voor elke scroll containter heb je een <controller>

var controller = new ScrollMagic.Controller();

3.      Een <scene> bepaald wat er wanneer gebeurd. Hierdoor wordt bepaald wanneer de controller moet reageren en hoe.

var scene = new ScrollMagic.Scene();
var scene = new ScrollMagic.Scene({
  offset: 100, // start scene after scrolling for 100px
  duration: 400 // pin the element for 400px of scrolling
})
var scene = new ScrollMagic.Scene({
  triggerElement: '#pinned-trigger1', // starting scene, when reaching this element
  duration: 400 // pin the element for a total of 400px
})
.setPin('#pinned-element1'); // the element we want to pin
 
// Add Scene to ScrollMagic Controller
controller.addScene(scene);
 

4.      In de <scene> kun je objecten plaatsen.

5.      Voeg de <scene> toe aan de controller.

Je kunt er ook voor kiezen om de controller toe te voegen aan een <scene>

6.      De volgorde waarin de elementen in de js staan, kan bepalen of de code werkt. 

Resultaat

Helaas is het dus niet gelukt om audio toe te voegen aan mijn animatie. Ik ga komende week dit probleem op lossen door te zorgen dat GreenSock gewoon werkt in Sublime Text. 

De scroll-animatie was gelukt, maar toen ik deze had opgeslagen werkte het niet meer. Ik heb nog wel de code: http://codepen.io/codesen/pen/RGpyGz

Bronnen

http://media.io/

http://greensock.com/forums/topic/15134-synchronising-audiovideo-with-animation-and-scrub-bars/?hl=audio#entry65457

http://codepen.io/iamjoshellis/pen/KVdQqm

http://www.balsamine.be/pub/skins/balsamine/js/superscrollorama/

http://www.balsamine.be/pub/skins/balsamine/js/superscrollorama/

http://scrollmagic.io/

https://github.com/janpaepke/ScrollMagic/wiki/Getting-Started-:-How-to-use-ScrollMagic

https://scotch.io/tutorials/building-interactive-scrolling-websites-with-scrollmagic-js

https://github.com/janpaepke/ScrollMagic/wiki/Getting-Started-:-How-to-use-ScrollMagic

https://ihatetomatoes.net/simple-scrollmagic-tutorial/

https://www.youtube.com/watch?v=QpedXxC0e5o&list=PLkEZWD8wbltnyDKWAgQfRDP_l0BC-zlU-

https://ihatetomatoes.net/scrollmagic-tutorial-fullscreen-slideshow/

http://alvarotrigo.com/fullPage/#secondPage

http://codepen.io/ncerminara/pen/JodjPP

http://codepen.io/simonswiss/pen/dobKJe

http://pageflip-books.com/#meetpageflip/page/10-11

Voortgang week 4 - JavaScript

Tijdens het werken met GreenSock ontdekte ik steeds meer dat het erg belangrijk is om een goede kennis van JavaScript te hebben. Je hebt dit namelijk nodig als je verder wilt komen met GreenSock. Nu is JavaScript op zichzelf al ingewikkeld om te leren. Ik heb geprobeerd de essentie van JavaScript te leren zodat ik dit kan gebruiken bij GreenSock.

Aanpak

Ik kijk ook nog even terug naar wat ik in eerdere weken al onderzocht heb voor JavaScript. Ik begon met op opzoeken van wat het is. Vervolgens ben ik gaan wat verschillende onderdelen van JS gaan opzoeken om te ontdekken wat het is en hoe het werkt. 

Waar ik vooral veel tijd in heb gestoken is het doornemen van de JS tutorial van W3 schools. Hierin werd heel veel uitgelegd. Het grootste deel heb ik alleen doorgelezen. Bij de elementen die mij belangrijk leken heb ik ook even een klein testje gemaakt of het mij zelf lukte. Deze testjes zijn ingebouwd in de site en dus heb ik hier geen documentatie van.

Leerervaring en resultaat

Ik kwam erachter dat JS heel erg uitgebreid is en ook dat het echt tot de basiskennis van iedere webontwikkelaar hoort. Verder heb ik veel geleerd over wat er mogelijk is met JS en hoe je bepaalde elementen kunt gebruiken. 

Ik weet nu iets beter wat ik aan het doen ben. Er valt nog veel meer te leren, en ik heb ook niet alles in één keer onthouden. Ik zal dus vaak nog even terugkijken naar de tutorial. 

Ik heb geen concreet resultaat van dit onderzoek. Wel is de kennis die ik nu heb toegepast in mijn verdere gebruik van GreenSock. 

Bronnen

http://www.w3schools.com/js/js_if_else.asp

http://www.comptechdoc.org/independent/web/cgi/javamanual/javadocument.html

https://nl.wikipedia.org/wiki/JavaScript

https://www.youtube.com/watch?v=K9ui9eZq1dg 

Voortgang week 4 - SVG animeren

Vorige week heb ik uitgezocht hoe ik een SVG-bestand kan maken en hoe ik deze kan gebruiken in HTML en GreenSock. Deze week ben ik verder gegaan door een animatie te maken. 

Aanpak

Ik heb eerst een tutorial gevolg, namelijk deze: https://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/ 

Na het volgen van deze tutorial heb ik zelf een eenvoudige animatie gemaakt:Link naar codepen

Bij het maken van die animatie heb ik vooral veel uitgeprobeerd. Ik heb codes aangepast en gekeken wat er veranderde. 

Het lukte al om de SVG te animeren, maar ik had het idee dat het ook een eenvoudigere en overzichtelijkere manier zou moeten kunnen. Daarom zocht ik nog een ander tutorial op: https://ihatetomatoes.net/how-to-animate-svg-with-greensock/

Ook ontdekte ik deze website: https://jakearchibald.github.io/svgomg/. Hiermee kan je de SVG code vereenvoudigen. 

Ten slotte maakte ik nog een SVG en animeerde ik deze met GreenSock: Link naar codepen

Leerervaring

Ik ga graag al direct aan de slag. Ik probeer dingen uit, in dit geval de code aanpassen en zien wat er veranderd. Ik heb bij het maken van deze SVG wel gemerkt dat het handiger kan zijn om eerst een tutorial te volgen. Hierdoor werk je efficiënter.

Wat ik geleerd heb over het animeren van SVG is dat het belangrijk is om je SVG code overzichtelijk te maken. Het beste kun je in Illustrator al de lagen in groepen plaatsen, deze groepen worden in de code ook bij elkaar gehouden. Ook is het mogelijk om zelf nog groepen te maken. Dit kan met het <g> element. Je geeft de <g> (groep) een id en hiermee kan je alles wat in deze groep staat als één afbeelding animeren.

Ik heb ook geleerd wat <transformorigin> is en hoe je dit kunt gebruiken. Dit is niet perse een functie om alleen SVG te animeren, het kan ook toegepast worden op andere onderdelen van animatie. Met de <transformorigin> kun je bepalen vanaf waar de transformatie begint. Bij de animatie van de dolfijn heb ik dit gebruikt om de dolfijn om een punt te laten roteren. 

 Resultaat

De eerste SVG animatie die ik maakte bestond uit het transformeren van grootte en kleur van (onderdelen van) de illustratie: http://codepen.io/codesen/pen/VKjjqa

Bij de tweede animatie die ik maakte ging het vooral om het overzichtelijk maken van de code. Verder transformeerde ik hier grootte, rotatie, transformorigin, positie en doorzichtigheid. Ik zorgde ervoor dat delen van de timeline tegelijkertijd werden afgespeeld door labels toe te voegen. http://codepen.io/codesen/pen/XjNWGP 

Bronnen

http://greensock.com/forums/topic/8200-animating-transform-origin/

https://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

https://jakearchibald.github.io/svgomg/ 

To Do - week 4

Afgelopen week heb ik ale To Do's van mijn lijstje kunnen afstrepen! Ik kan dus weer met een frisse start beginnen.

To Do

• JS tutorial afmaken (4 uur)
• Hoe voeg ik geluid toe aan een animatie?(3 uur)
• Een animatie maken met SVG en GreenSock (6 uur)
• Uitzoeken wat de mogelijkheden zijn met scrollen en een techniek hiervan uitproberen (8 uur)
• Voortgang op blog schrijven
• Retrospective schrijven

Retrospective - week 3

Wat ging goed?

Ik heb alle punten van mijn to-do lijstje af kunnen strepen. Hoewel ik nog veel tijd zal moeten steken in het toepassen van interactie in GreenSock, heb ik al wel een interactieve cirkel kunnen maken. 

Ik heb ontdekt wat SVG is en hoe je dit in GreenSock kunt gebruiken (klik voor voorbeeld). De volgende stap zal zijn om ook daadwerkelijk een SVG te animeren en interactief te maken. 

De logo-animatie met verschillende transformaties en toevoegingen als easing is ook gelukt. 

Het opzichte van vorige week heb ik veel meer (verschillende) bronnen gebruikt. Hierdoor heb ik meer kennis op gedaan en ben ik op een bredere manier dingen te weten gekomen. 

Wat kan er beter?

Op momenten dat iets lukt vind ik het erg leuk om te werken aan het project. Echter wanneer het tegenzit en ik niet snap wat ik verkeerd doe raak ik de gedemotiveerd waardoor mijn productiviteit daalt en het probleem minder snel opgelost is. Het zou beter zijn als ik ook juist wanneer iets tegenzit mijn motivatie behoud. 

Wat moet beter?

Ik moet beter gaan bijhouden hoeveel tijd ik besteed aan onderzoeken en uitproberen. Tot nu toe maak ik een schatting van de tijd die ik besteed heb aan vraag. Deze week heb ik denk ik tussen 18 en 24 uur besteed aan het project.

Mijn schatting is:

• De basis van interactie in GreenSock onder de knie krijgen: 8 uur
• Cirkel interactief maken: 8 uur
• Hoe combineer ik Adobe Illustrator en GSAP: 4 uur
• Een logo-animatie maken: 1 uur
• Bloggen: 2 uur

Voortgang week 3 - SVG

De tweede ontwikkelingsstap waar ik deze week aan wilde werken is combineren van SVG en GreenSock. Ik wist nog niet wat SVG was, dus daar ben ik mee begonnen. Ik heb ongeveer vier uur onderzoek gedaan.

Wat is SVG?

"Scalable Vector Graphics, afbeelding die niet zoals een bitmap elke pixel beschrijft, maar alle lijnen, bogen etc opslaat om telkens de afbeelding opnieuw te genereren als deze wordt geladen. " - http://www.pc-tutorials.nl/computerwoordenboek.php?lijst 

Waarom zou je SVG gebruiken?

Het verschil tussen SVG en, bijvoorbeeld, Jpeg is te vergelijken met het verschil tussen werken in Photoshop en werken in Illustrator. Met Photoshop werk je in pixels. Wanneer je inzoomt worden de pixels vergroot, waardoor je een korrelige afbeelding krijgt. Bij illustrator wordt er gewerkt met vectoren. De lijnen worden berekent waardoor je oneindig kunt inzoomen zonder dat je losse pixels gaat zien. Bij SVG werkt dat min of meer op dezelfde manier. Er wordt gekeken naar de lijnen waaruit de afbeelding is opgebouwd.

Voordelen van SVG ten opzichte van Jpeg:

Met SVG hoef je niet alle lagen die je apart wilt animeren ook apart in je HTML te zetten. Één code zorgt ervoor dat alle onderdelen bij elkaar staan, maar wel los van elkaar te animeren zijn. Sommige dingen zoals kleur en lijndikte zijn alleen aan te passen met SVG. 

Je kunt zo ver inzoomen als je wilt zonder verlies van kwaliteit.

Nadelen:

De code klopt niet meer wanneer je een klein deel wilt aanpassen. Wanneer je allemaal losse afbeeldingen zou gebruiken, kun je gewoon één afbeelding vervangen. Ook is de code lastiger te lezen dan losse afbeeldingen. In verschillende browsers kan het effect anders zijn. SVG is niet geschikt voor gecompliceerde afbeeldingen. 

Hoe werkt het?

Je maakt een vector-afbeelding in bijvoorbeeld Illustrator. Deze afbeelding exporteer je als SVG bestand. Hierdoor wordt er een code geschreven voor jou afbeelding. Deze code kun je in een HTML bestand zetten.

De lagen van je afbeeldingen worden verwerkt en krijgen in SVG een class. Je kunt deze classes aanpassen. Het is ook mogelijk om meerdere onderdelen in een groep te zetten en deze een class of ID te geven.

Met <translation> kun je de x en y aanpassen. Bijvoorbeeld: 

<circle cx="0" cy="0" r="100" transform="translate(100 300)" /><circle cx="0" cy="0" r="100" transform="translate(100 300)" />

Met scale(<sx> [<sy>]) kun je de grootte aanpassen. Wanneer alleen de X wordt aangepast blijven de verhoudingen gelijk. 




Met skewX(<skew-angle>) skewY(<skew-angle>) kun je de helling bepalen. 

Met rotate(<rotate-angle> [<cx> <cy>]) kun je roteren. 

Wanneer je met GreenSock werkt kun je in een TweenLite of TweenMax de eigenschappen aanpassen zoals je dat ook zou doen van een afbeelding of tekst. 

Mijn code

http://codepen.io/codesen/pen/BLzXmx 

Ik een SVG-bestand gemaakt met Illustrator en deze in HTML gezet. Hiervan heb ik van een paar classes met een onduidelijke naam de naam veranderd. Vervolgens heb ik de grootte van de SVG aangepast in CSS. Met GreenSock heb ik het rondje vergroot in een TweenLite. 

Bronnen

https://www.pronamic.nl/2006/08/wat-is-svg/ 

 https://nl.wikipedia.org/wiki/Scalable_Vector_Graphics 

https://helpx.adobe.com/illustrator/how-to/export-svg.html

http://greensock.com/svg-tips

https://sarasoueidan.com/blog/svg-coordinate-systems/

https://sarasoueidan.com/blog/svg-transformations/

https://ihatetomatoes.net/how-to-animate-svg-with-greensock/ 

http://www.encyclo.nl/begrip/SVG 

http://www.pc-tutorials.nl/computerwoordenboek.php 

Voortgang week 3 - logo animeren en cirkel interactief maken

Deze week heb ik gewerkt aan het maken van een geanimeerd logo en het creëren van een interactieve cirkel.

Logo animatie

In week 1 en 2 heb ik gekeken naar de technische mogelijkheden van GreenSock en heb ik verschillende technieken uitgeprobeerd. Om te kijken of ik deze kennis ook kan toepassen heb ik dit logo gemaakt: http://codepen.io/codesen/pen/rrZapO

Voor dit logo heb ik gewerkt met een timeline, waardoor de verschillende animaties na elkaar afspelen.

De vierkantjes heb ik gemaakt met CSS en daarvan heb ik, in de timeline, verschillende eigenschappen geanimeerd zoals opacitie, scale en color. 

Ten slotte heb ik tekst toegevoegd (in HTML) en deze tekst geanimeerd zodat hij in komt 'bouncen'. Dit heb ik gedaan door easing te gebruiken. 

Zelf ben ik tevreden met het logo. Niet dat het er heel mooi uit ziet, maar ik heb wel gemerkt dat ik de eerder opgedane kennis ook goed kan toepassen. 

Interactieve cirkel

Het maken van de interactieve cirkel kostte veel tijd. Ik ben er meerdere dagen mee bezig geweest en heb verschillende dingen geprobeerd. Het maken van de cirkel had ik snel gedaan in HTML en CSS en ook de kleur veranderen met een TweenLite kon ik al. Het zorgen voor interactie zorgde echter voor problemen. 

Waar ik als eerste tegenaan liep, was het feit dat er voor GreenSock geen speciale functies voor interactie bestaan. Na enig onderzoek kwam ik erachter dat je DrawSVG-plugin of de Drag-plugin kon gebruiken, maar hiervoor moet je een account hebben waarvoor je moet betalen. Ik ben dus op zoek gegaan naar andere mogelijkheden.

Na wat onderzoek ontdekte ik dat voor interactie je de normale code van JavaScript kan gebruiken. Helaas heb ik nog heel weinig ervaring met JavaScript. Daarom heb ik besloten om eerst via W3schools.com de basis van JavaScript door te nemen. Dit nam een paar uur in beslag. 

Het lukte echter nog steeds niet om mijn cirkel interactief te maken. Daarom besloot ik om op het GreenSock-forum mijn vraag te stellen. De vragen en antwoorden kun je hier vinden: http://greensock.com/forums/topic/15091-interactive-animation/ . 

Toen lukte het mij om een cirkel van kleur te laten veranderen wanneer je er op klikt, maar het terug veranderen wilde nog niet lukken. Het leek mij logisch om hiervoor een 'if/else-statement' te gebruiken, dus daar heb ik nog wat onderzoek naar gedaan. Uiteindelijk bleek er een veel simpelere manier te zijn: namelijk een reverse toevoegen in de code. 

http://codepen.io/codesen/pen/yaYoZZ 

Ik weet nu dus hoe ik een cirkel van kleur kan laten veranderen wanneer je erop klikt. Daarnaast heb ik ook geleerd voor het gebruiken van GreenSock een basiskennis van JavaScript belangrijk is. Ik heb meer geleerd over de JavaScript codering. Ik merkte ook dat het erg handig is om een code (via codepen) toe te voegen wanneer je een vraag stelt op het forum. Ook als je nog eigenlijk bijna niks hebt (in mijn geval alleen een cirkel). 

Mijn gemaakte codes

Logo animatie: http://codepen.io/codesen/pen/rrZapO 

Cirkel animatie: http://codepen.io/codesen/pen/yaYoZZ 

Een poging om te werken met Dragable: http://codepen.io/codesen/pen/bwVAZX

Bronnen

• https://nl.wikipedia.org/wiki/JavaScript (wat is JS)
• http://www.comptechdoc.org/independent/web/cgi/javamanual/javadocument.html  (interactie in JS)
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference (JS reference)
• https://nl.wikipedia.org/wiki/Document_Object_Model (wat is DOM)
• http://www.w3schools.com/js/js_if_else.asp (JS 'if else-statement')
• https://www.hackerrank.com/contests/7days-javascript/challenges/js-if-else-statements (JS 'if else-statement)
• https://www.youtube.com/watch?v=K9ui9eZq1dg (tutorial)  
• http://greensock.com/forums/topic/15091-interactive-animation/ (forum)

To Do - week 3

Afgelopen week heb ik niet alle To Do's van mijn lijstje kunnen afstrepen. Dit komt omdat er meer tussenstappen nodig waren. De laatste ontwikkelingsvraag schuif ik dus door naar deze week. Deze week wil ik mij vooral richten op het maken van interactieve content. Daarnaast wil ik oefenen met de vaardigheden die ik afgelopen week heb geleerd door een logo-animatie te maken.

To Do

• Twee ontwikkelstappen hebben afgerond (2x8 uur)
• De basis van interactie in GreenSock onder de knie krijgen (ca 8 uur)
• Cirkel interactief maken (ca 4 uur)
• Hoe combineer ik Adobe Illustrator en GSAP (ca 4 uur)
• Een logo-animatie maken
• Voortgang op blog posten
• Retrospective schrijven

Retrospective - week 2

Wat ging goed?

De eerste test met het maken van animatie gingen erg goed. Het toevoegen van tekst en afbeeldingen was een stuk makkelijker dan ik dacht, omdat ik hiervoor alleen maar HTML em CSS hoefde te gebruiken. Het lukt vrij snel om de eerste tweens te maken.

De achterstand van vorige week heb ik ingehaald. Deze week heb ik extra uur in het project gestoken en ervoor gezorgd dat alle blogs op tijd online kwamen. 

Wat kan beter?

Ik heb niet alle punten van mijn to-do lijst kunnen afstrepen. Dit heeft te maken met dat er meer stappen zaten tussen het leren van de basis van GreenSock en het daadwerkelijk animeren van een cirkel. Ik heb nog wat tussenstappen genomen waardoor het langer duurde. 

Bij deze tussenstappen horen bijvoorbeeld het toevoegen van buttons en het maken van timelines.

Wat moet beter?

Meer verschillende bronnen gebruiken. Ik heb nu bijna alle informatie van gehaald van twee websites. Om de basis onder de knie te krijgen is dit denk ik prima, maar ik wil graag wat meer mogelijkheden ontdekken en daarom meer bronnen gebruiken. 

Voortgang week 2

De basis van GreenSock

Door een aantal tutorials te volgen heb ik een goed beeld gekregen van GreenSock. Zo heb ik geleerd dat alle elementen op de pagina worden neergezet in HTML en CSS. GreenSock wordt alleen toegepast in de Javascript files. Het is dus erg makkelijk om afbeeldingen en tekst op de pagina te zetten.

Om te beginnen met GreenSock moet je de link van de download-pagina kopiëren.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 
Deze link plak je in je HTML bestand

Tweens
Met tweens kun je animaties maken in JavaScript. Je moet er eerst voor zorgen dat de afbeelding die je wilt animeren een position absolute heeft. Vervolgens kun je een TweenMax toevoegen.
Dit is een voorbeeld van een tween:

TweenMax.fromTo(".doc9", 1, {scale: 0}, {scale: 1})

Deze tween bestaat uit de volgende onderdelen:
- TweenMax: hiermee geef je aan dat het een tween is
- .fromTo: hiermee geef je aan dat je de animatie van een punt naar een ander punt wilt maken
- ".doc9": dit is de naam van de class van de afbeelding
- 1: dit is de hoe lang de animatie duurt in seconden
- {scale: 0}: dit is de begin grootte
- {scale:1}: dit is de eind grootte

in plaats van fromtTo is het ook mogelijk om from, to of stagger te gebruiken. Bij stagger zullen meerdere elementen met dezelfde class één voor één beginnen met de animatie.
In plaats van scale kan vrijwel elke eigenschap geanimeerd worden. Zoals x/y-positie, opacity of rotation.

Timelines
Met een timeline kun je meerdere tweens achter elkaar laten afspelen. In default begint de volgende tween in de lijst wanneer de vorige is afgelopen. Het is ook mogelijk om de tijd tussen de tweens aan te passen. Een timeline kan ook in zijn geheel sneller of langzamer worden gemaakt.

Easing
Je kunt verschillende manieren van easing toevoegen aan een tween. Bijvoorbeeld ease.Back, ease.Elastic of ease.bounce. Dit zorgt ervoor dat je animatie niet abrupt begint en/of eindigt. Een ease voeg je toe bij de eigenschappen die je wilt animeren in je tween.

.fromTo(".text", 4, {opacity: 0, x:10}, {opacity: 100, x:1300, ease:Bounce.easeOut})

Buttons
Met GreenSock kun je buttons toevoegen aan je animatie. Hiermee kun je de animatie op je pagina makkelijk pauzeren, opnieuw afspelen of omkeren. Hiervoor maak je in HTML en CSS een button, deze button geef je in JS een functie:

restartBtn.onclick = function() {
  tl.restart();
}

Codepen
De bovenstaande dingen heb ik gecombineerd in een code: http://codepen.io/codesen/pen/ozjrKG

Cirkel animeren 

Een handige tool om een cirkel te animeren is met drawSVG. Dit is een plugin die helaas alleen beschikbaar is voor de betaalde versie van GSAP. Op codepen.io is het mogelijk om deze plugin uit te testen. 

Hier zie je een voorbeeld van drawSVG: http://codepen.io/GreenSock/pen/qEdoRE

Zelf heb ik aan de hand van dat voorbeeld deze code geschreven: http://codepen.io/codesen/pen/EgVarR

De opgeslagen versie hiervan werkt helaas niet. Echter wanneer je deze code kopieert in het venster van de GreenSock animatie werkt het wel. Dit heeft te maken met dat de plugin nier werkt bij eigen gemaakte pens.

Bronnen

Deze week heb ik vooral veel tutorials gekeken van GreenSock zelf en van ihatetomatos (klik op de links)

Greensock Getting Started en Jump Start: voor de basis van GreenSock

Playpause: voor de buttons

ihatetomatoes.net GreenSock101: tutorials voor een uitgebreidere kennis van de basiselementen

Ease-visualizer: voor alle mogelijkheden van easing

Hoofdvraag en eerste ontwikkelingsstappen

Hoofdvraag

De toepassingen die ik bedacht had om te gaan maken met GreenSock zijn een geanimeerd logo en in digitaal interactief prentenboekje. De technieken die ik hiervoor moet leren staan beschreven in dit artikel (klik). 

De hoofdvraag die hierbij hoort is:

Hoe kan GreenSock gebruikt worden om illustraties en tekst op een website te animeren en interactief te maken, zodat ik een online prentenboekje kan maken?

Subvragen (ontwikkelingsstappen)

Om de hoofdvraag te beantwoorden heb ik alvast een aantal subvragen (ontwikkelingsstappen) opgesteld:

- Welke technieken kunnen er gebruikt worden met GreenSock? (ca. 8 uur)

- Wat is er nodig om te kunnen werken met GreenSock en wat zijn de eerste stappen om te ondernemen? (ca. 3 uur)

- Wat zijn de opties van animatie en hoe maak ik een animatie van een cirkel? (ca. 8 uur)

- Hoe kan ik tekst invoegen en animeren, zodat ik kan laten infaden bij bijvoorbeeld een animatie? (ca 3 uur)

- Hoe maak ik de cirkel interactief, zodat wanneer je erop klikt de cirkel draait of van kleur veranderd? (ca 8 uur)

De volgorde waarop de stappen hier staan is niet perse de volgorde waarin ik de stappen zal gaan onderzoeken. Niet alle ontwikkelingsstappen zullen acht uur tijd kosten, dus zal ik uiteindelijk meer dan 16 stappen hebben. 

To Do - Week 2

Voor deze week moest ik nog wat inhalen van afgelopen week.  Hierdoor ben ik later van start gegaan met de to do's van deze week. Komende dagen zal ik dus extra veel tijd gaan investeren in de onderstaande punten

To Do

• - Hoofdvraag, subvragen en motivatie voor technieken uitschrijven
• - Toepassingen van techniek bedenken en het nut hiervan uitleggen
• - Ontwikkelingsstappen globaal bedenken en de eerste twee concreet maken
• - Twee ontwikkelstappen afgerond hebben (2x 8 uur), opgedeeld in baby-steps
•     *Basistutorial van GreenSock volgen (ca 3 uur)
•     *Een cirkel animeren (ca 5 uur)
•     *Tekst toevoegen (ca 2 uur)
•     *Cirkel interactief maken (ca 6 uur) 
• - Retrospective schrijven week 2

Retrospective - week 1

Wat heb ik geleerd?

Ik heb geleerd hoe wat de mogelijkheden zijn van de verschillende technieken. Ook heb ik inzicht gekregen in hoe de programma's werken.

Wat ging goed?

Het opzoeken van de informatie is gelukt en naar mijn idee heb ik dit op een efficiënte manier gedaan.

Wat kan beter?

Een duidelijkere bronvermelding. Nog meer verschillende bronnen gebruiken.

Wat moet beter?

Alles op tijd af hebben. Afgelopen week heb ik niet de keuzetoelichting en retrospective kunnen doen, waardoor ik deze week met een achterstand begin. Deze week ga ik het gestructureerder aanpakken door een to do-lijst en een planning te maken.

Keuze technologie: GreenSock

Keuze

De technologie die ik heb gekozen is GreenSock.
Het is te combineren met HTML, waar ik al vaardigheden in heb.
Binnen het werkveld van KnT wil ik mij onder andere gaan richten op animatie. Het maken van een interactieve animatie zou mij onderscheiden van andere animators. GreenSock is bovendien erg snel, bijvoorbeeld in vergelijking met jQuery.

Toepassingen

Als toepassing van deze techniek ga ik beginnen met het maken van een geanimeerd logo. Een geanimeerd logo zou een goede toevoeging kunnen zijn voor een website. Als tweede stap ga ik een interactief online prentenboekje maken.

Wat ik hiervoor moet leren:
- het maken van vormen in code
- deze vormen laten bewegen
- een illustratie of afbeelding laten bewegen
- de animaties interactief maken
- tekst toevoegen
- tekst laten infaden
- geluid toevoegen
- naar een volgende pagina gaan (bijvoorbeeld door te scrollen)

Inspiratie en voorbeelden

In de vorige artikelen heb ik al een aantal voorbeelden laten zien per techniek. Ik heb nog meer inspiratie opgezocht. Hieronder kun je zien welke voorbeelden mij aanspreken

Green Sock (GSAP)

Geanimeerde logo: Ik vind dit een hele leuke animatie. Ook denk ik dat geanimeerde logo's op websites iets unieks kunnen toevoegen aan de pagina. 

Interactief drumstel: Je kunt het drumstel bespelen door op onderdelen te klikken. Je kunt ook een ritme creëren en het tempo aanpassen. 

Kwal annimatie: een mooie vloeiende animatie. Ik vind het heel inspirerend dat er met code zo'n leuke animatie kan worden gemaakt. 

D3 

Hierarchical Bar Chart: een interactieve tabel. Doordat de tabel interactief is wordt het een stuk interessanter om het te bekijken. 

Kalender D3: een kalender gemaakt in HTML. De kalender is gemaakt en aanpasbaar door code. 

Grafiek: Een grafiek waarin je kunt inzoomen. Ik denk dat je hiermee veel informatie op een leuke manier zou kunnen delen. 

VVVV

Logo animation: ook met VVVV is het mogelijk om een logo-animatie te maken.

Music controlled annimation: deze animatie past zich aan aan de muziek. De combinatie van beeld en geluid vind ik erg inspirerend.

Digitale Wallpaper:  een strakke projectie met twee projectoren op een muur. Het ziet er heel mooi en strak uit. 

Het opzoeken van inspiratie heeft mij enthousiast gemaakt om met deze technieken aan de slag te gaan. Ik ga zo snel mogelijk een techniek kiezen zodat ik mij daarin helemaal kan verdiepen. 

VVVV - multipurpose toolkit

Wanneer je op de site van VVVV kijkt zie je dat er heel veel mogelijkheden zijn. 

Wat is VVVV

VVVV is een 'multipurpose toolkit'. Het is een visuele programmeer omgeving. Je programmeert met vakjes (nodes) en lijnen (links). Met VVVV beschik je over een uitgebreide library. Het programma werkt ook met een realtime 'runtime omgeving'. Hierdoor wordt de code direct uitgevoerd zodat je het resultaat kan zien. 

Wat kun je ermee

Met VVVV kun je heel veel kanten op. Je kunt er 2d/3d animaties mee maken, multiscreen set-ups besturen of (interactieve) motion graphics maken. Andere opties zijn data visualisatie, prototyping,  sound design en werken met een Kinect.

Dit zijn een paar voorbeelden (klik op de link)
- CookTorranceMultiTexFresnel

- Circular Pong

- VVVV visuals to Silver Birch Solstice

Hoe werkt het

Je programmeert door middel van grafische objecten. Programma's worden gemaakt met Patches. Hierbinnen worden operaties en functies gerepresenteerd als nodes. Deze nodes worden met elkaar verbonden door links. Elke node kan verschillende inputs en outputs hebben. Alles wordt getekend met de muis op een canvas, je gebruikt dus geen code. 

D3 - Data-Driven Documents

Op het eerste gezicht leek D3 mij interessant om mee te kunnen werken. Vooral omdat je saaie data op een leuke manier kunt weergeven. Ik heb wat meer onderzoek gedaan naar wat je er mee kunt en hoe het werkt. 

Wat is D3

D3 staat voor Data-Driven Documents. Het is een java-script bibliotheek waarmee je digitale data kunt weergeven in bewegende of interactieve beelden. Deze kun je dan tonen op een webpagina. 

 Wat kun je ermee

Met D3 kun je data op een uitgebreide manier visualiseren en animeren. Het wordt vooral gebruikt om tabellen en grafieken te maken, maar het is ook mogelijk om bijvoorbeeld eenvoudige spellen te creëren. 

Ik heb een paar voorbeelden gezocht van het gebruik van D3

- Interactief diagram: wanneer je met je muis over het diagram gaat, wordt er extra informatie getoond. 

- Grafiek van data: deze grafiek is gemaakt met codes

- Interactieve kleuren: door met je muis over de kleuren te gaan, vliegen deze over het scherm en verdwijnen ze

Voor alle voorbeelden van D3.js kun je kijken in de Gallery.

Hoe werkt het

D3 maakt gebruik van SVG (Scalable Vector Graphics), HTML5 en CSS. Je kan hiermee werken in o.a. Sublime Text. Je voert data in en geeft een functie waaruit bijvoorbeeld een grafiek of diagram uit voort komt. Met JavaScript kun je zorgen dat de weergave interactief is. 

De data kan worden ingevoerd in een CSV bestand. Dit is een bestand waarin alle gegevens met een komma van elkaar gescheiden zijn. In de voorbeelden hierboven staan ook geschreven codes. 

De code ziet er allemaal erg ingewikkeld uit. Ik denk dat er goed door heen te komen is door in kleine stapjes te werken en zo steeds iets bij te leren.