Archive for the ‘HTML’ Category
showcase: 2 simple banners for MCH Messecenter Herning
today I created these 2 simple dynamic banners for MCH.
the first one is a competition-banner:
http://campjohn.dk/AS3/Co3/MCH/Competition/MCHKonkurrence.html
this banner has the following updateable parameters:
- the picture
- the link
- the headertext
- the text
- the color of the headertext
- the color of the text
the second one is just a banner of some text and a picture:
http://campjohn.dk/AS3/Co3/MCH/TextPicture/tekstbilledebanner.html
this banner has the following updateable parameters:
- the picture
- the link
- the text
- the color of the text
the idea was to make two setups for MCH, that they quickly could alter and use again and agin for almost any purpose. my colleague Theis Poulsen set up a backend editor that actually makes it very ease to change these parameters.
when the parameters are changed they are then added to the Flash like this:
the making of the banners ended took me 5 hours.
see earlier stuff made for MCH here:
showcase: different stuff for MCH Messecenter Herning
ActionScript 3.0: how to add a fullscreen option to an FLV
with the internet connection speed quickly increasing, the option to play a video fullscreen becomes more and more important, as better videos deserve to be enjoyed in larger scales. but how to add that fullscreen option, if you set up your own Flash project?
first of all, check out this video, that can be watched in fullscreen
a simple button activates/deactivates the fullscreen state.
heres the ActionScript for the entire Flash:
import flash.display.StageDisplayState;
var _paused:Boolean = false;
play_mc.buttonMode = true;
fullscreen_mc.buttonMode = true;
play_mc.gotoAndStop(2);
fullscreen_mc.stop();
fullscreen_mc.addEventListener(MouseEvent.CLICK, fullscreenOrNot);
play_mc.addEventListener(MouseEvent.CLICK, pauseOrPlay);
videoplayer.autoRewind = true;
videoplayer.addEventListener(VideoEvent.AUTO_REWOUND, playAgain);
function playAgain(e:Event):void {
trace("starting over");
videoplayer.play();
}
function pauseOrPlay(e:MouseEvent):void {
if(_paused){
videoplayer.play();
play_mc.gotoAndStop(2);
_paused = false;
} else {
videoplayer.pause();
play_mc.gotoAndStop(1);
_paused = true;
}
}
function fullscreenOrNot(e:MouseEvent):void {
if (stage.displayState == StageDisplayState.NORMAL) {
stage.displayState = StageDisplayState.FULL_SCREEN;
} else {
stage.displayState = StageDisplayState.NORMAL;
}
}
besides setting your project up in ActionScript 3.0 you also need to add these parameters to your HTML, to allow the embedded Flash to go fullscreen:
allowFullScreen="true"
if unsure where to put this, check out the source for the linked example listed first in this post.
the Flash is embedded in HTML using SWFObject.
the video in this post was created in After Effects.
placing Flash in the middle of a HTML-page using SWFObject
if you need to publish a HTML-page, with your Flash placed in the middle, you can use this setup:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title of page</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="container_table">
<tr>
<td>
<div id="container">
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
<param name="movie" value="someswf.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="someswf.swf" width="550" height="400">
<!--<![endif]-->
<div>
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</td>
</tr>
</table>
</body>
</html>
besides from this code, you need to add the following:
your someswf.swf
these need to be added too, get them from the official SWFObject-page:
swfobject.js
expressInstall.swf
and finally the CSS-file:
style.css
the style.css file looks like this:
#container_table { width: 100%; height: 100%; }
#container { width: 550px; height: 400px; margin: 0 auto; }
in this example SWFObject 2.2 was used!
ActionScript 3.0: how to pass URL parameters from loader swf to loaded swf
pass the parameter to the swf using this technique:
howtograbLoader.swf?whatParameter=”+text
grab the parameter inside the loader swf:
var _theParameterFromURL:String = String(root.loaderInfo.parameters.whatParameter);
load the loaded swf into the loader swf using a Loader, and when loaded, pass the parameter to the loaded swf’s init-function:
Object(_loader.content).init(_theParameterFromURL);
manage the parameter in the loaded swf and write it in a textfield:
public function init(someURL:String):void {
_theTextFromURL = someURL;
theText.text = _theTextFromURL;
}
heres what the loaded flash looks like before having the parameter passed into it
heres what the loaded flash looks like after having the parameter passed into it
here’s the entire setup
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>howtograb</title>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="howtograb">
Alternative content
<br />This content requires the newest version of Flash.<br><br>
<a href="http://www.adobe.com/go/EN_US-H-GET-FLASH" target="_blank">Click here to download Flash</a>.
</div>
<script type="text/javascript">
var text = "WOW, this text comes from far, far away";
var so = new SWFObject("howtograbLoader.swf?whatParameter="+text, "brand", "320", "180", "9", "#FFFFFF");
so.write("howtograb");
</script>
</body>
</html>
ActionScript for loader swf:
var _tempPercent:Number;
var _loader:Loader = new Loader();
_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, isloading);
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, finishedLoading);
_loader.load(new URLRequest("howtograb.swf"));
function isloading(e:ProgressEvent):void {
_tempPercent = e.bytesLoaded / e.bytesTotal;
thePercent.text = String(Math.floor(_tempPercent*100))+"%";
}
function finishedLoading(e:Event):void {
removeChildAt(0);
_tempPercent = null;
addChild(_loader);
Object(_loader.content).init(_theParameterFromURL);
}
ActionScript for loaded swf:
import flash.display.Sprite;
import flash.text.TextField;
public class howtograb extends Sprite {
private var _theTextFromURL:String;
public function howtograb():void {
//
}
public function init(someURL:String):void {
_theTextFromURL = someURL;
theText.text = _theTextFromURL;
}
}
}