topical media & game development
#ximpel-Display.mx
#ximpel-Display.mx
(swf
)
[ flash
]
flex
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:ae="*" xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:ximpel="net.ximpel.custom.*"
creationComplete="init()">
<!--
initialize="send()" creationComplete="init()"
lauout="absolute"
width="100%" height="100%"
paddingLeft="0" paddingTop="0" paddingBottom="0" paddingRight="0" backgroundColor="#000000">
-->
<mx:HTTPService
id="ximpelAppConfigService"
url="{config}"
resultFormat="e4x"
result="ximpelAppConfigServiceResultHandler(event)"
fault='{return};'
/>
<!--
<mx:Style source="/Style/obsidian.css"/>
-->
<mx:Script>
<![CDATA[
import mx.events;
import mx.managers.SystemManager;
import mx.containers;
import net.ximpel.events.*;
import net.ximpel.custom.*;
import flash.events.FullScreenEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
[Bindable] public var config:String = "ximpelConfig.mxl";
[Bindable] public var trace:Function;
[Bindable] public var player:Player = myPlayer;
//[Bindable] public var player:ximpel_Player = myPlayer;
[Bindable] public var control:Canvas = ximpelPlayerControlPanel;
[Bindable] public var view:ViewStack = ximpelAppViewStack;
[Bindable] public var title:TitleWindow = titleScreen;
[Bindable] public var menu:TitleWindow = menuScreen;
[Bindable] public var evaluation:TitleWindow = evaluationScreen;
//public function get view():ViewStack { return ximpelAppViewStack; }
//public function set view(src:Viewstack):void { ximpelAppViewStack = src; }
public function set index(x:Number):void { ximpelAppViewStack.selectedIndex = x; }
//public function get ximpel():ximpel_Player { return myPlayer; }
public function get ximpel():Player { return myPlayer; }
public function set set(s : String):void { }
public function set image(src:String):void { titleScreenImage.source = src; }
public function send() : void {
// myPlayer.trace = trace;
myPlayer.init();
trace("display: " + "load -- " + config);
ximpelAppConfigService.send();
}
private function init():void {
myPlayer.addEventListener(InteractiveMediaEvent.COMPLETE, onVideoPlayerHidden);
myPlayer.addEventListener(InteractiveMediaEvent.PREVIOUS_ITEM, checkMediaType);
myPlayer.addEventListener(InteractiveMediaEvent.NEXT_ITEM, checkMediaType);
myPlayer.addEventListener(ScoreEvent.SCORE_CHANGED, updateScoreLabel);
myPlayer.addEventListener(SubjectEvent.SUBJECT_CHANGED, updateSubjectLabel);
systemManager.stage.scaleMode = "showAll";//"exactFit";
systemManager.stage.align = "top";
systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenRedraw);
var context:ContextMenu = new ContextMenu();
context.hideBuiltInItems();
//var item:ContextMenuItem = new ContextMenuItem(ximpel_Player.VERSION);
var item:ContextMenuItem = new ContextMenuItem(Player.VERSION);
item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, myPlayer.onContextMenuItemSelected);
context.customItems.push(item);
ximpelAppViewStack.contextMenu = context;
trace("display: " + "initialized display");
}
private function ximpelAppConfigServiceResultHandler(event:ResultEvent):void {
var configFile:XML = event.result as XML;
var assetsDir:String = "";
if(configFile.hasOwnProperty("titleScreenImage")) {
if(configFile.titleScreenImage[0] != ""){
if (configFile.settings[0].hasOwnProperty("assetsDir")) {
assetsDir = configFile.settings[0].assetsDir;
}
titleScreenImage.source = assetsDir + configFile.titleScreenImage[0];
trace("display: " + "config -- " + assetsDir);
}
//init(); //AE
}
if(configFile.hasOwnProperty("titleScreenHeader")) {
if(configFile.titleScreenHeader[0] != ""){
titleScreenHeaderText.text = configFile.titleScreenHeader[0];
}
}
if(configFile.hasOwnProperty("instructionScreenHeader")) {
if(configFile.instructionScreenHeader[0] != ""){
menuScreen.title = configFile.instructionScreenHeader[0];
}
}
if(configFile.hasOwnProperty("instructionScreenHTMLText")) {
if(configFile.instructionScreenHTMLText[0] != ""){
menuScreenText.htmlText = configFile.instructionScreenHTMLText[0];
}
}
if(configFile.hasOwnProperty("evaluationScreenHeader")) {
if(configFile.evaluationScreenHeader[0] != ""){
evaluationScreen.title = configFile.evaluationScreenHeader[0];
}
}
if(configFile.hasOwnProperty("evaluationScreenScoreLabel")) {
if(configFile.evaluationScreenScoreLabel[0] != ""){
evaluationScreenScoreLabel.text = configFile.evaluationScreenScoreLabel[0]+":";
}
}
if(configFile.hasOwnProperty("evaluationScreenSubjectLabel")) {
if(configFile.evaluationScreenSubjectLabel[0] != ""){
evaluationScreenSubjectLabel.text = configFile.evaluationScreenSubjectLabel[0]+":";
}
}
if(configFile.language[0].hasOwnProperty("questionLabel")) {
if(configFile.language[0].questionLabel[0] != ""){
myPlayer.QUESTION_LABEL = configFile.language[0].questionLabel[0];
}
}
if(configFile.language[0].hasOwnProperty("subjectLabel")) {
if(configFile.language[0].subjectLabel[0] != ""){
subjectLabel.text = configFile.language[0].subjectLabel[0];
}
}
if(configFile.language[0].hasOwnProperty("scoreLabel")) {
if(configFile.language[0].scoreLabel[0] != ""){
scoreLabel.text = configFile.language[0].scoreLabel[0];
}
}
if(configFile.language[0].hasOwnProperty("extraQuestionRightLabel")) {
if(configFile.language[0].extraQuestionRightLabel[0] != ""){
myPlayer.EXTRA_QUESTION_RIGHT_LABEL = configFile.language[0].extraQuestionRightLabel[0];
}
}
if(configFile.language[0].hasOwnProperty("extraQuestionWrongLabel")) {
if(configFile.language[0].extraQuestionWrongLabel[0] != ""){
myPlayer.EXTRA_QUESTION_WRONG_LABEL = configFile.language[0].extraQuestionWrongLabel[0];
}
}
if(configFile.language[0].hasOwnProperty("extraSegmentLabel")) {
if(configFile.language[0].extraSegmentLabel[0] != ""){
myPlayer.EXTRA_SEGMENT_LABEL = configFile.language[0].extraSegmentLabel[0];
}
}
if(configFile.language[0].hasOwnProperty("nextButtonLabel")) {
if(configFile.language[0].nextButtonLabel[0] != ""){
nextButton.label = configFile.language[0].nextButtonLabel[0];
}
}
if(configFile.language[0].hasOwnProperty("playButtonLabel")) {
if(configFile.language[0].playButtonLabel[0] != ""){
playButton.label = configFile.language[0].playButtonLabel[0];
}
}
if(configFile.language[0].hasOwnProperty("playAgainButtonLabel")) {
if(configFile.language[0].playAgainButtonLabel[0] != ""){
playAgainButton.label = configFile.language[0].playAgainButtonLabel[0];
}
}
//init(); //AE
trace("display: " + "configured ");
}
private function goToTitleScreen():void {
ximpelAppViewStack.selectedChild = titleScreen;
}
private function goToMenuScreen():void {
ximpelAppViewStack.selectedChild = menuScreen;
}
public function go():void {
goToXimpelScreen();
}
private function goToXimpelScreen():void {
//trace("display: " + "starting");
if(myPlayer.start()) {
ximpelAppViewStack.selectedChild = ximpelScreen;
}
else {
goToEvaluationScreen();
}
}
private function onVideoPlayerHidden(event:InteractiveMediaEvent):void {
goToEvaluationScreen();
}
private function checkMediaType(event:InteractiveMediaEvent):void {
//if (myPlayer.currentMediaType == ximpel_Player.MINIGAME_MEDIA) {
if (myPlayer.currentMediaType == Player.MINIGAME_MEDIA) {
videoTimeLabel.visible = false;
}else {
videoTimeLabel.visible = true;
}
}
private function goToEvaluationScreen():void {
gameScoreMessageLabel.text = myPlayer.getGameScoreMessage();
gameScoreLabel.text = myPlayer.getGameScore();
flash.system.System.setClipboard(gameScoreLabel.text);
subjectTrace.dataProvider = myPlayer.outputPlayedSubjects();
ximpelAppViewStack.selectedChild = evaluationScreen;
}
private function fullScreenRedraw(event:FullScreenEvent):void {
if (event.fullScreen)
{
//trace("Full screen");
// Remove input text fields.
// Add a button that closes full-screen mode.
}
else
{
//trace("Windowed screen");
// Re-add input text fields.
// Remove the button that closes full-screen mode.
}
}
private function updateScoreLabel(scoreEvent:ScoreEvent):void {
currentScoreLabel.text = scoreEvent.score;
}
private function updateSubjectLabel(subjectEvent:SubjectEvent):void {
trace("display: " + subjectEvent.subject);
currentSubjectLabel.text = subjectEvent.subject;
}
private function formatPositionToolTip(value:int):String {
//do only handle minutes
var result:String = (value % 60).toString();
if (result.length == 1){
result = Math.floor(value / 60).toString() + ":0" + result;
} else {
result = Math.floor(value / 60).toString() + ":" + result;
}
return result;
}
private function toggleFullScreen():void {
try {
switch (systemManager.stage.displayState) {
case StageDisplayState.FULL_SCREEN:
/* If already in full screen mode, switch to normal mode. */
systemManager.stage.displayState = StageDisplayState.NORMAL;
break;
default:
/* If not in full screen mode, switch to full screen mode. */
systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
break;
}
} catch (err:SecurityError) {
// ignore
}
}
]]>
</mx:Script>
<mx:Canvas>
<mx:ViewStack id="ximpelAppViewStack" width="870" height="710" selectedIndex="0" creationPolicy="all"
alpha=".9">
<mx:TitleWindow id="titleScreen" horizontalAlign="center">
<mx:Text id="titleScreenHeaderText" text="XIMPEL Application" fontSize="24" width="90%" top="20" textAlign="center"/>
<mx:Text text="{Player.VERSION} © 2007-2008 Eliëns, Huurdeman, Bhikharie, van de Watering"
width="90%" textAlign="center"/>
<mx:Image id="titleScreenImage" source="@Embed('assets/@logo.jpg')" width="640" height="480"
horizontalAlign="center" verticalAlign="middle"/>
<mx:Box horizontalAlign="center" verticalAlign="bottom" width="100%" height="100%">
<mx:Button id="nextButton" label="Next" click="goToMenuScreen()" cornerRadius="0"/>
</mx:Box>
</mx:TitleWindow>
<mx:TitleWindow id="menuScreen" title="Instructions Interactive Video Application" horizontalAlign="left">
<mx:Text id="menuScreenText" fontSize="18" width="90%" selectable="false">
<mx:htmlText>
<![CDATA[
<UL>
<LI>Watch the video</LI>
<LI>Make choices by clicking in the video</LI>
<LI>Find hidden segments to score bonus points</LI>
<LI>Answer extra question correctly for more bonus points</LI>
</UL>
]]>
</mx:htmlText>
</mx:Text>
<mx:Box horizontalAlign="center" verticalAlign="bottom" width="100%" height="100%">
<mx:Button id="playButton" label="Play" click="goToXimpelScreen()" cornerRadius="0"/>
</mx:Box>
</mx:TitleWindow>
<mx:TitleWindow id="ximpelScreen" horizontalAlign="center">
<ximpel:Player trace="{trace}" id="myPlayer" scoreChange="updateScoreLabel(event)" subjectChange="updateSubjectLabel(event)"/>
<mx:Canvas id="ximpelPlayerControlPanel" width="80%" height="42" x="0" y="670" horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Label id="currentSubjectLabel" text="default" left="5" bottom="0" width="100%"/>
<mx:Label id="currentScoreLabel" text="00000" bottom="0" right="5"/>
<mx:Label id="subjectLabel" text="Subject:" top="0" left="5"/>
<mx:Label id="scoreLabel" text="Score:" top="0" right="5"/>
<mx:Button label="<<" click="myPlayer.previousItem()" horizontalCenter="-100" verticalCenter="10"/>
<mx:Button label="||" click="myPlayer.pauseItem()" horizontalCenter="0" verticalCenter="10"/>
<mx:Button label=">>" click="myPlayer.nextItem()" horizontalCenter="100" verticalCenter="10"/>
<mx:Label id="videoTimeLabel" horizontalCenter="0"
text="{formatPositionToolTip(myPlayer.videoDisplay.playheadTime)} - {formatPositionToolTip(myPlayer.videoDisplay.totalTime)}"/>
</mx:Canvas>
</mx:TitleWindow>
<mx:TitleWindow id="evaluationScreen" title="Your storyline" horizontalAlign="center"
backgroundAlpha="0.0">
<mx:VBox horizontalAlign="center">
<mx:Label id="gameScoreMessageLabel" text="" fontSize="18"/>
<mx:HBox>
<mx:Label id="evaluationScreenScoreLabel" text="Your score:" fontSize="18"/>
<mx:Label id="gameScoreLabel" text="0" fontSize="18"/>
</mx:HBox>
</mx:VBox>
<mx:Label id="evaluationScreenSubjectLabel" text="Played subjects:" top="10" fontSize="18"/>
<mx:List id="subjectTrace" dataProvider="{subjectTrace}" color="#FFFFFF" textAlign="center"
fontSize="14" selectable="false" rowCount="15" backgroundAlpha="0.0" borderStyle="none"
width="100%"/>
<mx:Box horizontalAlign="center" verticalAlign="bottom" width="100%" height="100%">
<mx:Button id="playAgainButton" label="Play again" click="goToTitleScreen()" cornerRadius="0"/>
</mx:Box>
</mx:TitleWindow>
</mx:ViewStack>
<mx:Button id="fullScreen" label="[]" click="toggleFullScreen()" width="36" right="0"
toolTip="Toggle fullscreen"/>
</mx:Canvas>
</mx:Box>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
