SYDNEY COLLEGE OF THE ARTS FILM AND DIGITAL ART STUDIO Master of Interactive & Digital Media MMDE5011

Interactive Media Practice Seminar 1 Semester 2 2010 > Thursday 10am - 1 pm Lecturer: Saima Ali Course Coordinator: Ryszard Dabek Kathryn Lewis Student Number 310263077

FINAL DOSSIER

CH 1- KatsKradle A Commercial website

Kats Kradle & Co. is a small company, which focuses on creating innovative learning packages which are supported by interactive simulations and digital media. The use of digital technology in education is not new and has grown in use through the development of the internet and increased bandwidth.

CH2- The Brief

The brief I am responding is the development of a commercial site, which acts as a presence to Showcase cutting edge eLearning design as well as broadcasting other services provided in interactive and digital media to support and develop new skills in an educational context. The content which was invisioned in the website as the companys profile is as follows:

Cutting edge (or close to as possible) animation and interactive designs. Digital media training Learning objects Showcase of innovative ideas for teaching with technology. Links of interest in teaching with technology and how to. Mission statement of Kats Kradle

Whitbread (2004) describes a good design as that which the organization of material communicates information to a selected person (the audience or receiver using the visual language most appropriate to that person, the information itself, and the information source or author (the sender). The logic behind this website was to support and broadcast services to Schools and Higher Education institutions in the use of digital media in their teaching, where pedagogical strategies are embedded in digital media to help support learning outcomes of students, teachers and lecturers. The company also provides training in the use of basic software as introduced in Rudds 2007 Digital Revolution (now in place in most schools).

In addition to the content of this project, the unit also requires certain features to be demonstrated for assessment, which are the following:

FTP understanding and using file transfer protocol. Add child function, reparenting, creating a dynamic navigation bar, creating a loader object Drag and drop interactivity Dynamic navigation bar Creating vector shapes with action script Creating preloaders using the loader object Drawing and masking using action script Controlling sound with AS Controlling video with AS.

CH3 - Project Concept - What is the idea behind your project?

I have been working in the area of eLearning in Higher Education the past 8 years and recently, starting to set out on my own with my son, (who is far better technically, than me). The motives for doing the site are to offer a variety of what I see as emerging areas in the industry and not being limited to one organization. There are so many new uses with technology in education to create new and engaging learning designs.

Influencing the ideas of the visual communication and layout of the website, Bauhaus artists and educationalists such as Kandinsky design elements are used. Kandinsky proposed a universal correspondence between three shapes and three primary colours. These shapes and colours where interpreted to represent moving from hot to cold, light to dark and active to passive and the connections involved. Kandinsky articulated a visual language through the concept of childhood art

These thoughts and expressions of critically understanding design were housed in the diverse coalition of the Bauhaus. Myself being an educationalist, the theorists of Pestalozzi, Rousseau and Froebel, were also a part of this house have always influence my thinking as in this website. All used visual modes such as drawing and play to engage childrens cognitive processes. .

Other creatives used to inspire my website who were part of the progressives are Paul Klee, who uses the pedagogical approaches of drawing with a grid and like Kandinsky, is inspired through childhood art such as Frobels work on Gifts and Occupation who used blocks to encourage sequencing and order.

Lastly, I have been agonizing over the typography and logo of the company and to come to any conceptual ideas behind the project, I needed to draw on research in the design of my company, i.e. how the website can reach the audience, support a concept and be visually engaging.

CH4- Design and Development

The design concept of the Kats Kradle website attempts to give specific information that a client would otherwise not find on an eLearning company site. For example, what is eLearning, how do people learn and how is learning assessed. There still remains the mystery of how deliver stimulating and engaging units for the complexity and diversity of students that lecturers and teachers now need to address. The design of the website attempts (attempted) to draw in educationalists through simple high impact, fun and entertainment graphics, as demonstrated in the presentation.

Figure 1

In this interactive branding of the site, the image of the Sydney Harbour Bridge become the symbol of Kats Kradle where pulls and pushes happen similar to the game of CatsCradle. One of the major challenges I faced was how to put the whole project together. For example, getting the buttons to link to other pages. Frame labels were introduced in one of the lecturers, however the AS files were in CS5, so when one practices at home,. Which is part of learning, the files would not open. If I get to the point of understanding the technical aspects and being able to navigate through Action Script, I feel the the branding of the website is suitable and can be supported with the

appropriate theory, namely Bauhaus. I have spent days trying to get aspects of the technical aspects of the design to work and continually scale down to simplicity, where even simple poses problems.

figure 2. Simple Site.

figure 3. Simple site2. The frustration keeps growing as there is no immediate feedback. The buttons worked but the action script would not link to the pages.

If I can ever get the site to work, the improvements would be in the branding of the company and the Logo, where I feel it is continually developing as I get a feel for the identity of the environment.

I think I am on the right track, however my son, who has done branded environment at Billy Blue declares it is too complicated. What is the structure of your project?

SERVICES & PRODUCTS

CONTACT US

ABOUT
US
Figure 3: structure

KATS
KRADL

The individual pages where originally designed with interesting graphics and overall theme to support the content. For example:

US

fig 4. KatsKradleTour

figure5. Background images The background image was to support the visual user in terms of reference of the Bauhaus community.

As I was also doing the Animation unit, which captured my imagination, I tried to use the interface of motion to engage the viewer into the site. At some stage of my development in interactive media, I would also like to have a social media site of exemplary animation creators as well as some of my own ideas and creations in animation.

The sound was difficult to develop as most of the free sites had limited sound of interest available. Garage Band is a fantastic medium, but again time to sit down and compose the feelings of the site needed certain moments of contemplation.

My favorite theme at the moment for some reason is snow and how something so delicate and composing perfection makes sound. I tried to find interesting pieces on this, which again time consuming.

Here are a few of the sounds I feel integrate with the site. Acoustic Guitar Gently Falling Snow Orchestral Piano Majestic Snowy Snowflakes in the Air 4.01

This music is not necessarily for buttons, but for play during viewing of products such as images. The music could also be used for the introductory animation of transport pulls and pushes across the bridge.

Approach to code
This could be an interesting study for a lecturer in how students take code on board, considering the unit is open to main campus students who are also doing digital communication with in some cases little knowledge of developing websites or other technical requirements. The teaching of using code in the classroom, from my in action research reflections are the following: The lecturer did not teach, but recited the code to us as students and we were to copy her at a very quick pace so there was no time to reflect or take the full learning of action script in. The tutor did not speak English and would hover over students, always helpful and willing to assist, but would not explain in English the logic of what we were doing. If too much time was spent with the tutor, the next stream of action script was missed. The layout of the computer labs were not effective for teaching. We faced away from the main screen and would need to keep turning around to see what the lecturer was writing. This made the learning difficult. In saying this, the tutor and lecturer are very competent in their understanding of action script and interactive media, yet the teaching at this stage is not apparent. Code was difficult also as the MMDE5011 website held AS5 files for copy, and we could not open them at home. The unit outline says that the files will be in AS3. Very frustrating when one wishes to do the exercises for the week. I could elaborate on my new understanding of using code, but . It is late..
Design elements of graphic images are hoped to be created throughout the web pages at some stage, as Graphic images of the project. They can be found as the symbols of the following: Ferry Butterfly Cocktoo Red car Bicycle Flying boat FIRST IDEA The tension of push and pull as in the cats cradle string game is similar to how

Bridge structures work.

LOGO - Jhan Miro

SECOND IDEA

The structure of the pages are found by linking with the drawn images on the interface which follow and lead into the outlined areas of:

Who we are: Photos bio ideas

What we do: Consultancy in design Educational support in technology Training in the use of media

Our products produce quality elearning products Create learning objects Simulations Animations Interactive Website design Logos

Our services Training in CS3/4 Web 2.0 School support Pedagogical design

Contact US email

Each area will be emphasized with an interactive drawn icon on the front interface, which links to a new page.

The use of Action Script to create roll overs and flash buttons will be utilized as much as possible to the users ability as well as the use of LIGHT Box a free downloadable AS3 which acts as a gallery for images.

The interface or main page, will attempt to be uncluttered yet visually interesting with the typography clearly targeted to schools. The use of text as a symbol structure to communicate the look and feel of the web page has been challenging. Initially, I was to use images purely to reach my audience, however looking further into the art works of Miro and Kindinsky, encouraged me to use text in a bold way. Miro in particular, uses script writing, which is colourful and messy, such as one, would find in childrens writing. I am attempting to use this in my website, however, I also need to be careful not to overdo the text which may detract from the images and the concept of kats kradle.

The use of sound will be basic created sounds of the guitar on GarageBand, which will hopefully come across as simple, clear almost Spanish classical music in feel, when entering into a page.

Movie clips of who we are will be filmed for the section Who we are and will highlight more about the personality of the designer rather than explain what we do. This will hopefully connect us as people to our audience.

The colors, as suggested by Kandinsky and Miro will be vivid primary colors. The colours and feel of Miro s water scene as suggested below will be used for the Sydney Harbour water.

Simple contrasting lines, with vivid colour will support the identification of the brand identity of Kats Kradle.

MORE REALITY Coding issues Using YouTube clips is dangerous, confusing and flawed with frustion as the outcome. Example 1: from gotoAndLearn website with up to date tutorials, except they are explaining scripting using Flash 8 and not AS3, which I attempted so many times until I realized, that You Tube is not a good method unless you can get a handle on the presentor and which version of AS they are using. Even then it is all different. Example presented as AS3. b1.onRollOut = out; b1.onRollOver = over; function over () { this.gotoAndPlay (2); } function out() { this.gotoAndPlay (7) ; } add event Listeners (MouseEvent, CLICK, b1; is much better as in class explained by Sam. LEARNING While Sam did give us this website to follow, YouTube clips are flawed.

CH5 Target Audience/Look and Feel/Site Design

The audience for this website is mainly from an educational perspective in schools and higher education. The look and feel presently is a dogs breakfast of bits of trying to understand action script and how to put the site together. The site design currently is in no particular order. When I further grasp the use of Action Script/PHP/Java Script etc, I will have an innovative site which will provide information to the education community and their interest in our services and products. Our clients will potentially use the site as a community of practice which will support ideas in teaching in the higher education sector as well as showcasing products. The current Look and Feel of this website is fragmented, and did not get on the server, still in the early stages of production. The colour choices, imagery and layout have been defined earlier in this paper, however the programming and use of Action Script was way beyond the authors ability at this time. I also feel that the unit is not taught for the diversity of students that the University encourage The Interface design is examined in other sections of this paper with screenshots of what is to come in the future of this project. At present, my site map is in bits of promising learning and I am proud of all the bits, well most of them. Cutting edge (or close to as possible) animation and interactive designs. Digital media training Learning objects Showcase of innovative ideas for teaching with technology. Links of interest in teaching with technology and how to. Mission statement of Kats Kradle

Unit outcomes FTP understanding and using file transfer protocol. Add child function, reparenting, creating a dynamic navigation bar, creating a loader object Drag and drop interactivity Dynamic navigation bar Creating vector shapes with action script Creating preloaders using the loader object Drawing and masking using action script Controlling sound with AS Controlling video with AS.

FTP understanding and using file transfer protocol

did not happen

Add child function, reparenting, creating a dynamic navigation bar, creating a loader object

Hmmm, wrong CS need 3 not 5.

Drag and drop interactivity

CS3

cutting Edge

Hmmm not yet

Digital Media Training

clips are available Need to be integrated with site.

Learning Objects

Many are created Need approval from institutions

Innovative Ideas

social media RSS feeders for links to what is new in eLearning to create a COP blog Digital media Showcase

Dynamic navigatio n bar

Next year

Creating vector shapes with action script

I think Flash automatica lly does this I have done many drawings

Controllin g sound with AS

Controllin g sound with AS

next year

Site map
Cutting edge (or close to as possible) animation and interactive designs. Digital media training Learning objects Showcase of innovative ideas for teaching with technology. Links of interest in teaching with technology and how to. Mission statement of Kats Kradle

APPENDIX References .