CSC206 Web Scripting (Flash Action Script) Fall 2008

Student Homepages
Assignment Summary
Assignment 1 - Setup CSC206 homepage
Assignment 2 - Map with rollover in/out buttons and messages,   Video with control buttions including 1 frame back or forward and titles and subtitles.
Assignment 3 - Flash slide show demonstrating shape and motion tweening, scrolling text and animated mask.
Assignment 4 - Animated button route system display. Collision detection story

• Classes: Room MO113, CSC101-01, 8:10 to 9:25 AM, CSC101-02, 9:35 to 10:50AM, CSC206 Flash Action Script, 11:00AM - 12:15PM
• Office Hours: Tuesday, Thursday 12:15 - 2:15 PM; Wednesday 11:00 -12 noon
• Texts:
• Flash CS3 Professional, Katherine Ulrich, Peachpit Press, 2007. ISBN-13:978-0-321-50291-9
• Flash CS3 Professional Advanced, Russell Chun, Peachpit Press, 2007.  ISBN-13:978-0-321-50303-9
• Required - PC headphones, a binder for class notes, USB flash drive for assignment backup and software downloads.
• Prerequisite:  CSC102 Programming in Basic or CSC152 Computer Programming 1
• Class attendance is required. Three unexcused absences, Maximum grade F.
• Grades:  (No credit for work more that one week late)                                                                                                                                                                                                                          
  • Midterm grade:  Weekly WebCT quiz/workbook 33% (The lowest grade will be dropped), Assignments  33%, Midterm exam 33%
  • 2ed Half grade: Weekly WebCT quiz/workbook 33% (The lowest grade will be dropped), Assignments  33%, Final exam 33%
  • Final grade: (Midterm grade + 2ed Half grade) /2
• A 10 minute webCT workbook/quiz will be given the first 10 minutes of class every Thursday.
• ALL material on your web pages that you have not created must be footnoted. Include the material's source link and the date. Grade penalty if you forget to do this.
• To correct systems problems call the SCSU help desk 392-5123 or email hlpdsk@southernct.edu

There will be a practice quiz on Thursday

Week 1 Startup

Assignment 1

• 1a. Set up your CSC206 homepage   t
  • Include a picture from http://www.southernct.edu/  or a similar site.
  • Add links to Assignment 2, 3, 4 etc..
  • Sample homepages
• 1b. Create a 20 frame step by step animation, include a background layer
  • Save the .fla file and the .swf file  File > Export > Export Movie. Name your Flash movie "Assignment1.swf"
    • Note: The F6 key creates a new keyframe.
  • Create an Assignment 1 page. Give it the title "CSC206 Assignment 1".
  • Add a link to your movie on your Assignment1 page.
•  1c. Add links to your Assignment 1 page to three sites that use Flash.
•  1d. Add a button that when pressed will start and your animation
  • Name layers Animation, Background, Button, Text, and Action
  • Get a prewritten button Window > Common Libraries > Buttons
  • Select a button
    • Example - Arcade button or Circle button, play
    • Add text “Animation started by an event”
  • Program the button –
    • on (press) {gotoAndPlay(2);}
    • Test, Debug
    • Export as movie
    • Add .swf file to your Week 1 Assignment page. Insert > Media > Flash
    • Animation with button example - Animation started by an event

•  

   

 

• Read
• Help > Dreamweaver Help> Dreamweaver Contents > Introduction
• Getting Started with Dreamweaver –
• Introduction
• Dreamweaver CS3 Help - http://livedocs.adobe.com/en_US/Dreamweaver/9.0/index.html
• Read - Working with Dreamweaver Sites - Setting up a Dreamweaver site

Assignment Notes

• Setting Up a Dreamweaver Site
  • Site>New Site
    • What would you like to name your site? - Answer - Any appropriate name  example: Mikes web site
    • What is the HTTP address? - Answer - http://home.southernct.edu/~your account name
  • > Next
    • Do you want to work with server technology?
    • Select "No I don't want to use server technology"
  • > Next
    • How do you want to work with your files during development? Select "Edit directly on server using local network"
    • Where do you want to store your files? Enter - .www
  • > Next
    • How do you connect to your remote server? Select Local/Network
    • What folder on your server do you want to store your files in? Enter - U:/www/
  • >Next
    • Do you want to enable checking in and checking out files....?  Select No
  • >Next
  • >Done

Dreamweaver Features

• Property Inspector  - Windows > Property Inspector
• Tables -
  • Insert > Table
  • Modify > Table
• Links - select the link name then enter link in Link example: http://www.ibm.com
• Lists - select the list, click unordered list button or the ordered list button or
• Working with images in Dreamweaver and Fireworks
  • To copy a screen press the "Print Screen" key
  • Paste the image into Fireworks
  • Crop and export the image that you wish to use  File > Export
  • In Dreamweaver Insert>Image
• Use Dreamweaver to create your CSC206 homepage named CSC206.htm
• If you do not already have one create your SCSU homepage Include on this page your name, a picture and a link to your homepage
• The address of your homepage is:
• http://home.southernct.edu/~your account.htm --- NOT - HTML
• If you have a SCSU homepage add a link to your CSC206 homepage.
• Check that your page works - View http://home.southernct.edu/~workmanr1/CSCStudentsFall2008.html Be sure that your link on this page works.
• Include on this page A heading with your name class and section
• A table similar to the course syllabus with Week number and date
• The names of the CSC206 assignments
• Enter your page title near the top of  the Dreamweaver window

• Practice Quiz  - Take the CSC206 Vista practice quiz  http://vista.southernct.edu

Homepage Notes

• Be sure to give your homepage and all other pages a Title.
• For your homepage create a table  with 9 rows and 4 columns - Insert > Table
• To change the color of the table select the table and use the Bg Color box to change the background color of the table
• To change the table Modify > Table and make changes such as merge  or split cells, and insert or delete rows or columns
• Include in the last row links to four sites that interest you

CSC206NotesF2008

Hurricane maps

http://hosted.ap.org/dynamic/files/specials/interactives/hurricanetracker07/index.html?SITE=YAHOO&SECTION=HOME

Flash example http://www.ynhh.org/ 

Sound - http://svt.se/hogafflahage/hogafflaHage_site/Kor/hestekor.swf - animation

http://home.southernct.edu/~workmanr1/FlashCollisionDetection.swf  

http://home.southernct.edu/~workmanr1/FlashTaco.swf

Slide Shows

http://www.honda.com/hondajet/?ef_id=1097:3:c_913fcb9c9f966e0808dd4cf73d0aa205_841615408:dtBkOUGvMUIAAHFGfiIAAAAD:20080303013951

http://home.southernct.edu/~workmanr1/FlashSlideShow.swf

Maps

• http://www.jetblue.com/wherewefly/
• http://www.southwest.com/travel_center/routemap_dyn.html?ref=wwf_fgn – Logic, options
• http://www.starwoodhotels.com/sheraton/index.html - Complex Animation, buttons with links
• http://www.flysas.com/Default.aspx?epslanguage=EN  - Drag and drop buttons
• http://www.siemreapairways.com/routemap/  Animated buttons
• http://www.directferries.co.uk/routes.htm - Animated routs
• http://www.ryanair.com/site/EN/dests.php?flash=chk&pos=HEAD – Mouse wheel control
• http://www.easyjet.com/EN/routemap/
• Not Flash - http://ctabustracker.com/bustime/map/displaymap.jsp

• Leona Lewis - http://www.leonalewismusic.co.uk/index.php/index
• Flo Rida - http://floridaraps.com/  Flash video
• Sara Bareilles - http://www.sarabmusic.com/  - loader, animation,
• Chris Brown - http://www.chrisbrownworld.com/  - video rollover
• ===============

IBM - http://www.ibm.com/us/

UTC - http://www.utc.com/

GE - http://www.ge.com/

Coke -  http://beijing2008.coke.com/explore.do?country=US&language=en

Pepsi - http://www.pepsi.com/

Not much Flash

 http://my.barackobama.com - http://www.gopconvention2008.com/default.aspx

http://www.microsoft.com/en/us/default.aspx - not flash, siverlight ?

Other:

http://aorta.yale.edu/pc_2.html

http://aorta.yale.edu/pc_3.html

http://aorta.yale.edu/pc_4.html

CSC206 Week2 - Graphics

Text highlights

 
Solid Colors and Gradients, transparency (alpha) p46 – 50
Stroke Attributes p 56-
Brush tool modes p71
Text Attributes p 84

Bounding box  p 111
Stacking Order p 153
Working with layers and folders p159-
Mask layers p 177-

Chapter 7 Symbols - Movie Clip, Buttons, Graphics p190

Symbol Instances p195

Color – Brightness -100 = black, +100= white  Tint  197

Transparency (Alpha)

• Message Map Example -  http://www.nhc.noaa.gov/ 
• CSC206 Example - http://home.southernct.edu/~workmanr1/FlashExamples.html
• Create a message

• Each message is a Movie Clip Symbol - Insert > Symbol > Movie Clip
• To view the Movie Clips - Window > Library

Messages are made invisible in Frame 1

this.message1._visible = false;
this.message2._visible = false;
//this.message3._visible = false;   // makes this line is a comment
stop();

When a button is rolled over the message is made visible

on (rollOver) {this.message2._visible = true;}
on (rollOut) {this.message1._visible = false;}

Assignment 2a - Rollover buttons and messages

        Use Flash graphics techniques to create a map (drawing) Add interactive buttons

• Create a “message map” with three message buttons
• At startup the messages are invisible
• For one button
  • When the  button is rolled over the message is made visible
  • When the button is rolled out the message is made invisible
• For another button retain the message
• Program a reset button to turn all the messages off
• Program a test button to turn all the messages on

Assignment 2b - Flash Video Example - CSC206FlashVideoTitles.fla

• Find a very short video on youTube
• Download it usinge  www.keepvid.com   -
• For eample download http://www.youtube.com/watch?v=zmiyhPop6GI&feature=related - This video shows how to do the Butterfly stroke and is 13 seconds long
• Save  as an .flv file (Low Quality)  Note that the video will be named “get_video” change this to a more meaning name ending with .flv also save the video in you .www directory.
• Test that the video works with Flash
• Open Flash
• Import > Import > Import Video
• Select Progressive download from a web server
• For skin select none.  We will add the buttons.  
• Test that your movie works
• Add a title to the movie using the Text Tool
• Add to subtitles to the movie about one third and two thirds of the way into the video
• Include Pause, Rewind, One frame advance, and One frame back buttons
• Export your work as a .swf file
• Add your video to your Week 2 assignment page.
• Download another very short video, import it into Flash, add a title and two subtitles.
• Sample button code: on (press) {gotoAndPlay(2);}
• If time
•  add slow and very slow motion buttons.

Sample videos = http://www.youtube.com/watch?v=kNF_EP3jQxQ&NR=1

http://www.youtube.com/watch?v=o6wNjXj7zGk&NR=1

Assignment Example - Flash Video With Titles - Flash Video With Titles.swf

=======================================================================

CSC206 Week 3


Frame-by-Frame Animations, Animation with Motion Tweening, Animation with Shape Tweening, More-Complex Animation


 

Keyframes 212-

Onion Skinning 234-

Frame Rate 238-

Filters 327-

 

Assignment 3  Example - Flash Slide Show .fla - Flash Slide Show.swf

Setup a Flash slideshow using Scene. Your first Flash page should contain a heading and titled buttons that link to a Scene.  The contents of each scene are described below. Each scene should include a return to scene 1 button.   Each scene See -  - for the sport that you should illustrate.

• Scene 1 - Heading, labeled links to other scenes. Use text filters for you name and course 327
• Scene 2 – Animation with motion tweening.  Create a two step bouncing object tweened animation using an object from your assigned sport. Also demonstrate changing color effects 247, changing size 248- , rotating and spinning 250-, moving graphics along a path 255,  changing tween speed 261  
• Scene 3 – Shape tweening  
• Scene 4 – Text written with the brush tool shape tweening into some other text. Example hate – love
• Scene 5 – Scrolling text using a mask 177- and motion tween. See – Dummy text generator Text generator – see  http://www.lipsum.com/ 
• Scene 6 – Animated mask with image background  321-

 

Example Flash Site - http://www.icoke.ca/home/index!en

 

 Slide Show
Button Code Scene 1- on (release) {gotoAndPlay("Scene 2",1);}

Button Code to return to Scene 1 - on (press) {gotoAndStop("Scene 1",1);}

To create a new scene – Insert > Scene

 

 

---

Flash Tutorial Help

 

Google “Flash buttons” tutorial – 41,000 hits

 

http://www.google.com/search?q=%22Flash+buttons%22+tutorial&ie=utf-8&oe=utf-8&aq=t&rls=com.google:en-US:official&client=firefox-a

 

Google “Flash Buttons”  323,000 hits

 

http://www.google.com/search?q=Flash+buttons&ie=utf-8&oe=utf-8&aq=t&rls=com.google:en-US:official&client=firefox-a

 

http://www.killersites.com/ - sample videos – http://www.killersites.com/videoTutorials/FlashTutorial/flash/lasso.html -

http://www.killersites.com/videoTutorials/FlashTutorial/flash/buttons.html

 

 

 http://www.smartwebby.com/flash/advanced_buttons.asp

---

CSC206 Week4 Interactivity Chapters 12, 13

 

Assignment 4

• Create three animated buttons that display a “route system” in the over state. See -- ---- http://www.directferries.co.uk/routes.htm
• Create three frames that contain information about a city
• Write ActionScript 3 code that when the button is clicked displays the appropriate frame see - http://www.easyjet.com/EN/routemap/ 
• Also create a button that when clicked goes back to Frame 1
• Add an appropriate background

 

Sample Code - CSC206MouseEvent3   - CSC206MouseEvent3.swf

 

Animated buttons examples - http://www.jetblue.com/wherewejet/ -  http://www.directferries.co.uk/routes.htm

http://svt.se/hogafflahage/hogafflaHage_site/Kor/hestekor.swf 

Flash Button Tutorial - http://www.echoecho.com/flashbuttons.htm

 

Prewritten Flash Buttons - http://www.flashvortex.com/ 

Free additional Flash buttons – Freeware - http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=179510

Other sites with Flash contentLeona Lewis - http://www.leonalewismusic.co.uk/index.php/index
Flo Rida - http://floridaraps.com/  -Sara Bareilles - http://www.sarabmusic.com/  - Chris Brown - http://www.chrisbrownworld.com/

 

• Quiz Topics
• Button States 336  Hit State
• Animated Buttons 344
• Prewritten buttons – Window > Common Libraries > Buttons
• Exercise p368 Frame Actions
• Comments 370
• ActionScript Syntex 371 .  ;  :  :    {}  ()  []
• The Anatomy of a MouseEvent 378
• Scripting for Interactivity379
• Instance Names and Code Hints 380
• If Statement 381
• Functions 382
• Mouse Events 393



Event Handling Code Example – see Text  367-386

 

Events – CLICK and MOUSE_OVER

Action – nextFrame(), prevFrame()

 

To make Flash respond to a user interaction (event)

• register to receive the event
• handle the event

 

stop();

 

//  The code inside the function parentheses tells where the event comes from (pEvent)  and what kind of event it is (Mouse Event)

 

function handleClickForward( pEvent:MouseEvent):void

{

            if( pEvent.target == nextFrameButton )

{

            nextFrame();     // handle the event

            }

}

//Register Events

nextFrameButton.addEventListener(

            MouseEvent.CLICK, handleClickForward);

nextFrameButton.addEventListener(

            MouseEvent.MOUSE_OVER, handleClickForward );

//=============================================

 

function handleClickPrevious( pEvent:MouseEvent):void

{

            if( pEvent.target == backButtonNew )

{         

prevFrame();  // handle the event

}

}  

//Register Events

backButtonNew.addEventListener(

            MouseEvent.CLICK, handleClickPrevious ).

---

 

Week 4 Thursday Drag amd Drop Colission Detection

Assignment 4b Create a tiny colission detection story Flash movie

 

Drag and Drop 236Adv

Collision Detection 240Adv

 

Collision Detection .fla  -  Collision Detection.swf

 

stop();

//Drag and Drop

function startDragging (myevent:MouseEvent):void

{

                BlueFish.startDrag();

}

//===================================================236 Adv

function stopDragging (myevent:MouseEvent):void

{

                BlueFish.stopDrag();

}

BlueFish.addEventListener (      MouseEvent.MOUSE_DOWN, startDragging);                                                                    

//===================================================

BlueFish.addEventListener (      MouseEvent.MOUSE_UP, stopDragging);                                                                             

//====Collision Test

stage.addEventListener(Event.ENTER_FRAME, detectCollision); //run at Frame rate

function detectCollision(myevent:Event):void{

                    if (BlueFish.hitTestObject(Hook)==true) {BlueFish.nextFrame();

        }

}

==============================

CSC206 Week 5 CS3

Assignments 1, 2, 3, 4, 5 Due Tuesday October 7, In-class exam Thursday October 9

Week5 Assignment – Create a Flash movie with the following features.

1. Text message
1. Display a message written in a program (today.text = “-----“;
2. Change the property of a message written on the stage to visible=false
3. Change the property of a message written on the stage to visible=true
2. Display the starting location of an object (convert a number to a string)
3. Drag and Drop Functionality
1. Make an object drag and drop ready
2. Add an event listener to start drag MOUSE_DOWN       
3. Add an event listener to stop drag MOUSE_UP
4. Code ENTER_FRAME event (execute collision detection function)
1. Display current object x and y location
2. Check for collision (hitTestObject)
5. If the object crosses a specified line
1. Display warning message
2. Play an object safety instructional video

Assignment and Test 1 Checklist

Week
1	Setup CSC206 homepage, site management, table, links, images, background image
2	Map with rollover in/out buttons and messages,   Video with control buttons including 1 frame back or forward and titles and subtitles.	(ActionScript 2)
3	Flash slide show demonstrating shape and motion tweening, scrolling text and animated mask.	(ActionScript 2)
4	Animated button route system display. Collision detection story	(ActionScript 3)
5	Text messages, Object location display, ENTER_FRAME event, background sound, video	(ActionScript 3)

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','700','height','400','src','CSC206DDColisionDetectionSoundVideo2','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','CSC206DDColisionDetectionSoundVideo2' ); //end AC code

ColisionDetection Sound and Video.fla

stop();
today.text = "Program written of October 3, 2008";
this.WarningMessage.visible = false;
// Display fish starting location
xloc.text = this.BlueFish.x.toString();
yloc.text = this.BlueFish.y.toString();
//Drag and Drop
function startDragging (myevent:MouseEvent):void
{
                BlueFish.startDrag();
}
//===================================================
function stopDragging (myevent:MouseEvent):void
{
                BlueFish.stopDrag();
}
BlueFish.addEventListener (     MouseEvent.MOUSE_DOWN, startDragging);                                                  
//===================================================
BlueFish.addEventListener (     MouseEvent.MOUSE_UP, stopDragging);                                                           
//
stage.addEventListener(Event.ENTER_FRAME, detectCollision);
function detectCollision(myevent:Event):void
// Where is the fish? x is the horizontal location property , y is the vertical location property

{xloc.text = this.BlueFish.x.toString();
                                yloc.text = this.BlueFish.y.toString();
// Did the fish get caught?
                    if (BlueFish.hitTestObject(Hook)==true) {BlueFish.nextFrame();  }
// Is the fish in danger? Display warning message, play educational video
                                if (BlueFish.x <= 350) {WarningMessage.visible = true; gotoAndPlay(10);       }