treehouse : what would you like to learn today?
Web Design Web Development iOS Development

fallback picture for flash not showing

  • Hello Everyone,
    This is my 1st post and I'm excited to be apart of this forum. I'm only an amateur
    rookie and your help is appreciated.
    I built (work in progress) a personal website and I have a flash movie that takes awhile to load, so I thought I could put a background image for the div in the CSS to show until the swf loaded. No luck, however. It's been about 4 weeks in my spare time to get this far. I think it looks and works pretty good, but it's often hard to see the problems with it, when it's your own. So, any advice about any of it is greatly welcomed.
    -this is the code for the css div...

    #myContent {
    background-color: #000000;
    margin-left:2px;
    border-top: 10px solid #000;
    border-right: 2px solid #000;
    border-left: 2px solid #000;
    border-bottom: 3px solid #000;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 486px;
    height: 250px;
    -webkit-box-shadow: 0 0 4px 6px black;
    -moz-box-shadow: 0 0 4px 6px black;
    box-shadow: 0 0 4px 6px black;
    }

    I left the background image out since I couldn't get it to work. The source to view is at "http://alotofsongs.com". The swf is embedded using swfobject.js 2.2 and is set to transparent. (Unless I coded it wrong).
    Almost forgot; I'm using a snippet from css-tricks for the fold-out popup (the left tab)
    and I couldn't figure how to stick it on the right and have the content not spill off the page. No big deal, but...
    Fact is, I have scoured CSS-Tricks for a heck-of-a-lot of knowledge. So Thanks Again.
  • Hey Spago,

    The best way to do is to put a preloader in your Flash file. I haven't used Flash in a little while, but you essentially put a loading animation on the first frame with a 'stop();' function, and everything else on frame 2 (or any other frame).. Then once the file is fully loaded you move from frame 1 to frame 2. Just google 'Flash preloader' and you'll find a ton of tutorials.

    Alternatively, if you haven't got access to the Flash source file, then you could always use a jQuery onload event, in fact I believe swfobject has one built in which you could use. Just position a loading gif over the top of the Flash file and then remove it on load.

    Hope that helps,

    John
  • Thank you John. I sincerely appreciate it. I'm going to get on that today and hopefully have it done with. The swf file is a combination of a movie clip I made and a fla. file I bought from activeden. But I didn't know swfobject had the ability that you mentioned above to add a preloader after the movie is made. Wish me luck.
  • Yahoo! Thanks again John, I got the swf file fixed with a preloader. It was actually very simple. All I had to do was open
    flash, and drag a loader component and a progress bar component and a dynamic text box to the stage. Then just write the action script to point to the file to download. To get the exact method, I watched this youtube video, http://www.youtube.com/watch?feature=player_detailpage&v=a2JY5tzTWSI. I know for those who know this already, they might be thinking so what, but it's kind of a big deal for me. So we'll say that part is solved.