locked
exporting from blend into design RRS feed

  • Question

  • How do I export an animation from Blend into Web?
    • Edited by mikey_reynolds Friday, April 18, 2008 9:59 PM had wrong program
    Friday, April 18, 2008 7:31 PM

Answers

  • Export the animation to a file format that you can display on the web, and export the file into your website folder.

    Anna
    Expression Web l Standards Based Web Authoring
    Saturday, April 19, 2008 3:55 AM

All replies

  • Design doesn't roundtrip. You can only export from Design to Blend but not the other way around. Roundtripping will happen eventually but I wouldn't look for it any time soon.
    Annie
    Friday, April 18, 2008 8:07 PM
    Moderator
  • I meant to ask how to export it to web not design.
    Friday, April 18, 2008 10:00 PM
  • Export the animation to a file format that you can display on the web, and export the file into your website folder.

    Anna
    Expression Web l Standards Based Web Authoring
    Saturday, April 19, 2008 3:55 AM
  • How exactly do you do this?
    Wednesday, February 25, 2009 1:35 PM
  • robonhigh said:

    How exactly do you do this?



    I'm going to move this thread to the Blend forum where it'll get more replies I'm sure.
    http://blogs.msdn.com/anna
    Wednesday, February 25, 2009 7:06 PM
  • Depends.

    First, to be clear, you are asking how to incorporate a animation you've designed in blend into a Expression Web. Right?

    Now, is your animation only going to take up a small section of a page? Or a full page?
    Is that page going to be a aspx page or a regualr html page?

    Thanks.

    Friday, March 13, 2009 2:27 PM
  • I have answered this question before on here for others.  I understand the frustration as Blend tutorials don't give you any hints to do this at all.

    NOTE for Blend people: Do a better job at helping designers understand the process this poster is wanting to know about. 

    ***

    Ok, first, understand when working in Flash you publish its .swf to the web.  You can embed that .swf into your HTML via object tags.  Like Flash, Blend has a file called .xap (zap file) that is the Flash equivalent.  When your working in Blend and you build your project (F5), It builds this .xap file into your project folder as well as a .html file.  The HTML file holds the object code you will need.  It also has some javascript you will need in your HTML page as well. 

    So code your HTML page the way you want and edit your object code to reference your .xap file on your web directory.

    Here is an example.

    http://www.wetinkpro.com/silverlight/test

    HTML Object CODE:

    <div id="silverlightControlHost"
            <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%"
                <param name="source" value="SilverlightApplication29.xap"/> 
                <param name="onerror" value="onSilverlightError" /> 
                <param name="background" value="white" /> 
                <param name="minRuntimeVersion" value="2.0.31005.0" /> 
     
                <param name="autoUpgrade" value="true" /> 
                <href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"
                    <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> 
                </a> 
            </object> 
            <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe> 
        </div> 
     


    JAVASCRIPT CODE:
    Insert this into your HTML page.

    <script type="text/javascript"
            function onSilverlightError(sender, args) { 
             
                var appSource = ""
                if (sender != null && sender != 0) { 
                    appSource = sender.getHost().Source; 
                }  
                var errorType = args.ErrorType; 
                var iErrorCode = args.ErrorCode; 
                 
                var errMsg = "Unhandled Error in Silverlight 2 Application " +  appSource + "\n" ; 
     
                errMsg += "Code: "+ iErrorCode + "    \n"; 
                errMsg += "Category: " + errorType + "       \n"; 
                errMsg += "Message: " + args.ErrorMessage + "     \n"; 
     
                if (errorType == "ParserError") 
                { 
                    errMsg += "File: " + args.xamlFile + "     \n"; 
                    errMsg += "Line: " + args.lineNumber + "     \n"; 
                    errMsg += "Position: " + args.charPosition + "     \n"; 
                } 
                else if (errorType == "RuntimeError") 
                {            
                    if (args.lineNumber != 0) 
                    { 
                        errMsg += "Line: " + args.lineNumber + "     \n"; 
                        errMsg += "Position: " +  args.charPosition + "     \n"; 
                    } 
                    errMsg += "MethodName: " + args.methodName + "     \n"; 
                } 
     
                throw new Error(errMsg); 
            } 
        </script> 
     

    Now, based on your web page, your div tag may have a different name and such but this should give you the idea of where to begin. 



    I think MS forgets that most designers who work in Flash and come over to test the Silverlight waters want instruction on how to understand the process that compares it to what they are used to.  For example, my first question about Blend was, "What is the equivalent of a 'movieclip' in Blend?"  The answer is multiple in that it could be canvas, grid, stackpanel, etc.  My second question was, "How do I publish to the web?"  You need to understand that the .xap file is the same as the .swf file in flash and then you can publish your animation to the web accordingly with your own code.

    I hope that helps.



    Monday, March 16, 2009 6:21 PM