Digital

Not all available opportunities are listed.

Please contact your account executive for more information.

ESPN Self-Service

Got a smaller ad budget but need BIG results? Advertise Your Way on ESPN.com.

  • -Target at Local Level
  • -Track Your Results
  • -Easy to UseLearn More >

Guidelines >Tutorials

  • How to Clear your Browser Cache, Cookies, & History

    1. Close all browser windows except for one.
    2. Go to another website, than the one you will be visiting, once all cleared.
    3. Maximize the browser window and then navigate to "Tools".
    4. Select "Internet Options"
    5. When the details box appears, click on "Delete Cookies". You will receive another smaller box, click "Ok" to remove files from your Temporary Internet Files Folder.
    6. Then click "Delete Files", at which point you will see a smaller box.
      Check the "Delete all offline content" checkbox, then click "OK".
    7. Now click "Clear History", at which point you will see a smaller box. Click "Yes" and then click "OK".
    8. Now click "OK", at the bottom of the Internet Options dialog box.
    9. Close your browser window and re-open a new one.
    10. Revisit the intended website.
  • Set-up & Construct a Flash banner

    1. Open .fla file.
    2. Open up your Library (ctrl L).
    3. Organize your Library with folders.
      • Imported (for imported .jpg, .png, .gif)
      • Symbols
      • Movies
      • Graphics
      • Buttons
    4. Open the "Imported" folder.
    5. Select an item by clicking on it once.
    6. Open the Properties box for that item - double click the item.
    7. Un-check "Use document default quality" if it isn't already.
    8. Click "Test" to the right.
    9. Summary data on the file size will appear down below the number in the white field. The white field is the % out of 100% image quality you are utilizing.
    10. Adjust the white field until the image (top left of the properties box) is either at the balance between image quality / optimized or just set the % and to achieve a desired file size. Note: You can slide the image around up in the properties box to see how the quality is elsewhere.
    11. Click "Ok" and repeat steps 5-11 for every imported item.
    12. Then export the movie and utilize the JPEG quality compression settings as well.
    13. Right click on the exported .swf to view the properties which will tell you the file size.
  • Optimize a Flash File

    Optimizing a Flash file can completed using several methods. In this section, we address some of the most effective methods to optimize your Flash file.

    Importing:

    Often users assume that you should compress .jpg's and .png's before you import but compression, while maintaining quality, is one of Flash's strengths. When importing images such as a .jpg or a .png file, you will want to import them at their highest level of resolution (for the dimensions needed), then following steps below on how to optimize each item in your library:

    1. Open .fla file.
    2. Open up your Library (ctrl L).
    3. Organize your Library with folders.
      • Imported (for imported .jpg, .png, .gif)
      • Symbols
      • Movies
      • Graphics
      • Buttons
    4. Open the "Imported" folder.
    5. Open the Properties box for that item - double click the item.
    6. Un-check "Use document default quality" if it isn't already.
    7. Click "Test" to the right.
    8. Summary data on the file size will appear down below the number in the white field. The white field is the % out of 100% image quality you are utilizing.
    9. Adjust the white field until the image (top left of the properties box) is either at the balance between image quality / optimized or just set the % and to achieve a desired file size. Note: You can slide the image around up in the properties box to see how the quality is elsewhere.
    10. Click "Ok" and repeat steps 5-11 for every imported item.
    11. Then export the movie and utilize the JPEG quality compression settings as well.
    12. Right click on the exported .swf to view the properties which will tell you the file size.
    Symbols:

    Maximize library instance recycling... i.e., if you have buttons, reuse the same button and modify it on the instance level rather than creating three similar buttons in the library.

    Timelines / Key Frames / Frame Rate:
    • Be sure to optimize your timeline, is it as short as it can be? If not, shorten it and streamline animation lengths.
    • Minimize the overall number of keyframes in your animation. For novice users, adjust the FPS/keyframe ratio. For advanced users, use actionscript to control animation opposed to traditional keyframes, although more actionscript means more CPU usage.
    Additional:
    • Take advantage of effects such as alpha channels to accomplish visual effects rather than fully animating a scene.
    • Use vector images as much as possible. It is possible to import vector EPS and Freehand files, for example.
    • When possible, create items within flash and minimize the use of raster images such as jpg's.
    • When importing an image, especially one with any sort of glow or gradient, that will need to "float" over a background layer, import it as a .png. This will allow you to retain the properties of the component and allow it to have a transparent background (vs. carrying over a white or black background and not matching your background in flash etc).
  • Create a Button in Flash

    1. Open your editable Flash (.fla) file.
    2. Create a layer for the button on the timeline.
      • Make it the very top layer of your movie so nothing covers it.
    3. Create a new "button" symbol. This can be done by navigating to the Main/Top menu: "Insert" New Symbol. - Name it "clickarea".
    4. Double-click on the button Symbol within your library.
      • Set the dimensions of the button symbol to be the size of your ad by clicking on the symbol and then setting the dimensions within the "properties" palette.
      • Ex: 728x90, 300x250 etc.
      • We also recommend using a bright color, ex: neon green, for the symbol.
      • Exception: If you are using multiple buttons with multiple click-tags, do not cover up all of your other buttons with one main button on the timeline, please see "How To Add a clicktag". On this page, you will see "Multiple Clicks within one banner."
    5. Select, (by highlighting, left click and drag over), the "Up, Over, Down, Hit" portions of the timeline - within the button symbol itself.
      • Hit "F5" on your keyboard so all cells of this 4 cell timeline are gray. This has ensured that the clickable area is present during all states of the button interaction.
    6. Drag the button onto the button layer on the timeline. Make sure your button is present throughout the entire timeline.
    7. Click the button on the workspace.
    8. Within the "Properties" palette, select "Color", "Alpha" and set the % to zero "0".
  • Optimize a JPG or animated GIF - using Adobe ImageReady.

    1. Open the .psd or .tif file with ImageReady.
    2. Click the "Optimized" tab within the file. You will now see file size data below the image.
    3. Along the very top of the program window, open the "Optimize" palette by clicking "Window" at right, then select "Optimize".
    4. Open the "Color Table" section of the "Optimize" palette.
    5. Click on the white "Color" field within the "Color Table" section and begin to enter in values to bring the file size down - while monitoring the image quality in the background (on the image itself). You can also click on the value in the field and use the arrow button to bring it down incrementally.
    6. Right click on the exported .gif to view the properties which will tell you the file size.
    Tips:
    • For files with glows and images, utilize the .jpg format.
    • For files with mainly text and/or vector type graphics, use GIF's.
    • JPG's do not allow for animation.
    • GIF's allow for animation - through a sequence of frames.
  • How to Add a clicktag (or multiple clicktags)

    General Guidelines:

    If you are building an expandable Leaderboard banner for ESPN.com, please see the Flash Construction Guide.

    STEPS FOR INSERTING TRACKING ACTIONSCRIPT CODE (below):
    1. Create a layer and name it "click layer". Move this layer to the very top of all the layers.
    2. Draw a box, the exact dimensions of your banner (728x90, 160x600, 468x60), in neon green, so you can see it easily, and then conver it to a button symbol by clicking on it and then navigating to "modify" (top menu) and save it as a button called "click button".
    3. Make sure the button symbol is on the first frame of the timeline and make sure it is there for the entire timeline. If you need to place it further, use the Properties toolbar and type in "0" into both the X & Y fields to line it up.
    4. Click the button on the workspace.
    5. Open your actions palette.
    6. Paste the actionscript "clicktag" code below (in blue) into the actions palette box.
    7. Save your flash file.
    8. Click on your button and within the "Properties" palette, select "Color", "Alpha" and set the % to zero "0".
    9. Export your file as a .swf.

    If you are constructing an expandable Leaderboard banner for ESPN.com, please see the Flash Construction Guide instead.

    CLICKTAG ACTIONSCRIPT CODE:

    Click-through functions must use the "Get URL" command. The action script code needed for the button layer in your Flash file should look exactly as it is below. The revised action script below simply checks to make sure that "http:" is contained within the URL we pass into it.

    Note: Spell clicktag using only lowercase letters.
    Note: Do not insert your URL where the "http:" is below.

    	on (release) {
    		if (_level0.clicktag.substr(0,5) == "http:") {
    			getURL(_level0.clicktag, "_blank");
    		}
    	}
    				
    MULTIPLE CLICKS (WITHIN ONE BANNER):

    If you have several url's that a banner will drive traffic to, use the same clicktag code as above, but for each different clicking url, utilize a different name for the clicktag - example below. Essentially, you just need to use a different clicktag so our system can react accordingly:

    url1 - clicktag
    url2 - clicktag2
    url3 - clicktag3
    url4 - clicktag4

    Tip: When using multiple clicktags, be sure to designate each clickable area with a button of its own and make sure that you don't overlap buttons.

  • How to Insert Pop-Up Tracking Code In Flash

    Before you can add a clicktag, you must create a button & add it to the timeline. If you have not yet created a button, please see: "How To Create a Button in Flash"

    1. Open your "Actions" palette. You will then see an area to paste in the code.
    2. Select the button on the workspace (with the actions palette open).
    3. Normally you would paste in the following clicktag code:
      	on (release) {
      		if (_level0.clicktag.substr(0,5) == "http:") {
      			getURL(_level0.clicktag, "_blank");
      		}
      	}
      						

      In this case though, you will replace that code (or the empty space in the actions palette) with this code:

      						on (release) {
      						getURL("javascript:popTheAd()");
      						}
      						
    4. Now save your flash file.
    5. Export your file as a .swf (version 6).
  • How to "hide" the "Right Click" menu within a flash file

    • Open the file in flash.
    • Create a layer.
    • On the very first frame, paste in this code into your actionscript box: stage.showmenu = false;
    • Be sure that this layer has frames for the entire length of your movie.
    • Save your file.
    • Export the file as Flash 6.
    • Test it by right clicking on the exported .swf to see if you receive the menu.
  • How To Load External Video Into Flash

    It is possible to load an external Flash video (.swf or .flv format) into a Flash advertisement. Video can be loaded into a Flash file using the loadMovie() function for swf and the NetStream and NetConnection classes for flv. Depending on the rules defined for a given ad type, the path to an external video can either be hard-coded into a video file or dynamically passed by Walt Disney Internet Group via the _level0.moviePath variable.

    File Types

    The following file types can be loaded in as video: .swf, .flv

  • How To Load a .swf file

    Using the loadMovie() Function

    The loadMovie() function is used to replace a movie clip object in Flash with a SWF video file. The SWF file will inherit the position, rotation, and scale properties of the targeted movie clip it replaces. The upper left corner of the loaded image or SWF file aligns with the registration point of the targeted movie clip.

    Three parameters can be passed to the loadMovie() function:

    	loadMovie(url, target, method);
    • url: String - This should contain the URL (absolute or relative) to the SWF file to be loaded into the movie clip object. If WDIG will be passing the URL as a variable, please use _level0.moviePath
    • target: Object - This is a reference to a movie clip object to be replaced by the SWF video file.
    • method: String (optional) - This specifies an HTTP method for sending variables (either the string GET or POST). Omit this parameter if there are no variables to be sent.

    Example of the loadMovie() function with a hard-coded SWF url:

    	loadMovie("http://www.server.com/video.swf", "movie_placeholder");

    Example of the loadMovie() function with a variable url value (to be set by WDIG):

    	loadMovie(_level0.moviePath, "movie_placeholder");
    A Working Example of the loadMovie() Function

    The following example expects a variable, _level0.moviePath, to be set externally when the SWF file is published to the page.

    When the user clicks the play button the ad will replace the movie_placeholder object with the SWF file defined by the _level0.moviePath, in this case test_movie.swf.

    Click on the play button to view the example. The code is briefly explained below. Click here for a zip file containing the original files for reference.

    The actionscript code associated to the play button in the main SWF file:

    	on (release) {
    		loadMovie(_level0.moviePath, "movie_placeholder");
    	}
    		

    Initializing the _level0.moviePath variable upon page render:

    	SOB.flashFile = "sample_300x250.swf?moviePath=test_movie.swf";
    References

    Adobe LiveDocs - The official documentation on the Adobe Flash loadMovie() function.

    Adobe LiveDocs AS3 - A file containing the original Adobe Flash FLA file used for the example above.

    Zip File (10k) - A file containing the original Adobe Flash FLA file used for the example above.

  • How To Load a .flv file

    Using the NetStream and NetConnection classes

    The NetConnection class lets you play streaming FLV files from either an HTTP address or a local drive. The NetStream object takes a NetConnection object as a parameter to specify which FLV file you want to load. The FLV file will inherit the position, rotation, and scale properties of the targeted video object it replaces. The upper left corner of the loaded image or FLV file aligns with the registration point of the targeted video object.

    The NetStream class has a play variable that is assigned the FLV to be played.

    	ns.play(url);
    • url: String - This should contain the URL (absolute or relative) to the FLV file to be loaded into the video object. If WDIG will be passing the URL as a variable, please use _level0.moviePath

    Example of assigning the ns.play value with a hard-coded FLV url:

    	ns.play("http://www.server.com/video.flv");

    Example of assigning the ns.play value with a variable url value (to be set by WDIG):

    	my_ns.play(_level0.moviePath);
    A Working Example of the NetStream and NetConnection classes

    The following example expects a variable, _level0.moviePath, to be set externally when the FLV file is published to the page.

    When the user clicks the play button the ad will replace the my_video object with the FLV file defined by the _level0.moviePath, in this case clouds.flv.

    Click on the play button to view the example. The code is briefly explained below. Click here for a zip file containing the original files for reference.

    The actionscript code associated to the play button in the main SWF file:

    	   on (release)
    	   {
    		my_ns.play("_level0.moviePath");
    	   }
    		

    Initializing the _level0.moviePath variable upon page render:

    	SOB.flashFile = "sample_flv_player.swf?moviePath=clouds.flv";
    References

    Adobe LiveDocs AS2 - The official documentation on the Adobe Flash NetStream and NetConnection classes for AS2.

    Adobe LiveDocs AS3 - The official documentation on the Adobe Flash NetStream and NetConnection classes for AS3.

    Zip File (10k) - A file containing the original Adobe Flash FLA file used for the example above.