Highlighted

animate html files on c# asp.net programs

New Here ,
Jun 12, 2019

Copy link to clipboard

Copied

I have a children's magazine bumples.com.  The issues use javascript for the pages and games. Years ago I used flash files on the pages and I want to use animate html on the pages.  I need help or advice on how to do it.  Below are parts of the files that I use.

I put easeljs min and tweenjs.min in my javascript files and then listed them in the default page where I list all the javascript files that I use.  I set us a new file Canvas where I put the HTMLCanvas.js in and planned on doing that for the other pages that I use animate html.

Below is the javascript progam that I use to open the issue. After that is the default where I put the list of javascripts that I use.

JavaScript Issue file:

var issueNumber = 11;
var issuePageCount = 50;
var issuePageWidth = 512;
var issuePageHeight = 600;
var issueNextPage = 1;

// Page 21 - FishheadGame fishhead
// ===============================================================================================

var fishheadGameCount = 10;

IssueGame_Fishhead_Insert = function (_left, _top, _width, _height, _image) {
    //(group, id, css, left, top, width, height, onClick, onOver, onOut, onMove)
    var _obj = InsertDinamicDiv(21, "", "", _left, _top, _width, _height, "IssueGame_Fishhead_Click(this, '" + _image + "')", "", "", "");
    var _imageUrl = "Issue010/Games/FishheadGame/" + _image.replace(/\s/g, "") + ".png";
    _obj.style.backgroundImage = "url(" + _imageUrl + ")";
};

IssueGame_Fishhead_Click = function (obj, message) {
    fishheadGameCount--;

    message = "You found a fishhead.<br/>";

    if (fishheadGameCount > 1)
        message += fishheadGameCount.toString() + " to go...";
    else if (fishheadGameCount > 0)
        message += "Can you find the last one?";
    else
        message += "You found everything!!!";

    message = "<span style=\"color: #000000; font-size: 18px;\">" + message + "</span>";

    DisplayTalkingBalloon(message, 4500, "PrzGre");

    bmDynamicDiv.UnableObj(obj);
};


// Page 25 - shindiglotto
// ======
var shindigLottoContainer = null;
var shindigLottoGame = null;

//
//Issue
//

Issue_IssueName = function () {
    return "Issue" + ((issueNumber < 100) ? "0" : "") + ((issueNumber < 10) ? "0" : "") + issueNumber.toString();
};

//
//Load
//

function BmOnLoad() {

    //
    //settings
    //


    bmPageWidth = issuePageWidth;
    bmPageHeight = issuePageHeight;
    bmNextPage = issueNextPage;

    var pageUriTemplate = Issue_IssueName() + "/Pages/page-";

    for (var pg = 1; pg <= issuePageCount; pg++)
        bmPages[pg] = pageUriTemplate + ((pg < 10) ? "0" : "") + pg.toString() + ".jpg";

    BmInitialize();


    AddIndexToJumpTo(1, "Cover");
    AddIndexToJumpTo(2, "Contents");
    AddIndexToJumpTo(4, "Little Ladebug Flight");
    AddIndexToJumpTo(6, "Ladybug Facts & Hidden object ");
    AddIndexToJumpTo(8, "Turtle Ate Too Much");
    AddIndexToJumpTo(16, "Turtle Facts & Lotto Game ");
 

    InsertDinamicDiv(2, "", "", 68, 100, 437, 18, "BmFlipTo(2)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 142, 437, 18, "BmFlipTo(4)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 165, 437, 18, "BmFlipTo(6)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 205, 437, 18, "BmFlipTo(8)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 230, 437, 18, "BmFlipTo(16)", "", "", "");
  
     // ===============================================================================================

Here is where I am trying to put in the html Canvas.  I did not put anything in the first half. Should I?  ########
    // Page 22  Pinnochio walking Canvas\page22_HTMLCanvas
    page22Html. width="512", height="600", id="Canvas\page22_HTMLCanvas", align="middle";
    page22Html = InsertDinamicDiv(22, "page22", "", 0, 0, 512, 600, "", "", "", "");
    page22Html.innerHTML = page22;

    // ===============================================================================================
    // Page 25  shindigLotto
    // ===============================================================================================

    shindigLottoContainer = InsertDinamicDiv(25, "shindigLottoContainer", "", 51, 204, 474, 425, "", "", "", "");
    shindigLottoGame = new MemoryGame(shindigLottoContainer, 6, 5, "Issue010/games/shindigLotto/piece-", 74, 74, 4, 200);

    // ===============================================================================================
    // Page 21 Fishhead Game
    // ===============================================================================================

    IssueGame_Fishhead_Insert(240, 325, 60, 44, "fh1-01");
    IssueGame_Fishhead_Insert(216, 145, 53, 39, "fh2-02");
    IssueGame_Fishhead_Insert(470, 140, 52, 38, "fh3-03");
    IssueGame_Fishhead_Insert(25, 390, 49, 36, "fh4-04");
    IssueGame_Fishhead_Insert(135, 386, 50, 37, "fh5-05");
    IssueGame_Fishhead_Insert(345, 210, 53, 40, "fh6-06");
    IssueGame_Fishhead_Insert(408, 598, 66, 49, "fh7-07");
    IssueGame_Fishhead_Insert(312, 100, 43, 32, "fh8-08");
    IssueGame_Fishhead_Insert(375, 306, 51, 34, "fh9-09");
    IssueGame_Fishhead_Insert(400, 416, 43, 33, "fh10-10");
  
  
  

    // Start
    //======

    BmStart();
    BmFlipTo(issueNextPage);

}

DEFAULT FILE:  The two files are below.  But the error I am getting SystemWeb.HttpException. Failed to map the path Issue/JS/easlejs.minjs.  I am using stream reader and can not read it.  I have put # next to where the problem is.

using System;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

using System.IO;
using System.Security;

using Jen19;

namespace Jen19.UI
{
    public partial class Issues_Default : BasePage
    {
        private Int32 issue = 0;
        private String section = "";

        protected void Page_Load(object sender, EventArgs e)
        {
            //
            if (String.IsNullOrEmpty(this.Request.QueryString["Issue"]))
            {
                this.issue = 1;
                //throw new SecurityException("Error loading Issue!");
            }
            else
            {
                try
                {
                    this.issue = Int32.Parse(this.Request.QueryString["Issue"]);
                }
                catch
                {
                    this.issue = 1;
                }
            }

            if (issue < 1 || issue > 25)
            {
                issue = 1;
                //throw new SecurityException("Error loading Issue!");
            }

            //
            if (String.IsNullOrEmpty(this.Request.QueryString["Section"]))
                this.section = "";
            else
                this.section = this.Request.QueryString["Section"];

            if (this.IssueName() == "Issue003" || this.IssueName() == "Issue004" || this.IssueName() == "Issue005" || this.IssueName() == "Issue006")
            {
                if (this.User.Identity.IsAuthenticated && (
                    this.User.IsInRole("Administrators") ||
                    this.User.IsInRole("Issue003") || this.User.IsInRole("Issue004") || this.User.IsInRole("Issue005") || this.User.IsInRole("Issue006") || this.User.IsInRole("Register")))
                {
                    ;
                }
                else
                {
                    //String page = System.Web.HttpContext.Current.Request.Url.AbsoluteUri; // this.GetCurrentPageName();
                    this.RequestLogin();
                    //Response.Redirect("~/Account/Register.aspx");
                    //throw new SecurityException("You are not allowed to edit existent articles!");
                }
            }

            /* Execute */
            this.LoadJavaScript();
            /* Execute */

        }


        private void LoadJavaScript()
        {
            String javaScript = "";
            javaScript += LoadFile("~/Issues/JavaScript/Movime.js");
            javaScript += LoadFile("~/Issues/JavaScript/DivClass.js");
            javaScript += LoadFile("~/Issues/JavaScript/TalkingBalloon.js");
            javaScript += LoadFile("~/Issues/JavaScript/Magazine.js");
            javaScript += LoadFile("~/Issues/JavaScript/MemoryClass.js");
            javaScript += LoadFile("~/Issues/JavaScript/MoveObjectsTo.js");
            javaScript += LoadFile("~/Issues/JavaScript/MoveObjectTo.js");
            javaScript += LoadFile("~/Issues/JavaScript/Touchscreen.js");
            javaScript += LoadFile("~/Issues/JavaScript/PuzzleClass.js");
            javaScript += LoadFile("~/Issues/JavaScript/easeljs.min.js.");
            javaScript += LoadFile("~/Issues/JavaScript/tweenjs.min.js.");
            javaScript += LoadFile("~/Issues/" + this.IssueName() + "/JavaScript.js");

            Page.ClientScript.RegisterStartupScript(this.GetType(), "", javaScript, true);
        }

        public String LoadCss()
        {
            return "<style type=\"text/css\"> " + LoadFile("~/Issues/" + this.IssueName() + "/CssStyles.css") + " </style>";
        }

        private String IssueName()
        {
            return "Issue" + ((this.issue < 100) ? "0" : "") + ((this.issue < 10) ? "0" : "") + this.issue.ToString().Trim() + this.section;
        }

        private String LoadFile(String fileName)
        {
            //Open a file for reading
            fileName = Server.MapPath(fileName);  ####here is the http error.

            //Get a StreamReader class that can be used to read the file
            StreamReader objStreamReader = File.OpenText(fileName);

            //Now, read the entire file into a string
            String fileContent = objStreamReader.ReadToEnd();

            objStreamReader.Close();

            return fileContent;
        }

    }

}
I put the canvas on the opening page and no problems there.

Hope someone can help me. I really like the animation ability in animate.

Thanks,

Jen

Views

92

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

animate html files on c# asp.net programs

New Here ,
Jun 12, 2019

Copy link to clipboard

Copied

I have a children's magazine bumples.com.  The issues use javascript for the pages and games. Years ago I used flash files on the pages and I want to use animate html on the pages.  I need help or advice on how to do it.  Below are parts of the files that I use.

I put easeljs min and tweenjs.min in my javascript files and then listed them in the default page where I list all the javascript files that I use.  I set us a new file Canvas where I put the HTMLCanvas.js in and planned on doing that for the other pages that I use animate html.

Below is the javascript progam that I use to open the issue. After that is the default where I put the list of javascripts that I use.

JavaScript Issue file:

var issueNumber = 11;
var issuePageCount = 50;
var issuePageWidth = 512;
var issuePageHeight = 600;
var issueNextPage = 1;

// Page 21 - FishheadGame fishhead
// ===============================================================================================

var fishheadGameCount = 10;

IssueGame_Fishhead_Insert = function (_left, _top, _width, _height, _image) {
    //(group, id, css, left, top, width, height, onClick, onOver, onOut, onMove)
    var _obj = InsertDinamicDiv(21, "", "", _left, _top, _width, _height, "IssueGame_Fishhead_Click(this, '" + _image + "')", "", "", "");
    var _imageUrl = "Issue010/Games/FishheadGame/" + _image.replace(/\s/g, "") + ".png";
    _obj.style.backgroundImage = "url(" + _imageUrl + ")";
};

IssueGame_Fishhead_Click = function (obj, message) {
    fishheadGameCount--;

    message = "You found a fishhead.<br/>";

    if (fishheadGameCount > 1)
        message += fishheadGameCount.toString() + " to go...";
    else if (fishheadGameCount > 0)
        message += "Can you find the last one?";
    else
        message += "You found everything!!!";

    message = "<span style=\"color: #000000; font-size: 18px;\">" + message + "</span>";

    DisplayTalkingBalloon(message, 4500, "PrzGre");

    bmDynamicDiv.UnableObj(obj);
};


// Page 25 - shindiglotto
// ======
var shindigLottoContainer = null;
var shindigLottoGame = null;

//
//Issue
//

Issue_IssueName = function () {
    return "Issue" + ((issueNumber < 100) ? "0" : "") + ((issueNumber < 10) ? "0" : "") + issueNumber.toString();
};

//
//Load
//

function BmOnLoad() {

    //
    //settings
    //


    bmPageWidth = issuePageWidth;
    bmPageHeight = issuePageHeight;
    bmNextPage = issueNextPage;

    var pageUriTemplate = Issue_IssueName() + "/Pages/page-";

    for (var pg = 1; pg <= issuePageCount; pg++)
        bmPages[pg] = pageUriTemplate + ((pg < 10) ? "0" : "") + pg.toString() + ".jpg";

    BmInitialize();


    AddIndexToJumpTo(1, "Cover");
    AddIndexToJumpTo(2, "Contents");
    AddIndexToJumpTo(4, "Little Ladebug Flight");
    AddIndexToJumpTo(6, "Ladybug Facts & Hidden object ");
    AddIndexToJumpTo(8, "Turtle Ate Too Much");
    AddIndexToJumpTo(16, "Turtle Facts & Lotto Game ");
 

    InsertDinamicDiv(2, "", "", 68, 100, 437, 18, "BmFlipTo(2)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 142, 437, 18, "BmFlipTo(4)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 165, 437, 18, "BmFlipTo(6)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 205, 437, 18, "BmFlipTo(8)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 230, 437, 18, "BmFlipTo(16)", "", "", "");
  
     // ===============================================================================================

Here is where I am trying to put in the html Canvas.  I did not put anything in the first half. Should I?  ########
    // Page 22  Pinnochio walking Canvas\page22_HTMLCanvas
    page22Html. width="512", height="600", id="Canvas\page22_HTMLCanvas", align="middle";
    page22Html = InsertDinamicDiv(22, "page22", "", 0, 0, 512, 600, "", "", "", "");
    page22Html.innerHTML = page22;

    // ===============================================================================================
    // Page 25  shindigLotto
    // ===============================================================================================

    shindigLottoContainer = InsertDinamicDiv(25, "shindigLottoContainer", "", 51, 204, 474, 425, "", "", "", "");
    shindigLottoGame = new MemoryGame(shindigLottoContainer, 6, 5, "Issue010/games/shindigLotto/piece-", 74, 74, 4, 200);

    // ===============================================================================================
    // Page 21 Fishhead Game
    // ===============================================================================================

    IssueGame_Fishhead_Insert(240, 325, 60, 44, "fh1-01");
    IssueGame_Fishhead_Insert(216, 145, 53, 39, "fh2-02");
    IssueGame_Fishhead_Insert(470, 140, 52, 38, "fh3-03");
    IssueGame_Fishhead_Insert(25, 390, 49, 36, "fh4-04");
    IssueGame_Fishhead_Insert(135, 386, 50, 37, "fh5-05");
    IssueGame_Fishhead_Insert(345, 210, 53, 40, "fh6-06");
    IssueGame_Fishhead_Insert(408, 598, 66, 49, "fh7-07");
    IssueGame_Fishhead_Insert(312, 100, 43, 32, "fh8-08");
    IssueGame_Fishhead_Insert(375, 306, 51, 34, "fh9-09");
    IssueGame_Fishhead_Insert(400, 416, 43, 33, "fh10-10");
  
  
  

    // Start
    //======

    BmStart();
    BmFlipTo(issueNextPage);

}

DEFAULT FILE:  The two files are below.  But the error I am getting SystemWeb.HttpException. Failed to map the path Issue/JS/easlejs.minjs.  I am using stream reader and can not read it.  I have put # next to where the problem is.

using System;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

using System.IO;
using System.Security;

using Jen19;

namespace Jen19.UI
{
    public partial class Issues_Default : BasePage
    {
        private Int32 issue = 0;
        private String section = "";

        protected void Page_Load(object sender, EventArgs e)
        {
            //
            if (String.IsNullOrEmpty(this.Request.QueryString["Issue"]))
            {
                this.issue = 1;
                //throw new SecurityException("Error loading Issue!");
            }
            else
            {
                try
                {
                    this.issue = Int32.Parse(this.Request.QueryString["Issue"]);
                }
                catch
                {
                    this.issue = 1;
                }
            }

            if (issue < 1 || issue > 25)
            {
                issue = 1;
                //throw new SecurityException("Error loading Issue!");
            }

            //
            if (String.IsNullOrEmpty(this.Request.QueryString["Section"]))
                this.section = "";
            else
                this.section = this.Request.QueryString["Section"];

            if (this.IssueName() == "Issue003" || this.IssueName() == "Issue004" || this.IssueName() == "Issue005" || this.IssueName() == "Issue006")
            {
                if (this.User.Identity.IsAuthenticated && (
                    this.User.IsInRole("Administrators") ||
                    this.User.IsInRole("Issue003") || this.User.IsInRole("Issue004") || this.User.IsInRole("Issue005") || this.User.IsInRole("Issue006") || this.User.IsInRole("Register")))
                {
                    ;
                }
                else
                {
                    //String page = System.Web.HttpContext.Current.Request.Url.AbsoluteUri; // this.GetCurrentPageName();
                    this.RequestLogin();
                    //Response.Redirect("~/Account/Register.aspx");
                    //throw new SecurityException("You are not allowed to edit existent articles!");
                }
            }

            /* Execute */
            this.LoadJavaScript();
            /* Execute */

        }


        private void LoadJavaScript()
        {
            String javaScript = "";
            javaScript += LoadFile("~/Issues/JavaScript/Movime.js");
            javaScript += LoadFile("~/Issues/JavaScript/DivClass.js");
            javaScript += LoadFile("~/Issues/JavaScript/TalkingBalloon.js");
            javaScript += LoadFile("~/Issues/JavaScript/Magazine.js");
            javaScript += LoadFile("~/Issues/JavaScript/MemoryClass.js");
            javaScript += LoadFile("~/Issues/JavaScript/MoveObjectsTo.js");
            javaScript += LoadFile("~/Issues/JavaScript/MoveObjectTo.js");
            javaScript += LoadFile("~/Issues/JavaScript/Touchscreen.js");
            javaScript += LoadFile("~/Issues/JavaScript/PuzzleClass.js");
            javaScript += LoadFile("~/Issues/JavaScript/easeljs.min.js.");
            javaScript += LoadFile("~/Issues/JavaScript/tweenjs.min.js.");
            javaScript += LoadFile("~/Issues/" + this.IssueName() + "/JavaScript.js");

            Page.ClientScript.RegisterStartupScript(this.GetType(), "", javaScript, true);
        }

        public String LoadCss()
        {
            return "<style type=\"text/css\"> " + LoadFile("~/Issues/" + this.IssueName() + "/CssStyles.css") + " </style>";
        }

        private String IssueName()
        {
            return "Issue" + ((this.issue < 100) ? "0" : "") + ((this.issue < 10) ? "0" : "") + this.issue.ToString().Trim() + this.section;
        }

        private String LoadFile(String fileName)
        {
            //Open a file for reading
            fileName = Server.MapPath(fileName);  ####here is the http error.

            //Get a StreamReader class that can be used to read the file
            StreamReader objStreamReader = File.OpenText(fileName);

            //Now, read the entire file into a string
            String fileContent = objStreamReader.ReadToEnd();

            objStreamReader.Close();

            return fileContent;
        }

    }

}
I put the canvas on the opening page and no problems there.

Hope someone can help me. I really like the animation ability in animate.

Thanks,

Jen

Views

93

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 12, 2019 0
ClayUUID LATEST
Adobe Community Professional ,
Jun 12, 2019

Copy link to clipboard

Copied

bumples5  wrote

I put easeljs min and tweenjs.min in my javascript files and then listed them in the default page where I list all the javascript files that I use.

Why would you do this? Animate automatically generates the JS support files it needs when it publishes, and it's currently neither of those.

To include an Animate canvas animation in a page, just use an iframe to embed the HTML document that Animate publishes. All other approaches lead to pain.

Looking at the rest of your code, all I can gather is that you seem to be making things about 10 times more complicated than they need to be.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 1