Project Creative Technologies: 2016

dinsdag 15 november 2016

Website

Ik heb mijn project geupload naar mijn website zodat iedereen deze kan bezoeken en uitproberen.

http://sennat.linkhosting.nl/

Video

De solution video heb ik online gezet via Behance. In deze video laat ik mijn demo zien en hoe deze werkt.

https://www.behance.net/gallery/45270879/Project-Creative-Technologies

zondag 6 november 2016

Leerervaring

Tijdens dit project ben ik veel obstakels en valkuilen tegen gekomen. Ik heb geleerd om hier oplossingen voor te vinden. Ook heb ik geleerd om mijn voortgang goed bij te houden.

Ik ben altijd redelijk goed geweest in planningen maken. Bij dit project bleek dat echter lastig te zijn dan gedacht. Achteraf denk ik dat dat voornamelijk komt doordat ik nog nooit met JavaScript en GreenSock had gewerkt. Dit zorgde ervoor dat ik niet goed kon inschatten hoe lang ik met iets bezig zou zijn. Ook was ik soms bijna klaar met een ontwikkelingsstap, maar had ik vervolgens een error waar ik lang mee bezig was. Het vinden een oplossing ging steeds sneller doordat mijn kennis groeide.

Het kan heel nuttig zijn om vragen te stellen op een forum. Zelf heb ik enkele keer om hulp gevraagd op het GreenSock forum. Hierbij leerde ik dat het belangrijk is om je probleem heel concreet aan te geven. Het heeft dus niet veel zin om een vraag te stellen als je niet weet wat het probleem is.

Het niet gestructureerd bijhouden van mijn voortgang was voor mij een valkuil. Zeker in het begin van het project. Ik vertelde wel alles wat ik gedaan had, maar vaak niet op een duidelijke manier en soms miste ik een onderdeel. Toen ik begon met het structureren van mijn blogs in <aanpak>, <leerervaring>, <resultaat> en <bronnen> ging het een stuk beter. Ook ben ik mijn tijdsbesteding gaan bijhouden. Dit gaf mij goed inzicht in hoeveel van mijn tijd ik in bepaalde stappen stak, waar ik dit zou kunnen verbeteren en wanneer ik genoeg had gedaan.

Toekomst

Ik ben tevreden met wat ik gemaakt en geleerd heb. Ik ben er op trots dat ik niet alleen iets heb kunnen maken aan de hand van tutorials, maar dat ik ook echt de code snap en zelf kan gebruiken. Nu ik de technische mogelijkheden van GreenSock en JavaScript ken, kan ik hier in de toekomst een stuk makkelijker mee gaan werken. Graag zou ik een eigen prentenboekje maken, met een eigen verhaal en zelfgemaakte illustraties. Ook is de kennis die ik heb goed te gebruiken voor het maken van websites, hiervoor wil ik graag meer leren van JavaScript.

vrijdag 4 november 2016

voortgang week 8 & 9 + demo

De laatste stap is het afmaken van de demo. Hierbij heb verschillende nieuwe dingen geleerd.

Aanpak
Ik wilde verschillende kleine aanpassingen doen aan mijn demo. Ik heb verschillende sites bezocht om te kijken hoe ik bepaalde dingen kon doen. Vervolgend heb ik dit toegepast in mijn eigen code.

Leerervaring

- Achtergrond toevoegen in CSS
Een makkelijke manier om elke pagina een ander achtergrond te geven is met de volgende code:

background-image: url(images/naam.jpg);

Hiervoor moet je je 'images' mapje wel in je CSS mapje zetten.
Je kunt de achtergrond de hele pagina laten vullen met de code:

background-size: 100% 100%;

- Een timeline oneindig herhalen
Je kunt met 'repeat: -1' een timeline oneindig laten herhalen.
Bijvoorbeeld: tlleafys.staggerTo(".leafy", 20, {y: '1200', repeat: -1}, 0.7) om de blaadjes altijd te laten vallen

- Elementen boven de pagina positioneren
De vallende blaadjes moeten boven de pagina verschijnen en dan naar benden vallen. Dit kan door in CSS '- top: -1200' toe te voegen.

- Timeline afspelen bij hover
Je bepaald eest elke element je de hover wilt. Vervolgens zet je daar een functie op. In de functie zet je play en repeat zodat de timeline gaat afspelen wanneer je met je muis over het element gaat.

Bronnen

http://www.w3schools.com/cssref/pr_pos_z-index.asp

http://greensock.com/forums/topic/3914-looping-a-tween/

http://stackoverflow.com/questions/16548338/full-screen-responsive-background-image

http://stackoverflow.com/questions/2006134/float-a-div-above-page-content

http://www.w3schools.com/jquery/event_mouseenter.asp

http://codepen.io/dharrah/pen/wzKGvW?editors=0010

https://davidwalsh.name/css-custom-cursor

https://css-tricks.com/almanac/properties/c/cursor/

http://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors

dinsdag 1 november 2016

To do - week 9

To do

- Demo afmaken

- Voortgang week 8 & 9 op blog plaatsen

- Retrospective schrijven

Voor de deadline aankomende zondag wil ik mijn laatste ontwikkelingsstap (de demo maken) afhebben. Ook zal ik de retrospective schrijven zodat ik het justification gedeelte kan laten beoordelen. De video zal ik waarschijnlijk in week 10 maken en inleveren.

Retrospective week 8

Deze week heb ik vooral heel veel tijd besteed aan de andere deadlines en tentamens voor deze week. Ik heb wel wat voortgang gemaakt met mijn demo, de aanpak en het resultaat hiervan zal ik later nog delen op mijn blog.

Wat ging goed

Ik heb mijn demo op een aantal punten goed kunnen verbeteren, zoals de audio en tekst. Ik heb een handige manier geleerd op achtergronden toe te voegen.

Wat kan beter

Ik had niet meer tijd om te besteden aan het project, dus echt veel kon ik niet verbeteren. Wat ik deze week gedaan heb ging wel goed.

Wat moet beter

De demo moet nog afgemaakt worden en de retrospective voor het hele project moet geschreven worden.

maandag 24 oktober 2016

To do - week 8

To do

Demo verder uitwerken en goed laten werken (5 uur)
Het verder uitwerken van de informatie die ik in de video wil zetten (6 uur)
De video maken (5 uur)
Verslag van project schrijven (5 uur)
Voortgang op blog delen
Retrospective op blog delen

Retrospective week 7

Wat ging goed

Op mijn to-do lijst stonden veel (relatief kleine) stappen. Ik heb alle stappen kunnen volbrengen, vaak in minder tijd dan ik had geschat. Ik merk dat door de kennis die ik heb ik sneller nieuwe stappen kan maken.

Het is gelukt om de animaties opnieuw te laten starten, audio toe te voegen aan de slides en elementen die onzichtbaarzijn ook echt weg zijn.

Daarnaast heb ik mijn voortgang elke dag dat ik aan het project werkte bijgehouden zodat ik aan het eind van de week een goed overzicht had van wat ik had gedaan en dit makkelijk op mijn blog kon zetten.

Wat kan beter

Ik heb minder tijd besteed aan het voorbereiden van de video (4,5 ipv 6), maar ik ben hier nog niet klaar mee. Ik moet hier nog veel tijd aan besteden zodat ik een duidelijke en aantrekkelijke video kan maken.

Wat moet beter

Ik heb geen 21 uur besteed aan het project. Dit ga ik inhalen door in week 9 ook nog aan het project te werken.

Tijdsbesteding

Voortgang week 7

Hoe zorg ik dat de interactieve animaties weer naar het begin gaan wanneer je de pagina opnieuw bezoekt?

Aanpak

Ik heb opnieuw de mogelijkheden van 'reverse' en 'restart' bekeken. Vervolgens heb ik hier (*klik*) een aantal voorbeelden uitgeprobeerd. Tenslotte heb ik het toegepast in mijn eigen code.

Leerervaring

Je kunt een reverse toevoegen aan een clickfunctie. Je kunt meerdere reverses in één functie zetten waardoor alle animaties teruggezet worden.

Resultaat

Ik heb ervoor gezorgd dat wanneer je op de homebutton klikt alle animaties teruggespeeld worden naar het begin. http://codepen.io/codesen/pen/VKQodZ?editors=1010

Verschillende toepassingen verzinnen voor de technieken

Nu ik beter de mogelijkheden van GreenSock ken kan ik ook beter bedenken wat voor toepassingen je zou kunnen maken met deze techniek.

Aanpak
Ik heb gebrainstormd en op een vel alle ideeën die ik bedacht opgeschreven. Voor elk idee heb ik nog meerdere mogelijkheden bedacht.

Hieronder staan de beste ideeën op een rijtje:

Geanimeerde logo's voor op een webpagina
Interactieve banner

Om aandacht te trekken
Als advertentie

Paralax-website
Interactieve animaties op het web

Advertenties
Spelletjes

Mogelijk in combinatie met Phaser

digitaal prentenboekje

Als website/link
Als toevoeging aan een papieren prentenboek, dmv QR-codes

Interactieve wenskaart

Om te mailen naar vrienden/familie/klanten ect
Als toevoegen van een fisieke wenskaart, dmv van QR-codes
Gepersonaliseerd per persoon/bedrijf

Datavisualisatie

Interactieve grafieken
Geanimeerde tabellen ect
Mogelijk in combinatie met d3.js

Muziek maken

Knoppen die geluid maken
Interactief instrument

Hoe kan ik ervoor zorgen dat onzichtbare elementen niet voor andere klikbare elementen zitten?

Aanpak

Mogelijkheden van 'display' opzoeken.

Een voorbeeld uitproberen http://www.w3schools.com/css/tryit.asp?filename=trycss_display_js

Dit toepassen op eigen code.

Leerervaring

Met ‘display: hidden’ is het element onzichtbaar maar zit het nog wel voor andere elementen

Met ‘display: none’ is het hele element weg. Om het element weer zichtbaar te maken als je erop klikt (of andersom) gebruik je ‘display: block’

Voor de cirkel: de onzichtbare tekst zit nu niet meer voor het rondje zodat je erop kunt klikken. Maar ik wilde ook dat als je op de tekst klikt het rondje weer terug veranderd. Daarom maakte ik ook een klikfunctie aan voor de tekst en gaf ik deze een ‘cursor: pointer’

Bij de blaadjes van de egel heb ik in de CSS de id’s een display: block gegeven. In de tween veranderd dit naar ‘display: ‘none’’. Het nadeel hiervan is dat je geen overgang hebt van zichtbaar naar onzichtbaar. Daarom heb ik eerst een variabele en timeline aangemaakt en daaraan een tween toegevoegd waarin de opacity 0 wordt en daarna de ‘display: none’.

Bedenken en uitwerken hoe ik de kennis die ik tijdens dit project het opgedaan kan delen via een video

Ik heb alle opgedane kennis van de afgelopen weken bij elkaar gezet. Ik heb gekeken naar welke punten belangrijk zijn om te benoemen in de video. Ook heb ik alvast nagedacht over hoe ik de video zo duidelijk mogelijk kan maken.

Alles wat ik tot nu toe heb opgeschreven is te vinden in dit document: https://we.tl/8A5VivBtsb

Bronnen:

http://www.w3schools.com/css/css_display_visibility.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_display_js

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/restart/

maandag 10 oktober 2016

To do - week 7

To do

Hoe zorg ik dat de interactieve animaties weer naar het begin gaan wanneer je de pagina opnieuw bezoekt? (4 uur)
Verschillende toepassingen verzinnen voor de technieken (4 uur)
Audio toevoegen aan slides (3 uur)
Hoe kan ik ervoor zorgen dat onzichtbare elementen niet voor andere klikbare elementen zitten? ( 2 uur)
Bedenken en uitwerken hoe ik de kennis die ik tijdens dit project het opgedaan kan delen via een video (6 uur)
Voortgang op blog delen
Retrospective op blog delen

Retrospective - week 6

Wat ging goed

Deze week heb ik met veel plezier aan het project gewerkt. Ik had veel motivatie omdat ik echt iets heb gemaakt waar ik blij mee ben. Door dingen samen te voegen heb ik wat leuks gemaakt zoals de bespeelbare piano en het de interactieve illustraties in de slides. Hierdoor bleef ik gemotiveerd en hierdoor wordt ik steeds beter in de technieken die ik al kende.
Het is gelukt om de slides met GSAP te maken en hierin verschillende technieken toe te passen. Hier was ik 9 uur mee bezig. Het toevoegen van audio koste minder tijd dan ik had verwacht, maar 1,5 uur ipv van 2 uur. De interactieve inhoudsopgave is ook gelukt in minder tijd dan ik had ingeschat.

Wat kon beter

Afgelopen week heb ik me erg veel gericht op details. Ik wilde graag dat de piano er goed uitzag en dat bijvoorbeeld de toetsen oplichtte wanneer je erop klikte. Ook wilde ik graag leuke interactieve of bewegende afbeeldingen in mijn slides. Het goede hiervan is dat ik hierdoor erg gemotiveerd was om aan het project te werken. Aan de andere kant had ik deze tijd ook kunnen steken in een nieuwe ontwikkelingsstap wat voor het behalen van het project waarschijnlijk verstandiger was geweest.

Wat moet beter

Ik heb er weer voor gezorgd dat ik alle blogartikelen op één dag moet schrijven. Ik kwam erachter dat dit erg veel tijd kost en concentratie kost. Omdat ik vaak de stappen pas aan het einde van de week af heb ik ga het komende week als volgt aanpakken: tijdens de week houd ik bij wat ik doe, de aanpak, resultaat ect. en aan het einde van de week maak ik hier een blogartikel van.
Ook maak ik mij zorgen over het volbrengen van de 16 ontwikkelingsstappen. Het is nu al week 7 van 8 en ik heb nog maar de helft van het aantal stappen dat ik zou moeten hebben afgerond. Ik weet ook niet hoe ik dit het beste kan aanpakken, omdat ik al wel wekelijks genoeg uur in het project steek.

Tijdsbesteding

Voortgang week 6 - interactieve inhoudsopgave

Mijn doel is om een digitaal interactief prentenboekje te maken. Bij een boekje hoort ook een inhoudsopgave, of een overzicht van de hoofdstukken/pagina's. Bovendien is het makkelijker om op deze manier snel verder door het boek te bladeren. Daarom heb ik deze week onderzocht hoe ik een interactieve inhoudsopgave kan maken en deze toegevoegd aan mijn slides.

Aanpak

Net als bij het maken van de GSAP slides heb ik voor deze ontwikkelingsstap een voorbeeld stap voor stap doorgenomen. Hierbij heb ik gekeken wat er gebeurd als ik iets in de code aanpas en heb ik op het internet gezocht naar dingen die ik nog niet kende.

Leerervaring

Op een gewone pagina zou je JumpScroll kunnen gebruiken. Hiermee spring je een aantal pixels naar boven of beneden op de pagina als je scrolt. Dit kon ik echter niet gebruiken bij mijn pagina omdat ik horizontale slides gebruik.

Na veel onderzoeken en uitproberen ben ik tot deze stappen gekomen:

Stappenplan knoppen maken:

1. HTML: maak een div en geef deze een class en een id, zet de tekst in de div

2. CSS: geef de class een kleurtje enzo, een pointer en marginproperties

3. JS:

a. document.getElementById('#id');

$(document).on("click", "#id", function(){

{GOpaginanummer(-1)}

})

Hiermee haal je eerst het element op uit HTML. Vervolgens zorg je ervoor dat wanneer je erop klikt er iets gebeurt. Wat is gebeurt bepaal je met het GO-functie.

b. Go functie:

function GO2(e){

var SD=isNaN(e)?e.wheelDelta||-e.detail:e;

if(SD<0){tl.play(‘nummer’)}else{tl.reverse()};

};

Je geeft het eerst een naam (GO1, GOp2 ect.)

De eerste regel kopieër je

In de tweede regel pas je ‘nummer’ aan aan het getal van hoeveel pagina’s je verder wilt. 0 = één pagina, 1 = twee pagina’s , -1= pagina terug ect.

Dit komt overeen met het voorblad = 1

Van voorblad naar konijn = 2 (pagina 3 voorblad niet meegerekent. )

wheelDelta: is een atribute value. Hiermee wordt gemeten hoe ver je scrollt (turn of the mousewheel). Als het van de gebruiker af roteert is het positief, als het naar de gebruiker toe roteert is het negatief.

c. Voor pagina knoppen:

function GOp1(e){

tl.play(0);

};

Cijfer vervanger door aantal pagina’s vooruit

Resultaat

Op de beginpagina staan knoppen naar alle andere pagina's. Door hierop te klikken blader je direct naar de betreffende pagina. De knoppen bovenin staat op elke pagina, hiermee kun je één pagina vooruit of achteruit bladeren of direct naar de beginpagina gaan.

Bekijk hier de code en het resultaat: http://codepen.io/codesen/pen/VKQodZ?editors=1010

Bronnen

https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel#wheelDelta_wheelDeltaX_and_wheelDeltaY_value

http://www.mediacollege.com/internet/javascript/page/scroll.html

https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel#wheelDelta_wheelDeltaX_and_wheelDeltaY_value

Voortgang week 6 - Slides technieken

Vorige week had ik al onderzoek gedaan naar hoe ScrollMagic werkt, hoe ik daarmee animaties kan triggeren en elementen op een pagina kan pinnen. Deze week heb ik ontdekt hoe ik (horizontale) slides kan maken, zowel met als zonder ScrollMagic.

Aanpak

Met de ScrollMagic slides was ik al aardig ver gekomen vorige week. Deze week ben ik hiermee verder gaan door verschillende dingen uit te proberen.

Voor de slides met GSAP heb ik gewerkt aan de hand van dit voorbeeld: http://codepen.io/MAW/pen/XmozON

Ik heb de hele code stap voor stap doorgenomen. Alle stukjes die ik nog niet kende of niet begreep heb ik opgezocht op internet. Ook heb ik gekeken naar wat er allemaal weggelaten kon worden zonder dat dit de werking van de code aantastte (bijvoorbeeld het logo).

Vervolgens heb ik zelf een code geschreven waarbij de pagina's slides wanneer je scrollt. Ik heb op elke pagina een GSAP techniek neergezet. Sommige dingen hiervan had ik al eens eerder gemaakt en sommige waren nieuw en heb ik dus eerst opgezocht op internet. Ik heb nergens code gekopieerd, maar soms wel overgetypt.

Leerervaring

Veel proberen werkt. Soms lukt iets de eerste keer niet, maar als je het dan nog een keer probeert werkt het wel. Door zelf de code te typen (in plaats van de kopiëren) ben je veel bewuster bezig met de code. Het duurt weliswaar een stuk langer, maar je leert ook beter waar je hoofdletters moet gebruiken, waar komma's moeten en meer kleine details die je snel over het hoofd ziet wanneer je een code kopieert.

Wanneer je een code stap voor stap doorneemt wordt deze begrijpelijker en makkelijk zelf te gebruiken. Ik heb veel moeten opzoeken, maar daar heb ik ook veel van geleerd:

<span> element zorgt ervoor dat je dingen op een pagina kunt groeperen.

< fa fa-[…]> wordt gebruikt voor symbolen op pagina's

Z-index: bepaald welke object vooraan staan. Een element met een grotere ‘stack order’ komt altijd voor een element met een lagere ‘stack order’. De z-index werkt alleen wanneer er ook een position is toegekend aan een element.

document.querySelectorAll: haalt een lijst op van elementen binnen het document die overeenkomen met de gespecificeerde selectoren. Van de lijst wordt een ‘nodeList object’ gemaakt. Deze ‘nodes’ kunnen worden aangepast door middel van indexcijfers. [1] staat voor het eerste object met deze selector [2] voor het tweede element, ect.

for (var i=0;i<): hierbij word een loop gebruikt en hierin de variabelen i gebruikt.

createElement(): Hiermee wordt een 'element node' gemaakt

document.addEventListener(): Deze methode hecht een 'event handler' aan het document.

nodes: Elk HTML-element is een 'node'.

NaN= Not-A-Number, de isNaN() functie bepaalt of een waarde NaN is of niet

Andere dingen die ik geleerd heb bij het maken van deze code:

Als je de viewbox van een SVG aanpast kan de grootte van de afbeelding veranderen. De eerste twee getallen bepalen de positie binnen het scherm, de laatste twee getallen bepalen de breedte en hoogte. Hoe groter de getallen, hoe kleiner de afbeelding.

Als je meerdere classes wilt toevoegen aan een element kun je dat zo doen: class= “name1 name2”

Om je muisaanwijzer in een handje te laten veranderen wanneer je over een klikbaar object gaat moet je dit in je CSS code aanpassen. Je geeft het object dan een cursor: pointer;

Wanneer je text in illustrator in een afbeelding zet en dit als SVG exporteert kun je de tekst nog aanpassen in de code.

Met repeat() en yoyo() kun je een tween laten herhalen.

Ik geef een overzichtje van de technieken die ik als content heb toegevoegd in de slides:

Pagina 1: cirkel veranderd van kleur

- Click function

- Reverse

- Timeline

Pagina 2: staartje beweeg:

- SVG optimaliseren en organiseren

- Timeline

- Repeat en yoyo

Pagina 3: hartjes wanneer je klikt

- Click function

- Stagger

- Svg

- Meerdere classes

Pagina 4: Bunny met tekstwolkje:

- Tekst in SVG

- Tween

- TransformOrigin

Pagina 5: egel met blaadjes:

- Blaadjes verdwijnen wanneer je erop klikt

- Binnen één SVG

Maar wat heb je nodig om de slides met GSAP te maken:

Je maakt een timeline met hierin de beweging van de pagina's. Deze timeline zet je in een loop. De loop weet of je naar voren of naar achteren scrollt en op basis daarvan wordt de slide verschoven. Je moet ook een pauze invoegen zodat de timeline stopt wanneer je op de volgende pagina bent.

Je hebt een functie nodig die weet of je naar voren of naar achteren scrollt. Tenslotte heb je een Eventlistener nodig om het scrollen mogelijk te maken.

Resultaat

Het resultaat is dat wanneer je scrollt er een pagina van de zijkant wordt 'omgeslagen'. Op elke pagina staat een SVG afbeelding waarvan één alleen beweegt en de andere interactief zijn.

Bekijk de code en het resultaat hier: http://codepen.io/codesen/pen/bwaRkR?editors=0010

Slides met ScrollMagic: http://codepen.io/codesen/pen/WGzaOa

Bronnen

http://www.w3schools.com/tags/tag_span.asp

http://www.w3schools.com/cssref/pr_pos_z-index.asp

http://www.w3schools.com/jsref/met_document_queryselectorall.asp

https://developer.mozilla.org/nl/docs/Web/API/Document/querySelectorAll

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

http://www.w3schools.com/jsref/met_document_createelement.asp

http://www.w3schools.com/jsref/met_document_addeventlistener.asp

http://stackoverflow.com/questions/24974621/what-is-a-node-in-javascript

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN

https://greensock.com/tweenmax

https://greensock.com/timelinemax

http://www.w3schools.com/cssref/pr_class_cursor.asp

https://www.vecteezy.com/

Voortgang week 6 - Audio bij interactieve animatie

Vorige week schreef ik al in een bericht hoe ik audio toevoegde aan een timeline. Deze week heb ik een interactieve animatie gemaakt en hier audio aan toegevoegd.

Aanpak

Ik heb gewerkt aan de hand van dit voorbeeld: http://codepen.io/iamjoshellis/pen/KVdQqm

Eerst heb ik een SVG-code gemaakt. Dit heb ik gedaan door een afbeelding te dowloaden en die te organiseren. Hiervoor heb ik alle elementen in de juiste laag bij elkaar gezet en deze lagen namen gegeven. In SublimeText heb ik de code overzichtlijk neergezet door alle groepen los van elkaar te zetten. Vervolgens heb ik geluiden van de piano opgezocht en gedownload. Deze mp3 bestanden heb ik omgezet naar ogg bestanden. Vervolgens heb ik alles samengevoegd in Sublime Text.

Leerervaring

Voor elke toets heb je de volgende onderdelen nodig:

Een timelinevar: F1 = new TimelineLite();
Een variabele: var F4 = $("#F4")[0];
In de timeline een .call en .reverse: F1.call(playF4 .reverse();
Een function: function playF4() {F4.play();
Een click-function: $(document).on("click", "#F1key", function(){ F1.play();F1.restart();})

De variabele koppelt de audio vanuit HTML aan JS. In de timeline wordt de audio functie met opgehaald. Door een reverse toe te voegen kun je de toets meerdere keren aanslaan. In de function wordt de audio afgespeeld. Door de click-function wordt de juiste timeline afgespeeld wanneer je op een toets klikt.

Ik heb in de timeline ook nog een stroke-color toegevoegd, zodat wanneer je op een toets klikt deze geel-omrand wordt.

Resultaat

Het resultaat is een piano die je kunt bespelen. De toets krijgt een gele rand wanneer je er op klikt en de bijbehorende toon wordt afgespeeld.

Dit is de JavaScript code van één van de toetsen. Voor elke toets zijn dezelfde elementen nodig.

Bronnen

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

https://www.vecteezy.com/

https://www.freesound.org/people/Tesabob2001/packs/12995/

maandag 3 oktober 2016

To do - week 6

To Do

Audio toevoegen aan interactieve animatie (ca 2 uur)
Slides techniek van ScrollMagic kunnen toepassen (3 uur)
Interactieve animaties in de slides zetten met op elke pagina verschillende technieken (8 uur)
Interactieve inhoudsopgave maken (6 uur)
Voortgang schrijven op blog
Retrospective schrijven op blog

zondag 2 oktober 2016

Retrospective week 5

Wat ging goed?

Het laten werken van GreenSock in Sublime Text ging veel sneller dan ik had verwacht. Ook snap ik nu de fouten die ik maakte en kan ik voorkomen ze weer te maken.

Nadat dit gelukt was ging het toevoegen van audio ook een stuk sneller. Hierdoor hield ik meer tijd over voor ScrollMagic en kon ik daarvoor meerdere technieken uitproberen.

Wat kan beter?

Ik heb één voortgangsartikel al eerder deze week geschreven, maar de rest van de artikelen heb ik pas vandaag geschreven. Ik zou dit nog beter kunnen verdelen door bijvoorbeeld eerst een van de subvragen af te ronden voordat ik verder ga met een andere subvraag.

Wat moet beter?

Bij het schrijven van de codes liep ik vaak vast. Meestal kwam dit doordat ik ergens tegenaan liep wat ik nog niet wist. Soms was het ook zo dat ik een foutje had gemaakt in de code, bijvoorbeeld een typfoutje of een verkeerde link, waardoor ik erg lang bezig was met het laten werken van de code.

Ik kan dit verbeteren door beter op te letten wanneer ik een code maak en goed te checken of ik geen foutjes maak.

Tijdsbesteding

Voortgang week 5 - ScrollMagic

Het probleem van GreenSock codes in ScrollMagic was sneller opgelost dan ik had ingeschat. Hierdoor had ik veel tijd om mij te verdiepen in ScrollMagic.
Vorige week had ik al de basiselementen van ScrollMagic geleerd, het was alleen nog niet gelukt om een eigen code te laten werken. Deze week heb ik dus de ongedane kennis van vorige week toegepast en nieuwe mogelijkheden en technieken van ScrollMagic ontderzocht, getest en zelf toegepast.

Aanpak

De code van vorige week werkte niet, dus heb ik op het GreenSock-forum om hulp gevraagd (link naar topic). Ik wist nu hoe ik scroll-animaties kon maken met CSS of met GreenSock. Vervolgens ben ik zelf verschillende technieken gaan uitproberen.

Ik heb uitgezocht hoe ik een timeline kan triggeren. Dit heb ik gedaan door verschillende voorbeelden te bekijken, na te maken en aan te passen. Vervolgens heb ik zelf een code geschreven waarin ik dit heb toegepast.
Ik heb ook verschillende tutorials gevolgd om nog wat meer basiskennis over ScrollMagic te leren, zodat ik niet allen de code kan gebruiken maar ook een goed idee heb van wat ik aan het doen ben.
Door verschillende codes te schrijven ontdekte ik wat wel werkt en wat niet.
Ik heb ook onderzocht en uitgeprobeerd hoe ik een element kan pinnen. Dit heb ik geleerd door een tutorial te volgen en aan de hand daarvan een code te schrijven. Vervolgens wilde ik ook dat ik een element gepint werd zodra deze aan de bovenkant van de pagina kwam. Hiervoor heb ik voorbeelden gebruikt en zelf verschillende dingen uitgeprobeerd.

Leerervaring

Je kunt soms heel lang met een probleem zitten, maar door een expert te vragen kan het heel snel worden opgelost. Zo wist ik niet dat ik een link naar een animatie plugin moest gebruiken om de code te laten werken. Dit zorgde ervoor dat ik ging zoeken naar fouten in de code. Door mijn vraag op het forum te posten kreeg ik snel antwoord op mijn vraag en heb ik veel tijd bespaard.

Voor mij is het fijner om de scoll-animaties te maken met GreenSock in plaats van in CSS. Dit komt doordat ik hiervoor nog niet met CSS-animaties had gewerkt en de GreenSock tweens en timelines overzichtelijker zijn.

Hoe werkt dit:

Het werkt bijna hetzelfde als de CSS animatie. De enige aanpassingen zijn:

- Je gebruikt GEEN .setClassToggle

- In plaats daarvan gebruik je: .setTween

- Hierachter zet je wat je normaal ook in een tween zet

OF je verwijst naar een variabele waarin je een tween hebt genoemd

Elementen pinnen:
- zet de elementen in HTML in een <div id="pinElement">
- trigger de div in je ScrollMagic.Scene
- zet in je ScrollMagic.Scene een .setPin("pinElement")

Opties voor Controller en Scene
Naast duration en offset zijn er ook andere dingen die je kunt aanpassen:
- triggerHook: dit is een getal tussen de 0 en 1 waarmee bepaald wordt waar op de pagina je element wordt getrigger. In plaats van een getal kun je ook kiezen voor 'onLeave'(top van pagina), 'onCenter, en onEnter (onderkant van pagina)
- je kunt de triggerIdicators een naam, kleur ect meegeven. bv: name: 'slide scene',
- het toevoegen van een duration zorgt ervoor dat je wanneer je scrollt invloed hebt op de animatie. Je kunt dit langer en korter maken waardoor de animatie sneller of langzamer zal gaan.

Resultaat

Ik heb veel verschillende codes geschreven, waarvan sommige niet 100% werken en andere wel.

Wat is gelukt met ScrollMagic:

- het laten werken van de CSS-animatie: http://codepen.io/codesen/pen/RGpyGz

- het triggeren van een tween: http://codepen.io/codesen/pen/LRLEYZ

- het triggeren van een timeline: http://codepen.io/codesen/pen/XjZNyY

- het pinnen van elementen aan de top van de pagina: http://codepen.io/codesen/pen/pEAqgr

Extra codes:

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

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

work in progress: http://codepen.io/codesen/pen/bwogPj

Bronnen

https://www.youtube.com/watch?v=zz38nrSJt7g&list=PLkEZWD8wbltn73OPIox5SA363LPqbqEWs&index=8

https://www.youtube.com/watch?v=BYXPbxxPIXM&index=2&list=PLkEZWD8wbltn73OPIox5SA363LPqbqEWs

http://scrollmagic.io/examples/advanced/section_slides_manual.html

http://scrollmagic.io/examples/advanced/section_wipes_manual.html

http://scrollmagic.io/examples/basic/simple_tweening.html

http://greensock.com/forums/topic/15163-trigger-tweens-with-scrollmagic/#entry65626

http://codepen.io/ihatetomatoes/pen/dc3075ce6ec6fc040138869804557cc3

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

vrijdag 30 september 2016

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

maandag 26 september 2016

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>

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