Ontwerp en publicatie van virtual reality

  1. Adobe Animate-handboek
  2. Inleiding tot Animate
    1. Nieuw in Animate
    2. Visuele verklarende woordenlijst
    3. Systeemvereisten voor Animate
    4. Animate-sneltoetsen
    5. Werken met meerdere bestandstypen in Animate
  3. Animatie
    1. Grondbeginselen voor animaties in Animate
    2. Frames en hoofdframes gebruiken in Animate
    3. Frame-voor-frame-animaties in Animate
    4. Werken met klassieke tween-animaties in Animate
    5. De tool Penseel
    6. Hulplijnen voor bewegingen
    7. Bewegings-tween en ActionScript 3.0
    8. Informatie over animaties met bewegings-tween
    9. Animaties met bewegings-tweens
    10. Een animatie met bewegings-tween maken
    11. Eigenschapshoofdframes gebruiken
    12. Een positie animeren met een tween
    13. Bewegings-tweens bewerken in de Bewegingseditor
    14. Het bewegingspad van een tween-animatie bewerken
    15. Bewegings-tweens manipuleren
    16. Aangepaste versnellingen toevoegen
    17. Voorinstellingen voor beweging maken en toepassen
    18. Animatietween-reeksen instellen
    19. Werken met als XML-bestanden opgeslagen bewegings-tweens
    20. Bewegings-tweens en klassieke tweens
    21. Vormen tweenen
    22. De tool Bone-animatie gebruiken in Animate
    23. Werken met structuren voor personages in Animate
    24. Maskeerlagen gebruiken in Adobe Animate
    25. Werken met scènes in Animate
  4. Interactiviteit
    1. Knoppen maken met Animate
    2. Animate-projecten converteren naar andere documentindelingen
    3. HTML5 Canvas-documenten maken en publiceren in Animate
    4. Interactiviteit toevoegen met codefragmenten in Animate
    5. Aangepaste HTML5-componenten maken
    6. Componenten in HTML5 Canvas gebruiken
    7. Maken van aangepaste componenten: Voorbeelden
    8. Codefragmenten voor aangepaste componenten
    9. Tips en trucs: Adverteren met Animate
    10. Ontwerp en publicatie van virtual reality
  5. Werkruimte en workflow
    1. Penselen maken en beheren
    2. Google-lettertypen gebruiken in HTML5 Canvas-documenten
    3. Creative Cloud Libraries en Adobe Animate gebruiken
    4. Het werkgebied en het deelvenster Tools voor Animate gebruiken
    5. Workflow en werkruimte in Animate
    6. Weblettertypen gebruiken in HTML5 Canvas-documenten
    7. Tijdlijnen en ActionScript
    8. Werken met meerdere tijdlijnen
    9. Voorkeuren instellen
    10. Deelvensters voor ontwerp in Animate gebruiken
    11. Tijdlijnlagen maken met Animate
    12. Animaties exporteren voor mobiele apps en game-engines
    13. Objecten verplaatsen en kopiëren
    14. Sjablonen
    15. Zoeken en vervangen in Animate
    16. Ongedaan maken, Opnieuw en het deelvenster Historie
    17. Sneltoetsen
    18. De tijdlijn gebruiken in Animate
    19. HTML-extensies maken
    20. Optimalisatieopties voor afbeeldingen en geanimeerde GIF-bestanden
    21. Exportinstellingen voor afbeeldingen en GIF-bestanden
    22. Deelvenster Elementen in Animate
  6. Multimedia en video
    1. Grafische objecten transformeren en combineren in Animate
    2. Symboolinstanties maken in Animate en ermee werken
    3. Afbeeldingen overtrekken
    4. Geluid gebruiken in Adobe Animate
    5. SVG-bestanden exporteren
    6. Videobestanden maken voor gebruik in Animate
    7. Een video toevoegen in Animate
    8. Werken met videoactiepunten
    9. Objecten tekenen en maken met Animate
    10. Lijnen en vormen omvormen
    11. Streken, verlopen en vullingen met Animate CC
    12. Werken met Adobe Premiere Pro en After Effects
    13. Deelvensters voor kleuren in Animate CC
    14. Flash CS6-bestanden openen met Animate
    15. Werken met klassieke tekst in Animate
    16. Illustraties opnemen in Animate
    17. Geïmporteerde bitmaps in Animate
    18. 3D-afbeeldingen
    19. Werken met symbolen in Animate
    20. Lijnen en vormen tekenen met Adobe Animate
    21. Werken met bibliotheken in Animate
    22. Geluiden exporteren
    23. Objecten selecteren in Animate CC
    24. Werken met Illustrator AI-bestanden in Animate
    25. Patronen toepassen met het sproeipenseel
    26. Overvloeimodi toepassen
    27. Objecten rangschikken
    28. Taken automatiseren met het menu Opdrachten
    29. Meertalige tekst
    30. De camera gebruiken in Animate
    31. Animate gebruiken met Adobe Scout
    32. Werken met Fireworks-bestanden
    33. Grafische filters
    34. Geluid en ActionScript
    35. Tekenvoorkeuren
    36. Tekenen met de pen
  7. Platforms
    1. Animate-projecten converteren naar andere documentindelingen
    2. Ondersteuning voor aangepaste platforms
    3. HTML5 Canvas-documenten maken en publiceren in Animate
    4. Een WebGL-document maken en publiceren
    5. Toepassingen verpakken voor AIR voor iOS
    6. AIR voor Android-toepassingen publiceren
    7. Publiceren voor Adobe AIR voor desktop
    8. Publicatie-instellingen voor ActionScript
    9. Tips en trucs: ActionScript organiseren in een toepassing
    10. ActionScript gebruiken met Animate
    11. Tips en trucs: Richtlijnen voor toegankelijkheid
    12. Toegankelijkheid in de Animate-werkruimte
    13. Scripts schrijven en beheren
    14. Ondersteuning voor aangepaste platforms inschakelen
    15. Overzicht van ondersteuning voor aangepaste platforms
    16. Toegankelijke inhoud maken
    17. Werken met plug-in voor ondersteuning voor aangepaste platforms
    18. Foutopsporing in ActionScript 3.0
    19. Ondersteuning voor aangepaste platforms inschakelen
  8. Exporteren en publiceren
    1. Bestanden exporteren uit Animate CC
    2. OAM-publicatie
    3. SVG-bestanden exporteren
    4. Afbeeldingen en video's exporteren met Animate
    5. AS3-documenten publiceren
    6. Animaties exporteren voor mobiele apps en game-engines
    7. Geluiden exporteren
    8. QuickTime-videobestanden exporteren
    9. Afspelen van externe video met ActionScript beheren
    10. Tips en trucs: Tips voor het maken van inhoud voor mobiele apparaten
    11. Tips en trucs: Videoconventies
    12. Tips en trucs: Richtlijnen voor het ontwerpen van SWF-toepassingen
    13. Tips en trucs: Structuur geven aan FLA-bestanden
    14. Beste werkwijzen voor het optimaliseren van FLA-bestanden voor Animate
    15. Publicatie-instellingen voor ActionScript
    16. Publicatie-instellingen opgeven voor Animate
    17. Projectorbestanden exporteren
    18. Afbeeldingen en geanimeerde GIF-bestanden exporteren
    19. HTML-publicatiesjablonen
    20. Werken met Adobe Premiere Pro en After Effects
    21. Snel uw animaties delen en publiceren

Animate biedt u nu de documenttypen VR 360 en VR Panorama waarmee u heel eenvoudig deze aantrekkelijke inhoud kunt maken. Met het documenttype voor virtual reality kunt u ook 3D-modellen (als glb-bestanden) importeren naar uw Animate-project en zo animaties op 3D-inhoud maken. 

In het nieuwe deelvenster VR-weergave ziet u een voorvertoning van de inhoud die u in de VR-documenttypen hebt gemaakt. Klik en verplaats MovieClip-instanties in het deelvenster VR-weergave. In Animate worden objecten automatisch gedetecteerd wanneer u erop klikt of ze verplaatst. Met VR-weergave kunt u de objecten in de 3D-ruimte plaatsen. De wijzigingen die worden gedaan in de plaatsing van de objecten (filmclip) in de VR-weergave, worden automatisch overgenomen in het 2D-werkgebied. U kunt ook lagen markeren als structuurlagen in het deelvenster Tijdlijn. Deze lagen worden dan ook voor de beide documenttypen respectievelijk op een cilinder of bolvorm gewikkeld.

In Animate kunt u de virtual reality-animaties ook tijdens runtime beheren met behulp van allerlei veelzijdige API's. Zo kunt u bepaalde objecten in de virtual reality-omgeving introduceren wanneer een gebruiker op een knop klikt. 

Opmerking:

Virtual Reality (360) en Virtual Reality (Panorama) in Animate zijn bètaversies voor de release van oktober 2018. 

Virtual reality-documenttypen

Er zijn twee VR-documenttypen:

VR Panorama

  • Met dit documenttype maakt u panoramische inhoud voor VR-toepassingen. 
  • In dit documenttype wordt de inhoud die rechtstreeks op structuurlagen is getekend, op een cilinder gewikkeld.
  • U kunt ofwel een achtergrond tekenen, of een panoramische afbeelding op een structuurlaag plaatsen. 
  • Animate converteert uw 2D-animaties naar panoramische inhoud met interactiviteit. 

VR 360

  • Met dit documenttype maakt u 360 graden-inhoud voor VR-toepassingen.  
  • In dit documenttype wordt de inhoud die rechtstreeks op structuurlagen is getekend, op een bolvorm gewikkeld.
  • U kunt ofwel een equidistante afbeelding gebruiken of de inhoud tekenen. 
  • Animate converteert uw 2D-animaties naar inhoud van 360 graden en biedt interactiviteit.
VR 360 en Panorama in het opstartscherm
VR 360 en Panorama in het opstartscherm

Virtual reality-inhoud ontwerpen en publiceren

Gebruik de volgende stappen om virtuele werkelijkheidsinhoud in Animate te maken:

  1. Importeer een 360 graden-afbeelding of panoramische afbeelding op het werkgebied als achtergrond.

    Als de afbeelding te groot is, kunt u de weergave van het werkgebied aanpassen.

    • Selecteer Wijzigen > Document om de grootte in te stellen
    • Klik op Afstemmen voor identieke inhoud

    Kies het pictogram Werkgebied centreren rechtsboven in het venster om de afbeelding in het midden van het scherm te plaatsen.

  2. Als u een structuurlaag wilt maken, klikt u op het pictogram Structuurwikkel voor alle lagen maken in het deelvenster van de tijdlijn, zoals hieronder weergegeven:

    Een structuurwikkel voor lagen maken
    Een structuurwikkel voor lagen maken

    De structuurlaag wikkelt zich om de cilinder of de bol, afhankelijk van het geselecteerde documenttype.

  3. Voeg objecten aan het werkgebied toe, voeg (afhankelijk van uw elementen) klassieke tweening of bewegingstweening toe aan de objecten en maak uw animatie. 

    VR 360-werkgebied
    VR 360-werkgebied

    De bovenstaande schermafbeelding illustreert de weergave per werkgebied van Animate met de equidistante afbeelding in documenttype VR 360, een vogel met begeleid bewegingspad en klassieke tweening in de tijdlijn. 

  4. Bekijk een voorbeeld van de inhoud met Vensters > VR-weergave.

    VR-weergave gebruiken voor voorvertoning van VR-inhoud
    VR-weergave gebruiken voor voorvertoning van VR-inhoud

    Klik op Start VR-weergave in het deelvenster VR-weergave.

    Deelvenster VR-weergave
    Deelvenster VR-weergave

    In de VR-weergave gebruikt u de knop Herstellen om de inhoud in de oorspronkelijke staat terug te zetten. In de VR-weergave worden de wijzigingen in het ontwerpwerkgebied niet automatisch getoond. Klik op Vernieuwen om de wijzigingen in de elementen van het werkgebied te bekijken.

    De opties Vernieuwen en Opnieuw instellen in de VR-weergave
    De opties Vernieuwen en Opnieuw instellen in de VR-weergave

    U kunt MovieClip-instanties verplaatsen in de voorvertoningsmodus. In Animate worden objecten automatisch gedetecteerd wanneer u de muis erop plaatst. De vorm van de cursor verandert in een pictogram met vier pijlen wanneer u de muis op objecten plaatst zoals hieronder weergegeven. U kunt objecten verplaatsen langs een cilinder of een bolpad, afhankelijk van het geselecteerde documenttype.

    Klik op het voorvertoningsscherm en sleep de muis om in het deelvenster VR-weergave te pannen. 

    Pictogram met vier pijlen om objecten te verplaatsen
    Pictogram met vier pijlen om objecten te verplaatsen

  5. Gebruik Bestand > Publiceren of Ctrl + Enter om de inhoud te publiceren. Wanneer u het project publiceert, wordt de afbeelding op een cilindrisch of bolvormig raster gewikkeld in Animate. U kunt extra lagen en animatie-inhoud toevoegen aan deze lagen.

    De werkelijk gepubliceerde VR 360-uitvoer zal eruitzien als in de onderstaande geanimeerde gif. 

    Voorbeeld van VR-uitvoer
    Voorbeeld van VR-uitvoer

    Voorbeeld van VR-panorama-uitvoer
    Voorbeeld van VR-panorama-uitvoer

    Wanneer u de VR-inhoud publiceert, kunt u ervoor kiezen om gehoste Javascript-bibliotheken te gebruiken als runtime. Standaard maakt Animate gebruik van de runtime voor gepubliceerde inhoud van de gehoste bibliotheken. U kunt deze optie uitschakelen in de publicatie-instellingen als u de runtime wilt inpakken met uw gepubliceerde uitvoer. 

    Publicatie-instellingen
    Publicatie-instellingen voor bibliotheken

3D-inhoud gebruiken

Met het VR-documenttype kunt u 3D-modelinhoud (glb-bestanden) importeren naar uw Animate-project en zo 3D-inhoud maken.

  1. Maak een document van het type VR (360) of VR (panorama).

  2. Kies Bestand > Importeren en blader naar het .glb-bstand om in het werkgebied of de bibliotheek te importeren.

    3D-inhoud importeren in het werkgebied
    3D-inhoud importeren in het werkgebied

  3. Voeg uw animaties en interactiviteit toe, net als MovieClip-objecten, en publiceer uw project.

    U kunt het 3D-model ook bekijken in de VR-weergave.

Virtual reality gebruiken tijdens runtime

In Animate kunt u de virtual reality-animaties ook tijdens runtime beheren met behulp van API's. Zo kunt u bepaalde objecten in een virtual reality-omgeving introduceren wanneer een gebruiker op een knop klikt. 

De lijst met runtime API's voor virtual reality is als volgt:

Pakket: anWebgl

Eigenschappen

Naam

Type / Klasse

Toegang

Beschrijving

Voorbeeld

Stage

Stage

RW

Eigenschappen van werkgebied ophalen/instellen

anWebgl.stage

virtualCamera

VirtualCamera

RW

Toegang tot standaardcamera

anWebgl.virtualCamera

Hoofdmap (root)

MovieClip

RO

Bovenste weergaveobject (tijdlijn huidige scène).

anWebgl.root

Methoden

Naam

Prototype

Beschrijving

Voorbeeld

addGLBFile

addGLBFile(filePath: string, successCallback : function, errorCallback : function):void

Laad het 3D-model van het opgegeven GLB-bestand

anWebgl.addGLBFile("model.glb" , successCallbackFunction, errorCallbackFunction).

playAll

playAll() : void

Speelt animatie voor alle filmclips, inclusief hoofdmap

anWebgl.playAll();

stopAll

stopAll() : void

Stopt animatie voor alle filmclips, inclusief hoofdmap

anWebgl.stopAll();

Klasse: MovieClip

Overerft: DisplayObjectContainer

Eigenschappen

Methoden

Naam

Prototype

Beschrijving

Voorbeeld

Play

play(): void

Speelt animatie af voor de filmclip.

anWebgl.root.getChildByName("name").play();
(of)

this.play(); 

Stop

stop(): void

Stopt animatie voor filmclip

anWebgl.root.getChildByName("name").stop();

 

playAll

playAll() : void

Speelt animatie af voor alle filmclips, inclusief de hoofdmap.

anWebgl.root.getChildAt(0).playAll();

 

stopAll

stopAll():void

Hiermee wordt animatie gestopt voor alle filmclips, inclusief de hoofdmap.

anWebgl.root.getChildAt(0)).stopAll();

 

Klasse: DisplayObject

Overerft: IEventDispatcher

Naam

Prototype

Beschrijving

Voorbeeld

hitTestPoint

hitTestPoint(x, y, Boolean).

retourneert displayObject/displayObjectContainer/movieClip op basis van het type van het getroffen object.

x en y zijn puntcoördinaten op het scherm.

anWebgl.root.hitTestPoint(300, 200, true, false);

Naam

Type / Klasse

Toegang

Beschrijving

Voorbeeld

X

Number

RW

Vertaling op X-as

var name =anWebgl.root.getChildByName("name");
name.x+=10;

 

J

Number

RW

Vertaling op Y-as

var name = anWebgl.root.getChildByName("name");
name.y+=10;

 

Z

Number

RW

Vertaling op Z-as

var name = anWebgl.root.getChildByName("name");
name.z+=10;

 

scaleX

Number

RW

Schaal langs X-as

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleX=2;

 

scaleY

Number

RW

Schaal langs Y-as

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleY=10;

 

scaleZ

Number

RW

Schaal langs Z-as

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleZ=10;

 

rotationX

Number

RW

Rotatie langs X-as

anWebgl.root.getChildByName("name").rotationX+=30;

(or)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Number

RW

Rotatie langs Y-as

anWebgl.root.getChildByName("name").rotationY+=30;

 

rotationZ

Number

RW

Rotatie langs Z-as

anWebgl.root.getChildByName("name").rotationZ+=30;

 

Parent

DisplayObjectContainer

RO

Bovenliggende container

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.parent)

 

Visible

Boolean

RW

Zichtbaarheid objecten

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.visible);

Klasse: DisplayObjectContainer

Inherits: DisplayObject

Naam

Prototype

Beschrijving

Voorbeeld

numChildren

numChildren:num

retourneert aantal onderliggende elementen van een object

anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

verwijderd argumentobject indien aanwezig

anWebgl.root.movieClipInstanceName.removeChild(childObj);

Contains

contains(obj:DisplayObject):boolean

retourneert waar als het argumentobject onderliggend is, anders onwaar

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

retourneert onderliggend element bij argumentindex

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String):DisplayObject

retourneert onderliggend element met argumentnaam indien deze bestaat

anWebgl.root.movieClipInstanceName.getChildByName(childName);

Klasse: Stage

Eigenschappen

Naam

Toegang

Beschrijving

Voorbeeld

stageWidth

RO

Breedte van werkgebied

anWebgl.stage.stageWidth

stageHeight

RO

Hoogte van werkgebied

anWebgl.stage.stageHeight

Color

RW

Achtergrondkleur van werkgebied

anWebgl.stage.color

Klasse: VirtualCamera

Methoden

Naam

Prototype

Beschrijving

Voorbeeld

getCamera

getCamera()

Cameraobject ophalen. Hiermee kunt u de camera-eigenschappen ophalen of instellen tijdens runtime.

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

getPosition

getPosition()

Hiermee wordt het object geretourneerd met x-, y- en z-eigenschappen waarmee de huidige locatie van de camera wordt aangeduid.

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

setPosition

setPosition()

Hiermee wordt de camera op basis van invoerparameters naar een absolute positie verplaatst. Standaardwaarde = 0.

let cameraPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setPosition(cameraPos);

 

moveBy

moveBy()

Verplaats de camera ten opzichte van de huidige positie.

let moveByPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().moveBy(moveByPos);

 

resetPosition

resetPosition()

Hiermee wordt de oorspronkelijke positie van de camera hersteld, bijvoorbeeld (0,0,0).


anWebgl.virtualCamera.getCamera().resetPosition();

 

SetRotation

SetRotation()

Hiermee wordt de camera geroteerd met een absolute hoek die als invoerparameter is opgegeven.

let __rotation__ = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setRotation(__rotation__);

 

resetRotation

resetRotation()

Hiermee wordt de camerahoek ingesteld op nul.

anWebgl.virtualCamera.getCamera().resetRotation();

 

Adobe-logo

Aanmelden bij je account