{"id":85,"date":"2016-07-06T06:47:57","date_gmt":"2016-07-06T06:47:57","guid":{"rendered":"http:\/\/www.trevorwells.com\/wordpress\/?p=85"},"modified":"2016-07-10T13:40:26","modified_gmt":"2016-07-10T13:40:26","slug":"storyboarding-the-rocket-animation","status":"publish","type":"post","link":"https:\/\/www.trevorwells.com\/?p=85","title":{"rendered":"Storyboarding the animated rocket"},"content":{"rendered":"<p>To communicate how the animation should work to the front end developers, detailed storyboards were\u00a0created for both desktop and mobile.<\/p>\n<div id=\"metaslider-id-55\" style=\"max-width: 700px;\" class=\"ml-slider-3-108-0 metaslider metaslider-flex metaslider-55 ml-slider ms-theme-default nav-hidden\" role=\"region\" aria-label=\"Animated Panel Mac Book\" data-height=\"529\" data-width=\"700\">\n    <div id=\"metaslider_container_55\">\n        <div id=\"metaslider_55\">\n            <ul class='slides'>\n                <li style=\"display: block; width: 100%;\" class=\"slide-167 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-27 17:15:06\" data-filename=\"rocket_panel_001-1-700x529.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/rocket_panel_001-1-700x529.png\" height=\"529\" width=\"700\" alt=\"\" class=\"slider-55 slide-167 msDefaultImage\" \/><div class=\"caption-wrap\"><div class=\"caption\">Blueprint, tower and rocket slide in one at a time from the left.  'Author' title pops up, then laptop.<\/div><\/div><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-166 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-27 17:15:04\" data-filename=\"rocket_panel_002-1-700x529.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/rocket_panel_002-1-700x529.png\" height=\"529\" width=\"700\" alt=\"\" class=\"slider-55 slide-166 msDefaultImage\" \/><div class=\"caption-wrap\"><div class=\"caption\">Flame on! Rocket begins to lift.<\/div><\/div><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-165 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-27 17:15:01\" data-filename=\"rocket_panel_003-1-700x529.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/rocket_panel_003-1-700x529.png\" height=\"529\" width=\"700\" alt=\"\" class=\"slider-55 slide-165 msDefaultImage\" \/><div class=\"caption-wrap\"><div class=\"caption\">Smoke begins to expand. Laptop starts to open.<\/div><\/div><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-164 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-27 17:14:59\" data-filename=\"rocket_panel_004-1-700x529.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/rocket_panel_004-1-700x529.png\" height=\"529\" width=\"700\" alt=\"\" class=\"slider-55 slide-164 msDefaultImage\" \/><div class=\"caption-wrap\"><div class=\"caption\">Rocket flies toward the screen.<\/div><\/div><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-163 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-27 17:14:56\" data-filename=\"rocket_panel_005-1-700x529.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/rocket_panel_005-1-700x529.png\" height=\"529\" width=\"700\" alt=\"\" class=\"slider-55 slide-163 msDefaultImage\" \/><div class=\"caption-wrap\"><div class=\"caption\">2D rocket emerges as a 3D rocket on the laptop screen. Smoke fades away.<\/div><\/div><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-162 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-27 17:14:54\" data-filename=\"rocket_panel_006-1-700x529.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/rocket_panel_006-1-700x529.png\" height=\"529\" width=\"700\" alt=\"\" class=\"slider-55 slide-162 msDefaultImage\" \/><div class=\"caption-wrap\"><div class=\"caption\">The 3D rocket drifts around in the laptop screen, spinning on its axis. A pause then... the 'Deploy' title appears, flashes orange with devices popping up one at a time in random order each with rocket(s) drifting in the screens. <\/div><\/div><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-161 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-27 17:14:51\" data-filename=\"rocket_panel_007-1-700x529.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/rocket_panel_007-1-700x529.png\" height=\"529\" width=\"700\" alt=\"\" class=\"slider-55 slide-161 msDefaultImage\" \/><div class=\"caption-wrap\"><div class=\"caption\">The remaining elements for 'Manage' appear randomly enlarged initially to lead the eye to them.<\/div><\/div><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-160 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-27 17:14:49\" data-filename=\"rocket_panel_008-1-700x529.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/rocket_panel_008-1-700x529.png\" height=\"529\" width=\"700\" alt=\"\" class=\"slider-55 slide-160 msDefaultImage\" \/><div class=\"caption-wrap\"><div class=\"caption\">Finally the text and arrow slide in from the left individually.<\/div><\/div><\/li>\n            <\/ul>\n        <\/div>\n        \n    <\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>The version developed for mobile devices animates vertically. The rocket appears to move upward while devices and other elements cascade downwards.<\/p>\n<div id=\"metaslider-id-216\" style=\"max-width: 700px;\" class=\"ml-slider-3-108-0 metaslider metaslider-flex metaslider-216 ml-slider ms-theme-default nav-hidden nav-hidden\" role=\"region\" aria-label=\"iPhones\" data-height=\"420\" data-width=\"700\">\n    <div id=\"metaslider_container_216\">\n        <div id=\"metaslider_216\">\n            <ul class='slides'>\n                <li style=\"display: block; width: 100%;\" class=\"slide-215 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-28 12:35:16\" data-filename=\"iPhone-6S-rocket01-700x420.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/iPhone-6S-rocket01-700x420.png\" height=\"420\" width=\"700\" alt=\"\" class=\"slider-216 slide-215 msDefaultImage\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-214 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-28 12:35:14\" data-filename=\"iPhone-6S-rocket02-700x420.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/iPhone-6S-rocket02-700x420.png\" height=\"420\" width=\"700\" alt=\"\" class=\"slider-216 slide-214 msDefaultImage\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-213 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-28 12:35:11\" data-filename=\"iPhone-6S-rocket03-700x420.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/iPhone-6S-rocket03-700x420.png\" height=\"420\" width=\"700\" alt=\"\" class=\"slider-216 slide-213 msDefaultImage\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-212 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-28 12:35:10\" data-filename=\"iPhone-6S-rocket04-700x420.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/iPhone-6S-rocket04-700x420.png\" height=\"420\" width=\"700\" alt=\"\" class=\"slider-216 slide-212 msDefaultImage\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-211 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-28 12:35:07\" data-filename=\"iPhone-6S-rocket05-700x420.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/iPhone-6S-rocket05-700x420.png\" height=\"420\" width=\"700\" alt=\"\" class=\"slider-216 slide-211 msDefaultImage\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-210 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-28 12:35:05\" data-filename=\"iPhone-6S-rocket06-700x420.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/iPhone-6S-rocket06-700x420.png\" height=\"420\" width=\"700\" alt=\"\" class=\"slider-216 slide-210 msDefaultImage\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-209 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-28 12:35:02\" data-filename=\"iPhone-6S-rocket07-700x420.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/iPhone-6S-rocket07-700x420.png\" height=\"420\" width=\"700\" alt=\"\" class=\"slider-216 slide-209 msDefaultImage\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-208 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-28 12:35:00\" data-filename=\"iPhone-6S-rocket08-700x420.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/iPhone-6S-rocket08-700x420.png\" height=\"420\" width=\"700\" alt=\"\" class=\"slider-216 slide-208 msDefaultImage\" \/><\/li>\n                <li style=\"display: none; width: 100%;\" class=\"slide-207 ms-image \" aria-roledescription=\"slide\" data-date=\"2016-06-28 12:34:58\" data-filename=\"iPhone-6S-rocket09-700x420.png\" data-slide-type=\"image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/iPhone-6S-rocket09-700x420.png\" height=\"420\" width=\"700\" alt=\"\" class=\"slider-216 slide-207 msDefaultImage\" \/><\/li>\n            <\/ul>\n        <\/div>\n        \n    <\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-131\" src=\"http:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/mobile_device_sequence.png\" alt=\"Animated sequence for mobile devices\" width=\"4600\" height=\"1200\" srcset=\"https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/mobile_device_sequence.png 4600w, https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/mobile_device_sequence-300x78.png 300w, https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/mobile_device_sequence-768x200.png 768w, https:\/\/www.trevorwells.com\/wordpress\/wp-content\/uploads\/2016\/06\/mobile_device_sequence-1024x267.png 1024w\" sizes=\"auto, (max-width: 4600px) 100vw, 4600px\" \/><\/p>\n<p><a href=\"http:\/\/www.trevorwells.com\/assets\/rocket_animation\/index.html\" target=\"_blank\">See it working\u00a0here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To communicate how the animation should work to the front end developers, detailed storyboards were\u00a0created for both desktop and mobile. &nbsp; The version developed for mobile devices animates vertically. The rocket appears to move upward while devices and other elements cascade downwards. &nbsp; See it working\u00a0here.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-85","post","type-post","status-publish","format-standard","hentry","category-rocketanimation"],"_links":{"self":[{"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/posts\/85","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=85"}],"version-history":[{"count":26,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/posts\/85\/revisions"}],"predecessor-version":[{"id":419,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/posts\/85\/revisions\/419"}],"wp:attachment":[{"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=85"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=85"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}