-
Notifications
You must be signed in to change notification settings - Fork 0
/
NeedAToolAnimationDisplay.html
157 lines (133 loc) · 6.22 KB
/
NeedAToolAnimationDisplay.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Justin Lopez | Need A Tool</title>
<!-- Bootstrap CSS (Local) -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- Stylesheet Link -->
<link rel="stylesheet" href="styles.css">
<!-- SEO Meta Tags -->
<meta name="description" content="A mockup banner ad for Home Depot.">
<meta name="keywords" content="justin, lopez, portfolio, about me, animation, need, a, tool">
<meta name="author" content="Justin Lopez">
<meta name="robots" content="index, follow"> <!-- Allow search engines to index and follow your pages -->
<!-- Open Graph Meta Tags (for social media sharing) -->
<meta property="og:title" content="Justin Lopez | Animation | Need A Tool">
<meta property="og:description" content="A mockup banner ad for Home Depot.">
<!-- Add URL to your website's main image for social media sharing -->
<meta property="og:image" content="URL to your website's main image for social media sharing">
<meta property="og:url" content="URL of the current page">
<meta property="og:type" content="website">
<!-- Twitter Meta Tags (for Twitter Card) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Justin Lopez | Animation | Need A Tool">
<meta name="twitter:description" content="A mockup banner ad for Home Depot.">
<!-- Add URL to your website's main image for Twitter sharing -->
<meta name="twitter:image" content="URL to your website's main image for Twitter sharing">
<!-- Canonical URL -->
<link rel="canonical" href="URL of the canonical version of this page">
<!-- Favicon (replace "favicon.ico" with the path to your favicon) -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Navbar Placeholder -->
<div id="navbar-placeholder"></div>
<!-- Page Content -->
<div class="container mt-5 mb-5" style="margin-top: 100px !important;">
<!-- NeedATool Animation Container -->
<div class="embed-responsive embed-responsive-16by9 mb-4">
<iframe src="NeedATool/NeedATool_animation_run.html" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Animation Title -->
<h1 class="mb-3">Need A Tool</h1>
<!-- Animation Description -->
<p class="lead mb-4">A mockup banner ad for Home Depot.</p>
<!-- Comment Section -->
<div class="card">
<div class="card-header">
Comments
</div>
<div class="card-body">
<!-- Add your comment form or display existing comments here -->
<!-- For simplicity, you can use a simple textarea for comments -->
<form>
<div class="mb-3">
<label for="comment" class="form-label">Your Comment</label>
<textarea class="form-control" id="comment" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Post Comment</button>
</form>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark text-white py-4">
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="list-unstyled">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-unstyled">
<li>Email: justinlopez.business@gmail.com</li>
<li>Phone: (123) 456-7890</li>
<li><a href="https://www.linkedin.com/in/justin-lopez-73a1a9280/" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Load Navbar -->
<script>
$(function () {
$("#navbar-placeholder").load("navbar.html");
});
</script>
<!-- Load NeedATool Animation -->
<script src="NeedATool/NeedATool.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
// Initialize NeedATool animation
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp = AdobeAn.getComposition("1E840AC1B40C2E468E0807D52E5C5B32");
var lib = comp.getLibrary();
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", function (evt) { handleFileLoad(evt, comp) });
loader.addEventListener("complete", function (evt) { handleComplete(evt, comp) });
var lib = comp.getLibrary();
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
var images = comp.getImages();
if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }
}
function handleComplete(evt, comp) {
var lib = comp.getLibrary();
var ss = comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for (i = 0; i < ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet({ "images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames })
}
exportRoot = new lib.NeedATool();
stage = new lib.Stage(canvas);
stage.enableMouseOver();
stage.addChild(exportRoot);
stage.update();
}
// Call the init function to start the animation
init();
</script>
</body>
</html>