Skip to main content
Inspiring
April 2, 2019
Question

Exhibit Kiosk

  • April 2, 2019
  • 2 replies
  • 1432 views

Hello,

I'm trying to develop a standalone app that would, in practice, present as two screens. One screen would have buttons or sliders that when pressed or when the slider is at a certain value would play videos on the second screen. I'm really at a loss for how to even start. Ideally this app would run on one PC and have two screens attached.

Any suggestions or links to relevant tutorials?

Much thanks!

This topic has been closed for replies.

2 replies

rayek.elfin
Legend
April 3, 2019

You have three options:

  1. run two separate applications which talk to each-other via a localhost network.
  2. run the application full screen over the two screens. Both screens must ideally be identical.
  3. run two separate windows of the same app.

Option (3) is not always supported by the authoring environment. I am unsure about Flex, but I do know that Unity does support this. Unity can create up to 8 different viewports, each displayed on its own screen, if required. Unity is free, and with the (commercial) PlayMaker plugin, you don't even need to learn (much) programming for this basic sounding kiosk application.

Unity - Manual: Multi-display

(1) is pretty simple to achieve in any authoring environment, such as Godot, Unity, ...

(1) is a good option in general as well. It does mean you will have to write the code for both apps to 'talk' to each-other, and it can get complex, but luckily in your case it seems pretty basic interaction behaviour.

Personally I think the localhost networking option is the most flexible solution. It would also allow you to control things even via a mobile device.

mnarlockAuthor
Inspiring
April 3, 2019

I'm going with #1...or trying to. I'm doing win projector instances of two apps that use localconnection. It's not working yet, however. In one instance I have two test buttons called "rain" and "snow." Ideally I'd like to click a button and have it send a message to the other win projector that would play a corresponding video. So, for instance, clicking the "rain" button sends a message to the other win projector to play the "rain" video.

I have this actionscript:

import flash.net.LocalConnection;

import flash.events.MouseEvent;

var send_lc:LocalConnection = new LocalConnection();

rain.addEventListener(MouseEvent.CLICK, send_lc.send("_connection1","rain"));

snow.addEventListener(MouseEvent.CLICK, send_lc.send("_connection1","snow"));

But I'm really not sure how to listen and execute the proper videos on the second win projector. Any thoughts?

JoãoCésar17023019
Community Expert
Community Expert
April 3, 2019

Hi.

if you want two screens in the same PC, I think it's better for you to create another native window. It's way easier to establish a communication between them.

Because all you need to do is to access the stage property of each one and then proceed like you would with a regular single window app.

In this example, I start with the videos in the main window, but I immediately send them both to the new window using stage.addChild.

If you want to work with two separate FLAs, you can create all stuff that belongs to the second window in a second FLA and then load the SWF of this second FLA in the second window. I hope this makes sense.

AS3 code:

import flash.display.NativeWindow;

import flash.display.NativeWindowInitOptions;

import flash.display.NativeWindowSystemChrome;

import flash.display.NativeWindowType;

import flash.display.StageAlign;

import flash.display.StageScaleMode;

import flash.events.MouseEvent;

var mainWindow:NativeWindow;

var newWindow:NativeWindow;

var rainPlaying:Boolean = false;

var snowPlaying:Boolean = false;

function start():void

{

    stage.align = StageAlign.TOP_LEFT;

    stage.scaleMode = StageScaleMode.NO_SCALE;

  

    mainWindow = stage.nativeWindow;

  

    createNewWindow(960, 540, "library", 0x131313);  

    newWindow.activate();

  

    rainVideo.scaleX = rainVideo.scaleY = 2;

    snowVideo.scaleX = snowVideo.scaleY = 2;

  

    rainVideo.x = newWindow.stage.stageWidth * 0.25 - rainVideo.width * 0.5;

    rainVideo.y = (newWindow.stage.stageHeight - rainVideo.height) * 0.5;

  

    snowVideo.x = newWindow.stage.stageWidth * 0.75 - snowVideo.width * 0.5;

    snowVideo.y = (newWindow.stage.stageHeight - snowVideo.height) * 0.5;

  

    newWindow.stage.addChild(rainVideo);

    newWindow.stage.addChild(snowVideo);

  

    rainButton.y = stage.stageHeight * 0.5;

    snowButton.y = stage.stageHeight * 0.5;

  

    rainButton.addEventListener(MouseEvent.CLICK, playRain);

    snowButton.addEventListener(MouseEvent.CLICK, playSnow);

}

function playRain(e:MouseEvent):void

{

    if (rainPlaying)

        rainVideo.stop();

    else

        rainVideo.play();

  

    rainPlaying = !rainPlaying;

}

function playSnow(e:MouseEvent):void

{

    if (snowPlaying)

        snowVideo.stop();

    else

        snowVideo.play();

  

    snowPlaying = !snowPlaying;

}

function createNewWindow(w:uint, h:uint, title:String = "window", color:uint = 0xffffff):void

{

    var options:NativeWindowInitOptions = new NativeWindowInitOptions();

    options.transparent = false;

    options.systemChrome = NativeWindowSystemChrome.STANDARD;

    options.type = NativeWindowType.NORMAL;

  

    newWindow = new NativeWindow(options);

    newWindow.title = title;

    newWindow.width = w;

    newWindow.height = h;

    newWindow.stage.color = color;

    newWindow.stage.align = StageAlign.TOP_LEFT;

    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;  

}

start();

FLA download:

animate_cc_as3_two_screens.zip - Google Drive

If you're interested, here is a more advanced example:
Re: Adobe AIR desktop native windows drag and drop

Regards,

JC

Robert Mc Dowell
Legend
April 2, 2019