Adicionando Sincronismo com Interatividade

Fundamentos e Padrões

3.4 Adicionando Sincronismo com Interatividade

elementos <property>, mesmo que seus valores iniciais sejam definidos usando elementos <descriptor> ou <region>. No caso, queremos manipular as variáveis de posicionamento e dimensão (“left”, “top”, “width”, “height”), representadas pelo valor “bounds”, como ilustrado pela Listagem 3.17, onde também é ilustrada a inclusão dos três novos objetos de mídia no conjunto de objetos de mídia anteriormente definido: a imagem de fundo (“background”), o ícone (“icon”) e o vídeo de propaganda (“shoes”).

<media id="background" src="../media/background.png"

descriptor="backgroundDesc"/>

<media id="animation" src="../media/animGar.mp4"

descriptor="screenDesc">

</media>

<media id="drible" src="../media/drible.mp4"

descriptor="dribleDesc"/>

Listagem 3.17 Conjunto de elementos <media> da nova versão da aplicação.

Temos agora de acrescentar os descritores e as regiões para a apresentação dos novos objetos de mídia, como ilustra a Listagem 3.18. Note que as novas regiões para exibição do ícone e do vídeo de propaganda foram definidas como filhas do elemento <region> “screenReg”, ou seja, relativas a essa região previamente definida.

...

...

<region id="iconReg" left="87.5%" top="11.7%" width="8.45%"

height="6.7%" zIndex="3"/>

<region id="shoesReg" left="15%" top="60%" width="25%"

height="25%" zIndex="3"/>

</region>

</regionBase>

...

</descriptorBase>

Listagem 3.18 Definição dos novos elementos <region> e dos novos elementos

<descriptor>.

Resta agora definir os três novos relacionamentos introduzidos, e incorporar aos relacionamentos “lMusic” e “lEnd” as ações para iniciar e terminar a apresentação da imagem de fundo, como ilustra a Listagem 3.19.

</bind>

</bind>

</link>

</link>

<bind role="onBegin" component="animation"

interface="segIcon"/>

</link>

</bind>

</bind>

</link>

</bind>

</link>

Listagem 3.19 Definição dos novos relacionamentos.

Os dois primeiros elementos <link> (“lMusic” e “lEnd”) determinam o início e o fim da exibição da imagem de fundo como coincidindo com o início e fim da exibição do áudio chorinho, respectivamente.

O terceiro elemento <link> (“lIcon”) define que, ao começar (condição

“onBegin”) a apresentação do trecho da animação quando o ícone deve aparecer, ele tenha sua apresentação iniciada (ação “start”).

O quarto elemento <link> (“lAdvert”) é mais complexo. Ele define que, se o ícone da chuteira for selecionado (condição “onSelection”) pela tecla vermelha do controle remoto (passada como parâmetro do papel correspondente, keycode=“RED”), o vídeo da animação deve ser redimensionado (ação “set” na propriedade “bounds” definida no elemento

“animation”) para os valores passados como parâmetros (left=“5%”, top=“6,67%”, width e height =“45%”, todos relativos à dimensão da tela). O relacionamento também determina que a propaganda da chuteira deve ser iniciada (ação “start” no elemento “shoes”) e que o ícone deve parar sua exibição (ação “stop” no elemento “icon”).

O quinto elemento <link> (“lEndAdvert”) especifica que, quando o vídeo correspondente à propaganda da chuteira terminar (condição “onEnd”), o vídeo da animação deve retomar suas dimensões originais (ação “set” na propriedade “bounds” definida no elemento “animation”).

A Listagem 3.20 apresenta o programa NCL correspondente à nova versão da aplicação.

<?xml version="1.0" encoding="ISO-8859-1"?>

<head>

<region id="backgroundReg" width="100%" height="100%"

zIndex="1"/>

<region id="screenReg" width="100%" height="100%"

zIndex="2">

<region id="frameReg" left="5%" top="6.7%" width="18.5%"

height="18.5%" zIndex="3"/>

<region id="iconReg" left="87.5%" top="11.7%"

width="8.45%" height="6.7%" zIndex="3"/>

<region id="shoesReg" left="15%" top="60%" width="25%"

height="25%" zIndex="3"/>

</region>

</regionBase>

<descriptor id="photoDesc" region="frameReg"

explicitDur="5s"/>

<descriptor id="iconDesc" region="iconReg"

explicitDur="6s"/>

</descriptorBase>

<importBase documentURI="../causalConnBase.ncl"

alias="conEx"/>

</connectorBase>

</head>

<body>

<media id="background" src="../media/background.png"

descriptor="backgroundDesc"/>

<media id="animation" src="../media/animGar.mp4"

descriptor="screenDesc">

</media>

<media id="choro" src="../media/choro.mp4"

descriptor="audioDesc"/>

<media id="drible" src="../media/drible.mp4"

descriptor="dribleDesc"/>

<media id="photo" src="../media/photo.png"

descriptor="photoDesc"/>

<media id="icon" src="../media/icon.png"

descriptor="iconDesc"/>

<media id="shoes" src="../media/shoes.mp4"

</bind>

</bind>

</link>

<bind role="onBegin" component="animation"

interface="segDrible"/>

</link>

<bind role="onBegin" component="animation"

interface="segPhoto"/>

</link>

</link>

<bind role="onBegin" component="animation"

interface="segIcon"/>

</link>

<link id="lAdvert"

xconnector="conEx#onKeySelectionStopSet_varStart">

</bind>

</bind>

</link>

</bind>

</link>

</body>

</ncl>

Listagem 3.20 O Primeiro João com sincronismo por interação.

A Figura 3.6 ilustra mais dois momentos da exibição, o início do aparecimento do ícone e o momento da apresentação da propaganda, obtidos durante a execução da aplicação na implementação de referência do middleware Ginga-NCL.

Figura 3.6 Cenas da aplicação O Primeiro João com interatividade.

No documento NCL (Nested Context Language) é a linguagem declarativa do middleware Ginga, recomendação ITU-T para serviços IPTV e padrão ISDB-T (páginas 107-113)