Web Two - Winter 10

Blog Extra - Code For Changing Loader Content From A Button

2010-05-25T10:10:00.000-07:00

Once you have put a Loader on your page using the code from last time, you might well want change the loader content. This code shows you how to do that without too much complexity. Obviously you need to use your own instance names and x/y values.

//Hand code your Loader
var myURL:URLRequest = new URLRequest("_____.swf");
var myLoader:Loader = new Loader();
myLoader.load(myURL1);
myLoader.x = #;
myLoader.y = #;
addChild(myLoader);
//Set up a buttons on the stage or use existing buttons
//Give the buttons instance names - eg load1_btn
//Add an event listener to each button
load1_btn.addEventListener(MouseEvent.CLICK, changeLoad);
load2_btn.addEventListener(MouseEvent.CLICK, changeLoad);
load3_btn.addEventListener(MouseEvent.CLICK, changeLoad);

//Create function to handle CLICK event for all buttons
function changeLoad(evt:MouseEvent):void
{
   //Create conditional to address the clicked button
   if(evt.target == load1_btn )
   {
    //create URLRequest for new file
     var myURL1:URLRequest = new URLRequest("_____.swf");
    //load new file
     myLoader.load(myURL1);
   }
   //Create additional conditionals for each button
   if(evt.target == load2_btn )
   {
      var myURL2:URLRequest = new URLRequest("_____.swf");
      myLoader.load(myURL2);
   }
   if(evt.target == load3_btn )
   {
      var myURL3:URLRequest = new URLRequest("_____.swf");
      myLoader.load(myURL3);
   }
}

Update - A Successful Workshop

2010-04-25T08:14:00.000-07:00

Successful Workshop
For those that didn't attend on Friday, the workshop covered a lot of important ground with much of the focus on keeping a lean main timeline while building complex animation and interactivity behind the scenes.

This blog has moved

2010-04-24T14:58:00.001-07:00

This blog is now located at http://web2win10.blogspot.com/.
You will be automatically redirected in 30 seconds or you may click here.

For feed subscribers, please update your feed subscriptions to
http://web2win10.blogspot.com/feeds/posts/default.

Session 17 [Tues 090310] - Final Session & Requirements

2010-03-11T14:51:00.000-08:00

Final Requirements
This session you were tasked with compiling all your planning work and final components into a digital folder and hardcopy folio to be handed by latest Friday 120310 alongside any other outstanding work for earlier projects.

Attempts at the various techniques demonstrated in class - building the Flash Essentials navigation and component skinning in particular are anticipated in the final submittal.

Clearly there will not be time now to build a final Flash based application. It has been agreed that as long as all design elements that would enable a Flash developer to build the final app are provided then the job of the graphic designer will have been fulfilled.

Good luck on your final assessment this coming Friday and well done in taking part in this attempt to see whether such technically loaded classes such as Web 2 can be run as a Guided Study alongside such intense courses as Final Portfolio/ Senior Design.

Session 16 [Tues 020310] - Final Project Planning/ Skinning Video Components/ Animating With The Flash CS4 3D Tool

2010-03-02T14:07:00.000-08:00

Hi Sally, I'll keep this short and sweet.

Good session today. You really seem to be on top of things at the moment. Wonderful news.

I really look forward to your comps and storyboards honing the look and feel for your proposed site.

BTW - The Flash workshop has been cancelled for Friday, so any work will have to be sent via email or FTP.

See you soon.

Session 14/ 15 [Tues 230210] - Final Project Brief Review/ Mapping Out The User Experience/ Anticipating Tech Requirements/ Intro To Flash Components

2010-02-28T08:01:00.000-08:00

Final Project
Hi Sally. Thanks for the brief. It's pretty clear. There are a few omissions and alterations to make -

Give your brief a more relevant title, and a subtitle to act as a short, lucid, objective statement.

Your aims need rejigging to fulfil the required criteria for the Web2 course.

Your Practical aim actual counts as the Creative Ability criteria and should be changed to something like - To create a simple, eye-catching, and engaging flash application to promote a rock/ pop band.

The Technical aim fits the Technical Competence criteria partially - Good. However, re-phrase this to something like - To learn how to design in the Flash medium in collaboration with a developer, utilising existing After Effects skills.

Your Creative aim really fits with the Problem Analysis criteria. Change this to something like - To transfer a time-based visual language to an interactive platform enhancing the user experience.

Finally, a Presentation aim is required. Something like - To present the finished Flash product live with a folio of supporting planning work.

For the Intro you need, more importantly than any personal reasons, to justify why you are making this shell for an existing video - how is it appropriate to today's music marketplace and why it would be an effective tool in a band's promotional campaign.

Add something about utilising A/E skills into the mix.

Forget about the mind map component - not enough time - but I can still show you the drag/zoom technique.

In the Format section tell us what the size of the piece will be.

Finally, let's have some deadlines. We have two more Tuesday sessions. I will also be in on Friday 050310 for a Flash workshop. The final deadline needs to be Thursday 110310 at the latest. You will no doubt be using that day to prepare the finishing touches to your folio though.

Have a think about what you need to supply and when by this coming Tuesday where we can hone the deadlines further.

WHEW! See you Tuesday at 11:30am. Bring along any further work you have for the project. If you haven't managed to produce anything else, still come along for further instruction.

Session 12/ 13 [Fri 190210] - A Way Forward/ Using Flash Essentials Application For Final Project

2010-02-22T14:31:00.000-08:00

A Way Forward
An idea mooted in this session in support of your achieving the Web 2 technical competence and final project requirement was to use the Flash Essentials assignment to structure a small compendium of work made over the last year at AIU.

Your principal job would be to organise and style the content within an eye-catching, contemporary shell, skinned by yourself.

The flash functionality would be engineered by your technical assistant [lecturer/ instructor].

The site should act as proof of your flash capabilities for future job applications.

First Task
Create a set of documents that outline what you want to include and how it will be laid out, and how the user will interact with it, based on the Flash Essentials existing structure - text, image, video, sound, drag-zoom, feedback form.

Be comprehensive in your visualisation and annotation so you can account for the entire forthcoming application in session with your project manager [me].

Please achieve this for Friday next [260210] at 11:00am.

Finish your blog which can be used as the research aspect if you choose to submit the FE project in your final portfolio.

See you on Tuesday 230210 @ 11:00am as agreed.

Session 11 [Tues 160210] - Flash Essentials In Progress/ Finishing The Navigation Functionality

2010-02-22T14:25:00.000-08:00

The title lists what should have been covered this session.

Session 10 [Fri 120210] - Postponement of Instruction

2010-02-14T09:43:00.000-08:00

As there was no response to the Session9 post below, there was little point in supplying further information for this session. I await submittal of required work before spending more time on preparing session content.

This session should have seen us moving forward with the Flash Essentials site construction - the Text and Image pages need to be complete by Wednesday for us to have any hope of completing the task over the next two weeks.

Session 9 [Tues 090210] - Final Site Ideas/ Flash Essentials Set Up/ Following Blog Requirements Closely

2010-02-11T01:20:00.000-08:00

Homework
Hi Sally. Despite a failure to meet the requirements laid out in the previous blog entry we did have a successful session from a technical instruction POV. You seemed to take quite naturally to this unnatural coding activity.

Looking at the previous blog it is essential that you push your professionalism. There are clearly stated submit points that have not been met. So, following on from our work today and in reference to the requirements laid out in the previous blog -

Please let me know where I can view your final superbanner for grading and be sure to prepare an A3 folio of all relevant support work for the banner task for handing in next live session [Tues 160210 at 11:00pm]. Remember to use the branded planning template to present all work.

Write your brief for the final project and email a PDF, ASAP. Also, consolidate all your ideas into clear, client presentation boards using your planning template sheets. Stick these in your folio as well clearly demarking which project is which.

Write more blog entries and orientate the site choices towards helping you research for your own final work.

Download the Flash Essentials Page Shell file from the link to the right and use it as a guide to build your own Flash page shell for the Flashessentials task. In the ActionScript file can you try and add comments that explain what you think is happening at each stage of the code. We'll take a look at how you did next time.

Finally and optionally, you may have noticed the link to the Adobe Text Layout Component. This is an extensions that you can load for Flash that gives you more professional control over your type setting for those building with CS4 for Flash Player 10. Install this and find out how it works if you have time.

I'll try and put some more stuff up on the Flash Essentials task for Friday or over the weekend.
See you on Tuesday.

Session 8 [Fri 050210] - Banner Review/ Blog Review/ Major Project Discussion/ Pseudo Scene Movie Construction & The Related ActionScript

2010-02-07T02:38:00.000-08:00

Next Meeting
Next meeting is on Tuesday 090210 [Session 9] at 11:00am.

Final Project
Today we discussed your main project. While the discussions are interesting, I am somewhat concerned that you are not driving this ideas process.

You must, from a professional POV, get your ideas into a presentable format as if for a client. This means clear concepts and ideas on planning sheets that can be discussed individually by a review team. The ideas should be able to be understood quickly with little explanation.

We talked at a surface level about versatility and malleability and how they might be sold as positive characteristics in a fast calling card type Flash scenario. Please, for Tuesday, a written brief and evidence of early brainstorming around this concept is a must.

Submitting Final Super Banner
Thanks for your banner work.

Please finish the banner, with agreed changes, for viewing on Wednesday [100210] on a web page. Create a mock up of a Guardian web page with your banner in the usual advertisement spot. Make sure you're banner is wired to take the user to the related web site when clicked.

Put the page live and send me a link. To accompanying banner for grading purpose, please put all preparatory work, including initial ideas sheets, in an A3 plastic folio and submit on Tuesday.

Blog
Aim to finish the blog project over the next two weeks as part of your research for the final project.

Cause & Effect Animation Structure

The Main Timeline

The journeying_mc Timeline

The zeroGrowth_mc Timeline

We spent a lot of Friday's session looking at a new structure for your animations involving some fairly dense ActionScript code.

Primarily you saw how each act or scene of the animation could be contained in individual MovieClip Symbols. Each symbol could then be placed at a keyframe on the main timeline.

Labels are used to mark defined scene changes on the main timeline and the code does the work of getting the playhead to the appropriate place at the right time.

To make the code work you must give each MovieClip a addressable instance name in the Property Panel.

The Cause & Effect Code

stop();

   addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);

   function onLoop(evt:Event):void
   {
       if(journeying_mc.currentLabel == "end")
       {
           gotoAndStop("growth");
           zeroGrowth_mc.play();

           if(zeroGrowth_mc.currentLabel == "finish")
           {
                gotoAndStop("badge");
                trace(currentLabel);
                removeEventListener(Event.ENTER_FRAME, onLoop);
           }

        }
    }

Session 6/7 [Tues 020210/ Wed 030210] - Communication Breakdown

2010-02-04T11:07:00.000-08:00

Next meeting 4:00pm, Friday 050210.

Final Banner and an avalanche of main project ideas due.

The brief for the next exercise is now available to the right.

I have written a tentative shell of a final project brief which seems to set a realistic goal for the end of term and leave things open enough for whatever you might do. I will bring this with me tomorrow.

Session 5 [Wed 270110] - Superbanner Progress/ That Button Code/ Blog Structure/ Major Project

2010-01-26T09:22:00.000-08:00

Homework

Banner: Prepare and send me the artwork for your proposed banner by Wednesday [270110]. Be sure there are clear directions on how the art will move. Bare in mind the 30k limitation.
ActionScript: I highly recommend purchasing the iPhone/ iPod Touch App from the iTunes for Learning Actionscript AS3 and read the chapter on Timeline Control. This is the kind of code we will be handling next [I will bring the book in again on Friday].
Flash Blog: Once you have seen how to structure the blog entries, please format your current posts accordingly and I will read them for Friday.
Major Project: Loads of ideas for your upcoming main project in word association and sketch form for Friday. I will draw up an official brief on this for next week but it will certainly allow wide scope for your early thinking on the assignment.

Super Banner Progress
If you can, artwork your final idea as Photoshop Layer Comps for Wednesday. Layer Comps allow you to storyboard easily in the same Photoshop document, showing how your banner will animate.

Remember, where you can, use vector based art to save on memory.
I will analyse the artwork for motion for Friday's session.

Repeating Your First ActionScript [AS]
You need to apply the invisible overall button to yuor final banner. Here's the code to activate the button as promised -

var myURL:URLRequest = new URLRequest("http://…");

overall_btn.addEventListener(MouseEvent.CLICK,
onClick,false,0,true);

function onClick(evt:MouseEvent):void
    {
        navigateToURL(myURL);
    }

That's it. Next time we will look at timeline control with AS and look at home to extract the AS from the Fla file for future best practises.

Storming The Main Project
Important - You need to extend your thinking on the major project. Let's see some comprehensive brainstorming and some associated research. Your studio manager [me] is only looking for ideas in text and sketch form at the moment. Be sure to impress with the volume and quality of your ideas. Show off your creative abilities and offer some strong parameters for moving forward.

Session 4 [Fri 220110] - Creating An Invisible Button/ Activating Buttons With ActionScript/ Absolute Links With ActionScript/ Motion & Shape Tweening

2010-01-26T09:20:00.001-08:00

Session 3 [Tues 190110] - Main Project Ideas/ Flash Blog Written Assignment Brief/ Superbanner Update/ Flash Workshop/ ActionScript

2010-01-19T12:36:00.000-08:00

Hi Sally. A quick tally of what's going to happen in the weeks ahead.

Main Project
Recall that for Friday we need to be able to discuss some ideas for a major project site. Get storming!

Written Assignment
The brief for your assignment is available to the right. Please read carefully. Can you write a first analysis ASAP to test the water?Remember the key tenets of any web design project - Target Audience/ Content/ Navigation/ Technology/ Design.

Superbanner
I look forward to ideas on the green superbanner soon. Remember to keep the ideas simple. We can find some time during the workshop on Friday to discuss them and talk about a production strategy.

Flash Workshop
The Flash Workshop is on Friday [220110] from 2:00 - 6:30pm. The secret to getting Flash is to grab as much practical experience as possible alongside any reading you may be doing. Also, it is good to learn amongst your peers.

ActionScript 3.0
Get that ActionScript study going too. Read the first the first chapter of the Shupe book and formulate lots of questions for Friday. The chapter on Timeline Motion is where you should be headed as fast as you can! [If you want the copy I have, let me know and I can bring it in on Friday].

All the best,
James.

Session 2 [Fri 150110] - First Live Session/ The Design Process/ The Rudiments of Flash

2010-01-15T13:55:00.001-08:00

Hi Sally! A useful session today I think.

The Creative Process
It's important not to forget the process of designing as you handle what may seem a simple task like the Superbanner brief.

There is still research and brainstorming to be done on a set theme.

Your thinking and initial sketching on the subject should result in a range of ideas. These should be honed to three or four and a final choice made from these.

The final choice may be the first thought you had but it will be enriched by the supporting ideas. This is even more expected of a designer in an advertising context.

A simple search on Google will bring up a respectable list of Green organisations to aim your thinking at, from home composting to off-shore wind farms, and activists fighting for the rights of island dwellers and polar bears everywhere.

I look forward to your boards next week. Remember to prepare a template storyboard sheet with room for description, directions for animation, and timings where you can.

The Rudiments of Flash
We covered quite a lot of ground today. Armed with that insight and with recourse to the recommended books you should be able to pick it up a pace with your understanding of the Flash environment.

It will be interesting to see what you learnt next week in some actual practical examples. Make a note of whatever you wanted to do but weren't able to achieve so we can cover it the next time we meet.

What we covered today -

The Flash GUI, key panels, and Workspaces
Setting the Document Properties [Apple-J] including bgd colour, frame rate [18fps for the Banner]
When to use bitmap, when to use vectors
Comparing file size for bitmap and vector art
Symbol Types - Graphic, Button, MovieClip
Naming Protocols - one rule for the Library items - Symbols - and another for ActionScript-able Instances
Importing single layer bitmaps to the Stage/ Library
F8 - Convert To Symbol
Importing Layered PSD artwork to the Stage
Introducing Tweening Types - Classic [Frame by Frame/ Shape Tweening], Motion Tweening, and Inverse Kinematics
Working with a Motion Path in a Motion Tween
Editing the span and keyframes of the MotionTween Object on the Main Timeline
Introduction to the Motion Editor

Moving Forward
Three things need to be established alongside the banner project -

Defining your final assignment
Starting your analysis of Flash sites
Reading on ActionScript

So, in addition to your Superbanner work, watch the blog this week for the written/research assignment, start reading the Learning ActionScript for Beginners book, and interview your brains for ideas toward your main project.

I'm getting excited for you already!
See you soon,
James

Session 1 [Mon 110110] - Introduction/ Course Outline/ Briefing Project 2 Training Task - Superbanner

2010-01-08T04:10:00.001-08:00

Hi Sally. Welcome to Web Design 2, Guided Study.

The necessary 20 session time allocation for this course will be achieved by a mixture of blog sessions - where you will receive and query instructions - and live sessions, one to one - where you will receive training in Adobe Flash CS4.

In the live sessions you will also be able to discuss ideas and review developmental work.

Course Outline
Web 2 is a Flash-based course. Flash gives you an opportunity as a senior student to get acquainted with a beginner to intermediate level of scripting, in the service of motion and interactive graphics.

There are three significance parts to the course -

[PROJECT 1] There will be a main assignment component that might take the form of a promotional portfolio site or a site connected with a current senior design project. This major assignment lasts the entire term.
To prepare you for the final site build, there are two complementary training tasks.
- [PROJECT 2] The first training assignment is a simple animation/ interactivity task using Flash to create a banner ad formatted message.
- [PROJECT 4] The second training task is to build a Fla file resource, incorporating the key/common features found in most Flash sites.
[PROJECT 3] Finally, there will be a research assignment to be presented in the form of a web log involving analysis of existing Flash sites and sites related to your chosen main assignment subject.

Superbanner Brief [PROJECT 2]
We will kick off with the Banner Ad task. Please download and read carefully the Superbanner brief.

All instructions and deadlines are on the brief. Please comment via this blog or email me at jgosling@aiulondon.ac.uk

Additional Optional Resources For Project Two
A useful print resource for advertising related Flash and inspiration for this task is Creating flash Advertising [Jason Fincanon] from Focal Press. The current edition is for ActionScript 2.0 unfortunately. However, the information of planning, developing, and implementing banner ads is most useful.

A robust beginners guide to Flash Professional is the Visual QuickStart Guide [Ulrich] from Peachpit Press. If you get on with manuals you will find this a useful reference for your early Flash career and helpful as you build your banner and try to absorb the ideas and commands for Timeline/Stage based Flash development and motion control.

Next Session
Session2 will, weather willing, take place on Friday 150110.

Please don't hesitate to ask questions about the brief and the rest of the above information.

The official brief for PROJECT 1 will be available soon.