animate html files on c# asp.net programs
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
AdChoices