This project can be seen as a development of Assignment 2., taking it further in depth and polish, and incorporating the project management techniques we have since explored. Or it can be something different.

Requirements:

• Use most of the techniques learnt so far.
• The project should be polished, and have sufficient depth. In other words, it should look and feel like a “professional”/”real world” project.
• The project should be presented in the relevant platform. For example, if it is a website, it should be uploaded to a web server.

Evaluation:

• use of all the technologies mentioned,
• use of project organization techniques such as loading external content and class creation,
• optimization and organization of code,
• polish and depth,
• creativity,
• and exploration beyond the examples given so far,

will lead to better results.

Examples / suggestions:

1. A game,
2. An artistic/exploratory project,
3. A web page or a mobile service.

Some links with resources and inspiration for further explorations:

1. Resources and tutorials

From Adobe:
Adobe’s own Flash development websites, pointing to tutorials, PDF manuals, videos, and much more:
http://www.adobe.com/devnet/flash/
Adobe Flash Platform Blog:
http://blogs.adobe.com/flashplatform/
The Flash Blog:
http://blog.theflashblog.com/

Other popular sites with Flash resources:
http://www.flashkit.com/
http://www.kirupa.com/developer/flash/index.htm

My own teaching blog at Media Lab Helsinki, Aalto University (Flash and more):
http://mlab.taik.fi/mediacode/

2. Inspiration

Adobe’s Customer Showcase
http://www.adobe.com/cfusion/showcase/index.cfm
Favorite Website Awards
http://www.thefwa.com/

I write on new media art and design on my blog:
http://www.nunocorreia.com/
And develop audiovisual projects, mostly using Flash:
http://www.videojackstudios.com/

Thinking out of the box and broadening horizons, two examples from the new media arts field:
Rhizome
http://www.rhizome.org/
We Make Money not Art
http://we-make-money-not-art.com/

3. Other technologies for multimedia development

Remember that technology is constantly moving, and you should not be stuck in one given platform or programming language. What you have learnt so far can be easily applied to similar object oriented programming languages, such as JavaScript (for example, in conjunction with HTML5) or Java (for example, with Processing), or even C++ (for example, with openFrameworks).

Some links:
http://processing.org/
http://en.wikipedia.org/wiki/HTML5
http://en.wikipedia.org/wiki/JavaScript
http://www.openframeworks.cc/
http://unity3d.com/

1. First, some thoughts on electronic distribution and Flash formats. As we have seen, when you use the Control > Test Movie command, Flash generates an .swf file. That file format is appropriate for distribution (provided the target audience has the Flash player installed), but not for uploading, by itself, to a website. For that, a HTML file that embeds the .swf is needed, and we will see how to generate one with Flash.

Another aspect to take into consideration when uploading a Flash site to a web server (or distributing it on any other way) is file/folder structure. As we have been seeing in the past exercises, your Flash project may rely on external files. In order for these files to be loaded properly, you will need to maintain the same file/folder structure you had locally. You will need an FTP client, such as FileZilla, to upload the files to a server. Wikipedia provides a nice comparison of FTP clients: http://en.wikipedia.org/wiki/Comparison_of_FTP_client_software. Don’t forget that you don’t need to upload you .fla file – this is an authoring file, that the user does not have access to, therefore it should be kept locally.

2. Let’s now see how you can publish your project, including an HTML file that embeds the .swf. Choose “Publish Settings…” from the File menu. The following window appears:

Flash and HTML are selected by default.

3. Press the “Publish” button. You will now have a .html file in your project folder. You can open that .html file with a browser, and it should look like this:

You might want to change the layout of your HTML file, and how your .swf is displayed there. To do so, depending on your knowledge of HTML, you will possibly need an HTML editor such as Adobe Dreamweaver. More on HTML editors: http://en.wikipedia.org/wiki/HTML_editor
HTML editors also usually allow you to embed elements such as .swf files, and in that case you might choose to do it from the editor instead of generating an HTML file from Flash.

4. Flash provides also a means to create “stand alone” executable files for your project (the “Windows Projector” or “Macintosh Projector” options on the Publish Settings window). Stand alone in this case means that the resulting files run on the user’s computer (and not on the browser), without the need for a Flash player. The executable will include the player technology (and therefore will produce a larger file than an .swf). The development of Adobe’s AIR platform has been occupying the territory of stand-alone applications built with Flash. More on AIR: http://www.adobe.com/products/air/

1. First, an introduction to XML. XML means “Extensible Markup Language (XML)”, and it is a “set of rules for encoding documents in machine-readable form”, according to Wikipedia. In XML, similarly to HTML for example, information is divided into markup and content. Unlike HTML, XML is extensible, meaning that you can add your own “tags” to classify information. Quoting Wikipedia:

The characters which make up an XML document are divided into markup and content. Markup and content may be distinguished by the application of simple syntactic rules. All strings which constitute markup either begin with the character “<” and end with a “>”, or begin with the character “&” and end with a “;”. Strings of characters which are not markup are content.

(from: http://en.wikipedia.org/wiki/XML)

In this exercise, we will not develop our XML to include nested elements or attributes, which can be quite useful for a deeper use of XML. We will use simple elements. According to Wikipedia, elements are:

A logical component of a document which either begins with a start-tag and ends with a matching end-tag, or consists only of an empty-element tag. The characters between the start- and end-tags, if any, are the element’s content, and may contain markup, including other elements, which are called child elements. An example of an element is <Greeting>Hello, world.</Greeting> (see hello world). Another is <line-break/>.

2. Now let’s build our XML file, using the same methodology as in the previous text file exercise. We will open our text editor, and type in the XML code. An XML file always begins with an XML declaration (<?xml version=”1.0″?>), and then starts the root element, which encapsulates the whole XML file. Usually this root element relates to the file content and the file name. We will call it “movies”. Then we create a list of movies, using the element logic presented before. Finally, we close the root element.

<?xml version="1.0"?>
<movies>
<movie>A Clockwork Orange</movie>
<movie>Blue Velvet</movie>
<movie>Stalker</movie>
</movies>

3. Let’s now convert our file to plain text, and save the file as “movies.xml”.

4. Moving to Flash, we will create a new Flash file, and save it in the same directory as “movies.xml”.

5. We will now create a text field to display the text from the XML file:

var myTextField:TextField = new TextField();
stage.addChild(myTextField);
myTextField.x=50;
myTextField.y=50;
myTextField.width=450;
myTextField.height=300;
myTextField.border=true;

6. Similarly to the previous exercise, we will set up a URLRequest object (myURL) and a URLLoader object (myURLLoader) to load the data from our XML file:

var myURL:URLRequest=new URLRequest("movies.xml");
var myURLLoader:URLLoader = new URLLoader();
myURLLoader.load(myURL);


7. Also similarly to the previous exercise, we will create our listener, to check if the file will be loaded, since only then can it be displayed:

myURLLoader.addEventListener(Event.COMPLETE, showXML);

The listener will trigger a function called “showXML”.

8. Let’s now build our showData function, step by step.

8.1 First, we will create the function declaration:

function showXML(e:Event):void {

8.2 Then, we will parse the XML file into an XML object (similar to our URLVariables object from the previous exercise, but more powerful due to the flexible nature of XML). We will call this XML object “movies”:

var movies:XML=new XML(myURLLoader.data);

8.3 Now we will create a string variable to hold the text retrieved from the XML file. To begin with, it will be empty:

var filmTitles:String="";

8.4 Now we will sweep through the XML file, using a simple and useful loop: a “for each” loop. A “for each” is intelligent enough to recognize how many items we have in the XML file, allowing us to retrieve the information we want. In this case, it is the information contained in each “movie” element, within our “movies” root element. Then we ask Flash to keep adding that information to our “filmTitles” variable:

for each (var movie:XML in movies) {
filmTitles+=movies.movie;
}

8.5 Finally, we ask flash to present the “filmTitles” string in our text field (“myTextField”). We will use the htmlText property instead of the usual text property for that, as it will filter out the tags from the elements:

myTextField.htmlText=filmTitles;

8.6 And let’s not forget to close the function:

}

8.7 The whole function will look like this:

function showXML(e:Event):void {
var movies:XML=new XML(myURLLoader.data);
var filmTitles:String="";
for each (var movie:XML in movies) {
filmTitles+=movies.movie;
}
myTextField.htmlText=filmTitles;
}

9. And the whole code will look like this:

var myTextField:TextField = new TextField();
stage.addChild(myTextField);
myTextField.x=50;
myTextField.y=50;
myTextField.width=450;
myTextField.height=300;
myTextField.border=true;

var myURL:URLRequest=new URLRequest("movies.xml");
var myURLLoader:URLLoader = new URLLoader();
myURLLoader.load(myURL);
myURLLoader.addEventListener(Event.COMPLETE, showXML);
function showXML(e:Event):void {
var movies:XML=new XML(myURLLoader.data);
var filmTitles:String="";
for each (var movie:XML in movies) {
filmTitles+=movies.movie;
}
myTextField.htmlText=filmTitles;
}

The end result should look like this:

Download files: ex20-xml.zip

1. First, some thoughts on loading text into Flash. Flash reads text from simple text files (“.txt”) which can be generated by most word processors, from the most complex to the most humble, such as TextEdit for Macintosh or NotePad for Windows. The conversion from the default format of these programs to “.txt” format is done through a specific “Make Plain Text” command or in the “save as” command of these applications.

The method we will use in Flash to deal with external text is to use the URLLoader class, a “loader/container” type of class similar to what we have seen for sound (the Sound class) and for graphical assets (the Loader class). URLLoader deals with variables using “URL encoded” (or percent encoding) formatting. External text will be defined as variables. Passing several variables in this fashion involves a structure of the type: “variable1=definition1&variable2=definition2″. You will be probably familiar with this type of structure when accessing some dynamic URL created through a database. It is important that there is no space before or after the “=” sign separating variable name and variable definition, and that there is no space between the “&” preceding the second or following variable names and the variable names themselves.

Simple HTML can be use to format your text. If you use it, the text should be displayed with the “htmlText” property, and not with the “text” property of the TextField class. A list of supported HTML tags (using the “a” tag for links can be particularly useful) can be found here: http://learnola.com/2008/12/03/actionscript-3-tutorial-using-html-and-css/

For displaying long text, TextField is not an ideal choice, as it lacks a scroll bar. The TextArea component would be a better choice. However, components are out of scope of these learning materials. In any case, you can learn more about TextArea, and other components, from here: http://mlab.taik.fi/mediacode/archives/tag/components

2. Moving on to the exercise, let’s create a text file in our word processor of choice. I am using TextEdit for Mac. Let’s create a “myTitle” and “myBody” variables. The second (and following if we had any) variables should be preceded by &, as we saw. I will use text copied from this entry in the Adobe Flash Platform blog: http://www.mikechambers.com/blog/2010/08/06/flash-arduino-tips-tricks-and-gotchas/.

The text would look like this:

myTitle=Flash / Arduino Tips, Tricks and Gotchas
&myBody=This is a ongoing post where I will post tips, tricks and gotchas that I learn while developing with Flash and the Arduino. I will update this from time to time with more information.

Make sure you are using the correct BAUD Rate

If your Flash / Arduino communication does not seem to be working, then make sure that you have set the BAUD rate to the same rate in both your Arduino code, and the configuration file for your Serial Proxy (such as TinkerProxy).

Slow down the BAUD Rate

If you are getting weird errors, or some messages between Flash and Arduino seem to get dropped, then try slowing down your BAUD rate to 9600 and see if that fixes the issue.

If it does, you can then try and debug and figure out if any particular thing in your code was causing the problem.

I will convert it to plane text by selecting “Make Plain Text” in the Format menu, and save it as “news.txt”.

3. Let’s now move to Flash. Let’s create a new Flash file, and save it in the same folder as our “news.txt” file.

4. Now let’s create two text fields, one for the title and one for the body text:

var newsTitle:TextField = new TextField();
stage.addChild(newsTitle);
newsTitle.x=50;
newsTitle.y=50;
newsTitle.width=450;
newsTitle.height=50;
newsTitle.border=true;

var newsBody:TextField = new TextField();
stage.addChild(newsBody);
newsBody.x=50;
newsBody.y=150;
newsBody.width=450;
newsBody.height=200;
newsBody.border=true;
newsBody.wordWrap= true;

Note that in the last line of the code to the second text field I set the property “wordWrap” to “true”, therefore forcing Flash to create line breaks.

5. Following the same logic we have seen in the Sound and Loader classes, we will create a URLRequest object to load the file (myURL), and container to receive it – in this case, a URLLoader object (newsLoader). Then we can load myURL into newsLoader:

var myURL:URLRequest=new URLRequest("news.txt");
var newsLoader:URLLoader = new URLLoader();
newsLoader.load(myURL);

6. Now we will create a listener for the loading process. It will be associated with newsLoader, and wait until the text file is loaded to execute our function (showNews). The appropriate event for this is Event.COMPLETE:

newsLoader.addEventListener(Event.COMPLETE, showNews);

7. We will now build our showNews function. First, we extract (or parse) all the variables from the text file, and put them in a special variables container belonging to the URLVariables class (let’s call it newsVariables). We can then acess our text file’s variables by name and put them in the corresponding text fields:

function showNews(e:Event):void {
var newsVariables:URLVariables=new URLVariables(newsLoader.data);
newsTitle.text=newsVariables.myTitle;
newsBody.text=newsVariables.myBody;
}

8. This would be the whole code:

var newsTitle:TextField = new TextField();
stage.addChild(newsTitle);
newsTitle.x=50;
newsTitle.y=50;
newsTitle.width=450;
newsTitle.height=50;
newsTitle.border=true;
var newsBody:TextField = new TextField();
stage.addChild(newsBody);
newsBody.x=50;
newsBody.y=150;
newsBody.width=450;
newsBody.height=200;
newsBody.border=true;
newsBody.wordWrap= true;

var myURL:URLRequest=new URLRequest("news.txt");
var newsLoader:URLLoader = new URLLoader();
newsLoader.load(myURL);
newsLoader.addEventListener(Event.COMPLETE, showNews);
function showNews(e:Event):void {
var newsVariables:URLVariables=new URLVariables(newsLoader.data);
newsTitle.text=newsVariables.myTitle;
newsBody.text=newsVariables.myBody;
}

And the end result would look like this:

Download files: ex19-load_text.zip

1. First, some thoughts on the usefulness of loading external files. When creating projects for the web or network devices, speed of loading is quite important. In a large project, it is better to load only what is being accessed in a given time. It is also a good practice to separate the structure of the project from the content, as the content might change. For example, images of a person or a team might change in time; or of a project which is a work in progress. On the other hand, you might want to change or replace a structure while maintaining the content, so structure/content separation is again useful. Besides, many projects rely on loading content from databases (as we will see when approaching XML), so loading external, dynamic content becomes a necessity.

2. Let’s begin our exercise by creating 3 buttons for loading 3 different images. These buttons will be rounded rectangles colored differently, partially cropped by the images to look like tabs:

var rectangle1:Sprite = new Sprite();
stage.addChild(rectangle1);
rectangle1.x=50;
rectangle1.y=5;
rectangle1.graphics.beginFill(0xFF0000);
rectangle1.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle1.buttonMode=true;

var rectangle2:Sprite = new Sprite();
stage.addChild(rectangle2);
rectangle2.x=225;
rectangle2.y=5;
rectangle2.graphics.beginFill(0x0000FF);
rectangle2.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle2.buttonMode=true;

var rectangle3:Sprite = new Sprite();
stage.addChild(rectangle3);
rectangle3.x=400;
rectangle3.y=5;
rectangle3.graphics.beginFill(0xFF00FF);
rectangle3.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle3.buttonMode=true;

3. Let’s create an instance of the Loader class, which will be the container for the images (myLoader). This uses the same logic as the Sound class we have seen, which was a container for sound files. In this case, Loader is a graphical entity, and it can be added to the stage, in a specific position. Images will be loaded taking the position of the Loader into account (as its top-left starting point). We will place this loader in pixel (25,20):

var myLoader:Loader = new Loader();
stage.addChild(myLoader);
myLoader.x=25
myLoader.y=20;

4. Now, let’s create URLRequests for the 3 images, and load the first one by default into our myLoader object:

var image1:URLRequest = new URLRequest("videojack1.jpg");
var image2:URLRequest = new URLRequest("videojack2.jpg");
var image3:URLRequest = new URLRequest("videojack3.jpg");
myLoader.load(image1);

An image should now appear. However, the buttons are not working yet.

5. Let’s then create the listeners and functions for loading images 1 to 3 by pressing the respective buttons on top:

rectangle1.addEventListener(MouseEvent.CLICK, loadImage1);
function loadImage1(e:MouseEvent):void{
myLoader.load(image1);
}
rectangle2.addEventListener(MouseEvent.CLICK, loadImage2);
function loadImage2(e:MouseEvent):void{
myLoader.load(image2);
}
rectangle3.addEventListener(MouseEvent.CLICK, loadImage3);
function loadImage3(e:MouseEvent):void{
myLoader.load(image3);
}

6. The whole code should look like this:

var rectangle1:Sprite = new Sprite();
stage.addChild(rectangle1);
rectangle1.x=50;
rectangle1.y=5;
rectangle1.graphics.beginFill(0xFF0000);
rectangle1.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle1.buttonMode=true;
var rectangle2:Sprite = new Sprite();
stage.addChild(rectangle2);
rectangle2.x=225;
rectangle2.y=5;
rectangle2.graphics.beginFill(0x0000FF);
rectangle2.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle2.buttonMode=true;
var rectangle3:Sprite = new Sprite();
stage.addChild(rectangle3);
rectangle3.x=400;
rectangle3.y=5;
rectangle3.graphics.beginFill(0xFF00FF);
rectangle3.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle3.buttonMode=true;

var myLoader:Loader = new Loader();
stage.addChild(myLoader);
myLoader.x=25
myLoader.y=20;
var image1:URLRequest = new URLRequest("videojack1.jpg");
var image2:URLRequest = new URLRequest("videojack2.jpg");
var image3:URLRequest = new URLRequest("videojack3.jpg");
myLoader.load(image1);

rectangle1.addEventListener(MouseEvent.CLICK, loadImage1);
function loadImage1(e:MouseEvent):void{
myLoader.load(image1);
}
rectangle2.addEventListener(MouseEvent.CLICK, loadImage2);
function loadImage2(e:MouseEvent):void{
myLoader.load(image2);
}
rectangle3.addEventListener(MouseEvent.CLICK, loadImage3);
function loadImage3(e:MouseEvent):void{
myLoader.load(image3);
}


And the final result should look like this:

Download files: ex18-loader.zip

1. As we saw in the previous exercise, separating the code from the Flash authoring tool has numerous advantages, such as the possibility of using other coding platforms (such as Flash Builder), specialized and optimized for coding; clarity of code; team work; and sharing the same code across projects. The “include” instruction provides another path for this separation. The difference relatively to the document class is that the code will be embedded in the main timeline, therefore there will be no need for a new class definition. Several “includes” can be used, and the code will be interpreted by order of appearance of the respective “include”.

2. Let’s create a new Flash file, and type the following line of code in the Actions window:

include "actions.as"

Save the Flash file.

3. Now, let’s create a new ActionScript file. Let’s type this “Hello World!” code there:

var myTextField:TextField = new TextField();
stage.addChild(myTextField);
myTextField.text="Hello world!";

Save the file as “actions.as” in the same directory as the Flash file.

4. That’s it! Quite simple. The result should look familiar by now – another hello to the world.

Download files: ex17-include_as_file.zip

1. Flash is not the only authoring platform for ActionScript files (Flash Builder, formerly Flex Builder, being another notable one). You can bypass the Flash authoring environment entirely by creating document class files, which are similar to the class definition files we saw in the previous exercise.

You can specify the document class in File > Publish Settings > Flash > ActionScript Version > Settings > Document class or in the properties inspector:

In the “Class” box write “Hello”. Save the Flash file.

2. Now let’s create a new ActionScript file, and type the following code there:

package {
import flash.text.TextField;
import flash.display.Sprite;
public class Hello extends Sprite {
public function Hello() {
var myTextField:TextField = new TextField();
stage.addChild(myTextField);
myTextField.text="Hello world!";
}
}
}

The code is similar to the class definition on previous exercise, mixed with our first “Hello world” exercise.

If you need to include any time line elements (which we haven’t been exploring), the document class should extend (and import) the MovieClip class. If not, the more lightweight Sprite class should be enough.

3. Let’s save it as “Hello.as” in the same folder as the Flash file.

4. The end result should look like our first “Hello world!” exercise.

Download files: ex16-document_class.zip

1. We have already discussed what Classes are in our introductory “lessons”. The question now is, why would you need to create your own classes? The answers for this are multiple. One of the main reasons is that it is very convenient when you have to create a multitude of objects that are not already available, or that are customizations of available objects (for example, particle systems). Another is that it is a very efficient way to organize the code, into different standalone blocks with different functionalities (otherwise, your code could develop into an out of control multi-page monster…). It also facilitates team work, in which different people are working in different classes. More reading material on this here: http://en.wikipedia.org/wiki/Class_%28computer_science%29

2. Let’s now move on to our exercise. Let’s create a new file, of a new type for us – an ActionScript file. Go to File menu, and select New. This familiar window appears:

Choose “ActionScript” file and press OK. Then save the file as “PurpleBall.as” (.as is the extension for ActionScript files.

3. Now let’s create a purple circle (let’s call it “PurpleBall”) in our file, which will be a class file (hence PurpleBall with capital P). This will be the “prototype” for all the purple balls we want to create. Note that we’re no longer in the Actions window, but in a new stand alone window, configured like the Actions window.

Creating a class from scratch demands that we create some extra elements of code in the beginning. So far, we have been sparred from that, since we have been introducing code in the main timeline, which already includes this code.

This is the code we need to write at the start of a new Class definition:

package {
import flash.display.Shape;
public class PurpleBall extends Shape {

An explanation on this code. “package” wraps the whole code together. When we create a class, we need to import all the Classes we need, mentioning the path from the package they are in. Finally, we name the class, and specify which of the Classes it is extending – in this case, PurpleBall will be a sub-class of Shape, so it extends Shape. “public”, which we will also use when creating functions/methods in a Class, means that other code can access the class.

4. Now let’s create the function that draws the PurpleBall:

public function PurpleBall() {
graphics.beginFill(0xFF00FF,0.5);
graphics.drawCircle(0,0,50);
}

This is the constructor function. Nothing new here, except the already mentioned “public” expression, and a second paramenter in the beginFill method, which is optional and sets the alpha (to 0.5).

5. Let’s close the package and the class:

}
}

The whole class code is as follows:

package {
import flash.display.Shape;
public class PurpleBall extends Shape {
public function PurpleBall() {
graphics.beginFill(0xFF00FF,0.5);
graphics.drawCircle(0,0,50);
}
}
}

Let’s save the file as “PurpleBall.as”. Please note that the name of the file (PurpleBall.as) must match the class definition (public class PurpleBall) and the construcor function (public function PurpleBall()).

6. Now let’s create a new Flash file, and save it in the same folder as our PurpleBall.as file.

7. Now let’s create a large number of purple balls, let’s say around 30. We’ll use a for loop for that. The code would look like this:

for (var n:int=0; n<30; n++) {
var myPurpleBall:PurpleBall = new PurpleBall();
addChild(myPurpleBall);
}

The code is familiar to us, except that the class has been created by us. Flash will recognize the class description file in our folder, and add 30 balls to the stage.

8. However, the balls now “sit” all on top of each other, on coordinate (0,0). Let’s put each of them in a random position on the screen, using Math.random() multiplied by stageWidth and stageHeight. The code would now look like this:

for (var n:int=0; n<30; n++) {
var myPurpleBall:PurpleBall = new PurpleBall();
addChild(myPurpleBall);
myPurpleBall.x=Math.random()*stage.stageWidth;
myPurpleBall.y=Math.random()*stage.stageHeight;
}

9. The result looks like this:

Download files: ex15-class_creation.zip

Requirements:

• use of mouse and/or keyboard based interaction;
• conditionals and/or for loops;
• sound and/or video;
• drag and drop and/or collision detection;
• mouse position tracking and/or random values.

Evaluation:

• use of all the technologies mentioned,
• with a high degree of sophistication and complexity,
• optimization of code,
• creativity,
• and exploration beyond the examples given so far,

will lead to better results.

Examples / suggestions:

1. A game, for example involving collision detection, or a memory game (could be using drag and drop) – a simple score system should be used;
2. An artistic/exploratory project, for example using vectors and sound, and dragable elements;
3. A prototype for a web page or a mobile service;
4. Any of the above, or some other concept, could be thought of an early exploration towards a final project.