Class, please follow these guidelines when turning in your final projects:
1. Put your .fla and .swf files in my dropbox on the adga server
2. Post your .swf and .html files on your public website, and post a link to the files as a comment on the class blog. If you are unsure how to do this please see me.
You must both turn in your files to me in class and post them online to get full credit.
Class,
I will be in Room 1102 tomorrow, Thursday, May 16th, from 8am – 1:00pm. If you need help with your final project, please come! First come, first served, so come early to make sure you get time with me.
Also, most of the computers in 1102 have CS 5 instead of 5.5, so if you have been using 5.5, remember to save your files down.
There are a number of different ways you can play audio through Flash, each has it’s advantages and disadvantages.
In order to play an audio file from the library, you have to give it a class name. Control or right click on the file name in the library and open the file properties. On the sound properties panel, click the “Advanced” Button in the bottom right of the panel. In the section that opens up, click the “Export for Actionscript” and “Export in Frame 1″ boxes, and give the file a class name. The name of the audio file will automatically get filled in, but you should change this, having the extension in the name will cause problems.
Now you must create a new instance of this sound in your code, using the class name that you set above:
var track:myTrack = new myTrack();
This won’t automatically start the sound playing, however, you have to tell it to play:
track.play();
If you want to stop the sound, things become a little more complicated, as the stop method is actually part of a different object – the SoundChannel class. So you’ll need an instance of this, and you will need to assign that channel to the playback of your file:
var channel:SoundChannel = new SoundChannel( ); channel = track.play(); channel.stop();
This still isn’t the most ideal way to play audio, however, because the audio file becomes part of the .swf and adds to the file size and download time. Any audio file that is more than a few seconds, you should load into the .swf much in the same way that we did with images.
This works similarly to the library example, except that we load the sound into a blank generic sound object, using the URLRequest object to hold the value of the audio file name:
var track:Sound = new Sound(); var request:URLRequest = new URLRequest(filename.mp3); track.load(req);
Flash has several options for adding video to your project.
Flash supports it’s own FLV Video formats as well as Quicktime movies that are H264 encoded. There is a list of supported codes here.
There is also a good article about using H264 video here
You can also convert just about any video format to FLV using Adobe Media Encoder, which is included with Flash Professional. Generally speaking, using FLV in your Flash applications is going to be a smaller file, and better looking and functioning experiences for the user.
However, in order to play an FLV video, you need to create a .swf to act as a player. There are two ways you can play video through a .swf, either by importing it to the Timeline / Library, or using a video component or ActionScript to load in an external file.
I can’t stress enough that you should only use very short video that has no audio track with this method. Video will significantly increase the size of your .swf and load times and this method has serious audio sync issues.
Under the File > Import menu is an Import Video option. When you choose this, you will see the following dialog:
To use video directly in the timeline, choose the “Embed FLV in SWF and play in timeline” option. Note the warning! Also note that you can launch Adobe Media Encoder right from here.
Next choose the embedding method. You can choose to place the embedded video directly on a layer of the timeline, or as a movieclip or graphic symbol.
Loading video from an external file is a much preferred method, and Flash makes it easy. Choose the “Load external video file with playback component” option from the Import Video panel instead, or you can also drag a FLVPlayback component from the Components (Window > Components) panel directly to the stage:
Under the Video Folder you’ll see several playback component options, as well as the individual elements of the playback component. Drag the component to the stage to add it to the Timeline and your Library.
You can set the appearance and source video of the playback component in the Properties Panel:
Because the FLV video must be embedded in a swf player, it has the same platform limitations as any application that uses the Flash Player (ie – no iOS devices). So, if all you need is video playback within a Web site, consider these options:
Next week your designs are due, and we will have an all-class work session.
I will be moving my office hours to Thursday for the remainder of the semester. I will be available in room 1102, Thursday 11:30 – 12:30. Please take advantage of this time as we near the end of the semester!
There are methods for dynamically manipulating the properties of text fields with code, but this requires understanding the different types of text in Flash. I’m going to tell you about both types today, but I recommend that you use Classic Text as the TLF engine remains buggy.
Pre-CS5, there was only one kind of text framework in Flash, what is now referred to as “Classic Text”. If you are using a CS4, this is the kind of text you will be using. If you are making an AS2 application, you will also use Classic Text. Other than that, you will probably want to stick to TLF text, although remember that you will be limited to OpenType and TrueType fonts.
When you are working with dynamic text of any kind, and using anything besides standard Web fonts, you need to “embed” the font in your Flash file. Otherwise, if the viewer doesn’t have that font installed, they will see a system default font. To embed a font, select the text field and click the embed button in the Character section of the properties panel.
In the Font Embedding panel that pops up, you name give the font a name and choose which characters to embed with your file. When you embed a font, it increases the file size of your swf, so you should only embed the characters you need. I usually choose Basic Latin to cover the bases but not load more characters than I need.
All dynamic text fields have a property called “text” that holds the, well, text.
To access the current text in a text field:
myTextField.text;
To set the text of the text field:
myTextField.text = "some other text";
Make sure you put the text in double quotes!
You can respond to a user pressing and releasing key on the keyboard just as you can with mouse events. These are called keyboard events. There are two events you can listen for KEY_DOWN and KEY_UP:
//Keyboard Event Listens addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
These events include the information about what key was pressed. This comes in two forms, the keyCode and the charCode. Each of these are numbers that are mapped to characters, but they are a little bit different from each other – a key code value represents a particular key on the keyboard (the 1 on a keypad is different than the 1 in the top row, but the key that generates “1” and the key that generates “!” are the same key) and the character value represents a particular character (the R and r characters are different). Which one you will use will depend on what you are using it for.
function onKeyDown(evt:KeyboardEvent):void {
trace("onKeyDown: " + evt.keyCode);
trace("ctrlKey: " + evt.ctrlKey);
trace("keyLocation: " + evt.keyLocation);
trace("shiftKey: " + evt.shiftKey);
trace("altKey: " + evt.altKey);
}
function onKeyUp(evt:KeyboardEvent):void {
trace("keyUpHandler: " + evt.keyCode);
}
Now, this doesn’t do you much good if you don’t know what numbers correspond to what keys, there’s a list on this page.
A focus event happens when an a user switches between one object and another … like clicking in a text field. You set these up just like any other event, with a listener and a handler.
Using what you learned about text fields today, make a “MadLib” where a user types in words on one screen, and then reads the Madlib on the next. It should function something like this, although you don’t need as many words to input (10 should do it) and you don’t need the “send” functionality.
Take your process flow and turn everything that is represented there into a fully designed interface for each step represented there. Design these in whatever tool you are most comfortable with (Photoshop, Illustrator, Flash itself, a combination) but turn the storyboards into a single PDF that you will present to the class in two weeks. You should be able to fully walk us through the functionality of your Flash application with these storyboards. They should represent the near final design of your application. The more time you put into this step, the more time you will have for animation and coding. You are going to need it!
The enter frame event is triggered every time that the movie enters a frame:
//create the enter frame event
addEventListener(Event.ENTER_FRAME,onEnterFrame;
function onEnterFrame(evt:Event) {
//do something
}
This comes in handy when you want to use code to move an object across the stage!
You can also trigger an event based on an interval of time passing, with a Timer event:
//create the new timer and set the delay and the number of repetitions
var myTimer:Timer = new Timer(1000, 5);
//add the event listeners to handle the timer events when it is detected
myTimer.addEventListener(TimerEvent.TIMER, onTimer);
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
//start the timer
myTimer.start();
//run this function when the TIMER event fires
function onTimer(evt:TimerEvent) {
//do something
trace("Ding!");
}
//run this function when the timer COMPLETE event fires
function onTimerComplete(evt:TimerEvent) {
//do something
trace("All done");
}
Any named movieclip instance on the stage can be made “draggable” with the startDrag( ) method.
myObject.startDrag();
Usually this is triggered with an event listener on the MOUSE_DOWN event on the instance. Once startDrag is called, the object will follow the mouse movement. To stop this behavior, you use the stopDrag( ) method, usually implemented on MOUSE_UP.
myObject.stopDrag();
This behavior also has a property associated called dropTarget. The dropTarget is the object that is under the draggable object when the stopDrag method is called. To get the name of the drop target, you must access its name property.
myObject.dropTarget.name;
Your final project will take the form of an “Interactive Documentary.” The choice of topic is yours, I suggest something that you are already an expert in or passionate fan of. Your documentary can be instructional (like a ‘how-to’) or informational.
Depending on the focus and execution of your project, it may include more or less of the following components, but must include some of all:
Optionally, you can also incorporate the following:
For next week you are going to produce two documents that will help you define your project.
1. Project Brief – This is a text description of your project. It should include the following:
2. Process Flow – This is a bit like a site map for a Web site. A process flow visualizes the way a user would move through the application from a high level.
Every distinct state or page of the application should be represented by a rectangle, connected by diamond shaped decision points.
A variable in a programming language is a way to store a value that may or may not be known at the time the program runs, and may change over the life of the application. You can store all kinds of values in a variable – numbers, text, true/false values, the names of objects on your stage or objects you create with code. You can also pass variables as function parameters.
A simple variable declaration looks like this:
var variablename:Type;
As you could see from the banner ad exercise, file size adds up quickly when you are bringing graphics into your library. Even if you don’t have the kind of size restrictions that the banners do, an overly large file is going to take forever to download and start playing in the viewer’s browser. One way to minimize this is to load the assets as you need them when the Flash movie is playing. This is similar to the way you include images in a Web page. It also means that you have to upload those images to your Web server along with your swf and html files in order for them to load and display.
You can load images (jpeg, png, or gif only) or other swf files. First you need to create a container to hold the image you are going to load. This container is a special object called a Loader. This is how you create a loader:
var myLoader:Loader = new Loader();
In this example, “myLoader” is a variable Name that you decide, everything else is set.
When we create an object like this with ActionScript 3, it doesn’t automatically add that object to the stage. Adding the loader is simple:
addChild(myLoader);
Even though the loader is now part of the stage, you won’t see it. Loaders have no appearance of their own, they are just an empty container to put things into.
Next we need to create an object to hold the path to the image or swf that we want to load into the loader. This object is called a URLRequest.
URL stands for “Uniform Resource Location”, which is just a fancy way of saying Web address. In other words, URLs are what you see in the address field of a Web browser. The URLRequest is going to show the path to the asset on our local machine or the server.
There are two ways to represent this path, relative or absolute.
In an absolute path, you give the full address on the local machine or Web server: http://www.domainname.com/subdirectory/filename.ext
In a relative path, you only give need to give the path relative to the swf file the image will be loaded into: subdirectory/filename.ext
It’s best to use the “relative” path to the asset, because this will be the same when you are working on your local machine as when you publish to the Web server. To simplify things and stay organized, keep your assets in a subdirectory (folder) in the same directory (folder) as your Flash files.
So, if you had an image called “my_image.jpg” in a subdirectory called “images” the relative path to it would be “images/my_image.jpg”
You create the URLRequest like this:
var myImage:URLRequest = new URLRequest(imagePath);
In this example “myImage” and “imagePath” are variables. You can either put the image path directly in to the parentheses after URLRequest or create another variable to hold it.
Now that you’ve created the empty container, and identified the asset to go into it, it only remains to load one into the other:
myLoader.load(image);
If you test your movie, you will now see it on the stage. Here’s a couple things to note about the loader object:
The loader is placed at the 0,0 coordinates on the stage, so you may want to reposition it. You can do this by accessing it’s x and y properties:
myLoader.x = xposition; myLoader.y=yposition;
The image is loaded into the the loader at 100%. You can scale with code with the scaleX and scaleY properties, but like importing into the library, it’s better to resize it outside of Flash. The larger the asset is, the longer it will take to load, and you don’t want to make the viewer wait around unecessarily. The scale property is a percentage expressed as a decimal between 0-1, so .5 represents 50%. You can scale above 100%, but you’d be blowing a bitmap up larger than its pixel dimensions, which is never recommended!
myLoader.scaleX = myLoader.scaleY = position;
The publish settings panel has three tabs: Format, Flash, and HTML. Before publishing your final movie, you’ll need each of these appropriately.
You can edit the HTML file that your Flash is embedded into if you are familiar with HTML and CSS.
To embed your Flash movie in another Web page, copy and paste everything in between the <div id=”flashContent”> tags:
<div id="flashContent"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="728" height="90" id="FoodFight_728x90_1_v6_as2" align="middle"> <param name="movie" value="FoodFight_728x90_1_v6_as2.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#cc3300" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="window" /> <param name="scale" value="showall" /> <param name="menu" value="true" /> <param name="devicefont" value="false" /> <param name="salign" value="" /> <param name="allowScriptAccess" value="sameDomain" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="FoodFight_728x90_1_v6_as2.swf" width="728" height="90"> <param name="movie" value="FoodFight_728x90_1_v6_as2.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#cc3300" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="window" /> <param name="scale" value="showall" /> <param name="menu" value="true" /> <param name="devicefont" value="false" /> <param name="salign" value="" /> <param name="allowScriptAccess" value="sameDomain" /> <!--<![endif]--> <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object>
Note: This may look different depending on your version of Flash.
To publish your Flash to the Web, use FTP to move all your files to the Web server. Make sure to upload both your .swf and .html files, and the image files that go with them! If you do not currently have Web space, Citytech students can get a hosting account with Kionic for a reduced price:
Create a Simple Image Gallery
Using what you have learned today about loading external images, plus the timeline navigation we learned last week, create a simple image gallery using your own images that loads one image at a time onto the stage, and allows you to navigate back and forth through a series of images, as well as jump to the beginning and end, just as you did with last week’s exercise.
Publish your files to your web space. Remember that you must upload your image files as well as your html and .swf files. Also bring your .fla files to class next week so I can look at them if I need to.
Post a link to your HTML file as a comment on the blog.
Final Project
After Spring Break we are going to start work on your final projects. Your final project is going to be an interactive “documentary” project. The subject of this documentary is up to you. I encourage you to pick something you already have some knowledge about, and some passion for. The project can be instructional like a “how-to” or more informational. You don’t have to do anything for the final project yet, but start thinking about it.
Check your attendance and assignment grades here –
https://docs.google.com/spreadsheet/ccc?key=0AiWa4hnw5mx7dHVNQ0dKOURmclFpamxwSG5ySC1jaFE
Anything that is listed as a 0 (zero) on this sheet means that I did not receive this assignment from you.
If you are missing any homework, please get it to me no later than 12 noon THIS THURSDAY – 3/29. There are three ways you can get the work to me:
After Thursday I will turn in the Midterm grades, and you will not be able to turn in any of the previous assignments in for credit.
Please email me immediately if you have any questions.
ActionScript is the language used to program interactivity in Flash. It is what is called an Object Oriented Language, or OOP. We’ll talk more about what that means as we go along. ActionScript is also client-side language, which means that all the processing takes place on the end users machine. In practical terms, this means that the Flash movie can change without reloading the container HTML page, but it also means that Flash cannot save any information back to the Web server.
There are two ways to include ActionScript with your Flash movie, via the Actions panel, or a separate .as files. In this class we are going to explore the first method.
Actionscript is adding to your Flash movie through the Actions panel, which you can open either through the Windows menu or Shift+F9 .
The Actions panel will always show you the code for the object on the stage you currently have selected.
ActionScript is comprised of a series of statements that are always ended with a semi-colon:
some code here;
A more complex statement might be enclosed in curly brackets:
{
more complex code;
some more code;
}
If you want to include notes that won’t be read as code, you can do that in the form of comments. There are two types of comments in Actionscript:
// This is a single line comment
/* This is a multi-line or block comment */
There are also a few naming rules to keep in mind:
ActionScript has gone through three versions, 1.0, 2.0, and 3.0. For the most part you should now exclusively use ActionScript 3.0, however the one exception you may encounter in your professional practice is Flash banner ads. Many sites use a click tracking system called ClickTag which is not compatible with AS 3.0. We’re going to review how to set up a ClickTag for a banner ad with ActionScript 2.0, in the case that you might need to do this in the future.
Keep in mind that there are a few things you can’t use if you are working in AS2, because they were introduced with AS3:
This will make the button invisible, but clickable. Yay!
In AS2 (but not AS3!) you can add Actionscript directly to a MovieClip or Button instance on the stage via the Properties panel, by clicking the little arrow at the top right of the panel:
This will open the Actions panel for that object.
The code for creating an “on click” behavior in AS2 for your button is as follows:
on (release) {
// put what you want to happen when the button is clicked here
}
To test whether you’ve added the button and the behavior correctly, you can use the trace function. The trace function will send data to the output window when you are in Flash, but is invisible to the user once the Flash movie is published as a .swf online.
on (release) {
trace("click");
}
To add a link to the click behavior, use the getURL function:
on (release) {
getURL("http://www.google.com", "_blank");
}
The first parameter is the full path to the web page you want to open. The “_blank” parameter will force the linked URL to open in a new browser window.
If you need to use a ClickTag, you will use this code instead:
on (release) {
getURL(clickTAG, "_blank");
}
As I’ve mentioned, you cannot add ActionScript directly to objects in AS3. Instead, you can add code to any frame or sequence of frames on the Timeline. This includes the timelines of symbols.
While you can add code to any layer on the timeline, including layers that have symbols or other objects on them, it is much cleaner to designate a single, empty layer for your code. This will prevent you accidentally erasing code or objects when working with one or the other, and it will also make it easier for you or another developer working on the code to find it later.
With this goal in mind, I want you to place all your ActionScript on a single layer at the very top of your timeline called “actions”. So, the first thing you do now when creating a new file is to make this layer, then open the Actions panel and pin this layer so that it is always easy to get to it.
Because you are no longer able to add behavior directly to objects, you need to be able to tell actionscript which object on the stage you are adding behavior to. In order to do this, you must target the object using its instance name. That means that every object on the stage that you want to be interactive must have an instance name!
Then, when you want to refer to that object in your ActionScript, you can call it by name, using object notation:
buttonone.dosomething();
You can also find named objects on the stage using the target button in the Actions panel:
The core functionality of any object-oriented programming language are classes, objects, properties and methods.
Every object on the stage is an instance of a defined class of object within the ActionScript core library. These classes have properties and methods attached to them, and these vary depending on the class. Here’s an easy way to think of the difference between a property and a method:
instancename.propertyname;
You can change the value of that property like this:
instancename.propertyname = value;
Methods are called like this:
instancename.methodname(arguments);
ActionScript 3 has many built in functions, like the trace function which we’ve already used. You can also create your own functions, to hold code that you want to be able to reuse anywhere in your project. First you define the function:
function functionname(parameter1,parameter2):return {
//do something
}
Then, when you want to use the code in the function, you call it using the function name like this:
functionname (value1,value2);
The values in the parentheses are parameters, extra information you can pass into the function when you call it. For example, when you call the trace function, the parameters are whatever you put between the parentheses that you want to send to the output window.
When creating a button or other interactive object in ActionScript 3, there are two steps you must create: an event listener, and an event handler. You can add event listeners and handlers to Button and MoveClip Instances but not Graphic symbols.
The event listener describes what object to target, and what event to respond to. You do this using the addEventListener method.
This function takes two parameters, the event to respond to (like a mouse click) and the function to run when the event is detected.
The first parameter above describes an event of type MouseEvent, and the CLICK event is the particular event that is being listened for. Here are all the MouseEvents you can listen for:
The event handler is a function that you must define, to describe what you want to happen when the event happens.
So far animation that you have created on the timeline plays automatically and continuously. You can use ActionScript to control when your movie starts and stops, and to jump around the timeline.
There are a number of timeline related methods of the MovieClip class that you can use to control playback of your main or MovieClip nested timelines:
There is also one timeline related property that will help you do your homework:
All the properties and methods of the MovieClip class are detailed here
Take the original walkcycle exercise or the bone tool exercise (or really any of the animation assignments) you did earlier in the class, and add buttons that do the following:
Here’s a hint: Anything that’s a number in Flash (like frame numbers) can be used to do simple math – add, subtract, multiply and divide.
Topics:
So far we’ve been restricting ourselves to the X and Y axes in our Flash animations, but the time has come to venture into the Z! Today we are going to look at the 3D tools, and 3D Motion Tweens. First there are a couple of things you should know about 3D in Flash:
By default, the X,Y,Z axes and coordinates are represented relative, or local, to the object, but if you want to see them relative to the global stage coordinates, you can toggle the Global Transform Button at the bottom of the Tools palette or hit ‘D’.
If you want more precise control over your 3D positioning, you can manipulate it in the Properties panel for the selected object. You can also change the Perspective Angle and Vanishing Point here, which will affect how your object appears to move forward and back in the Z axis.
If you want more precise control over your 3D rotation, you can manipulate it in the Transform panel (not the free Transform tool). You can also change the 3D center point, which is where the object will rotate from.
You can only apply Motion Tweens to objects with 3D properties – Classic Tweens won’t work. When you apply a Motion Tween to an object with 3D properties set, the 3D Tween option in the contextual menu will automatically be checked. 3D tweens work the same as regular motion tweens, just with the addition of the 3D position and view properties — all tweenable!
There is additional information about 3D transforms in Flash here:
Exploring the new 3D features in Flash CS4 Professional
There are a number of different ways you can play audio through Flash, each has it’s advantages and disadvantages.
Many audio types are supported in Flash, but you’ll have best luck with .aiff or .mp3 files. All audio is published out of Flash in the mp3 format, so this is a good format to start with.
You add audio to your Flash movie the same way you import other media assets. You can use either “Import to Library” or “Import to Stage” but either way the audio file will end up in your library, but not on the stage.
Select an imported audio file in the library, and you will see a visual representation of the sound file, in addition to tiny little play and stop buttons to the top and right that allow you to preview the audio file.
To see additional properties of the sound file, double-click the speaker icon next to the filename.
Check your file size! This is going to impact the total size of your swf. You can adjust the compression settings here for this file only or in the Publish Settings panel for the whole movie.
You add audio to a keyframe on the timeline, in the properties panel when you have a frame selected. The audio will start playing when the swf hits that frame.
Choose the sound you want to add with the “Name” pulldown in the sound section of the properties panel.
Once you do this, you will see the waveform of the sound in the timeline.
Increase the height of the layer by control or right clicking the layer name and changing the layer height:
How the file will playback depends on how the Sync property is set. There are two primary settings you should concern yourself with here:
Event – Plays whole audio file. If you don’t want this, you can do some minor editing in the sound properties. This should be reserved for very short sounds, or you will get awkward echoing as the movie loops and continues to play the sound again and again.
Stream – Plays the sound only as long as the timeline. You can set the repeat and loop settings for replay, but this will always stop a previously playing sound before starting the next one.
The problem with both of these methods is that you aren’t giving the user any control over the playback of the sound. I generally avoid timeline sound in favor of one of the methods we will learn later in the class.
Choose a song with lyrics and import it into Flash. Create a 10-15 second animation of the song lyrics in time to the music using 3D tweens. The bulk of your animation should be text, but you can use other graphic elements if you like. If you are able to edit the audio file outside of Flash, cut it down to the portion of the track you wish to animate.
Flash ships with a number of these, which are basically canned motion tween animations. Use these sparingly, and always customize them for your project. “Out of the box” they are very recognizable and make you look like an amateur. More interesting is the ability for you to save your own motion presets, handy when you are doing a project where you are going to use the same transitions multiple times.
The Bone tool allows you to create an armature of “bones” using either shapes or symbols to create dynamically linked characters or objects that use something called “inverse kinematics” to animate them. You can use bones on either a series of linked symbols or a shape, to different effect.
The Bone Tool only works with CS4 and above, with Actionscript 3. There are some small differences between CS4, CS5 and CS5.5.
Homework
Create a 10 second animation using the Bone Tool, either using linked symbols or shapes. This can be a character animation, something mechanical, something abstract, it’s your choice, just have fun and be creative!
The OpenLab is an open-source, digital platform designed to support teaching and learning at City Tech (New York City College of Technology), and to promote student and faculty engagement in the intellectual and social life of the college community.
