I used to attend the Santa Monica Church in Los Angeles and heard a version of Our Lord's Prayer that had this basic melody and chords at the beginning. It enchanted me. I can't find a recording of it anywhere. So I've sketched out here what I remember, with some of my own embellishments up until "And forgive us our trespasses" at which point I'm freestyling with my own chords and interpretation. But I think it makes a nice melodic-mnemonic for learning the Our Father. (My apologies to the original composers of the melody and chords.)
(G) (Em)
2.1 "Our Father, ( "Our Father) who art in Heaven" ( who art in Heaven")
(C) (Am) (F) (D7)
2.2 "Hallowed be thy Name"
(G)
2.3 "Thy kingdom come" (Thy kingdom come)
(Em) (C) (Cm) (D7) (G)
2.4 "Thy will be done, (Thy will be done)on earth as it is in heaven"
(Gmaj7) (Em7)
2.5 "Give us this day our daily bread" (Give us this day our daily bread)
(C) (D)
2.6 "And forgive us our trespasses,,,,,,,,,,,,,,,
(Bm) (Em) (F) (D7)
as we forgive those that trespass..... against us"........
(G) (Em)
2.7 "And lead us not (and lead us not) into temptation"
(C)
2.8 "But deliver us from evil" (Lord deliver us from evil),,,
(A7)
2.9 "For thine is the kingdom, (For thine is the kingdom)
(C) (Cm)
and the power, and the glory,
(Am) (D7) (Eb) (Cm/F) (G)
for ever and ever. Amen "
Dienstag, 18. November 2008
Donnerstag, 13. November 2008
Tools for flash
I wanted to be able to create an animation in Flash MX 2004 where the sun rises and sets over a graph showing TOU (Time of Use). To guide the animation I wanted to draw an arc as a path. But the pen tool doesn't seem to work like it does in photshop, so for the life of me I couldn't figure out how to do it.
Fortunately, Ric Ewing over at Adobe created some free Action Script Tools that will do the trick and posted them for all of us free to use here:
http://www.adobe.com/devnet/flash/articles/adv_draw_methods.html
To create the sun:
From http://www.axialis.com/tutorials/tutorial-misc001.html
Fortunately, Ric Ewing over at Adobe created some free Action Script Tools that will do the trick and posted them for all of us free to use here:
http://www.adobe.com/devnet/flash/articles/adv_draw_methods.html
To create the sun:
From http://www.axialis.com/tutorials/tutorial-misc001.html
Create a Transparent Image using Adobe PhotoShop®
To be able to duplicate layers and delete empty frames these Macromedia Flash Extensions are key (note you have to download Macromedia Extension Manager 1.6 for Flash MX 2004).
http://www.flashguru.co.uk/category/flash/extensions
To be able to duplicate layers and delete empty frames these Macromedia Flash Extensions are key (note you have to download Macromedia Extension Manager 1.6 for Flash MX 2004).
http://www.flashguru.co.uk/category/flash/extensions
Dienstag, 11. November 2008
Building a dynamic tool for input of solar energy economic variables
I've always been inspired by SimCity and The Sims, and wondered how we could use these "games" for more important work -- particularly the design of "Solar Cities". Inspired by the folks at Digital Urban, I tried my hand at building a virtual Egyptian Darb Al Ahmar community in the "Oblivion" Game Engine and then placing solar panels on a couple of the roofs there.
You can see my results below:
and
.
I also tried my hand at using Google Sketchup to create a tutorial for how to adjust our solar hot water system on the Zabaleen school in Muqattam:
Then I discovered Metroquest , the first serious SimCity oriented planning tool.
While it isn't a 3D virtual reality tool, it does a great job of helping planners create future scenarios for evaluation by stakeholders. There are fascinating examples of its use in Yellowknife
and Niagra that you can work through to see how effective the tool is.
The question now is, how do we develop a similar tool for Solar CITIES?
Flash MX may hold part of the answer, so we will start here.
One of the great features of MetroQuest is their use of sliders as input mechanisms. I have long argued (and most recently do so in my Ph.D. thesis) that urban planning should be like mixing a song, working to achieve a harmonious balance of all the elements that make living in cities worthwhile and desirable. My postmodern professor Ed Soja at UCLA, author of "Thirdspace", challenged us to move beyond the binary logic of "either/or" and into the hybridity friendly thirdspace of "both-and". But he cautioned that both-and was not liscence to simply mash everything up.
Coming from a music industry background, I was always comfortable with both-and, finding that the way to achieve beauty was through the proper mix. I have worked on enough mixing boards over the years to appreciate the subtlety and importance of "faders", tweaking the amount of bass and drums and synth pads and vocals until something great came out of the mix.
So when developing a tool to help calculate the costs and infrastructure parameters of effective solar energy set-ups, I knew one of the first tasks I would have to undertake would be figuring out how to create and use faders in Flash.
Fortunately, http://www.maximized.co.uk/flashintro/slider1.html has a great little tutorial with the necessary code in it.
I'll reproduce the code here; for the tutorial click the link above.
Open this Button Movie Clip for editing, select the button symbol that is embedded in it, then add the following Actionscript code to the button:
Go back to the main Timeline and select the Button Movie Clip. Add the following Actionscript code to the Button Movie Clip:
They say at the end of the tutorial: " To get the button to do something, look back at the second section of code you added - any code you place in the section marked // execute this code will be executed while the slider is being dragged.
One thing you should try is to use the slider to control the volume of a music clip. Create a sound object and set it to play continuously. Add a slider to your Flash movie and add code so that it will alter the volume of the sound when it is dragged. Hint: the slider can move up and down in a range of 100 pixels. Sound volume has a range of zero (lowest volume) to 100 (highest volume)."
So that is a great start!
But if you are a non-programmer like me, you have no idea how to build the code to add functionality. Fortunately there are some other great tutorials, like this one from http://www.kirupa.com/developer/mx/slider.htm
The relevant code is:
this.ratio=0 ;
dragger.onPress=function(){
this.startDrag(true,0,0,line._width,0);
this.onEnterFrame=function(){
ratio=Math.round(this._x) ;
}
}
dragger.onRelease=dragger.onReleaseOutside=stopDrag;
or this:
this.ratio=0 ;
dragger.onPress=function(){
this.startDrag(true,0,0,line._width,0);
this.onEnterFrame=function(){
ratio=Math.round(this._x*100/line._width) ;
}
}
dragger.onRelease=dragger.onReleaseOutside=stopDrag;
Now we can use the slider to output ratios from 1 to 100, great for percents!
GET URL
One thing we want to be able to do in the program is to make us of the California Solar Initiative Incentive Calculator found at http://www.csi-epbb.com/. So we need to create a button in flash that calls that website.
The simple action to attach to the button is
on(release){getURL("http://www.csi-epbb.com/");
}
(You can find functions like "getURL" by clicking on the + sign under actions at opening "Global Functions" and then "Browser/Network". Make sure you put them after the on(release) command.)
The only problem is that though the .swf launches a browser when testing on your desktop, when you upload the .swf to a website and click on the button it launches the url in the same window. This can be a hassle if you are doing on-line training as we are and you want the user to be able to simultaneously view the flash document AND the website the URL reffered to.
What to do?
According to ShawnJC:
"Something you all might be interested. I've been using similar javascript to open windows for some time now, but recently have found out that the new SP2 upgrade for windows XP will install a pop-up blocker by default that blocks a window opened with javascript from a signal from Flash even though it is a user inituated click. I've been trying different things and found that the only way I can get a window to open with Flash that the XP pop-up blocker won't block is with the basic GETURL ("website","_blank") method. So anyway, might wanna test that out if you plan on using Flash and Javascript to open windows..."
So now my code reads: on(release){getURL("http://www.csi-epbb.com/", "_blank");
} and it works great!
But wait, there's more!
The only dissatisfaction I have with using the "_blank" command is that I often already have too many tabs open on my browser (I use Firefox, and I LOVE the new tab feature, but for keeping people involved in a web-based training program it can be distracting to have to keep clicking on different tabs wondering where on the far right of the screen that particular browser window went!) So I want to be able to open the url in a new window (like a popup).
The code to do that is found here: http://www.actionscript.org/resources/articles/22/1/Pop-Up-window-within-flash/Page1.html
The basic idea is that you replace on(release){getURL("http://www.csi-epbb.com/", "_blank");
} with a piece of Java Script that looks like this:
on (release) {
getURL ("javascript:openNewWindow('http://www.csi-epbb.com/','thewin','height=600,width=800,toolbar=yes,scrollbars=yes');");
}
Note that instead of using double quotes in the javascript you use single quote marks. You can decide if you want the user to have toolbar access (so they can use the window you created to go elsewhere) or scrollbars. I set them to yes because I like giving people freedom. Vive la liberte! You can also set the height and width. I like my pop-ups fairly large but not overwhelming.
All fine and good; it works with the .swf file. What about opening applications, like Google Earth?
Opening Applications
Here I encountered a lot of problems. Seems that somebody created a flash virus once upon a time and so, to protect users from these, the way flash handles functions that call .exe files has been changed.
But an explanation of how to run files is found here:
http://www.northcode.com/blog.php/2007/08/07/Conquering-FSCommand-EXEC-Part-1-Proxy
What I learned to do is to create a folder called "fscommand" in the folder that contains my .fla source file and my .swf.
Inside that folder I used notepad to create a text document that held this text:
"C:\Program Files\Google\Google Earth\googleearth.exe" (because that is where Google Earth is on my computer)
I saved the file and then changed the extension from .txt to .bat. I called the file "openGoogleEarth.bat". When I click on it I notice it launches a DOS command window and then launches the program. All fine and good.
Then, in flash, in my action script for the button I put the following:
on(release) {
fscommand("exec", "openGoogleEarth.bat");
}
I notice when I test the movie it does nothing. But if I PUBLISH the movie as a Windows Projector (an .EXE file) as well as an .swf (you find these options under File/Publish Settings) the windows projector will let me launch Google Earth with that button. The .swf file, however, does nothing.
I also downloaded a nice little app called proxy.exe that hides the black DOS box. The trick there was to place "proxy.exe" in the fscommand folder and then rename it "openGoogleEarth.exe" (or whatever name your bat file has.Then IT calls the .bat file which then calls the program. (You can get better instructions here: http://www.northcode.com/blog.php/2007/08/07/Conquering-FSCommand-EXEC-Part-1-Proxy)
Thanks to a Swedish forum user named j0h@nB we get the following advice:
1. A.swf has to be an exe-file, that is, export it as a Flash projector (A.exe)
2. B.exe has to reside in subfolder fscommand. So, if A.exe is saved in folder C:\somefolder\, then B.exe has to be saved in C:\somefolder\fscommand
3. You should then be able to use fscommand to execute B.exe as follows...
What about opening files on Macs as well as PCs?
I turned to this website, http://www.northcode.com/ , for the following advice for how to prepare for cross platform functionality:
Northcode says the following:
"If you want to be a little smarter about it you can replace the fscommand exec calls with something like my SmartExec function below.
SmartExec will figure out what platform it's running on and launch the correct helper to open the target file. The trick is to give your helper applications names that are similar to the file you're trying to open.
thefile.pdf - name of the file you want to open
thefile.exe - EXE helper app that opens thefile.pdf on Windows
thefile_script - AppleScript the opens thefile.pdf on the Mac
Now to open thefile.pdf you just put SmartExec("thefile"); in your button release events and SmartExec figures out which application to run based on the platform and the helper application does all the work.
There's an article on my blog "Conquering FSCommand EXEC Part 1 : Proxy" that describes how to use a free tool I created and BAT files to open files on a Windows system. If you're using Flash CS3 then you'll also want to have a look at this article FSCommand EXEC is Broken in Flash CS3.
On the Mac, you would use a compiled AppleScript instead of the BAT file and EXE combination. Like the Windows solution you'll need an AppleScript for each file that you want to open. You can use this script as a tempate.
I cut and paste Northcode's SmartExec function into my actions layer and tested it on the PC and it seems to work great. Thanks Northcode!
You can see my results below:
and
.
I also tried my hand at using Google Sketchup to create a tutorial for how to adjust our solar hot water system on the Zabaleen school in Muqattam:
Then I discovered Metroquest , the first serious SimCity oriented planning tool.
While it isn't a 3D virtual reality tool, it does a great job of helping planners create future scenarios for evaluation by stakeholders. There are fascinating examples of its use in Yellowknife
and Niagra that you can work through to see how effective the tool is.
The question now is, how do we develop a similar tool for Solar CITIES?
Flash MX may hold part of the answer, so we will start here.
One of the great features of MetroQuest is their use of sliders as input mechanisms. I have long argued (and most recently do so in my Ph.D. thesis) that urban planning should be like mixing a song, working to achieve a harmonious balance of all the elements that make living in cities worthwhile and desirable. My postmodern professor Ed Soja at UCLA, author of "Thirdspace", challenged us to move beyond the binary logic of "either/or" and into the hybridity friendly thirdspace of "both-and". But he cautioned that both-and was not liscence to simply mash everything up.
Coming from a music industry background, I was always comfortable with both-and, finding that the way to achieve beauty was through the proper mix. I have worked on enough mixing boards over the years to appreciate the subtlety and importance of "faders", tweaking the amount of bass and drums and synth pads and vocals until something great came out of the mix.
So when developing a tool to help calculate the costs and infrastructure parameters of effective solar energy set-ups, I knew one of the first tasks I would have to undertake would be figuring out how to create and use faders in Flash.
Fortunately, http://www.maximized.co.uk/flashintro/slider1.html has a great little tutorial with the necessary code in it.
I'll reproduce the code here; for the tutorial click the link above.
on (press) {
startDrag("", false, left, top, right, bottom);
dragging = true;
}
on (release, releaseOutside) {
stopDrag();
dragging = false;
}
onClipEvent (load) {
top = _y;
bottom = top + 100;
left = _x;
right = _x;
}
onClipEvent (enterFrame) {
if (dragging == true) {
// execute this code
}
}
They say at the end of the tutorial: " To get the button to do something, look back at the second section of code you added - any code you place in the section marked // execute this code will be executed while the slider is being dragged.
One thing you should try is to use the slider to control the volume of a music clip. Create a sound object and set it to play continuously. Add a slider to your Flash movie and add code so that it will alter the volume of the sound when it is dragged. Hint: the slider can move up and down in a range of 100 pixels. Sound volume has a range of zero (lowest volume) to 100 (highest volume)."
So that is a great start!
But if you are a non-programmer like me, you have no idea how to build the code to add functionality. Fortunately there are some other great tutorials, like this one from http://www.kirupa.com/developer/mx/slider.htm
The relevant code is:
this.ratio=0 ;
dragger.onPress=function(){
this.startDrag(true,0,0,line._width,0);
this.onEnterFrame=function(){
ratio=Math.round(this._x) ;
}
}
dragger.onRelease=dragger.onReleaseOutside=stopDrag;
or this:
this.ratio=0 ;
dragger.onPress=function(){
this.startDrag(true,0,0,line._width,0);
this.onEnterFrame=function(){
ratio=Math.round(this._x*100/line._width) ;
}
}
dragger.onRelease=dragger.onReleaseOutside=stopDrag;
Now we can use the slider to output ratios from 1 to 100, great for percents!
GET URL
One thing we want to be able to do in the program is to make us of the California Solar Initiative Incentive Calculator found at http://www.csi-epbb.com/. So we need to create a button in flash that calls that website.
The simple action to attach to the button is
on(release){getURL("http://www.csi-epbb.com/");
}
(You can find functions like "getURL" by clicking on the + sign under actions at opening "Global Functions" and then "Browser/Network". Make sure you put them after the on(release) command.)
The only problem is that though the .swf launches a browser when testing on your desktop, when you upload the .swf to a website and click on the button it launches the url in the same window. This can be a hassle if you are doing on-line training as we are and you want the user to be able to simultaneously view the flash document AND the website the URL reffered to.
What to do?
According to ShawnJC:
"Something you all might be interested. I've been using similar javascript to open windows for some time now, but recently have found out that the new SP2 upgrade for windows XP will install a pop-up blocker by default that blocks a window opened with javascript from a signal from Flash even though it is a user inituated click. I've been trying different things and found that the only way I can get a window to open with Flash that the XP pop-up blocker won't block is with the basic GETURL ("website","_blank") method. So anyway, might wanna test that out if you plan on using Flash and Javascript to open windows..."
So now my code reads: on(release){getURL("http://www.csi-epbb.com/", "_blank");
} and it works great!
But wait, there's more!
The only dissatisfaction I have with using the "_blank" command is that I often already have too many tabs open on my browser (I use Firefox, and I LOVE the new tab feature, but for keeping people involved in a web-based training program it can be distracting to have to keep clicking on different tabs wondering where on the far right of the screen that particular browser window went!) So I want to be able to open the url in a new window (like a popup).
The code to do that is found here: http://www.actionscript.org/resources/articles/22/1/Pop-Up-window-within-flash/Page1.html
The basic idea is that you replace on(release){getURL("http://www.csi-epbb.com/", "_blank");
} with a piece of Java Script that looks like this:
on (release) {
getURL ("javascript:openNewWindow('http://www.csi-epbb.com/','thewin','height=600,width=800,toolbar=yes,scrollbars=yes');");
}
Note that instead of using double quotes in the javascript you use single quote marks. You can decide if you want the user to have toolbar access (so they can use the window you created to go elsewhere) or scrollbars. I set them to yes because I like giving people freedom. Vive la liberte! You can also set the height and width. I like my pop-ups fairly large but not overwhelming.
All fine and good; it works with the .swf file. What about opening applications, like Google Earth?
Opening Applications
Here I encountered a lot of problems. Seems that somebody created a flash virus once upon a time and so, to protect users from these, the way flash handles functions that call .exe files has been changed.
But an explanation of how to run files is found here:
http://www.northcode.com/blog.php/2007/08/07/Conquering-FSCommand-EXEC-Part-1-Proxy
What I learned to do is to create a folder called "fscommand" in the folder that contains my .fla source file and my .swf.
Inside that folder I used notepad to create a text document that held this text:
"C:\Program Files\Google\Google Earth\googleearth.exe" (because that is where Google Earth is on my computer)
I saved the file and then changed the extension from .txt to .bat. I called the file "openGoogleEarth.bat". When I click on it I notice it launches a DOS command window and then launches the program. All fine and good.
Then, in flash, in my action script for the button I put the following:
on(release) {
fscommand("exec", "openGoogleEarth.bat");
}
I notice when I test the movie it does nothing. But if I PUBLISH the movie as a Windows Projector (an .EXE file) as well as an .swf (you find these options under File/Publish Settings) the windows projector will let me launch Google Earth with that button. The .swf file, however, does nothing.
I also downloaded a nice little app called proxy.exe that hides the black DOS box. The trick there was to place "proxy.exe" in the fscommand folder and then rename it "openGoogleEarth.exe" (or whatever name your bat file has.Then IT calls the .bat file which then calls the program. (You can get better instructions here: http://www.northcode.com/blog.php/2007/08/07/Conquering-FSCommand-EXEC-Part-1-Proxy)
Thanks to a Swedish forum user named j0h@nB we get the following advice:
1. A.swf has to be an exe-file, that is, export it as a Flash projector (A.exe)
2. B.exe has to reside in subfolder fscommand. So, if A.exe is saved in folder C:\somefolder\, then B.exe has to be saved in C:\somefolder\fscommand
3. You should then be able to use fscommand to execute B.exe as follows...
Code:
on(release){
fscommand("exec","B.exe");
}What about opening files on Macs as well as PCs?
I turned to this website, http://www.northcode.com/ , for the following advice for how to prepare for cross platform functionality:
Northcode says the following:
"If you want to be a little smarter about it you can replace the fscommand exec calls with something like my SmartExec function below.
SmartExec will figure out what platform it's running on and launch the correct helper to open the target file. The trick is to give your helper applications names that are similar to the file you're trying to open.
thefile.pdf - name of the file you want to open
thefile.exe - EXE helper app that opens thefile.pdf on Windows
thefile_script - AppleScript the opens thefile.pdf on the Mac
Now to open thefile.pdf you just put SmartExec("thefile"); in your button release events and SmartExec figures out which application to run based on the platform and the helper application does all the work.
Code:
function SmartExec(target)
{
platform = substring(getVersion(), 1,3);
if (platform == "WIN")
{
// we're running on Windows, target an EXE file
fscommand("exec", target + ".exe");
}
else
{
// we're running on a MAC, target an AppleScript file
fscommand("exec", target + "_script");
}
}On the Mac, you would use a compiled AppleScript instead of the BAT file and EXE combination. Like the Windows solution you'll need an AppleScript for each file that you want to open. You can use this script as a tempate.
Code:
--set the name of the file to open
property fileName : "thefile.pdf"
--get the path to the containing folder
set myPath to (path to me as string)
set AppleScript's text item delimiters to ":"
set the parentFolder to ¬
((text items 1 thru -2 of myPath) & "") as string
set AppleScript's text item delimiters to ""
-- find the file and open it
try
set targetFile to alias (the parentFolder & fileName)
on error
--ie if there's no file here by this name, it will quit.
return quit
end try
tell application "Finder"
open file targetFile
end tellI cut and paste Northcode's SmartExec function into my actions layer and tested it on the PC and it seems to work great. Thanks Northcode!
Using Flash MX 2004 to create educational materials
Frank DiMassa Utility Consulting has hired me again to work out in California creating educational materials to help us realize the dream of the "million solar roofs" initiative and to aid in water and energy conservation efforts.
Because the materials we are creating are destined for web training, but budgets are tight, we are working with Flash MX 2004 (a.k.a. "Flash 6") and Dreamweaver (though we create our videos in Final Cut Pro).
As Flash has a steep learning curve (particularly when you are a non-programmer and are working with Action Script) I have decided to post my notes here in this blog post instead of on my physical pad-o-paper notepad (remember pencils and pens and paper?). This way others can benefit from our climb up the learning curve and we can access our notes wherever we happen to be in the world without having to carry a suitcase full of paper!
Step 1: Converting .mov files to .flv files.
Since we begin our process by creating our video segments in FC Pro on a Mac, but do our Flash creation on a Windows XP machine, we should start this lesson by exporting from Final Cut to a Quicktime Movie (.mov). Those files are big -- a 3 minute video takes up nearly 600 MB. We pop that onto a USB stick and carry it over to the PC and copy it into our Flash Video folder. Now we have to turn it into a Sorenson compressed .flv file for use in our web presentation.
A hunt through the user forums revealed this from editorX:
"hi, it´s possible to create .flv in MX2004.
import the chosen movie (embedded) in the flash library. select the movie in the library and then right-click on it. select properties and then export in the appearing dialogue."
Once you do that, you will notice that while the .mov file is now in your library, the .flv file you just created isn't. Don't panic. It should be in the same folder as the .mov file on your hard drive, but it must be now imported into your project library.
How do you use a video in flash?
"Basically, it's like a Graphic symbol because the timeline where the video resides needs enough frames to accommodate the entire duration." says UltraShock Tutorials (a great site to go to to learn all about working with video in flash).
They also say,
"Remember that because Flash compresses the audio at publish time, it's best to only import .flvs with little or no audio compression and adjust Flash's audio compression settings through the publish settings. (to avoid generation loss due to recompression)."
If you don't have Flash MX Pro, there are other ways -- free ways -- to convert .mov files to .flv files:
You can download a free media converter, called Quick Media Converter, here:
http://quick-media-converter.en.softonic.com/download#pathbar
Inserting an entire column of frames (shifting all frames in all layers to the right):
If you want to add frames and extend the timeline for all existing layers accordingly, you merely select the column of frames of all layers at the chosen point in the timeline and F5 them
"Note: Flash has two ways to delete frames - Clear Keyframe and Remove Frames. They're a little confusing. The way to figure out which one to use is to ask yourself why you want to eliminate a frame.
If you want to eliminate a frame because you want to reduce the length of the movie, then select a frame, and choose Edit > Timeline > Remove Frames, or Shift-F5.
If you want to remove the status of a keyframe (and therefore, its content), and keep the movie the same length, then select a keyframe or blank keyframe and choose Modify > Timeline > Clear Keyframe (or hold down the mouse and select Clear Keyframe from the menu).
Clear Keyframe changes a keyframe or a blank keyframe into an in-between keyframe. It removes the content it contained. The new in-between frame displays the content of the previous keyframe."
Other helpful notes:
Before you can specify values in Action Script you need to give each text field an instance name in Property Inspectior
Componenets -- movie clips that add advanced functionality without you having to know advanced Action Script.
To labe a Button component: Go to Property Inspector, parameters tab - Label.
Event handler "Handling Events" in Action Scripts
Reference Guide Help
A Button Component has its own timeline. In Timeline hierarchy, component time line is the child of the main timeline. Point to the parent: _parent.
Set audio to 192 kbps
Embedding video: a video over 16000 frames will not sync properly and audio quality suffers. But it is more interactive.
Expand the timeline so all frames are displayed!
"You'll have to provide your own controller for an embedded movie; flash components (and their skins) won't work".
Upload of main swf to server -- unlike uploading streaming video, main swf is the only file to worry about.
Need Flash's video encoder.
Recommended against using scenes; use framelabels instead.
on(release) {
gotoAndStop("scene2", 1);
}
is not ideal. Don't use scene names, just the UNIQUE frame labels and add _root to your path.
Like this:
on(release) {
_root.gotoAndPlay("frame-label");
}
test the scene using (ctl-alt-enter).
DON'T USE SCENES!
"Scenes are an evil kludge created to destroy the minds for otherwise sane flash developers and newbies alike. They are just a way of hiding frame numbers to try and make flash movies more human readable that fails utterly." wrote one flash user on a forum. I agree.
Helpful action scripts for beginners:
The following little scripts are your friend for buttons that go back a frame or advance a frame:
on(release) {
prevFrame( );
}
on(release) {
nextFrame( );
}
My preferred method, if you are going to use the same buttons over and over on every frame, is to attach this action script NOT to the button, but place it in a layer you call "Action Script". If you name the instance of the buttons you can use this function:
this.forward_btn.onRelease = function( ) {
nextFrame( );
}
and
this.back_btn.onRelease = function( ) {
prevFrame( );
}
on(release) {
if(_currentframe = = 1) {
gotoAndStop(10);
} else {
prevFrame ( ) ;
}
The conceptual basics:
Movie Clip is similar to Graphics object on the surface but can be used to create entire animations that can be dragged onto the main movie. Animations created as graphics objects simply loop over and over, but you can control movie objects completely.
How I finally got the Media Clip to play:
To get my .flv to play and be interactive, so that I could pause it for the instructional moment and then continue, I first created a mediaclip to embed in one of the frames of my presentation. Then I double clicked on that clip to open its own timeline and created a buttons layer in that timeline and a video layer. I dragged the .flv into the video layer and then created enough frames in the buttons layer to cover all the frames that were in my video layer. Then I created my start and stop buttons and my frame advance and previous frame buttons in that layer. I called them play_btn, stop_btn, prevframe_btn and nextframe_btn.
Rather than attach an action script to the buttons themselves, I created an actionscript layer in the mediaclip timeline, again with enough frames to cover the whole .flv. Then I only had to type in the following code once:
this.play_btn.onRelease = function() {
play();
}
this.stop_btn.onRelease = function() {
stop();
}
this.prevframe_btn.onRelease = function() {
_root.gotoAndPlay(1);
}
this.nextframe_btn.onRelease = function() {
_root.gotoAndPlay(4);
}
Note that "_root" is necessary in order to have the button take us out of the media clip timeline and back into the scene's timeline.
Using the Component Inspector
It took me a while to find the component inspector after I added the Media Component. Now I know where it is: Look in the Properties window after selecting the media component. There should be a button that says "Launch Component Inspector" under text saying "This component's parameters must be edited using the Component Inspector". You should then see two tabs on the right: Properties and Parameters. Click on Parameters.
Because the materials we are creating are destined for web training, but budgets are tight, we are working with Flash MX 2004 (a.k.a. "Flash 6") and Dreamweaver (though we create our videos in Final Cut Pro).
As Flash has a steep learning curve (particularly when you are a non-programmer and are working with Action Script) I have decided to post my notes here in this blog post instead of on my physical pad-o-paper notepad (remember pencils and pens and paper?). This way others can benefit from our climb up the learning curve and we can access our notes wherever we happen to be in the world without having to carry a suitcase full of paper!
Step 1: Converting .mov files to .flv files.
Since we begin our process by creating our video segments in FC Pro on a Mac, but do our Flash creation on a Windows XP machine, we should start this lesson by exporting from Final Cut to a Quicktime Movie (.mov). Those files are big -- a 3 minute video takes up nearly 600 MB. We pop that onto a USB stick and carry it over to the PC and copy it into our Flash Video folder. Now we have to turn it into a Sorenson compressed .flv file for use in our web presentation.
A hunt through the user forums revealed this from editorX:
"hi, it´s possible to create .flv in MX2004.
import the chosen movie (embedded) in the flash library. select the movie in the library and then right-click on it. select properties and then export in the appearing dialogue."
Once you do that, you will notice that while the .mov file is now in your library, the .flv file you just created isn't. Don't panic. It should be in the same folder as the .mov file on your hard drive, but it must be now imported into your project library.
How do you use a video in flash?
"Basically, it's like a Graphic symbol because the timeline where the video resides needs enough frames to accommodate the entire duration." says UltraShock Tutorials (a great site to go to to learn all about working with video in flash).
They also say,
"Remember that because Flash compresses the audio at publish time, it's best to only import .flvs with little or no audio compression and adjust Flash's audio compression settings through the publish settings. (to avoid generation loss due to recompression)."
If you don't have Flash MX Pro, there are other ways -- free ways -- to convert .mov files to .flv files:
You can download a free media converter, called Quick Media Converter, here:
http://quick-media-converter.en.softonic.com/download#pathbar
Inserting an entire column of frames (shifting all frames in all layers to the right):
If you want to add frames and extend the timeline for all existing layers accordingly, you merely select the column of frames of all layers at the chosen point in the timeline and F5 them
How to Delete Frames
(from http://multimedia.journalism.berkeley.edu/tutorials/webdesign/flash/frames/)"Note: Flash has two ways to delete frames - Clear Keyframe and Remove Frames. They're a little confusing. The way to figure out which one to use is to ask yourself why you want to eliminate a frame.
If you want to eliminate a frame because you want to reduce the length of the movie, then select a frame, and choose Edit > Timeline > Remove Frames, or Shift-F5.
If you want to remove the status of a keyframe (and therefore, its content), and keep the movie the same length, then select a keyframe or blank keyframe and choose Modify > Timeline > Clear Keyframe (or hold down the mouse and select Clear Keyframe from the menu).
Clear Keyframe changes a keyframe or a blank keyframe into an in-between keyframe. It removes the content it contained. The new in-between frame displays the content of the previous keyframe."
Other helpful notes:
- Motion Tween only works on symbols
- F8 converts to symbol
- F6 inserts a new keyframe
- F5 inserts a frame (and can carry over information from the previous frame)
- ctl-enter is used to view motion
- to advance by a frame use the "." key, to go back a frame use the "," key.
Before you can specify values in Action Script you need to give each text field an instance name in Property Inspectior
Componenets -- movie clips that add advanced functionality without you having to know advanced Action Script.
To labe a Button component: Go to Property Inspector, parameters tab - Label.
Event handler "Handling Events" in Action Scripts
Reference Guide Help
A Button Component has its own timeline. In Timeline hierarchy, component time line is the child of the main timeline. Point to the parent: _parent.
Set audio to 192 kbps
Embedding video: a video over 16000 frames will not sync properly and audio quality suffers. But it is more interactive.
Expand the timeline so all frames are displayed!
"You'll have to provide your own controller for an embedded movie; flash components (and their skins) won't work".
Upload of main swf to server -- unlike uploading streaming video, main swf is the only file to worry about.
Need Flash's video encoder.
Recommended against using scenes; use framelabels instead.
on(release) {
gotoAndStop("scene2", 1);
}
is not ideal. Don't use scene names, just the UNIQUE frame labels and add _root to your path.
Like this:
on(release) {
_root.gotoAndPlay("frame-label");
}
test the scene using (ctl-alt-enter).
DON'T USE SCENES!
"Scenes are an evil kludge created to destroy the minds for otherwise sane flash developers and newbies alike. They are just a way of hiding frame numbers to try and make flash movies more human readable that fails utterly." wrote one flash user on a forum. I agree.
Helpful action scripts for beginners:
The following little scripts are your friend for buttons that go back a frame or advance a frame:
on(release) {
prevFrame( );
}
on(release) {
nextFrame( );
}
My preferred method, if you are going to use the same buttons over and over on every frame, is to attach this action script NOT to the button, but place it in a layer you call "Action Script". If you name the instance of the buttons you can use this function:
this.forward_btn.onRelease = function( ) {
nextFrame( );
}
and
this.back_btn.onRelease = function( ) {
prevFrame( );
}
on(release) {
if(_currentframe = = 1) {
gotoAndStop(10);
} else {
prevFrame ( ) ;
}
The conceptual basics:
- Graphics objects
- Button objects - normal, mouse-over, click, target
- Movie Clip
Movie Clip is similar to Graphics object on the surface but can be used to create entire animations that can be dragged onto the main movie. Animations created as graphics objects simply loop over and over, but you can control movie objects completely.
How I finally got the Media Clip to play:
To get my .flv to play and be interactive, so that I could pause it for the instructional moment and then continue, I first created a mediaclip to embed in one of the frames of my presentation. Then I double clicked on that clip to open its own timeline and created a buttons layer in that timeline and a video layer. I dragged the .flv into the video layer and then created enough frames in the buttons layer to cover all the frames that were in my video layer. Then I created my start and stop buttons and my frame advance and previous frame buttons in that layer. I called them play_btn, stop_btn, prevframe_btn and nextframe_btn.
Rather than attach an action script to the buttons themselves, I created an actionscript layer in the mediaclip timeline, again with enough frames to cover the whole .flv. Then I only had to type in the following code once:
this.play_btn.onRelease = function() {
play();
}
this.stop_btn.onRelease = function() {
stop();
}
this.prevframe_btn.onRelease = function() {
_root.gotoAndPlay(1);
}
this.nextframe_btn.onRelease = function() {
_root.gotoAndPlay(4);
}
Note that "_root" is necessary in order to have the button take us out of the media clip timeline and back into the scene's timeline.
Using the Component Inspector
It took me a while to find the component inspector after I added the Media Component. Now I know where it is: Look in the Properties window after selecting the media component. There should be a button that says "Launch Component Inspector" under text saying "This component's parameters must be edited using the Component Inspector". You should then see two tabs on the right: Properties and Parameters. Click on Parameters.
Abonnieren
Posts (Atom)