Project Creative Technologies: oktober 2016

maandag 24 oktober 2016

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

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.