Kullanıcı Kılavuzu İptal

Sanal Gerçeklik içeriği oluşturma ve yayınlama

 

Animate, kolaylıkl etkileyici içerikler oluşturmanıza yardımcı olmak için VR 360 ve VR Panorama belge türlerini sunuyor. Ayrıca, Animate projenize 3B model içeriklerini (.glb dosyaları) içe aktarmak ve 3B içeriklerde animasyonlar oluşturmak için sanal gerçeklik belge türünden de yararlanabilirsiniz. 

VR belge türlerinde oluşturulan içeriği önizlemek için kullanıma sunulan yeni VR Görünümü panelini de kullanabilirsiniz. VR Görünümü panelinde MovieClip örneklerini tıklatabilir ve oynatabilirsiniz. Animate, nesneleri tıklatıp oynattığınızda otomatik olarak algılar. VR Görünümü, nesneleri 3b alana yerleştirmenizi sağlar. VR Görünümü'nde nesneleri yerleştirmede (film klibi) yapılan değişiklikler 2b sahne alanına otomatik olarak yansıtılır. Ayrıca katmanları, iki ilgili belge türü için bir silindire veya küreye sarılmak üzere Zaman Çizelgesi panelinde doku katmanları olarak da işaretleyebilirsiniz.

Animate aynı zamanda zengin API seti yardımıyla çalışma zamanında sanal gerçeklik animasyonlarını yönetmenize de olanak sağlar. Örneğin kullanıcı bir düğmeyi tıklattığında bazı nesneleri sanal gerçeklik ortamında sunabilirsiniz. 

 Animate'te yer alan Sanal Gerçeklik (Panorama) ve Sanal Gerçeklik (360), Ekim 2018 sürümünün Beta sürümleridir.

Sanal gerçeklik belge türleri

İki adet Sanal Gerçeklik (VR) belge türü vardır: 

VR Panorama

  • Sanal Gerçeklik uygulamaları için panoramik içerik oluşturmak üzere bu belge türünü kullanın. 
  • Bu belge türünde doğrudan doku katmanlarından çekilen içerik bir silindire sarılır.
  • Dilerseniz doku katmanında panoramik görüntü elde edebilir veya bir arka plan çizebilirsiniz. 
  • Animate, oluşturduğunuz 2B animasyonları etkileşim ile panoramik içeriğe dönüştürür. 

VR 360

  • Sanal Gerçeklik uygulamaları için 360 derece içerik oluşturmak üzere bu belge türünü kullanın.  
  • Bu belge türünde, doğrudan doku katmanlarına çizilen içerik bir küreye sarılır.
  • Eşit aralıklı bir dikdörtgen görüntünüz olabilir veya içeriği çizebilirsiniz. 
  • Animate, oluşturduğunuz 2B animasyonları etkileşim ile 360 derece içeriğe dönüştürür.
Başlangıç ekranında Sanal Gerçeklik 360 ve panorama
Başlangıç ekranında Sanal Gerçeklik 360 ve panorama

Sanal gerçeklik içeriği yazma ve yayınlama

Animate'te sanal gerçeklik içeriği oluşturmak için aşağıdaki adımları uygulayın:

  1. Arka plan için sahneye bir 360 görüntüsü veya panoramik görüntü içe aktarın.

    Görüntü boyutu büyükse sahne alanı görünümünün boyutunu ayarlayabilirsiniz.

    • Boyutu ayarlamak için Değiştir > Belge seçeneğini belirleyin
    • İçerikleri Eşleştir öğesini tıklatın

    Görüntüyü ekranınızın ortasına ayarlamak için pencerenin sağ üst köşesindeki Sahne Alanını Ortalama seçeneğini belirleyin. 

  2. Doku katmanı olarak bir katman oluşturmak için aşağıdaki ekran görüntüsünde gösterildiği şekilde zaman çizelgesi panelinde Tüm Katmanlar için Doku Sarma Oluştur simgesini tıklatın:

    Katmanlar için doku sarıcı oluştur
    Katmanlar için doku sarıcı oluştur

    Doku katmanı, seçtiğiniz belge türüne bağlı olarak silindirin veya kürenin çevresine sarılır.

  3. Sahne alanına nesneler ekleyin, varlıklarınıza göre nesnelerinize klasik ara veya animasyonlu ara ekletin ve animasyonunuzu oluşturun. 

    VR 360 sahne alanı
    VR 360 sahne alanı

    Yukarıda gösterilen ekran görüntüsünde, yönlendirilmiş bir hareket yolu olan bir kuş ve zaman çizelgesinde klasik ara doldurma olan VR 360 belge türünde eşit aralıklı bir dikdörtgen görüntü içeren Animate sahne alanı gösterilir. 

  4. Windows > VR Görünümü seçeneğini kullanarak içeriği önizleyin.

    VR içeriğini önizlemek için VR Görünümünü kullanma
    VR içeriğini önizlemek için VR Görünümünü kullanma

    VR Görünümü panelindeVR Görünümünü Başlat düğmesini tıklatın. 

    VR Görünümü paneli
    VR Görünümü paneli

    İçeriği ilk haline sıfırlamak için VR Görünümü önizleme modunda Sıfırla düğmesini kullanın. VR Görünümü, içerik oluşturma aşamasındaki tüm değişiklikleri otomatik olarak yansıtmaz. Deneme ortamında varlıklarınıza uygulanan değişiklikleri görüntülemek için Yenile seçeneğini tıklatın. 

    VR Görünümü Yenileme ve Sıfırlama seçenekleri
    VR Görünümü Yenileme ve Sıfırlama seçenekleri

    Önizleme modunda MovieClip örneklerini oynatabilirsiniz. Animate, fareyi üzerine getirdiğinizde nesneleri otomatik olarak algılar. Fareyi aşağıdaki ekran görüntüsünde gösterildiği şekilde nesnelerin üzerine getirdiğinizde imleç şekli çubuk simgesine dönüşür. Seçilen belge türüne bağlı olarak nesneleri bir silindir veya küre yolu boyunca hareket ettirebilirsiniz.

    VR Görünümü penceresinin çevresinde yatay kaydırmak için önizleme ekranını tıklatın ve çevresinde sürükleyin. 

    Nesneleri hareket ettirmek için çubuk simgesi
    Nesneleri hareket ettirmek için çubuk simgesi

  5. İçeriği yayınlamak için Dosya > Yayınla veya Ctrl + Enter seçeneklerini kullanın. Yayınladığınızda görüntü, Animate'te bir silindirik veya küre kafes üzerine sarılır. Daha fazla katman ve bu katmanlara animasyon içeriği ekleyebilirsiniz.

    Örnek Sanal Gerçeklik 360 yayınlanan çıktısı, aşağıdaki GIF'teki gibi görünür. 

    VR 360 çıktısı örneği
    VR 360 çıktısı örneği

    VR panorama çıktısı örneği
    VR panorama çıktısı örneği

    Sanal gerçeklik içeriğini yayınladığınızda çalışma zamanı olarak barındırılan JavaScript kitaplıklarını kullanmayı tercih edebilirsiniz. Varsayılan olarak, Animate yayınlanan içerik için barındırılan kitaplıklardan çalışma zamanı kullanır. Çalışma zamanını yayınlanan içeriğinizle birlikte paketlemek istiyorsanı Yayınlama Ayarları'nda seçeneğin işaretini kaldırabilirsiniz. 

    Yayınlama ayarları
    Kitaplıklar için yayınlama ayarları

Animasyonları sanal gerçeklikle modernleştirme

Sanal gerçeklik, piyasada ağırlıklı olarak kullanılan bir trenddir. İçeriğinize sanal gerçeklik getirmek ister misiniz? Bu örneğin sonundaki eğitimi izleyin ve ilgili adımları takip edin.

  1. Ev sekmesinde Gelişmiş'i tıklayın.

  2. VR Panorama'yı seçin ve Oluştur'u tıklayın.

Animate ile panoramik içerik nasıl oluşturulur?

Sanal bir deneyimi artırmak için panoramik görünümde daha fazla efekt eklemeyi öğrenmek üzere videoyu izleyin.

WebGL-glTF Dışa Aktarma (Standart ve Genişletilmiş) hakkında bir video eğitimi

WebGL-glTF Dışa Aktarmayı (Standart ve Genişletilmiş) kullanmayı gösteren video

3B içerik kullanma

Animate projenize 3B modelleri (.glb dosyaları) içe aktarmak ve 3B içerik oluşturmak için sanal gerçeklik belge türünden yararlanabilirsiniz.

  1. VR (360) önizleme veya VR (panorama) türünde belge oluşturun.

  2. Dosya > İçe Aktar seçeneğini belirleyin ve sahne alanına veya kitaplığa aktarmak için .glb dosyasına göz atın.

    Sahneye 3B içeriği içe aktarma
    3B içeriği sahneye içe aktar

  3. Film klibi nesnelerine benzer animasyonlar ve etkileşimler ekleyip yayınlayın.

    Ayrıca 3B modeli VR Görünümü'nde de önizleyebilirsiniz. 

Çalışma zamanında sanal gerçeklik kullanma

Animate aynı zamanda API'lerin yardımıyla çalışma zamanında sanal gerçeklik animasyonlarını yönetmenize de olanak sağlar. Örneğin kullanıcı bir düğmeyi tıklattığında bazı nesneleri 360 sanal gerçeklik ortamında sunabilirsiniz. 

Sanal gerçeklik çalışma zamanı API'lerinin listesi aşağıdaki gibidir: 

Paket: anWebgl

Özellikler

Ad

Tür/Sınıf

Erişim

Açıklama

Örnek

Sahne

Sahne

RW

Sahne özelliklerini al/ayarla

anWebgl.stage

VirtualCamera

VirtualCamera

RW

Varsayılan kameraya erişim

anWebgl.virtualCamera

Kök

MovieClip

RO

En yukarıdaki görüntüleme nesnesi (Geçerli Sahne zaman çizelgesi).

anWebgl.root

Yöntemler

Ad

Prototip

Açıklama

Örnek

addGLBFile

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

Belirtilen GLB dosyasından 3B modeli yükle

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

playAll

playAll() : void

Kök dahil tüm MovieClip'lerin animasyonunu oynat

anWebgl.playAll();

stopAll

stopAll() : void

Kök dahil tüm MovieClip'lerin animasyonunu durdur

anWebgl.stopAll();

Sınıf: MovieClip

Devralınan: DisplayObjectContainer

Özellikler

Yöntemler

Ad

Prototip

Açıklama

Örnek

Oynat

play(): void

Film klibi animasyonunu oynatır.

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

this.play(); 

Durdur

stop(): void

Film klibi animasyonunu durdurur

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

 

playAll

playAll() : void

Kök dahil tüm film kliplerinin animasyonunu oynatır.

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

 

stopAll

stopAll():void

Kök dahil tüm film kliplerinin animasyonunu durdurur.

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

 

Sınıf: DisplayObject

Devralınan: IEventDispatcher

Ad

Prototip

Açıklama

Örnek

hitTestPoint

hitTestPoint(x, y, Boolean).

tıklama nesnesinin türüne göre displayObject/displayObjectContainer/movieClip döndürür.

x ve y, ekrandaki nokta koordinatlarıdır.

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

Ad

Tür/Sınıf

Erişim

Açıklama

Örnek

X

Sayı

RW

X ekseninde çeviri

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

 

Y

Sayı

RW

Y ekseninde çeviri

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

 

Z

Sayı

RW

Z ekseninde çeviri

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

 

scaleX

Sayı

RW

X ekseni boyunca ölçekleme

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

 

scaleY

Sayı

RW

Y ekseni boyunca ölçekleme

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

 

scaleZ

Sayı

RW

Z ekseni boyunca ölçekleme

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

 

rotationX

Sayı

RW

X ekseni boyunca döndürme

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

(veya)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Sayı

RW

Y ekseni boyunca döndürme

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

 

rotationZ

Sayı

RW

Z ekseni boyunca döndürme

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

 

Üst

DisplayObjectContainer

RO

Üst konteyner

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

 

Görünür

Boolean

RW

Nesne görünürlüğü

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

Sınıf: DisplayObjectContainer

Devralınanlar: DisplayObject

Ad

Prototip

Açıklama

Örnek

numChildren

numChildren:num

bir nesnenin alt öğe sayısını döndürür

anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

varsa argüman nesnesini kaldırır

anWebgl.root.movieClipInstanceName.removeChild(childObj);

İçindekiler

contains(obj:DisplayObject):boolean

argüman nesnesi alt öğe ise true, değilse false döndürür

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

argüman dizininde alt öğe döndürür

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String): DisplayObject

varsa argüman adıyla birlikte alt öğe döndürür

anWebgl.root.movieClipInstanceName.getChildByName(childName);

Sınıf: Sahne Alanı

Özellikler

Ad

Erişim

Açıklama

Örnek

stageWidth

RO

Sahne genişliği

anWebgl.stage.stageWidth

stageHeight

RO

Sahne yüksekliği

anWebgl.stage.stageHeight

Renk

RW

Sahne arka planının rengi

anWebgl.stage.color

Sınıf: VirtualCamera

Yöntemler

Ad

Prototip

Açıklama

Örnek

getCamera

getCamera()

Kamera nesnesini alın. Çalışma zamanında kamera özelliklerini almak veya ayarlamak içindir.

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

 

getPosition

getPosition()

Kameranın geçerli konumunu belirten x, y ve z özellikli nesneyi döndürür.

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

 

setPosition

setPosition()

Girdi parametreleriyle belirtilen mutlak konuma kamerayı hareket ettirin. Varsayılan değer = 0.

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

 

moveBy

moveBy()

Kamerayı geçerli konuma göre hareket ettirin.

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

 

resetPosition

resetPosition()

Kamera konumunu orijinal, yani (0,0,0) konumuna sıfırlayın.


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

 

SetRotation

SetRotation()

Kamerayı giriş parametreleri olarak verilen mutlak açıya göre döndürün.

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

 

resetRotation

resetRotation()

Kamera açısını sıfıra sıfırlayın.

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

 

Daha hızlı ve daha kolay yardım alın

Yeni kullanıcı mısınız?