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:
- Creem un nou projecte i li donem el nom de VideoWall.
- Canviem la orientació de la pantalla a Landscape i, de pas, el BackgroundColor a Black.
- 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:
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.
Ara 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.
Creació dels blocs de Click:
Els blocs que crearem responen als clicks sobre els botons ResizeButton.
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.
