1.

En el siguiente tutorial vamos a aprender a utilizar AREL para un escenario muy

simple: aadir un vdeo al escenario y reproducir / pausa con dos botones.
1. Suponemos que usted ya est familiarizado con trackables. Si este no es el caso,
usted puede aprender acerca de esto en el Tutorial 1.
2. Seleccione un objeto de control y colocarla en los scene.As que ha visto en los
tutoriales anteriores incrustar un vdeo in-page que se puede hacer en unos pocos
clics.
3. Seleccione uno de tus videos favoritos o uno de nuestros vdeos de muestra y se
arrastra en el objeto de control previamente seleccionado.
4. Ahora, seleccionar dos imgenes de su eleccin como botones de reproduccin y
pausa y arrastrarlos a la etapa. Esto debera tener este aspecto:

2. Antes de que la verdadera diversin comienza permtanme explicar brevemente la
funcionalidad. Si est familiarizado con Javascript esto no ser nada nuevo para usted.
3. Por cada contenido en el escenario se puede definir un cdigo personalizado dentro
de un determinado evento. Si se abre el editor de AREL (Barra de men / Extras), ver
una entrada para el botn 1. Si hace clic en este mucho texto aparecer a la derecha.
Estos bloques de cdigo son los marcadores de posicin para el cdigo personalizado.

Si, por ejemplo, usted escribe algo de cdigo en la funcin onTouchStarted definida
sobre el botn 1 del cdigo personalizado se ejecutar cuando se toca (o clic) el botn
1. Lo mismo ocurre con los objetos de vdeo: se entra en el cuerpo de la funcin
onPlayed cuando se reproduce el video, la onPaused cuando se detiene la
reproduccin, ect.
Si usted necesita algunas funciones globales no es la parte del Global Script. Una
funcin definida en el rea global ser visible en el mbito de aplicacin de todas las
dems funciones. Veremos esto tambin en este ejemplo.
4. Haga clic en la seccin Global Script e inserte este cdigo:
function showPlayButton(flag)
{
button1.setVisibility(flag, flag, flag);
}

function showPauseButton(flag)
{
button2.setVisibility(flag, flag, flag);
}


Aqu defino dos funciones que hacen uso de la funcin setVisibility
de un objeto. Puedes leer ms sobre esto en el Junaio documentaion.



5. A continuacin, he insertado estas dos lneas de cdigo en la funcin
scenario.onLoaded para ocultar los dos botones al principio del escenario:
// Ser ejecutado cuando este objeto se ha cargado.
scenario.onLoaded = function () {
showPlayButton(false);
showPauseButton(false);
};
6. El botn de reproduccin que se denomina como "botn 1" en mi caso obtendr el
siguiente cdigo para reproducir el vdeo cuando se hace clic en el botn.
Button1.onTouchStarted = function () {
video1.play();
};


El botn de pausa se utiliza para detener el video.
button2.onTouchStarted = function () {
video1.pause();
};
7. A continuacin, vamos a desencadenar la visibilidad de los botones, dependiendo del
estado del vdeo. Si se reproduce el video, slo queremos ver el botn de pausa, y
viceversa. Adems me decid a hacer una pausa en el vdeo en su deteccin. Este es
el cdigo para el video:

// Se ejecutar cuando se ha iniciado la reproduccin de este
objeto.
video1.onPlayed = function () {
showPlayButton(false);
showPauseButton(true);
};

// Se ejecutar cuando la reproduccin de este objeto est en
pausa.
video1.onPaused = function () {
showPlayButton(true);
showPauseButton(false);
};

// Se ejecutar cuando la reproduccin del movimiento ha sido
terminado.
/ / Corrensponds a arel.Events.Object.ONMOVIEENDED.
video1.onMovieEnded = function () {
showPlayButton(true);
showPauseButton(false);
};

// Ser ejecutado cuando este objeto tiene visible.
// Corresponds to arel.Events.Object.ONVISIBLE event.
video1.onVisible = function () {
this.pause();
showPlayButton(true);
showPauseButton(false);
};
8. Upload the experience to your Junaio channel or use the AREL player for a quick preview.