1. I found the video Peace Piece about learning a piano solo I have started learning a few years ago. I heard it on KUNI on a Sunday morning on the way to a volleyball banquet in January of 2002 or 2003? All I remember for sure is that the banquet was at the Holiday Inn in Cedar Falls. I am pretty sure it was before August of 2002 when I bought my first piano. http://clipnabber.com is linked from our class web page. Paste URL: paste the URL you got at youtube for the video into the ClipNabber Paste URL: textbox field. Nab Video button is the next step. The 3rd step at ClipNabber is to right-mouse button click on the FLV Download Link. Then Save Link As and be sure to give the file a meaningful name, and end the name with the suffix .flv such as PeacePiece.flv, for example. I named my video PeacePiece.flv. 2010 NOTE: It is easier now than it was in Fall of 2008! Save the Flash Video -- - FLV file from youtube that you Nabbed the Clip of to your Flash drive or hard drive in a folder where you will also be saving your .fla Flash project file and the .xml file, if you are doing CAPTIONING, which you are for the 810:022 assignment. ClipNabber will have as the File name: get_video which is NOT very descriptive. File name: PeacePiece.flv or NineInchNails.flv would be more descriptive examples. 2010 NOTE: CLIPNABBER now chooses a name for the file for you. Edit this name if its a long name with spaces in it, from the YouTube site. Better to avoid LOOOOOOOOONG names and SPACES if you want make things easier up on sunny.uni.edu web server. I chose PeacePiece.flv instead of Peace_Piece.flv because I don't like to use under_scores_if_I_can help it! 2. The Peace Piece video I nabbed from YouTube was 2 minutes 29 seconds long. It was 5.2 MB (MegaBytes). You do NOT want to do something that is very, very long to just learn Flash video concepts. 3. I saved PeacePiece.flv in a folder on my C: drive named PeacePiece. 4. Start up Flash and create a new Flash File (ActionScript 3.0). Save As in the same folder as you saved the .flv. I named my Flash authoring document file Peace.fla, but of course, Flash put the .fla extension on for me. I now have two files in my PeacePiece folder. Peace.fla and PeacePiece.flv. 5. Save a copy of captions.xml to this very same folder. It is easier to save a copy of the textbook's chapter 08 captions.xml file than to start a new one from scratch! You can get the captions.xml file from our c022.html web page link to the Chapter 08 example we looked at on 12/03/Wednesday lab. 2010 Note: captions.xml is available at: http://www.cs.uni.edu/~jacobson/022/chap08/ which is linked from our class web page and other pages about FLVPlayback and FLVPLaybackCaptionnig on our 022 web site. 6. Window menu, Components, Video and drag a copy of the FLVPlayback component to the Flash stage. Give it a meaningful name in the box, where you see the light gray placeholder in the Property Inspector window. (This is all in chapter 08!!!) I named mine pianoVideo for this example I am creating. 2010 Note: I have NEVER named my FLVPlayback component this fall. That is NOT required. 7. Switch to Parameters (Properties, Filters, Parameters) are the three tabs to choose from in the Property Inspector area below the stage. 2010 Note: This is not true now for Creative Suite 4 or for Creative Suite 5 Flash. CS 4 Flash: You need to use Component Inspector. CS 5 Flash: Just use the Property Inspector panel to set the source. The properties of the FLVPLayback or FLVPlaybackCaptioning component will be visible when it is the object that is selected. Set autoPlay to false if you want the user to have to click a button before they see the video, or leave it on true if you want the video to start when the web page loads. The book by Lowery is mistaken in telling you this in Chapter 08 and what they tell you to do in Dreamweaver DOES NOT WORK unless you set autoPlay in FLASH here to false. This is VIP!!!! Heed this error in the book and go with my correction when you do NOT want the video to play until the user decides to start it. 8. Choose the skin that you want. We chose SkinUnderAll.swf from the skin choices. This is clearly explained in Chapter 08 of Lowery. You need to know this for the final exam too, so study this chapter, read it, understand it, appreciate it. The book explains the skin choices quite well! Warning: You will need to UPLOAD the skin you chose to sunny.uni.edu or you will never get your Flash video to work the way you created it in Flash! 9. cuePoints is one of the Parameters. Ignore that for now. We might do that during the last week of class in the Wednesday last hands-on StudioIT 2 lab session. --------- Look at the cuePoints example on the class web page. Do not worry about understanding it. If you look at it and celebrate your confusion about it for 5 or 10 minutes, you will have travelled a few miles toward the destination of understanding it. When its presented in lab or in class, you will see it faster and understand it better if you look at it ahead of time and KNOW that NOT UNDERSTANDING IT is okay, and is a good thing. Think about it, makes guesses, speculate, sing a few of its words or its ActionScript code. Get out of your comfort zone, but be comfortable not understanding it yet, but don't run from confusion. Be there for 5 or 10 minutes. 10. Parameters has a source and you click on the magnifying glass to get the Content Path dialogue box. Then click on the folder icon to get the very famous Browse for FLV file dialogue box or window. You should be in the very folder you need to be if you saved your Flash document earlier to the same folder where your .flv Clip you Nabbed from youtube.com was saved. Choose it, close out of both dialogue boxes. I now see this: source peacePiece.flv in my Parameters for the pianoVideo FLVPlayback control. skin SkinUnderAll.swf source peacePiece.flv 11. Drag out the FLVPlaybackCaptioning component from the Components Panel. Do NOT place this on the stage. It can be off the Flash stage as its not an interface component the user ever sees anyway. flvPlaybackName pianoVideo source captions.xml source would be WHATEVER your .xml file is named. I am using the name that Chapter 08 of Lowery used for its example files and the lesson. source superRappinCaptions.xml would be a legal name too! You can leave captionTargetName on auto, which is the default. Just set these two Parameters flvPlaybackName and source pianoVideo captions.xml 12. On this example, I am NOT going to do the Modify > Document ... and then choose Match Contents to make the stage the exact same size as the FLVPlayback component. Since I chose a skin that is UNDER, i.e. SkinUnderAll.swf skin, if I did do the Match Contents in the Documents Properties dialog that is invoked by the Modify menu, Document... command, I would have to increase the HEIGHT of the stage, because the SKIN is not considered part of the Contents. The stage would only match the video and would not display the SKIN for the FLVPlayback! Very strange, but true. Lowery explains this fairly well. 13. After I do the Control menu > Test Movie command, the .swf file is automatically created. This is something that Lowery does NOT understand about Flash. We will talk about that next week. 14. We want to PUBLISH this movie and the Flash application now. File menu > Publish Settings ... Formats Make sure Flash (.swf) and HTML (.html) are both checked checkboxes. Flash leave this tab alone and on its defaults... HTML Template: Pull down this list and choose Flash Only - Allow Full Screen Template: Flash Only - Allow Full Screen Thanks to Calvin for pointing this out after class. The Chapter 08 example file for the exercise in the book has this setting of allowing full screen, which is how that book exercise works. YouTube videos are not special and preventing full screen after you ClipNabbed and downloaded the Flash you tube video! You just have to do an extra PUBLISH SETTINGS task so the HTML will allow it. Click Publish and the .html file is created and the .swf file is created again, which is not a big deal. Control > Test Movie created it earlier, so it really is NOT any different than the one you already had. The only reason we are doing publish is to get the .html file!!!! Lowery's book is great, but he does not understand this basic concept about how Flash works, as evidenced by the instructions he gives on page 218 or page 225. Very strange! 15. Open up the .html file with Dreamweaver, if you wish to add a TITLE or HR or headings or whatever to it, or change the BGCOLOR, etc. The color of the page is always the color of the stage. I am going to change the color of my page so it is different from the color of the stage, so you can see that my Flash stage was not made the exact same size as its content. --- 16. I am going to change my captions.xml file using either Notepad or using Dreamweaver to do it. 17. Now I need to upload all the files to my sunny.uni.edu account. I will put all of the files into a subdirectory (a folder) named flashVideo so they are easy to check and have their own location. I am not going to upload the Peace.fla file, however. That is not really needed on sunny.uni.edu, but the Peace.swf and Peace.html files are needed. As are the files you see below here in #18, with the output of the last ls -a command. ls means list files. -- - - 18. Note: sunny.uni.edu commands used: mkdir, cd, ls, ls -a bash-2.03$ mkdir flashVideo <------ make directory is mkdir - - --- bash-2.03$ cd flashVideo bash-2.03$ ls bash-2.03$ ls -a BEFORE THE UPLOAD . .. bash-2.03$ ls -a AFTER THE UPLOAD . Peace.html captions.xml .. Peace.swf peacePiece.flv AC_RunActiveContent.js SkinUnderAll.swf videoFiles.gif bash-2.03$ ls AC_RunActiveContent.js SkinUnderAll.swf videoFiles.gif Peace.html captions.xml Peace.swf peacePiece.flv