Interactive Media

Basic Functions

• Software sketchbook

  • It is a learning tool for visual artist.
    • Powerful programmer tool - elaborate projects can be created.
      • Interactive installation - connected with Arduino.

• Void Setup and Void loop

  • Similar to loop in Arduino constantly being redone.

• Variables - are containers that story a piece of information

  • String
    • Storing a text variable string of characters
  • Int
    • (constant - does not change over time) integer whole number.
  • Float
    • Can have a decimal point that cane more around.

• Library Add certain functionality to processing

  • Such as sound, video camera, generating graphic effects.
    • Prewritten sets of code.

Control MovieCLips With Keyboard Things to remember:

• Instance Names
• Code Snippets
• Scalex
• Keycodes
• Rotation
• MC.x
• Hittest - for Collision detection

Moving animation using keyboard, can any other keyboard button.

• Walk Angle
• Graphics symbolers
• Bone Tool
• COntoel with Keybaord and or mouse

Create movement with botton interaction. here i set the the Box on the left to move with WASD keys and the box on the right with the walking cycle to move with the arrows keys. A possible way to wave Mulitplayer interaction/Gameplay.

Code to Constrain Box within the Canvas Scene

Using cude to reset scene/object/ movie clip/grtaphic symbole postion with mouse click.

var test:Boolean = false;

stage.addEventListener(MouseEvent.CLICK, fl_ClickToPosition);

function fl_ClickToPosition(event:MouseEvent):void
{

  if(test == true){
    box_MC_1.x = 250;
    box_MC_1.y = 250;       
    }
    test = true;
    }

Changing the direction of animation to the directionwith walking. Press left, to move left and face left.

if (leftPressed)
    {
        movieClip_1.x -= 1;
        movieClip_1.scaleX = -1;

I had noticed that code snippet with in adobe animate used a different way for character movement.

var upPressed:Boolean = false;
var downPressed:Boolean = false;
var leftPressed:Boolean = false;
var rightPressed:Boolean = false;

movieClip_1.addEventListener(Event.ENTER_FRAME, fl_MoveInDirectionOfKey);
stage.addEventListener(KeyboardEvent.KEY_DOWN, fl_SetKeyPressed);
stage.addEventListener(KeyboardEvent.KEY_UP, fl_UnsetKeyPressed);

unction fl_MoveInDirectionOfKey(event:Event)
{
    if (upPressed)
    {
        movieClip_1.y -= 1;
    }
    if (downPressed)
    {
        movieClip_1.y += 1;
    }
    if (leftPressed)
    {
        movieClip_1.x -= 1;
    }
    if (rightPressed)
    {
        movieClip_1.x += 1;
        }
}

function fl_SetKeyPressed(event:KeyboardEvent):void
{
    switch (event.keyCode)
    {
        case Keyboard.UP:
        {
            upPressed = true;
            break;
        }
        case Keyboard.DOWN:
        {
            downPressed = true;
            break;
        }
        case Keyboard.LEFT:
        {
            leftPressed = true;
            break;
        }
        case Keyboard.RIGHT:
        {
            rightPressed = true;
            break;
        }
    }
}

• Frames
• Tweening
• Buttons
• Timeline Navigation (code Snippets)

New Areas

• Movie Clips

• Exporting as app

• Video

• Keyboard Controls

• Connecting with screen-based interactivity.

• Action script is the native language to animate.

• Motion tweets need to be group together and need to be a movie clip for this to work.

• Shape tween needs to be ungrouped and broken apart.

Blue = motion tween Green = shape tween

Motion tween can add a filter, that act over time. Such as shadow and blur. (some filter do not work on a HTML5 canvas)

Button, Create shape, then convert to symbols (there are three types of symbols ):

• Movie clip.
• Button
• Graphic

Double click the Botton on stage to editing within the stage. (Up-Over-Down-Hit)

• Adding functionality is vast for animate. Currently just using timeline navigation. But it's still very powerful. Looking at code snippets and can be simply added with drag and drop.

• Adobe animate tried to have an easy accessibility to start to create a simple animation.

MOVIE CLIPS

• Three types of symbols

  • Movie Clip
  • Button
  • Graphic

• Nesting Different timelines (using movie clips)

So therefore using the scene timeline with each frame as a different scene this can be done by nesting animation within a movie clip and so on. To have its own timeline. Creating many multiple different animation and movie clips. With a simple clean main timeline.

The graphic symbol is the last type. Code snippets cannot but used with graphic. Graphics symbol are linked with the scene timeline. And cannot be played independently from the timeline.

• Movie clip symbol are more powerful.

• Graphics take up less memory for smaller files sizes.

• Using the menu,

  • Create a new symbol.
  • Creates an object in the library,
  • starting from scratch with a new timeline in a new sketch and blank canvas, easy to create detailed objects.
  • But problems of the size of the canvas if not careful.

Publishing setup for Android more easier. iOS is linked to a developer account. Paid can use Test flight bets testing services.

With Android, you can create your own certificate (using same password when publishing)

Embed AIR Run Time player. To not have to install the app separate on the phone and everything is included together. (For example like installing flash player)

General is the output file Also will create SWF file and XML files.

In the publish page, here is where u can define icons. And best practice to upload in a different size to cover different sizes of Android systems.

Here is also when u specific permission soft an app. Giving authority to the app to use the system on a phone.

Creating Certificate is important to publish an application.

Always working with .fla file (adobe animate) When publishing depending on the type of document

• HTML5 - html or .js
• Actionscript3 - .swf
• Air for android (.apk)

And for iOS not sure - need to read more.

ActionScript Events.

Keypressed event

• This can be used to control commands in animation with any key or to progress animation.

• There is an event listener. In particular the key down. And when it hears the event it calls for the function.

• Keypress are seen as key code. So the keycode must be found to the corresponding key on the keyboard.

To import video

• File import video
• There are three different ways to do this.
  • Load as an external video with playback component (most useful- container to be played back)
• Embed fLV in the play timeline
• Embed h.264 video in the timeline (only useful for design and making animation with video)

First animation online app that was used to create animation espeically for online, originally it was lash based however this technology was less used and replaced with by HTML5.

html5 and javascript. Is the language used to create animation.

Adobe animate

• Canvas can be change int he properties panel.

• Properties pallete is contextual, depending on what is selected.

• Things inside the stage are visible animation.

• Things are placed with layers. Each object and item. (just as photoshop)

• Locking layers in useful to not interact with unwanted layers.

• HTML5 is only 2D (however with WebGl there are options to create 3D animation)

• Action script is 3D and you can manipulate items in space with code or keyframing.

There are three types insert in the timeline

• Frame

• Keyframe

• Blank Frame

  • A keyframe can be edited (properties)

• Tweening - Takes gapes between keyframes - smooth out the motion

• Must first convert to a symbol.

• There are three types

  • Movie Clip
  • Graphic Symbol
  • Button

• They can be seen as a building block. Containers that contain other parts

• Button has 4 different areas, Up, Over, Down and Hit. each can give its own animation movie clip for a different image.

• Add sound directly to the scene sketch wither can be linked to waiting for the instruction to play or play automatically. Depending on what you would like to achieve.

Using motion tween to create motion, Adobe animte will fill the motion between to keyframes instead of setting each frame on its own. Shape tween will more one shape to another over the desited time frame.

First Animation with HTML with adobe animate.

Arduino IDE syntax

/ slash making a comment line Used to annotate code -

Arduino sketch - designed for non programers

In setup Do stuff that's time insensitive or only needs doing once: for example

A. loading data B. Set pin as input.output

This information needs to be told one which pins need to be used.

The loop -This is things that need to be done constantly

Syntas: curly braces

{ } contains code and nest they need to be in pairs open and closed.

() Normal brackets are arguments,

Function call Events that can me user made or included within the software language.

Learning to the Code. A website to look at for coding simple graphics interfaced and game-like programmes that use Java. processing.org

can be used to communicate a verity of animation and video responses graphically. Such as Computer Drawn graphics animation.

Asing A Potentiometer and If statement to control an array of LED.

Controlling a DC motor

Asked to download soundplant free software the maps audio to keyboard keys

Mark Weiser 1991
“todays multimedia machine makes the computer screening a demanding focus of attention rather than fade into the background”

Core concepts: Ubiquitous computer Tangible computer Wearable computing Locative media Biodata

www.kobakant.at

Not just thinking about physical interaction but also mental interaction. The take of choices. This is important to draw people into giving at interaction a go.

The quality of experience:

Domains,

• Engagement - deliberate inadvertent
• Consistency - predictability / unpredictability
• Cursality completeness incompleteness

Create something with one interaction. One click - one interaction, one actual point for the audience.

• I-Pac Can be read like a normal computer but connect different type of switches. Ground all connected to one wire.= GND

Started to learn and work with simple interactiions, usuing buttoms, light sensors

Different swtich that can be used with the i-Pac

Important Note - switch has two different activation points, when button is press and when button is release. Depend where the wire is attached at the bottom.

Tilt switch.

Arduino introduction:

Open source hardware and software. Microprocessor. Easy to access code and information from the community. Someone has already done it before. So it is easy to find the similar code. It is user programmable. Come up with a new scenario.

• Projects of Arduino, Ex: petting zoo...

• Addicted products: the story of brad the Toaster.

Can be used to analuge input or output. Contoel servos or read data from sensors.

Can output power to control LEDs

Started looking at interactive media. Interactive installations. Games and other things that include interaction.

the simple workshop breif is as below.

Exploring Interactive Media – What are interactive media anyway?

Take a look at the following examples of interactive media and try to answer the questions below. These questions will start you thinking about what interactive media are or can be, why people make interactive work and the qualities that they have.

Surface Tension http://www.lozano-hemmer.com/surface_tension.php

Dark Pool http://www.cardiffmiller.com/artworks/inst/darkpool.html

The Cabinet of Curiousness http://www.cardiffmiller.com/artworks/inst/cabinet_of_curiousness.html

Emoto2012 http://emoto2012.org/

Neon Bible http://www.beonlineb.com/

The Wrench http://knifeandfork.org/thewrench/

Firestorm http://www.theguardian.com/world/interactive/2013/may/26/firestorm-bushfire-dunalley-holmes-family

Phone Story http://www.phonestory.org/

A way to go http://a-way-to-go.com/

Questions: • What is it? How would you describe it? How is it described? • How is it interactive? • Why is it interactive? • Are any of them more interactive than others? If so in what ways? • What do they all have in common?