VideoWall

APP INVENTOR: Canviar el tamany del reproductor de vídeo
Autor/a: Patricia Ruiz

Introducció:

Aquest tutorial mostra com podem controlar el tamany d’un vídeo a una aplicació. El VideoWall utilitza els recursos multimèdia (vídeos emmagatzemats a la pròpia app), però també podem fer servir la app per mostrar vídeos d’Internet.

Comencem:

  1. Creem un nou projecte i li donem el nom de VideoWall.
  2. Canviem la orientació de la pantalla a Landscape i, de pas, el BackgroundColor a Black.
  3. Ens baixem els tres vídeos que farem servir a continuació:http://appinventor.mit.edu/explore/content/videowall.html

Un cop finalitzem l’aplicació VideoWall, se’ns mostrarà una pantalla amb els tres vídeos, que podrem ampliar fins assolir el seu tamany real, i després tornar a encongir. L’aplicació també ens permetrà visualitzar els vídeos en pantalla completa.

Establim els components:

A continuació, farem servir el dissenyador de components per crear la interfície de VideoWall. Havent acabat, hauria de tenir el següent aspecte:

1

Per aconseguir-ho, primer hem de carregar els arxius de vídeo que ens hem baixat. Farem click al botó Add i seleccionarem els vídeos un per un.

Ara, crearem la interfície arrossegant els següents components de la Palette al Viewer:

Tipus de component Grup de la Palette Com l’anomenarem Propòsit del component Comentaris
HorizontalArrangement ScreenArrangement HorizontalArrangement1 Alinea els components horitzontalment  Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement1 Alinea el vídeo de l’esquerra i els controls corresponents Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement2 Alinea el vídeo del mig i els controls corresponents Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement3 Alinea el vídeo de la dreta i els controls corresponents Posarem el Width a Fill parent
VideoPlayer Media VideoPlayer1 Mostra el BigBuckBunny video Triem el vídeo Bigbuckbunny.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
VideoPlayer Media VideoPlayer2 Mostra el NASA video Triem el vídeo Nasa.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
VideoPlayer Media VideoPlayer3 Mostra el Sintelvideo Triem el vídeo Sintel.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
Button Basic ResizeButton1 Canvia el tamany del VideoPlayer1 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic ResizeButton2 Canvia el tamany del VideoPlayer2 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic ResizeButton3 Canvia el tamany del VideoPlayer3 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic FullScreenButton1 Mostra el VideoPlayer1 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent
Button Basic FullScreenButton2 Mostra el VideoPlayer2 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent
Button Basic FullScreenButton3 Mostra el VideoPlayer3 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent

Assignar comportaments als components:

 Ara la interfície està completa, però els botons encara no canvien el tamany dels vídeos. Per això, obrirem el Blocks Editor, per assignar comportament als botons. Primer de tot, definirem tres blocs de variables per poder modificar el tamany dels VideoPlayers.

3Ara crearem el bloc de resizeVideoPlayer. Hi ha tres Videoplayers a l’aplicació, però utilitzarem només un sol bloc de procediment per canviar el tamany dels tres. Per fer-ho, anirem al component Advanced, i clicarem sobre el bloc Any VideoPlayer.

4

Creació dels blocs de Click:

Els blocs que crearem responen als clicks sobre els botons ResizeButton.

5

La majoria de blocs a l’App Inventor requereixen que coneguem exactament quin component manipularà la nostra aplicació en el moment en que l’estem dissenyant. Per algunes apps, tindrem bastants components del mateix tipus, i voldrem programar un mateix comportament per tots els components similars (com és el cas dels blocs de VideoPlayer en aquesta app).

Nota: La appVideoWallpodría haver-se dissenyat amb una redimensió específica per a cada VideoPlayer. Utilitzant el bloc Advanced en un sol procediment de redimensió, la app és molt més simple.

 Com funcionen els blocs:

Configurar les propietats d’amplada i alçada per a un VideoPlayer, funciona exactament de la mateixa manera que configurar l’amplada i alçada d’un botó. Per qualsevol número positiu que establim, el vídeo que es reprodueixi redimensionarà la seva aparença per a encaixar en aquell valor. Hi ha dos valors que són excepcions de la norma d’utilitzar valors positius: el -1 i el -2.  Configurar el VideoPlayer.Width o VideoPlayer.Height a -1 és com configurar l’alçada o l’amplada a Fill Parent en el designer. Configurar el VideoPlayer.Width o VideoPlayer.Height a  -2 és com configurar l’alçada o l’amplada a Automatic al designer.

Cal tenir en compte que, en alguns dispositius, el tamany no es canvia correctament i, per tant, el resultat és impredictible.

Full screen:

El  VideoPlayer.FullScreen bloc, agafa un valor positiu/negatiu (anomenat també Boolean), per dir si el vídeo s’ha de posar en full screen o no. Configurar un bloc VideoPlayer.FullScreen  a true, farà que el vídeo es reprodueixi en fullscreen. Si hi ha un altre video en fullscreen, el valor es posarà a fals i serà remplaçat per l’actual videoplayer. Si el VideoPlayer.FullScreen  es true, configurar el bloc com a falsa causa que es tanqui el fullscreen.

6