Webstory

The Webstory project is a small modeling tool for telling interactive stories that run in the web browser. It uses many essential features of Pyro, but is small enough to be comprehensible for Pyro novices.

Start modeling!

Getting Started

Create an account

click on register and enter the required information.
after submission, you see a message, that you have to activate your email address. Since this is a demo installation you don’t have to verify your email
go to login page and enter your username and password

Create a project

Click Create an Empty Project and enter a project name in the upcoming dialog.
After submission you see your new project in the list of owned.
Click the project to open it.

Build a Webstory

Click the file icon, placed in explorer on the left.
In the upcoming dialog click the Model tab and select the Webstory as model type in the dropdown.
Pick a filename and click on the Create button.
Click the appearing Webstory file in the explorer to open the model in the canvas.
Create a minimal story with a ‘StartMarker’ connected to a single ‘Screen’
Select Screen’s backgroundImage in the Cinco Proerties view (bottom)

Test Story

Press “G” button in top menu bar
Click the appearing generated-html/index.html file in the explorer to play the Webstory.

First Real Story

Now try telling a story where something real has to be done, e.g., one that requires the player to find an item or secret that is later needed to reach somewhere (modeled with a variable that marks the ‘found’ state).

Add ClickAreas to your Screen and connect them to other screens
Use ‘Variables’ (which are just booleans) with ‘ModifyVariable’ activities to record story progress (like found items, gained information, etc.)
Use ‘Conditions’ to branch according to ‘Variables’: The solid transition will be taken if the connected ‘Variable’ is true, the dashed transition if it is false.
Double-click on ‘ModifyVariable’ toggles between setting the connected variable to true and false (indicated by green and red LED)

Webstory MGL

While you’re modeling the story, compare the definitions from the specification MGL file with the behavior of the modeling tool.

@style("model/WebStory.style")
@generatable("info.scce.cinco.product.webstory.generator.Generator","generated-html")
@pyroGeneratorResource("resources")
graphModel WebStory {
	package info.scce.cinco.product.webstory
	nsURI "http://cinco.scce.info/product/webstory"
	iconPath "icons/WS.png"
	diagramExtension "story"

	containableElements (Activity, StartMarker[1,1], Variable)

	@style(startMarker)
	@disable(resize)
	@palette("Main Elements")
	@icon("icons/StartMarker.png")
	node StartMarker {
		outgoingEdges(Transition[1,1])
	}

	abstract container Activity {}

	@style(screen)
	@disable(resize)
	@palette("Main Elements")
	@icon("icons/Screen.png")
	container Screen extends Activity {
		@file("jpg", "JPG", "png")
		attr EString as backgroundImage
		containableElements (Area)
		incomingEdges (Transition, TrueTransition, FalseTransition)

	}

	/* ELEMENTS THAT ARE PLACED WITHIN SCREENS */

	abstract node Area { }

	abstract node ClickArea extends Area {
		outgoingEdges (Transition[1,1])
	}

	@style(ellipseClickArea)
	@icon("icons/EllipseClickArea.png")
	@palette("In-Screen Elements")
	node EllipseClickArea extends ClickArea { }

	@style(rectangleClickArea)
	@icon("icons/RectangleClickArea.png")
	@palette("In-Screen Elements")
	node RectangleClickArea extends ClickArea { }

	@style(textArea, "${text}")
	@icon("icons/TextArea.png")
	@palette("In-Screen Elements")
	node TextArea extends Area {
		attr EString as text
		attr Color as color
		attr FontSize as fontSize
	}

	enum Color {
		BLACK
		WHITE
	}

	enum FontSize {
		SMALL
		MEDIUM
		LARGE
	}

	/* VARIABLES AND THEIR HANDLING */

	@style(condition)
	@palette("Variables")
	@icon("icons/Condition.png")
	@disable(resize)
	container Condition extends Activity {
		incomingEdges (DataFlow[1,1], Transition, TrueTransition, FalseTransition)
		outgoingEdges (TrueTransition[1,1], FalseTransition[1,1])
		containableElements (*[0,0])
	}

	@style(modifyVariable)
	@palette("Variables")
	@doubleClickAction("info.scce.cinco.product.webstory.action.ToggleModifyVariable")
	@disable(resize)
	@icon("icons/ModifyVariable.png")
	container ModifyVariable extends Activity {
		incomingEdges(Transition, TrueTransition, FalseTransition)
		outgoingEdges(Transition[1,1], DataFlow[1,1])
		attr EBoolean as value
		containableElements (*[0,0])
	}

	@style(variable, "${name}")
	@palette("Variables")
	@icon("icons/Variable.png")
	node Variable {
		attr EString as name
		outgoingEdges (DataFlow)
		incomingEdges (DataFlow)
	}


	/* EDGE TYPES */

	@style(controlFlow)
	edge Transition { }

	@style(controlFlow)
	edge TrueTransition { }

	@style(falseFlow)
	edge FalseTransition { }

	@style(dataFlow)
	edge DataFlow { }

}